Bootstrap framework and drupal paragraphs

BOOTSTRAPFRAMEWORK ANDDRUPALPARAGRAPHSCreated by Jim Birchjimbir.ch/bsp@thejimbirchXeno Media, Inc.

BOOTSTRAPPARAGRAPHSMODULEA suite of content and layoutParagraph bundles made with theBootstrap framework and Entityreference fields.

BOOTSTRAPFRAMEWORKBootstrap is the most popularHTML, CSS, and JS framework fordeveloping responsive, mobile firstprojects on the web.

WHY WE USE BOOTSTRAPCore functionality

Responsive Grid Markup and CSSThemable Content and Javascript ComponentsReadable Typography base

DocumentationStandardization helps teams become more productiveOnboarding new developers is quicker

CustomizableCompletely customizable for large projectsMixins for adding existing styles to semantic html

Best practices for small/low budget projectsOpen Source - MIT License

DRUPAL PARAGRAPHSParagraphs is a contrib module forDrupal that allows creation,administration, and display ofcustomizable content components.

WHY WE USE PARAGRAPHSDifferent widths for different content elements

Better typography - Best readability at 60 to 70characters wideBut wanting Images and Videos wider

Structured contentFrustrated with Rich Text Editors since '97WYSIWYG integration with Media, was buggy at bestAbility to add semantic markup, Schema.org, JSON-LD

LET'S MAKE SOMEPARAGRAPHS!Thanks to a great

, I waspresented the idea of separatingContent and Layout paragraphbundles.

presentation I sawat Twin Cities Drupal Camp by LesLim and David Needham

CONTENT BUNDLESCommon semantically organized fields, and reference fields

to common entities.

Simple HTMLImageBlock (Drupal and Custom)Contact FormsViewsMedia

LAYOUT BUNDLESBootstrap functionality, with Entity Reference fields to allow

any content bundles.

Columns - Multi-value Paragraphs reference field, thatprints Bootstrap grid.Carousel - Multi-value Paragraphs reference field, thatprints Bootstrap carousel. Also has slide interval field.Accordion, Tabs, Modal...

WIDTHSEvery paragraph, whether contentor layout has the option to set oneof five widths, from narrow to fullscreen using a List/Text field.

WIDTHS - TWIG

WIDTHS - LESS

CAROUSEL - TWIG

COLUMNS FIELD TEMPLATE

COLUMNS - LESS

COLORSSimilar to widths, we have a list fieldwith colors from

and five ready to stylebootstrap-like classes (Primary,Secondary, Info, Warning, etc...)

Material Design forBootstrap

COLORS

ADDING CLASSES

ADDING CLASSES

RENDERING CONTENT WITHOUTFIELDS

MANAGE DISPLAY

MANY THANKS TO:, , for supporting the

.Les Lim and David Needham's presentation

Morten, Danny Englander, Greg Boggs, Mark Conroy, andeveryone else in the So many people in Stack Overflow/Drupal Answers!

Jeroen Bobbeldijk .VDMi/ MD SystemsParagraphs module

UsingParagraphs to Weave a Beautiful Content Tapestry

Drupal Twig Slack

THE ENDCONTINUING THE CONVERSATION:

Created by Jim Birchjimbir.ch/bsp@thejimbirchXeno Media, Inc.