Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Bootstrap framework and drupal paragraphs

933 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Bootstrap framework and drupal paragraphs

  1. 1. BOOTSTRAP FRAMEWORK AND DRUPAL PARAGRAPHS Created by Jim Birch jimbir.ch/bsp @thejimbirch Xeno Media, Inc.
  2. 2. BOOTSTRAP PARAGRAPHS MODULE A suite of content and layout Paragraph bundles made with the Bootstrap framework and Entity reference fields.
  3. 3. BOOTSTRAP FRAMEWORK Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
  4. 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. 5. DRUPAL PARAGRAPHS Paragraphs is a contrib module for Drupal that allows creation, administration, and display of customizable content components.
  6. 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. 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. 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. 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. 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. 11. WIDTHS - TWIG
  12. 12. WIDTHS - LESS
  13. 13. CAROUSEL - TWIG
  14. 14. COLUMNS FIELD TEMPLATE
  15. 15. COLUMNS - LESS
  16. 16. 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
  17. 17. COLORS
  18. 18. ADDING CLASSES
  19. 19. RENDERING CONTENT WITHOUT FIELDS
  20. 20. MANAGE DISPLAY
  21. 21. 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
  22. 22. THE END CONTINUING THE CONVERSATION: Created by Jim Birch jimbir.ch/bsp @thejimbirch Xeno Media, Inc.

×