Lightning talk presentation from the BADCamp 2016 Frontend Summit covering the Bootstrap Paragraphs Drupal module, which is a suite of content and layout Paragraph bundles made with the Bootstrap framework and Entity reference fields.

1. BOOTSTRAP
FRAMEWORK AND
DRUPAL
PARAGRAPHS
Created by Jim Birch
jimbir.ch/bsp
@thejimbirch
Xeno Media, Inc.

2. BOOTSTRAP
PARAGRAPHS
MODULE
A suite of content and layout
Paragraph bundles made with the
Bootstrap framework and Entity
reference fields.

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

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

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

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

7. LET'S MAKE SOME
PARAGRAPHS!
Thanks to a great
, I was
presented the idea of separating
Content and Layout paragraph
bundles.
presentation I saw
at Twin Cities Drupal Camp by Les
Lim and David Needham

8. CONTENT BUNDLES
Common semantically organized fields, and reference fields
to common entities.
Simple HTML
Image
Block (Drupal and Custom)
Contact Forms
Views
Media

9. LAYOUT BUNDLES
Bootstrap functionality, with Entity Reference fields to allow
any content bundles.
Columns - Multi-value Paragraphs reference field, that
prints Bootstrap grid.
Carousel - Multi-value Paragraphs reference field, that
prints Bootstrap carousel. Also has slide interval field.
Accordion, Tabs, Modal...

10. WIDTHS
Every paragraph, whether content
or layout has the option to set one
of five widths, from narrow to full
screen using a List/Text field.

11. WIDTHS - TWIG

12. WIDTHS - LESS

13. CAROUSEL - TWIG

14. COLUMNS FIELD TEMPLATE

15. COLUMNS - LESS

17. COLORS
Similar to widths, we have a list field
with colors from
and five ready to style
bootstrap-like classes (Primary,
Secondary, Info, Warning, etc...)
Material Design for
Bootstrap

18. COLORS

19. ADDING CLASSES

20. RENDERING CONTENT WITHOUT
FIELDS

21. MANAGE DISPLAY

22. 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/Drupal Answers!
Jeroen Bobbeldijk .VDMi/ MD Systems
Paragraphs module
Using
Paragraphs to Weave a Beautiful Content Tapestry
Drupal Twig Slack

23. THE END
CONTINUING THE CONVERSATION:
Created by Jim Birch
jimbir.ch/bsp
@thejimbirch
Xeno Media, Inc.