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

1. 1 ©2017 Acquia Inc. — Confidential and Proprietary
Dave Myburgh, Senior Engineer, Acquia Inc.
Creating a Custom
Bootstrap Subtheme for
Drupal 8

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 ©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 ©2017 Acquia Inc. — Confidential and Proprietary
Installing Bootstrap

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 ©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 ©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 ©2017 Acquia Inc. — Confidential and Proprietary
Edit config/schema/dcutah.schema.yml
THEMENAME.settings:
type: theme_settings
label: 'THEMETITLE settings'

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 ©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 ©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 ©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 ©2017 Acquia Inc. — Confidential and Proprietary
Using Bootstrap

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 ©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 ©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 ©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 ©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 ©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 ©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 ©2017 Acquia Inc. — Confidential and Proprietary
Fancy Bootstrap

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 ©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 ©2017 Acquia Inc. — Confidential and Proprietary
Bonus Tip

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 ©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 ©2017 Acquia Inc. — Confidential and Proprietary
Thank You