How to Create a Drupal 8 Theme Using Bootstrap

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

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

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)

Installing Bootstrap

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.)

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

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'

Edit config/schema/dcutah.schema.yml
THEMENAME.settings:
type: theme_settings
label: 'THEMETITLE settings'

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!

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!

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.

Settings of Note
– Appearance settings for custom theme
– container-fluid (default: off)
– img-responsive (default: on)
– popovers and tooltips (default: on – performance!)

Using Bootstrap

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

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

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.

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!

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 %}

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

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)

Fancy Bootstrap

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

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)

Bonus Tip

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

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/

Thank You

How to Create a Drupal 8 Theme Using Bootstrap

More Related Content

What's hot (20)

Similar to How to Create a Drupal 8 Theme Using Bootstrap (20)

More from Acquia (20)

Recently uploaded (20)

How to Create a Drupal 8 Theme Using Bootstrap

Editor's Notes