Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ec-europa/europa-component-library
ECL - Europa Component Library
https://github.com/ec-europa/europa-component-library
component-library styleguide ui ux
Last synced: about 22 hours ago
JSON representation
ECL - Europa Component Library
- Host: GitHub
- URL: https://github.com/ec-europa/europa-component-library
- Owner: ec-europa
- License: eupl-1.1
- Created: 2017-01-30T14:52:06.000Z (almost 8 years ago)
- Default Branch: v4-dev
- Last Pushed: 2024-12-10T12:38:19.000Z (12 days ago)
- Last Synced: 2024-12-11T03:02:57.998Z (11 days ago)
- Topics: component-library, styleguide, ui, ux
- Language: JavaScript
- Homepage: https://ec.europa.eu/component-library
- Size: 762 MB
- Stars: 130
- Watchers: 22
- Forks: 35
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# ECL v4 - Europa Component Library
[](https://github.com/prettier/prettier)
[](https://lernajs.io/)
The Europa Component Library (ECL) is a library of components applicable to all European Commission and European Union websites. The library contains all available components which you can use to build your website.
All library elements are accompanied with
- documentation: what the component is intended for and recommendations regarding its usage
- demo: visual representation of the component
- code: technologically agnostic HTML/CSS code and twig implementation
## Requirements
ECL is currently using **node 20.9.0 (LTS)**, we recommend using this version (nvm use) to ensure the compatibility with all the ECL dependencies or the ones defined by the ECL Builder.
## Documentation
Read the technical documentation [on GitHub](docs/README.md).
## Migrate from v3
Read the technical documentation [on GitHub](docs/Migrating-v4.md).
## Quick start
The ECL is bundled in various [presets](docs/presets.md) in order to accomodate the different needs of everyone. Once you know which preset you want to use, you can:
- download [the latest release](https://github.com/ec-europa/europa-component-library/releases/latest) of the preset of your choice
- install the preset with npm or yarn, e.g. `npm install @ecl/preset-ec` or `yarn add @ecl/preset-ec`
- use the CDN, https://cdn{1,2,3 or 4}.fpfis.tech.ec.europa.eu/ecl/{tag}/{system}/{path/to/the/asset}. Here's an example:
```html
```
```html
```
```html
```
```html
```
```html
```
```html
```
```html
```
### :warning: pikaday
ECL uses [Pikaday](https://github.com/Pikaday/Pikaday) and this library is not bundled anymore by ECL.
Therefore **pikaday needs to be loaded or bundled by the application or website using ECL**, depending on the needs, it is only required when a datepicker instance is present in a webpage.
Additionally, when customising the date format used by the datepicker, in order to get a consistent output, [moment.js](https://momentjs.com/) is also needed.
These scripts can be loaded from a CDN or fetched from the respective npm packages or websites for then hosting them locally.
The order of the scripts should be:
- moment.js (https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js) (https://momentjs.com/)
- pikaday (https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.8.2/pikaday.min.js) (https://pikaday.com/)
- ecl.js
## Need help?
Please contact [COMM Europa Management](mailto:[email protected]) for support on using this resource for a European Commission website.
## Previous major versions
- v3.13.0: [sources](https://github.com/ec-europa/europa-component-library/tree/v3) - [release](https://github.com/ec-europa/europa-component-library/releases/tag/v3.13.0) - [website](https://ec.europa.eu/component-library/v3.13.0/)
- v2.39.0: [sources](https://github.com/ec-europa/europa-component-library/tree/v2) - [release](https://github.com/ec-europa/europa-component-library/releases/tag/v2.39.0) - [website](https://ec.europa.eu/component-library/v2.39.0/)
- v1.15.0: [sources](https://github.com/ec-europa/europa-component-library/tree/v1) - [release](https://github.com/ec-europa/europa-component-library/releases/tag/v1.15.0) - [website](https://ec.europa.eu/component-library/v1.15.0/)
- v0.24.3: [sources](https://github.com/ec-europa/europa-component-library/tree/v0) - [release](https://github.com/ec-europa/europa-component-library/releases/tag/v0.24.3) - [website](https://ec.europa.eu/component-library/v0.24.3/)