In this presentation you will how to combine the power of the world's most popular front end framework, Bootstrap with Drupal Paragraphs, the powerful module that allows content creators to build layouts and structured pages. Using the Bootstrap Paragraphs Drupal 8 module, you'll be able to create Bootstrap features like Accordions, Carousels, Modals, Tabs, and Multi-column layouts. We'll also demonstrate how to harness the power of Drupal referencing Text, Images, Contact Forms, Blocks, and even Views! We will also review how the module adds different widths and backgrounds which can be modified in the Drupal theme layer. Presented at DrupalCon Baltimore 2017. For more information, please visit https://events.drupal.org/baltimore2017/sessions/bootstrap-paragraphs

1. BOOTSTRAP
PARAGRAPHS
Created by Jim Birch
jimbir.ch/bp
@thejimbirch
Xeno Media, Inc.

2. The Bootstrap Paragraphs module
provides a suite of content and layout
Paragraph bundles made with the
Bootstrap front-end framework.
BOOTSTRAP
PARAGRAPHS
MODULE

3. DEMO SITE

4. ALREADY USING PARAGRAPHS?
How many times have you built...
Three Column Paragraph
Text and Image Paragraph
Slideshow Paragraph
Simple HTML Paragraph

5. How many times have you built it just a little bit different???

6. IF YOU'RE NOT USING PARAGRAPHS
YET
Install this module on a test site and start exploring all the
possibilities Paragraphs offers.

7. MODULE
STRATEGY
Create a module that would make the
basic paragraphs needed for every site.
Create base templates & CSS that could
be used with any theme that includes
Bootstrap.
Harness the power of Entity Reference
Revisions fields to nest Paragraphs.
Have global width & background color
options.

8. DRUPAL PARAGRAPHS
Paragraphs is a contrib module for
Drupal that allows creation,
administration, and display of
customizable content components.

9. WHY WE USE PARAGRAPHS
Different widths for different content elements
Better typography - Best readability at 60 to 70
characters wide
But wanting Images and Videos wider
Structured content
Frustrated with Rich Text Editors since '97
WYSIWYG integration with Media, was buggy at best
Ability to add semantic markup, Schema.org, JSON-LD
Easy to administer layouts
Multiple columns
Quickly restructuring rows
Heros, Slideshows and more!

10. BOOTSTRAP
FRAMEWORK
Bootstrap is the most popular
HTML, CSS, and JS framework for
developing responsive, mobile first
projects on the web.

11. WHY WE USE BOOTSTRAP
Core functionality
Responsive Grid Markup and CSS
Themable Content and Javascript Components
Readable Typography base
Documentation
Standardization helps teams become more productive
Onboarding new developers is quicker
Customizable
Completely customizable for large projects
Mixins for adding existing styles to semantic html
Best practices for small/low budget projects
Open Source - MIT License

12. INSPIRATION
Thanks to Les Lim and David Needham's great presentation
, I
learned the idea of separating paragraph bundles into
Content, Layout and Ponies categories.
Using Paragraphs to Weave a Beautiful Content Tapestry
This idea helped me solidify the structure of this module.

13. CONTENT BUNDLES
Common semantically organized fields, and reference fields
to common entities.
Simple HTML
Image
Blank
Contact Form
Drupal Blocks
Views
Media (Coming soon to a core near you!)

14. LAYOUT BUNDLES
Entity Reference Revisions fields to other Paragraphs.
Columns
Carousel
Accordion
Modal
Tabs

15. PARAGRAPH
BUNDLE TYPES

16. SIMPLE
This Paragraphs type has a formatted long text field, which
we configured to use the Full HTML text format during
installation. This is essentially what you would expect from a
normal body field.

18. IMAGE
This Paragraphs type has an Image reference field, and a
Link field if you want to link the image. Because this uses
Drupal core's Image module, we get to set the default field
attributes, and require an ALT tag, which is required for
proper accessibility.

20. BLANK
The Blank Paragraphs type is perfect for less restrictive
HTML and JavaScript. I use these paragraphs for things like
scripts from external services like , ,
, ; and adding page specific for SEO.
Mailchimp Pardot
Eloqua Marketo JSON-LD

22. CONTACT FORM
The Bootstrap Paragraphs Contact Form type allows you to
embed one of Drupal 8 core's Contact Forms anywhere you
need it, including inside of Accordions, Carousels, Columns,
Modals, and Tabs. This is possible thanks to the
.
Contact
Formatter module
Add to allow your administrators to add
new, or select existing Contact Forms.
Inline Entity Form

24. DRUPAL BLOCKS
The Drupal Block Paragraphs type has a reference field to
Drupal core, System, and Menus blocks for easy inclusion in
your content.
You can also use this type as an example for creating a
Paragraphs type for your custom blocks.

26. Some Drupal blocks do not render. Here is the list of
working/not working blocks as of April, 2017.
Working
Footer menu
Main navigation
Powered by Drupal
Site branding
Status messages
Tabs
Not Working
Administration menu
Breadcrumbs
Main page Content
Page title
Primary admin actions
Syndicate
Tools
User account menu
User login

27. VIEWS
The Bootstrap Paragraphs Views type allows you to easily
embed a View in and around your other Paragraphs using a
.Views Reference Field

29. COLUMNS
The three Bootstrap Paragraphs Column types allows
content creators to add column structure into their content
using a Column Content field.
The field allows for multiple values, so columns can be easily
reordered by drag and drop in the admin UI.

30. COLUMNS
Columns (Equal) - allows for up to 6 references, and
distributes the content evenly, up to 6 columns
3 and 2 Column Uneven - allow for 3 and 2 items
respectively, and have an additional Column Style option
to choose the layout of the grid.

31. EQUAL COLUMNS

32. TWO UNEVEN COLUMNS

33. THREE UNEVEN COLUMNS

34. CAROUSEL
The Bootstrap Paragraphs Carousel allows for other
Paragraph entities to be loaded in the Slide Content field.
Cycle through images, simples, or multi-column pieces of
content. The Carousel also has a Slide Interval speed option.

36. ACCORDION
The Bootstrap Paragraphs Accordion implements the
to create an accordion with
the panel/card component. The Accordion references the
Accordion Section Paragraph Type which has a title and a
Paragraph reference section for the accordion body.
Bootstrap Collapse Javascript

38. MODAL
The Bootstrap Paragraphs Modal allows for content creators
to easily add modals to the site.
The bundle has 4 fields:
Modal Button Text - the trigger that launches the modal
Modal Title - the title of the modal
Modal Body - Paragraph reference field
Modal Footer - Paragraph reference field

39. MODAL

41. TABS
The Bootstrap Paragraphs Tabs lets you put Paragraph
entities in different tabs using the Tab Section bundle.

43. THOSE ARE THE BASIC PARAGRAPH
TYPES

44. GLOBAL SETTINGS
Every paragraph, whether content
or layout has the option to set
background color and one of five
widths, from narrow to full using
List/Text Select fields.

45. WIDTHS
Each Paragraph has an option where you can set one of 5
widths. As the width gets narrower, the content becomes
centered using Bootstraps offset classes. The widths are:
Tiny: col-4, offset-4
Narrow: col-6, offset-3
Medium: col-8, offset-2
Wide: col-10, offset-1
Full: col-12

46. WIDTHS

47. BACKGROUND COLORS
Each Paragraph has a background color option. Included are
over 50 background colors and five empty background
classes for you to customize in your own theme.
Empty classes follow the Bootstrap nomenclature:
.paragraph--color--primary
.paragraph--color--secondary
.paragraph--color--success
.paragraph--color--info
.paragraph--color--warning
.paragraph--color--danger

48. BACKGROUND COLORS

49. TEMPLATE &
MARKUP
STRATEGY

50. MARKUP - DIV.PARAGRAPH
class="paragraph">
v>
We apply the Bootstrap .row rules
Stretches to the edge in a .container or
.container-fluid
Also works if nested in another column

51. MARKUP - DIV.PARAGRAPH
MODIFIERS
class="paragraph paragraph-type--simple
paragraph--view-mode--default paragraph--width--full
paragraph--color paragraph--color--rgba-blue-light">
v>
Type: .paragraph-type--type
View Mode: .paragraph--view-mode--default
Widths: .paragraph--width--name
Colors: .paragraph--color
.paragraph--color--color-name

52. MARKUP -
DIV.PARAGRAPH__COLUMN
class="paragraph paragraph-type--simple
paragraph--view-mode--default paragraph--width--full">
<div class="paragraph__column">
</div>
v>
We apply the appropriate Bootstrap widths here.

53. MARKUP - THE CONTENT
class="paragraph paragraph-type--simple
paragraph--view-mode--default paragraph--width--full">
<div class="paragraph__column">
{{ content|without('bp_width', 'bp_background') }}
</div>
v>
The content is added without the background color and
width fields.

54. TWIG - WIDTH EXAMPLE

56. DRUPAL ASSET LIBRARIES
In our Paragraphs templates we use a library to load our two
CSS files only on pages that need it.
{{ attach_library('bootstrap_paragraphs/bootstrap-paragraphs') }}

57. BONUS ROUND

58. PAGE TEMPLATE SUGGESTIONS
For Full Width Colors, add a new Region into your
page.html.twig
f page.structured_content %}
block structured_content %}
<div class="structured-content container">
{{ page.structured_content }}
</div>
endblock %}
ndif %}

59. And add the following CSS to your theme.
dds full width, margin-less and padding-less container for Paragraphs. */
his is so colors go full width. Padding is on interior elements. */
uctured-content.container {
dding-left: 0;
dding-right: 0;
dth: 100%;
uctured-content.container > div {
rgin-left: 0;
rgin-right: 0;
uctured-content.container > div > div {
dding-left: 0;
dding-right: 0;

60. OVERRIDING
Customize Bootstrap Paragraphs in
your own theme a er you've installed.

61. BUNDLES AND FIELDS
A er installation, Paragraph Bundles and Fields are kept in
your database and in your configuration.
Any changes you make will be yours.

62. CSS & TEMPLATES
Your theme has a higher priority than this module. Move the
template files, and Overwrite the CSS from your theme if
desired.

63. UNINSTALL THIS MODULE!
In fact, you can uninstall this module a er installation and
still keep all the functionality.
Move the templates to your theme, and remove the
attach_library call.
Move the CSS files to your theme and call them from your
theme's library file.

64. PLAY US OFF KEYBOARD CAT

65. EXTENDING
BOOTSTRAP
PARAGRAPHS

66. CREATE A NEW "CUSTOM BLOCK"
PARAGRAPHS BUNDLE TYPE
Use the Drupal Block Paragraph to provide the example.

67. CUSTOM BLOCK
Add a new Paragraph Type.

68. CUSTOM BLOCK
Add the existing Background field.

70. CUSTOM BLOCK
Add the existing Width field.

72. CUSTOM BLOCK
Add a new Reference Revisions field, select Other for type.

74. CUSTOM BLOCK
Select Custom Block in the Reference Revisions field
settings.

75. CUSTOM BLOCK
Select which Custom Block Type Bundles.

77. CUSTOM BLOCK
Manage Display

78. UP NEXT, THE HERO

79. HERO
Here is a more complex example for a Hero Paragraph
bundle which has:
Paragraph Reference field for content
Background Image
Parallax Option
Image Overlay Option
Image Overlay Invert Option
Zoom/Ken Burns Effect Option

80. HERO

81. HERO - FIELDS

82. HERO - DISPLAY

83. HERO - OVERLAY

85. HERO - PARALLAX

86. HERO - INVERT

87. HERO - ZOOM

88. HERO - PUTTING IT ALL TOGETHER
hosted with ❤ by
1
2
3
4
5
6
7
8
9
{# Prints div with classes, & content w/o img/invert/overlay/parallax fields. #}
<div{{ attributes.addClass(classes).setAttribute('data-overlay', overlay_levels).setAttribute('data-speed', parallax_speeds) }}>
{% if content.xeno_background_image|render %}
<div class="paragraph--type--xeno-hero__image">
{{ content.xeno_background_image }}
</div>
{% endif %}
{{ content|without('xeno_background_image', 'xeno_invert', 'xeno_overlay', 'xeno_parallax') }}
</div>
view rawparagraph‑‑xeno‑hero.html.twig GitHub

89. UP NEXT, WORKING GLOBALLY

90. BUILDING A
MODULE
USING
CONFIG

91. BUILDING A MODULE USING CONFIG
Create Once, Reuse Everywhere!
Build a custom module to install a Paragraph bundle.
Create bundle structure in a blank Drupal install
Create module structure
Add Templates, CSS, and JS
Add Function to override Template
Export Config, delete UUIDs, Name space/change file
names

92. CREATE BUNDLE STRUCTURE IN A
BLANK DRUPAL INSTALL
Spin up a sandbox on your favorite hosting platform or on
your local dev environment and build your bundle.

93. CREATE MODULE STRUCTURE

94. ADD TEMPLATES, CSS, AND JS
Copy and rename the default template from the Bootstrap
Paragraphs module.
Add a CSS file.
Add a JS file if needed.
Configure them in the module's .libraries file.

95. ADD FUNCTION TO OVERRIDE
TEMPLATE IN .MODULE FILE

96. EXPORT CONFIG, DELETE UUIDS,
NAME SPACE/CHANGE FILE NAMES

98. INSTALL, TEST, & SHARE THE
FINISHED PRODUCT
This example can be found at on Github.Xeno Hero

100. LET'S FINISH UP!

101. TO SUM UP
Using frameworks benefits productivity
(Drupal, Bootstrap, Paragraphs). That is
what I was trying to achieve by building
this module.
You can also use this approach with other
front end frameworks and scripts --
Singularity, Foundation, Slick, etc...

102. Xeno Media, Inc. is a Chicago-based
agency providing Drupal
Development, Web Consulting and
Design to the world's greatest
clients.
XENO MEDIA

103. MANY THANKS TO:
All my amazing co-workers and clients at Xeno Media.
Albert Jankowski ( ) for helping me develop this
module and always helping me debug all the Drupal 8
things!
albertski

104. ZOOMDATA
Founded: 2012
Employees: 125
Offices:
San Mateo, CA
Reston, VA
New York, NY
Customers:
Goldman Sachs
Amazon
Cisco
Juniper
Deloitte

105. Kyiv, Ukraine
Zoomdata is Hiring!
Visit
Abbvie
DHS
ClickFox
zoomdata.com/careers
MANY THANKS TO:
, , for supporting the
.
Les Lim and David Needham's presentation
Morten, Danny Englander, Greg Boggs, Mark Conroy, and
everyone else in the
So many people in Stack Overflow, especially Scott
Reeves (Cottser)!
Jeroen Bobbeldijk .VDMi/ MD Systems
Paragraphs module
Using
Paragraphs to Weave a Beautiful Content Tapestry
Drupal Twig Slack

106. JOIN US FOR CONTRIBUTION
SPRINTS
FRIDAY, APRIL 28, 2017
First-Time
Sprinter Workshop
9:00am-12:00pm
Room: 307-308
Mentored Core
Sprint
9:00am-12:00pm
Room: 301-303
General Sprints
9:00am-6:00pm
Room: 309-310
#DRUPALSPRINTS

107. THE END
CONTINUING THE CONVERSATION:
jimbir.ch/bp
@thejimbirch
Xeno Media, Inc.
Leave feedback about this presentation
Take the DrupalCon survey