How to Create a Drupal 8 Theme Using Bootstrap
Transcript of How to Create a Drupal 8 Theme Using Bootstrap
![Page 1: How to Create a Drupal 8 Theme Using Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022050613/5a649b557f8b9a2c568b6381/html5/thumbnails/1.jpg)
1 ©2017 Acquia Inc. — Confidential and Proprietary
Dave Myburgh, Senior Engineer, Acquia Inc.
Creating a Custom Bootstrap Subtheme for Drupal 8
![Page 2: How to Create a Drupal 8 Theme Using Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022050613/5a649b557f8b9a2c568b6381/html5/thumbnails/2.jpg)
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
![Page 3: How to Create a Drupal 8 Theme Using Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022050613/5a649b557f8b9a2c568b6381/html5/thumbnails/3.jpg)
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)
![Page 4: How to Create a Drupal 8 Theme Using Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022050613/5a649b557f8b9a2c568b6381/html5/thumbnails/4.jpg)
4 ©2017 Acquia Inc. — Confidential and Proprietary
Installing Bootstrap
![Page 5: How to Create a Drupal 8 Theme Using Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022050613/5a649b557f8b9a2c568b6381/html5/thumbnails/5.jpg)
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 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.)
![Page 6: How to Create a Drupal 8 Theme Using Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022050613/5a649b557f8b9a2c568b6381/html5/thumbnails/6.jpg)
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
![Page 7: How to Create a Drupal 8 Theme Using Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022050613/5a649b557f8b9a2c568b6381/html5/thumbnails/7.jpg)
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'
![Page 8: How to Create a Drupal 8 Theme Using Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022050613/5a649b557f8b9a2c568b6381/html5/thumbnails/8.jpg)
8 ©2017 Acquia Inc. — Confidential and Proprietary
Edit config/schema/dcutah.schema.yml
THEMENAME.settings:
type: theme_settings
label: 'THEMETITLE settings'
![Page 9: How to Create a Drupal 8 Theme Using Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022050613/5a649b557f8b9a2c568b6381/html5/thumbnails/9.jpg)
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/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!
![Page 10: How to Create a Drupal 8 Theme Using Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022050613/5a649b557f8b9a2c568b6381/html5/thumbnails/10.jpg)
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 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!
![Page 11: How to Create a Drupal 8 Theme Using Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022050613/5a649b557f8b9a2c568b6381/html5/thumbnails/11.jpg)
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.
![Page 12: How to Create a Drupal 8 Theme Using Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022050613/5a649b557f8b9a2c568b6381/html5/thumbnails/12.jpg)
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!)
![Page 13: How to Create a Drupal 8 Theme Using Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022050613/5a649b557f8b9a2c568b6381/html5/thumbnails/13.jpg)
13 ©2017 Acquia Inc. — Confidential and Proprietary
Using Bootstrap
![Page 14: How to Create a Drupal 8 Theme Using Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022050613/5a649b557f8b9a2c568b6381/html5/thumbnails/14.jpg)
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
![Page 15: How to Create a Drupal 8 Theme Using Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022050613/5a649b557f8b9a2c568b6381/html5/thumbnails/15.jpg)
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
![Page 16: How to Create a Drupal 8 Theme Using Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022050613/5a649b557f8b9a2c568b6381/html5/thumbnails/16.jpg)
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.
![Page 17: How to Create a Drupal 8 Theme Using Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022050613/5a649b557f8b9a2c568b6381/html5/thumbnails/17.jpg)
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!
![Page 18: How to Create a Drupal 8 Theme Using Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022050613/5a649b557f8b9a2c568b6381/html5/thumbnails/18.jpg)
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 %}
![Page 19: How to Create a Drupal 8 Theme Using Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022050613/5a649b557f8b9a2c568b6381/html5/thumbnails/19.jpg)
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
![Page 20: How to Create a Drupal 8 Theme Using Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022050613/5a649b557f8b9a2c568b6381/html5/thumbnails/20.jpg)
20 ©2017 Acquia Inc. — Confidential and Proprietary
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)
![Page 21: How to Create a Drupal 8 Theme Using Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022050613/5a649b557f8b9a2c568b6381/html5/thumbnails/21.jpg)
21 ©2017 Acquia Inc. — Confidential and Proprietary
Fancy Bootstrap
![Page 22: How to Create a Drupal 8 Theme Using Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022050613/5a649b557f8b9a2c568b6381/html5/thumbnails/22.jpg)
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
![Page 23: How to Create a Drupal 8 Theme Using Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022050613/5a649b557f8b9a2c568b6381/html5/thumbnails/23.jpg)
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)
![Page 24: How to Create a Drupal 8 Theme Using Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022050613/5a649b557f8b9a2c568b6381/html5/thumbnails/24.jpg)
24 ©2017 Acquia Inc. — Confidential and Proprietary
Bonus Tip
![Page 25: How to Create a Drupal 8 Theme Using Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022050613/5a649b557f8b9a2c568b6381/html5/thumbnails/25.jpg)
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
![Page 26: How to Create a Drupal 8 Theme Using Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022050613/5a649b557f8b9a2c568b6381/html5/thumbnails/26.jpg)
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/
![Page 27: How to Create a Drupal 8 Theme Using Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022050613/5a649b557f8b9a2c568b6381/html5/thumbnails/27.jpg)
27 ©2017 Acquia Inc. — Confidential and Proprietary
Thank You