Drupal: Bootstrap Theme

Drupal Bootstrap Theme.md

Drupal Bootstrap Theme

Bootstrap Resources

• Getting Started with Bootstrap 4 using Barrio in Drupal 8 - Youtube
• Bootstrap 4 Theme Customization with Sass - YouTube
• Bootstrap 4 Barrio Theme
• Bootstrap 4 Barrio Theme Installation
• Creating a custom Barrio sub-theme
• Bootstrap 4 Barrio SASS Starter Kit
• Bootstrap Documentation
• andesign Barrio Subtheme

---

Install Bootstrap 4 Barrio Theme

composer require drupal/bootstrap_barrio;

Add andesign Barrio Subtheme or Creating a custom Barrio sub-theme

---

andesign Barrio Subtheme

andesign Barrio Subtheme
Edit the composer.json file of your website and under the repositories: { section add:

{
    "type": "package",
    "package": {
        "name": "anavdesign/andesign_barrio",
        "version": "master",
        "type": "drupal-custom-theme",
        "source": {
            "url": "https://github.com/anavdesign/andesign-barrio-subtheme.git",
            "type": "git",
            "reference": "master"
        }
    }
},

Run Composer Require

composer require anavdesign/andesign_barrio

---

Configure Barrio Bootstrap Subtheme

Creating a custom Barrio sub-theme

1. Clone Bootstrap Barrio Subtheme Copy the subthemefolder on your /themes/custom directory.

   # Make Custom Theme Directory
   mkdir web/themes/custom/;
   
   # Clone Barrio Subtheme
   cp -R web/themes/contrib/bootstrap_barrio/subtheme/ web/themes/custom/yourName_barrio/;
   

2. Rename Theme Files Rename the subthemefolder to your custom theme name, for example yourname

   bootstrap_barrio_subtheme.theme to yourname.theme
   bootstrap_barrio_subtheme.info.yml to yourname.info.yml
   bootstrap_barrio_subtheme.libraries.ymlto yourname.libraries.yml
   /config/install/bootstrap_barrio_subtheme.settings.ymlto /config/install/yourname.settings.yml
   /config/schema/bootstrap_barrio_subtheme.schema.ymlto /config/schema/yourname.schema.yml
   
   

3. Update yourName_barrio.info.yml

   path: themes/custom/yourName_barrio/yourName_barrio.info.yml

   name: YourName
   type: theme
   description: 'Your Description.'
   core: 8.x
   base theme: bootstrap_barrio
   libraries:
     - yourName_barrio/bootstrap-scripts
     - yourName_barrio/global-scripts
     - yourName_barrio/global-styles
   ...
   

   Delete the following:

   # Information added by Drupal.org packaging script on 2018-08-09
   version: '8.x-4.17'
   core: '8.x'
   project: 'bootstrap_barrio'
   datestamp: 1533828192
   

4. Update yourName_barrio.theme path: themes/custom/yourName_barrio/yourName_barrio.theme Delete or Rename the function from:

   ...
   function yourName_barrio_form_system_theme_settings_alter(&$form, FormStateInterface $form_state) {
   ...
   
   

5. Update yourName_barrio.libraries.yml

   path: themes/custom/yourName_barrio/yourName_barrio.libraries.yml

   # Global Styles
   global-styles:
     css:
       base:
         css/bootstrap.css: { weight: 1 }
         css/base.css: { weight: 2 }
         # Drupal Appearance Color
         # css/colors.css: { weight: 3 }
       layout:
         css/layout.css: {}
       component:
         css/components.css: {}
       theme:
         css/style.css: { weight: 1 }
         css/theme.css: { weight: 2 }
   
   # Global Scripts
   global-scripts:
     js:
       js/global.js: {}
       js/scripts.js: {}
     dependencies:
       - core/jquery
       - core/modernizr
   
   # Bootstrap Scripts
   bootstrap-scripts:
     js:
       js/bootstrap.js: {}
   
   # Bootstrap CDN
   bootstrap_cdn:
     js:
       //cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js: {}
       //stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js: {}
     css:
       component:
         //stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css: {}
   
   # Drupal Appearance Color
   # color.preview:
   #   version: VERSION
   #   css:
   #     theme:
   #       color/preview.css: {}
   #   js:
   #     color/preview.js: {}
   #   dependencies:
   #     - color/drupal.color
   

6. Update yourName_barrio.schema.yml

   path: themes/custom/yourName_barrio/config/schema/yourName_barrio.schema.yml line: 3

   ...
   yourName_barrio.settings:
     type: theme_settings
     label: 'andesign Barrio Subtheme settings'
   ...
   
   

7. Appearance Color Options

   1. Delete the color directory to remove color options from theme

   2. or Update Color Options

      path: themes/custom/yourName_barrio/color/color.inc line: 118

      ...
      'preview_library' => 'yourName_barrio/color.preview',
      ...