{"id":14972538,"url":"https://github.com/openeuropa/bootstrap-component-library","last_synced_at":"2025-04-07T15:09:27.971Z","repository":{"id":37093554,"uuid":"375384334","full_name":"openeuropa/bootstrap-component-library","owner":"openeuropa","description":"Openeuropa Bootstrap Component Library","archived":false,"fork":false,"pushed_at":"2025-03-28T14:49:00.000Z","size":35060,"stargazers_count":16,"open_issues_count":22,"forks_count":10,"subscribers_count":12,"default_branch":"development","last_synced_at":"2025-03-31T13:18:10.148Z","etag":null,"topics":["bootstrap5","openeuropa","scss-library","storybook","twig"],"latest_commit_sha":null,"homepage":"https://oelibrary.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/openeuropa.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-06-09T14:28:50.000Z","updated_at":"2025-03-29T18:29:37.000Z","dependencies_parsed_at":"2024-01-11T18:16:10.930Z","dependency_job_id":"5016d475-f34c-495e-8c24-01d8c397c657","html_url":"https://github.com/openeuropa/bootstrap-component-library","commit_stats":{"total_commits":682,"total_committers":12,"mean_commits":"56.833333333333336","dds":0.530791788856305,"last_synced_commit":"d14ed395a5ebeb1b6c9f7402bc78f861727caa2a"},"previous_names":[],"tags_count":61,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openeuropa%2Fbootstrap-component-library","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openeuropa%2Fbootstrap-component-library/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openeuropa%2Fbootstrap-component-library/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openeuropa%2Fbootstrap-component-library/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/openeuropa","download_url":"https://codeload.github.com/openeuropa/bootstrap-component-library/tar.gz/refs/heads/development","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246847137,"owners_count":20843444,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap5","openeuropa","scss-library","storybook","twig"],"created_at":"2024-09-24T13:47:05.460Z","updated_at":"2025-04-07T15:09:27.944Z","avatar_url":"https://github.com/openeuropa.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## OEL Bootstrap based Component Library template\n\nLibrary of components based on [Bootstrap 5](https://github.com/twbs/bootstrap/tree/v5.0.1)\n\n![Build Status](https://github.com/openeuropa/bootstrap-component-library/actions/workflows/ci.yml/badge.svg)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lernajs.io/)\n\n## Introduction\n\nThis library is mainly a development environment for components released as\npackages on [npm](https://npmjs.org) under the @openeuropa organization and it\nprovides a style-guide using storybook where all the components are rendered\nthrough the twig templates defined in the library and most of their capabilities\nare visible thanks to interactive fields called controls.\n\n## Usage\n\nBe sure to have [Node.js](https://nodejs.org/) as well as yarn installed before\nproceeding, this library uses the current LTS version of node.js, named\n[fermium](https://nodejs.org/download/release/latest-fermium/)\n\n```shell\n# Clone the repo\ngit clone https://github.com/openeuropa/bootstrap-component-library\ncd bootstrap-component-library\n\n# Install dependencies and build the themes\nyarn\n\n# Start a development session (storybook with browsersync )\nyarn start {project}\n```\n\n- Open \u003chttp://localhost:5000\u003e to see the storybook instance.\n- Use \u003chttp://localhost:3000\u003e to enjoy live reloading on storybook.\n\n\n## Npm packages\n\nThe components are released as single, standalone packages providing a twig\ntemplate but those templates are also available in the theme packages.\nThe theme packages contain source files (scss, js, twig) as well as the compiled\nresources ready to be used.\nA package defined as a dependency by the themes is making the bootstrap source\nfiles available to each of the theme packages.\n\n[List of npm packages](docs/packages.md)\n\n### How to use a package from npm\n\n- fetch the package with npm or yarn, e.g.\n  `npm install @openeuropa/bcl-theme-default` or\n  `yarn add @openeuropa/bcl-theme-default`\n- include the templates in your application, you will need a `twig loader`\n  capable of identifying the templates using their namespace `@oe-bcl`.\n\n  ```twig\n  {% include '@oe-bcl/bcl-icon/icon.html.twig' with {\n      name: 'files',\n      path: 'static/media/bootstrap-icons.svg',\n      size: 'm',\n      transformation: 'rotate-180'\n    } only %}\n\n  ```\n\n### BCL builder\n\nThe `@openeuropa/bcl-builder` is a package providing scripts to be executed via \nthe command line, `styles`, `scripts`, `copy`, `rename` and `sprite`.\nThey can be used respectively to compile SASS files and minify css\nfiles, compile and minify js files, to copy files or rename files and to generate\nsvg sprites.\nIt comes with a `bin` file that is available when the package is installed and\ncan be run as `npm run ecl-builder scriptName`.\nIt supports a configuration file `bcl-builder.config.js` where each script can\nbe configured to perform specific operations in the enviroment where they are\nused.\nExamples of the configuration files are available in the theme packages, the\n`bcl-builder` is used to build those packages in the library as well.\n\n### Anatomy of a theme package\n\nThe theme packages aim to be a ready solution for integrating the library\nin any platform supporting twig:\n\n![default theme](docs/bcl-theme.png)\n\nEach theme package is meant to provide all the needed resources in terms of css,\njs, twig templates and icons.\nJs is offered in three different formats, `umd` (universal module definition),\n`esm` (ES Modules) and the `bundle`  (which includes popper Js), similarly to\nwhat happens with the files distributed by the bootstrap library.\nAll the files come with a `map` file and with a minified version ready for being\nused in a production website.\nThe twig templates are in the `templates` folder inside a folder with the respective\npackage name so that they can be directly used with a loader defining the\n`@oe-bcl` namespace and pointing at the `templates` folder.\n\n### Twig templates\n\nThe twig packages are available as individual npm packages but also directly\navailable in the theme packages, the `@openeuropa/bcl-twig-templates` package\nwhich is a collection of all the BCL default templates stored in a folder\nwith the package name.\n\n#### Twig loader\n\nThe library uses `@oe-bcl` as the namespaces for the templates so a typical\ntwig-loader would be defined as such:\n\n`loader.addPath(pathToTheTemplatesFolder, \"oe-bcl\");`\n\n## Developer's guidelines\n\n[Developer's guidelines](docs/developing.md)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopeneuropa%2Fbootstrap-component-library","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopeneuropa%2Fbootstrap-component-library","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopeneuropa%2Fbootstrap-component-library/lists"}