Bootstrap framework and drupal paragraphs
Post on 07-Jan-2017
312 Views
Preview:
Transcript
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.
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
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.
top related