{"id":13650531,"url":"https://github.com/italia/design-drupal-theme","last_synced_at":"2026-04-08T01:31:42.689Z","repository":{"id":39579155,"uuid":"447273775","full_name":"italia/design-drupal-theme","owner":"italia","description":"Bootstrap Italia theme for Drupal. Mirror of https://git.drupalcode.org/project/bootstrap_italia","archived":false,"fork":false,"pushed_at":"2024-05-22T09:31:48.000Z","size":2781,"stargazers_count":7,"open_issues_count":0,"forks_count":3,"subscribers_count":12,"default_branch":"2.x","last_synced_at":"2024-05-22T11:22:57.917Z","etag":null,"topics":["bootstrap","bootstrap-theme","drupal-theme"],"latest_commit_sha":null,"homepage":"https://www.drupal.org/project/bootstrap_italia","language":"Twig","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/italia.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":null,"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":"2022-01-12T15:38:45.000Z","updated_at":"2024-05-30T09:30:36.484Z","dependencies_parsed_at":"2023-09-27T15:51:41.203Z","dependency_job_id":"a79caa85-c709-43ca-a0d9-a877b80a5b67","html_url":"https://github.com/italia/design-drupal-theme","commit_stats":null,"previous_names":[],"tags_count":54,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/italia%2Fdesign-drupal-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/italia%2Fdesign-drupal-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/italia%2Fdesign-drupal-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/italia%2Fdesign-drupal-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/italia","download_url":"https://codeload.github.com/italia/design-drupal-theme/tar.gz/refs/heads/2.x","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223903113,"owners_count":17222492,"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":["bootstrap","bootstrap-theme","drupal-theme"],"created_at":"2024-08-02T02:00:37.586Z","updated_at":"2026-04-08T01:31:42.666Z","avatar_url":"https://github.com/italia.png","language":"Twig","readme":"# Bootstrap Italia\n\n`bootstrap_italia` is a low-code base theme for **Drupal** that implements\n[the Italian guidelines for designing public digital services](https://docs.italia.it/italia/designers-italia/design-linee-guida-docs/).\nThis theme requires [bootstrap-italia](https://github.com/italia/bootstrap-italia/)\nLibrary as a dependency. You can load the library in different methods:\nA) download a package from GitHub with the vanilla library;\nB) you can use Webpack to streamline your development, creating custom compiled\nBootstrap Italia styles just by changing some variables;\nC) load from CDN.\nContinue reading for more details.\n\n## Drupal configuration\nInstall `drupal` and `drush` with `composer` (https://getcomposer.org/)\n```shell\n$ composer create drupal/recommended-project my_site_name_dir --no-install\n$ cd my_site_name_dir\n$ composer require drush/drush --no-install\n$ composer install\n```\n\nInstall drupal, you can use drush or your browser\n```shell\n$ drush site:install\n```\n\n## Installation\n```shell\n$ cd \u003cdrupal-root\u003e\n\n# 1. Install end enable dependencies\n$ composer require drupal/components\n$ drush pm:enable components\n$ composer require drupal/bootstrap_italia\n\n# 2. Copy sub-theme to destination folder\n$ cd web/themes/\n$ mkdir custom\n$ cp -r contrib/bootstrap_italia/var/starter_kits/italiagov custom/\n\n# 3. Enable themes\n$ drush -y theme:enable bootstrap_italia\n$ drush -y theme:enable italiagov\n\n# 4. Set default theme\n$ drush config-set system.theme default italiagov\n```\n\nEdit `custom/italiagov/italiagov.info.yml`\nand change `hidden` variable to `false`\n```shell\n$ sed -i 's/hidden: true/hidden: false/g' custom/italiagov/italiagov.info.yml\n```\n\n## Manage bootstrap Italia library\nYou can install the bootstrap-italia library in several ways.\n\n### A. Bootstrap-italia vanilla\n\nDownload https://github.com/italia/bootstrap-italia/releases/download/v2.17.5/bootstrap-italia.zip\nand unzip in `\u003cyour-subtheme\u003e/dist`.\n\n### B. Custom build for developer or advanced user\n`npm` is required: https://www.npmjs.com/get-npm\n\nInstall assets\n```shell\n$ cd custom/italiagov\n$ npm install\n```\n\nRun watcher:\n```shell\n$ npm run watch:dev\n```\nBuild assets:\n```shell\n$ npm run build:dev\n$ drush cr\n```\n\n#### Production mode:\nRun watcher:\n```shell\n$ npm run watch:prod\n```\nBuild assets:\n```shell\n$ npm run build:prod\n$ drush cr\n```\n\n#### Hot mode:\nTo properly activate hot mode, do this:\n\n- Make sure your host port 8080 is not filtered,\nor exposed if you are using a container.\n- In the `\u003csub-theme\u003e/\u003csub-theme\u003e.info.yml` file edit the `libraries` array\nto load only `italiagov/hot` and `bootstrap_italia/base`\n```shell\n$ drush cr \u0026\u0026 npm run build:dev \u0026\u0026 npm run hot\n```\n\n***Note*** that you need to run `drush cr` then `build:dev`\nand finally `hot`, otherwise it won't work.\n\nIf you need customize `host` and `port`,\ncopy `\u003csub-theme\u003e/webpack.settings.dist.js`\nin `\u003csub-theme\u003e/webpack.settings.js` and edit\n`devServer.allowedHosts` and `devServer.port`.\n\nIf you use ddev use this tip to expose 8080 port and view the site with\nthe URL `http://127.0.0.1:\u003cddev-port\u003e`\n```yaml\n# \u003cproject-name\u003e/.ddev/docker-compose.ports.yaml\n\nservices:\n  web:\n    expose:\n      - 8080\n    ports:\n      - 8080:8080\n```\n\n### C. For developer or expert user\nBy appropriately modifying `*.info.yml` and `*.libraries.yml` you can adapt\nthe loading of libraries according to your infrastructure.\n\n### D. How to use bootstrap-italia library from github (for developer)\nReplace in `\u003csub-theme\u003e/package.json`\n\n```json\n\"bootstrap-italia\": \"\u003cversion\u003e\"\n```\nwith\n```json\n\"bootstrap-italia\": \"github:italia/bootstrap-italia#\u003cbranch\u003e\"\n```\nexample\n```json\n\"bootstrap-italia\": \"github:italia/bootstrap-italia#main\"\n```\n\n### Loading Fonts via CSS (Advanced Users)\nTo load fonts via CSS, you need to disable the JavaScript font loading\nby commenting out the line `- bootstrap_italia/load-fonts` in the\nlibraries array. Please note that you can continue to choose\nyour preferred method for loading CSS and JS libraries\n(via UI, custom, hot, etc.).\nThe following example demonstrates using the UI loading method:\n\n```yaml\n# Choose libraries to use. Global is managed with theme settings UI.\nlibraries:\n  - italiagov/libraries-ui\n  #- italiagov/vanilla\n  #- italiagov/custom\n  #- italiagov/cdn\n  #- italiagov/hot\n  #- italiagov/ddev\n  - bootstrap_italia/base\n  - bootstrap_italia/enable-all-tooltips\n  #- bootstrap_italia/load-fonts\n```\nTo avoid duplicating fonts in the `dist` folder, you need to comment out\nor remove the following code from the `CopyWebpackPlugin` configuration\nin the `webpack.common.js` file:\n\n```js\n{\n  from: paths.modules + '/bootstrap-italia/src/fonts/',\n    to: paths.build + '/fonts/'\n},\n\n```\nAfter making the necessary changes, your configuration should look similar to:\n```js\nnew CopyWebpackPlugin({\n  patterns: [\n    {\n      from: paths.modules + '/bootstrap-italia/src/assets/',\n      to: paths.build + '/assets/'\n    },\n    // {\n    //   from: paths.modules + '/bootstrap-italia/src/fonts/',\n    //   to: paths.build + '/fonts/'\n    // },\n    {\n      from: './src/images/',\n      to: paths.build + '/images/'\n    }\n  ]\n}),\n```\n\nUnder \"module\" section uncomment follow code\n```js\n  module: {\n  rules: [\n    // ...\n\n    // Uncomment if you use loading fonts via CSS\n    {\n      test: /\\.(woff|woff2|eot|ttf|svg)$/,\n      include: [\n        paths.modules + '/bootstrap-italia/src/fonts',\n      ],\n      type: 'asset/resource',\n      generator: {\n        filename: 'fonts/[name]/[name][ext]',\n      },\n    },\n  ],\n},\n```\n\nOnce you have made this change, you need to modify your sub-theme's\n`src/scss/custom/custom.scss` file and add `@import \"../fonts\";`\nas the first rule. After that, run the following commands:\n```shell\n$ npm run build:prod\n$ drush cr\n```\nAt this point, the fonts will be loaded via CSS from the `dist` folder.\n\nFinally, it is recommended to activate the option: \"Appearance -\u003e Settings -\u003e\nyour sub-theme -\u003e Libraries -\u003e My library loads fonts via css\".\n\n### Compiling CSS for CKEditor5 (Advanced Users)\nTo compile CSS for CKEditor5, you need to uncomment the relevant line in the\n`webpack.common.js` file. Update the file from:\n```js\nentry: {\n  \"bootstrap-italia\": [\n    paths.src + '/js/index.js',\n    paths.src + '/scss/theme.scss'\n  ],\n  //\"ckeditor5\": paths.src + '/scss/ckeditor5.scss',\n}\n```\nto:\n```js\nentry: {\n  \"bootstrap-italia\": [\n    paths.src + '/js/index.js',\n    paths.src + '/scss/theme.scss'\n  ],\n  \"ckeditor5\": paths.src + '/scss/ckeditor5.scss',\n}\n```\nAfter making this change, proceed with the regular build process. If you're\nusing this feature, it is recommended to load fonts via CSS (as described\nin the previous section) to avoid duplicating the fonts in the `dist` folder.\n\n### Adding Custom SVG Icons (Advanced Users)\nTo add custom SVG icons, follow these steps:\n1) Add your SVG icons to the `src/svg` folder.\nUse the existing icon `it-drupal.svg` as a reference.\nKeep in mind the following:\n   - The file name is important as it will be used as the icon's ID.\n   - Do not use the fill attribute as it will prevent\n     the icon from being styled using CSS.\n   - Examples: [Bootstrap Italia SVG Icons](https://github.com/italia/bootstrap-italia/tree/main/src/svg).\n2) Load your icons using `src/js/custom/icons.js`.\n3) Make sure you import the icons JavaScript in your\n`src/js/custom/custom.js` file with: `import './icons'`.\n\nPerform the build process as usual. Your custom icons will be available\nin `dist/svg/sprites.svg` and can be used just like any other icon from\nthe Bootstrap Italia library.\n\nIf you need to customize the SVG output,\nmodify `\u003cyour-sub-theme\u003e/svgo.config.js`\nusing [this guide](https://svgo.dev/docs/plugins/) as reference.\n\n## Recommended modules\nThis theme provides several modules that allow you to manage the components\nwith the Drupal administration panel. Below is a list\n\n### Bootstrap Italia Image Styles\nThis module adds different image styles in\nAdmin -\u003e Configurations -\u003e Media -\u003e Image Styles.\n```shell\n$ composer require drupal/focal_point\n$ drush -y pm:enable responsive_image focal_point bootstrap_italia_image_style\n```\n\n### Bootstrap Italia Text editor 2 (Experimental)\nThis module adds new text editor format (ckeditor 5) in\n\"Configuration\" -\u003e \"Text formats and editors\".\n```shell\n$ drush -y pm:enable bootstrap_italia_text_editor2\n```\n\n### Bootstrap Italia Layouts\nThis module adds several layouts that can be used immediately\nwith Layout Builder, Display Suite or any other layout consuming module.\n```shell\n$ drush -y pm:enable bootstrap_italia_layouts\n```\n\n### Bootstrap Italia Paragraph\nThis is the base module for paragraphs integration.\n```shell\n$ composer require \\\n    drupal/paragraphs \\\n    drupal/field_group \\\n    drupal/imce \\\n    drupal/color_field\n\n$ drush -y pm:enable paragraphs field_group imce color_field\n$ drush -y pm:enable bootstrap_italia_paragraph\n```\nInstall third-party libraries via the Drupal administration panel\nor with this script by positioning yourself in the same folder\nin which `composer.json` is located\n```shell\n#!/bin/bash\ncurl --request GET -sL \\\n  --url 'https://github.com/recurser/jquery-simple-color/archive/master.zip' \\\n  --output './web/libraries/master.zip'\n\nunzip ./web/libraries/master.zip -d ./web/libraries/\nmv ./web/libraries/jquery-simple-color-master \\\n   ./web/libraries/jquery-simple-color\n\nrm -Rf ./web/libraries/master.zip\n\ncurl --request GET -sL \\\n  --url 'https://github.com/bgrins/spectrum/archive/master.zip' \\\n  --output './web/libraries/master.zip'\n\nunzip ./web/libraries/master.zip -d ./web/libraries/\nmv ./web/libraries/spectrum-master ./web/libraries/spectrum\nrm -Rf ./web/libraries/master.zip\n```\n\n### Bootstrap Italia Paragraph Accordion\nThis module manages the accordion component through the paragraph module.\n```shell\n$ drush -y pm:enable bootstrap_italia_paragraph_accordion\n```\n\n### Bootstrap Italia Paragraph Attachments\nThis module manages the attachments through the paragraph module.\n```shell\n$ drush -y pm:enable media media_library bootstrap_italia_paragraph_attachments\n```\n\n### Bootstrap Italia Paragraph Callout\nThis module manages the callout component through the paragraph module.\n```shell\n$ drush -y pm:enable bootstrap_italia_paragraph_callout\n```\n\n### Bootstrap Italia Paragraph Carousel\nThis module manages the splide carousel component through the paragraph module.\n```shell\n$ drush -y pm:enable media media_library bootstrap_italia_paragraph_carousel\n```\n\n### Bootstrap Italia Paragraph Citation\nThis module manages the citation component through the paragraph module.\n```shell\n$ drush -y pm:enable bootstrap_italia_paragraph_citation\n```\n\n### Bootstrap Italia Paragraph Gallery\nThis module manages the gallery component (image list)\nthrough the paragraph module.\n```shell\n$ drush -y pm:enable bootstrap_italia_paragraph_gallery\n```\n\n### Bootstrap Italia Paragraph Hero\nThis module manages the hero component through the paragraph module.\n```shell\n$ drush -y pm:enable bootstrap_italia_paragraph_hero\n```\n\n### Bootstrap Italia Paragraph Map\nThis module manages the map component through the paragraph module.\nThis module uses leaflets and open street maps.\n```shell\n$ composer require drupal/geofield drupal/leaflet\n$ drush -y pm:enable geofield leaflet bootstrap_italia_paragraph_map\n```\n\n### Bootstrap Italia Paragraph Node Reference\nThis module, through a paragraph, refers to other nodes\nand allows you to choose the view with which they must be displayed.\n```shell\n$ composer require drupal/entity_reference_display\n$ drush -y pm:enable entity_reference_display\n$ drush -y pm:enable bootstrap_italia_paragraph_node_reference\n```\n\n### Bootstrap Italia Paragraph Section\nThis module manages the section component through the paragraph module.\n```shell\n$ drush -y pm:enable bootstrap_italia_paragraph_section\n```\n\n### Bootstrap Italia Paragraph Timeline\nThis module manages the timeline component through the paragraph module.\n```shell\n$ drush -y pm:enable bootstrap_italia_paragraph_timeline\n```\n\n### Bootstrap Italia Paragraph Webform\nThis module manages the integration of webform with paragraph.\n```shell\n$ composer require drupal/webform wikimedia/composer-merge-plugin\n$ drush -y pm:enable webform webform_bootstrap webform_ui\n$ drush -y pm:enable bootstrap_italia_paragraph_webform\n```\nInstall third-party libraries by edit the `composer.json` file\nof your website and under the \"extra\": { section add:\n```json\n\"merge-plugin\": {\n  \"include\": [\n    \"web/modules/contrib/webform/composer.libraries.json\"\n  ]\n},\n```\nThen run:\n```shell\n$ composer update -W\n```\n[Learn more](https://www.drupal.org/node/3003140)\n\n### Bootstrap Italia Views Accordion\nThis module manages the integration of the accordion component\ninto the views module.\n```shell\n$ drush -y pm:enable bootstrap_italia_views_accordion\n```\n\n### Bootstrap Italia Views Carousel\nThis module manages the integration of the carousel component\ninto the views module.\n```shell\n$ drush -y pm:enable bootstrap_italia_views_carousel\n```\n\n### Bootstrap Italia Views Gallery\nThis module manages the integration of the gallery component\ninto the views module.\n```shell\n$ drush -y pm:enable bootstrap_italia_views_gallery\n```\n\n### Bootstrap Italia Views List\nThis module manages the integration of the list component into the views module.\n```shell\n$ drush -y pm:enable bootstrap_italia_views_list\n```\n\n### Bootstrap Italia Views Timeline\nThis module manages the integration of the timeline component\ninto the views module.\n```shell\n$ drush -y pm:enable bootstrap_italia_views_timeline\n```\n\n### Bootstrap Italia content News\nThis module adds the \"News\" content type (second level content).\n*Note: this is an example of how to develop a reusable content type.*\n```shell\n$ composer require drupal/toc_js drupal/focal_point\n$ drush -y pm:enable responsive_image toc_js focal_point  \\\n    bootstrap_italia_paragraph bootstrap_italia_paragraph_accordion \\\n    bootstrap_italia_paragraph_attachments bootstrap_italia_paragraph_callout \\\n    bootstrap_italia_paragraph_carousel bootstrap_italia_paragraph_citation \\\n    bootstrap_italia_paragraph_map bootstrap_italia_paragraph_webform  \\\n    bootstrap_italia_content_news\n```\nInstall third-party libraries by edit the `composer.json` file\nof your website and under the \"extra\": { section add:\n```json\n\"merge-plugin\": {\n  \"include\": [\n    \"web/modules/contrib/toc_js/composer.libraries.json\"\n  ]\n},\n```\nThen run:\n```shell\n$ composer update -W\n```\n\n### Bootstrap Italia empty front page\nBy default, Drupal fills the front page with the latest content from your site.\nThis module modifies the front page to have an empty page. This way, only the\nblocks will be displayed. Useful as in the case of Municipalities\nwhose home page is built only with blocks in custom zones, thus avoiding\nrecalling the frontpage view which isn't used. The same view is also disabled.\n```shell\n$ composer require drupal/empty_front_page\n$ drush -y pm:enable empty_front_page bootstrap_italia_empty_front_page\n```\n\n\n## How to manage components via the user interface.\nThe components of the theme are mapped with the drupal graphical interface,\nso you can manage cards, lists, etc., without writing code or templates.\nFirst install and enable `ui_patterns` (\u003e= 1.5), `ui_patterns_library`\nand `ui_patterns_settings`.\n```shell\n$ composer require 'drupal/ui_patterns:^1.5' drupal/ui_patterns_settings\n$ drush en ui_patterns ui_patterns_library ui_patterns_settings\n```\nTo the `https://domain.example/patterns` page you will see\nthe list of components/patterns that you can manage from the UI.\n\n### Display\nEnable `ui_patterns_ds` to use components as layouts\nvia Display suite.\n```shell\n$ composer require drupal/ds\n$ drush en ds ds_extras ds_switch_view_mode ui_patterns_ds\n```\n\n### Layout\nEnable `ui_patterns_layouts` to use components as layouts\nvia the Layout Discovery module.\n```shell\n$ drush en ui_patterns_layouts\n```\n\n### Views\nEnable `ui_patterns_views` to use components with views.\n```shell\n$ drush en ui_patterns_views\n```\n\n## Italian Language\nImport/edit `translations/bootstrap_italia-2.x.it.po`\n```shell\n$ drush locale-import it /absolute/path/to/bootstrap_italia-\u003cversion\u003e.it.po \\\n    --type=customized --override=all\n```\n\n## How to start a ddev container\nIf you want an automated script that works for you, run script located at\n`themes/bootstrap_italia/var/bin/build-ddev-installation.sh` and enjoy it\n\nDownload ad run latest stable release:\n```shell\n$ bash \u003c(curl -s -H \"Cache-Control: no-cache\" \\\n  \"https://git.drupalcode.org/project/bootstrap_italia/-/raw/2.17.x/var/bin/build-ddev-installation.sh\"\n)\n```\n\nDownload ad run dev release:\n```shell\n$ bash \u003c(curl -s -H \"Cache-Control: no-cache\" \\\n  \"https://git.drupalcode.org/project/bootstrap_italia/-/raw/2.x/var/bin/build-ddev-installation.sh\"\n)\n```\n","funding_links":[],"categories":["📐 Design"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitalia%2Fdesign-drupal-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitalia%2Fdesign-drupal-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitalia%2Fdesign-drupal-theme/lists"}