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 foldercp –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/bootstraphttps://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 stylesheetI 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 pluginse.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

Software

How to Create a Drupal 8 Theme Using Bootstrap