Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
1 ©2017 Acquia Inc. — Confidential and Proprietary
Dave Myburgh, Senior Engineer, Acquia Inc.
Creating a Custom
Bootstrap ...
2 ©2017 Acquia Inc. — Confidential and Proprietary
Who Am I?
– Senior Engineer at Acquia, Inc. since 2011
– Maintain www.a...
3 ©2017 Acquia Inc. — Confidential and Proprietary
What We Will Cover
– Installing new Bootstrap theme
– Creating a subthe...
4 ©2017 Acquia Inc. — Confidential and Proprietary
Installing Bootstrap
5 ©2017 Acquia Inc. — Confidential and Proprietary
Installation
– Get Bootstrap theme into your /theme folder
drush dl boo...
6 ©2017 Acquia Inc. — Confidential and Proprietary
Rename & Edit Files
– THEMENAME.libraries.yml
– THEMENAME.starterkit.ym...
7 ©2017 Acquia Inc. — Confidential and Proprietary
Edit dcutah.info.yml
name: 'THEMETITLE'
description: 'Uses the Bootstra...
8 ©2017 Acquia Inc. — Confidential and Proprietary
Edit config/schema/dcutah.schema.yml
THEMENAME.settings:
type: theme_se...
9 ©2017 Acquia Inc. — Confidential and Proprietary
Install Bootstrap Source Files
– Only for less or sass starterkits
– Do...
10 ©2017 Acquia Inc. — Confidential and Proprietary
Compile Your Less/Sass Files
– Whatever compiler you’re using, you wil...
11 ©2017 Acquia Inc. — Confidential and Proprietary
Enable Themes
– Enable Bootstrap AND DCUtah themes.
– Make DCUtah the ...
12 ©2017 Acquia Inc. — Confidential and Proprietary
Settings of Note
– Appearance settings for custom theme
– container-fl...
13 ©2017 Acquia Inc. — Confidential and Proprietary
Using Bootstrap
14 ©2017 Acquia Inc. — Confidential and Proprietary
Helper Modules
– Field Group (field_group)
– Field Formatter Class (fi...
15 ©2017 Acquia Inc. — Confidential and Proprietary
Customizing Your Theme
– scss/component/*.scss
– scss/_overrides.scss
...
16 ©2017 Acquia Inc. — Confidential and Proprietary
Overriding Bootstrap Defaults
– dcutah/bootstrap/assets/stylesheets/bo...
17 ©2017 Acquia Inc. — Confidential and Proprietary
Customizing Your Theme: Templates
– Copy twig files from templates fol...
18 ©2017 Acquia Inc. — Confidential and Proprietary
Adding a New Region
– Copy bootstrap/templates/system/page.html.twig t...
19 ©2017 Acquia Inc. — Confidential and Proprietary
Adding a New Region (cont.)
– Edit dcutah.info.yml to add your region ...
20 ©2017 Acquia Inc. — Confidential and Proprietary
Preprocess Functions
– Use dcutah.theme with D7-style preprocess funct...
21 ©2017 Acquia Inc. — Confidential and Proprietary
Fancy Bootstrap
22 ©2017 Acquia Inc. — Confidential and Proprietary
Bootstrap Layouts & Display Suite
– Download and enable bootstrap_layo...
23 ©2017 Acquia Inc. — Confidential and Proprietary
Bootstrap Layouts & Panels
– Panels should be able to use Bootstrap La...
24 ©2017 Acquia Inc. — Confidential and Proprietary
Bonus Tip
25 ©2017 Acquia Inc. — Confidential and Proprietary
Manually Remove a Module
– Manually edit the config table where name =...
26 ©2017 Acquia Inc. — Confidential and Proprietary
Useful Links
– https://www.drupal.org/project/bootstrap
– https://www....
27 ©2017 Acquia Inc. — Confidential and Proprietary
Thank You
Upcoming SlideShare
Loading in …5
×

How to Create a Drupal 8 Theme Using Bootstrap

4,350 views

Published on

Bootstrap is one of the most popular digital (HTML, CSS and JS) frameworks used today. Because it makes front-end web development faster for any device and for projects of all sizes, many of the responsive mobile first applications you interact with daily were built on Bootstrap.

Join this tech talk to learn how to create a Bootstrap theme for Drupal 8. We'll go through the process of creating a Bootstrap subtheme in Drupal 8, as well as how you can customize it to suit your site's design.

The process will include:

- Structuring your sub-theme files

- Figuring out your mobile-first strategy

- Using Compass to compile CSS from SCSS

- Overriding Bootstrap variables & custom variables

- Twig template file customization

- Bootstrap options for Panels, Views, Display Suite

Published in: Software
  • Nicely explained but for creating Drupal 8 themes using bootstrap framework, have a look at: https://www.cloudways.com/blog/create-responsive-drupal-theme-with-bootstrap/ I found it very useful and good source.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

How to Create a Drupal 8 Theme Using Bootstrap

  1. 1. 1 ©2017 Acquia Inc. — Confidential and Proprietary Dave Myburgh, Senior Engineer, Acquia Inc. Creating a Custom Bootstrap Subtheme for Drupal 8
  2. 2. 2 ©2017 Acquia Inc. — Confidential and Proprietary Who Am I? – Senior Engineer at Acquia, Inc. since 2011 – Maintain www.acquia.com, along with dev., engage., partners., and training.acquia.com – Jack-of-all-trades: site building, front-end, back-end – Started with Drupal 4.7, with theming mostly – Learned PHP by hacking Drupal
  3. 3. 3 ©2017 Acquia Inc. — Confidential and Proprietary What We Will Cover – Installing new Bootstrap theme – Creating a subtheme – Naming the subtheme – Customizing subtheme – Overriding Bootstrap variables (Sass) – Template overrides – Optional: Bootstrap Layouts (Panels/Display Suite)
  4. 4. 4 ©2017 Acquia Inc. — Confidential and Proprietary Installing Bootstrap
  5. 5. 5 ©2017 Acquia Inc. — Confidential and Proprietary Installation – Get Bootstrap theme into your /theme folder drush dl bootstrap, or download and decompress) – Copy starterkits folder of your choice to /theme folder cp –R bootstrap/starterkits/sass dcutah – You should have this: /themes/bootstrap /themes/dcutah – Note that less and sass starterkits will have compiler requirements (node.js, ruby, compass, grunt, gulp, etc.)
  6. 6. 6 ©2017 Acquia Inc. — Confidential and Proprietary Rename & Edit Files – THEMENAME.libraries.yml – THEMENAME.starterkit.yml (edit) – THEMENAME.theme – config/install/THEMENAME.settings.yml – config/schema/THEMENAME.schema.yml (edit) – change THEMENAME to dcutah – change starterkit to info – edit files where noted to change info inside them
  7. 7. 7 ©2017 Acquia Inc. — Confidential and Proprietary Edit dcutah.info.yml name: 'THEMETITLE' description: 'Uses the Bootstrap framework Sass source files and must be compiled (not for beginners).' libraries: - 'THEMENAME/global-styling' - 'THEMENAME/bootstrap-scripts'
  8. 8. 8 ©2017 Acquia Inc. — Confidential and Proprietary Edit config/schema/dcutah.schema.yml THEMENAME.settings: type: theme_settings label: 'THEMETITLE settings'
  9. 9. 9 ©2017 Acquia Inc. — Confidential and Proprietary Install Bootstrap Source Files – Only for less or sass starterkits – Download and extract the 3.x Sass source files into your theme folder, so that you have /themes/dcutah/bootstrap https://github.com/twbs/bootstrap-sass/archive/v3.3.7.tar.gz – cdn starterkit only has css/styles.css for you to override default styles – easy!
  10. 10. 10 ©2017 Acquia Inc. — Confidential and Proprietary Compile Your Less/Sass Files – Whatever compiler you’re using, you will need to compile your source files. – Make sure your dcutah.libraries.yml file is pointing to the compiled stylesheet I used compass without a config.rb file, so had to rename scss to sass and change path in libraries.yml from css/style.css to stylesheets/style.css – Clear all caches!
  11. 11. 11 ©2017 Acquia Inc. — Confidential and Proprietary Enable Themes – Enable Bootstrap AND DCUtah themes. – Make DCUtah the default theme. – You’ll now have a very boring looking Bootstrap theme with some badly placed blocks. – Go ahead and configure blocks and various settings to your liking.
  12. 12. 12 ©2017 Acquia Inc. — Confidential and Proprietary Settings of Note – Appearance settings for custom theme – container-fluid (default: off) – img-responsive (default: on) – popovers and tooltips (default: on – performance!)
  13. 13. 13 ©2017 Acquia Inc. — Confidential and Proprietary Using Bootstrap
  14. 14. 14 ©2017 Acquia Inc. — Confidential and Proprietary Helper Modules – Field Group (field_group) – Field Formatter Class (field_formatter_class) – Allow you to add wrappers and classes around fields so that you can use the Bootstrap grid and other classes – e.g. create a group with a class of “row” and put the default Article node’s image and body inside it; add col- sm-4 to image field and col-sm-8 to body field
  15. 15. 15 ©2017 Acquia Inc. — Confidential and Proprietary Customizing Your Theme – scss/component/*.scss – scss/_overrides.scss – Contain existing styles that override Bootstrap or are Drupal-specific – Create new files in component for specific things – your choice on structure e.g. _homepage.scss – Add that file to _overrides.scss below other @import lines
  16. 16. 16 ©2017 Acquia Inc. — Confidential and Proprietary Overriding Bootstrap Defaults – dcutah/bootstrap/assets/stylesheets/bootstrap/_var iables.scss – Copy variables into scss/_default_variables.scss and customize – $brand-primary: #29aae1; – Tons of variables exist: links, buttons, typography, grid, navbar, etc., etc.
  17. 17. 17 ©2017 Acquia Inc. — Confidential and Proprietary Customizing Your Theme: Templates – Copy twig files from templates folder in Bootstrap theme – If not there, check folder of module that generates that output e.g. Views (core/modules/views/templates) – Edit twig files as needed – Clear caches!
  18. 18. 18 ©2017 Acquia Inc. — Confidential and Proprietary Adding a New Region – Copy bootstrap/templates/system/page.html.twig to dcutah/templates/page.html.twig – Add new region code: {# Above Content #} {% if page.above_content %} {% block above_content %} {{ page.above_content }} {% endblock %} {% endif %}
  19. 19. 19 ©2017 Acquia Inc. — Confidential and Proprietary Adding a New Region (cont.) – Edit dcutah.info.yml to add your region name under the regions section: help: 'Help' above_content: 'Above Content' content: 'Content’ – Clear all caches! – Check in block layout to see your new region
  20. 20. 20 ©2017 Acquia Inc. — Confidential and Proprietary Preprocess Functions – Use dcutah.theme with D7-style preprocess functions – Use Bootstrap theme plugins e.g. dcutah/src/Plugin/Preprocess/Page.php (See https://drupal- bootstrap.org/api/bootstrap/docs%21plugins%21README.md/group /plugins/8) – Or both! (plugins go first, then .theme file)
  21. 21. 21 ©2017 Acquia Inc. — Confidential and Proprietary Fancy Bootstrap
  22. 22. 22 ©2017 Acquia Inc. — Confidential and Proprietary Bootstrap Layouts & Display Suite – Download and enable bootstrap_layouts module (requires layout_plugin module), along with ds module. – Go to the Manage Display tab for a content type – Choose a Bootstrap layout to use – You can then position page elements in the various regions of the Bootstrap layout – You also get new fields for Title, Submitted by, Author, etc. thanks to DS
  23. 23. 23 ©2017 Acquia Inc. — Confidential and Proprietary Bootstrap Layouts & Panels – Panels should be able to use Bootstrap Layouts too – Killed my system when installed Panels 4.1 – Uses Layout Discovery experimental module instead of Layout Plugin, which BL 8.x-4.1 depended on – Need to use BL 8.x-5.x – Requires CTools and Page Manager modules (separate now)
  24. 24. 24 ©2017 Acquia Inc. — Confidential and Proprietary Bonus Tip
  25. 25. 25 ©2017 Acquia Inc. — Confidential and Proprietary Manually Remove a Module – Manually edit the config table where name = 'core.extension' and remove the module from the data blob which is a serialized array e.g. i:0;s:6:”panels"; – Decrement the module array length as well near the beginning (...s:6:"module";a:HERE;{...) – Truncate the cache_config table
  26. 26. 26 ©2017 Acquia Inc. — Confidential and Proprietary Useful Links – https://www.drupal.org/project/bootstrap – https://www.drupal.org/project/field_group – https://www.drupal.org/project/field_formatter_class – https://www.drupal.org/project/bootstrap_layouts – https://www.drupal.org/project/layout_plugin – https://www.drupal.org/project/ds – https://drupal-bootstrap.org/api/bootstrap – http://getbootstrap.com/
  27. 27. 27 ©2017 Acquia Inc. — Confidential and Proprietary Thank You

×