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 Paragraphs for Drupal 8

2,490 views

Published on

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

Published in: Software
  • Be the first to comment

Bootstrap Paragraphs for Drupal 8

  1. 1. BOOTSTRAP PARAGRAPHS Created by Jim Birch jimbir.ch/bp @thejimbirch Xeno Media, Inc.
  2. 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. 3. DEMO SITE
  4. 4. ALREADY USING PARAGRAPHS? How many times have you built... Three Column Paragraph Text and Image Paragraph Slideshow Paragraph Simple HTML Paragraph
  5. 5. How many times have you built it just a little bit different???
  6. 6. IF YOU'RE NOT USING PARAGRAPHS YET Install this module on a test site and start exploring all the possibilities Paragraphs offers.
  7. 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. 8. DRUPAL PARAGRAPHS Paragraphs is a contrib module for Drupal that allows creation, administration, and display of customizable content components.
  9. 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. 10. BOOTSTRAP FRAMEWORK Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
  11. 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. 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. 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. 14. LAYOUT BUNDLES Entity Reference Revisions fields to other Paragraphs. Columns Carousel Accordion Modal Tabs
  15. 15. PARAGRAPH BUNDLE TYPES
  16. 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.
  17. 17. 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.
  18. 18. 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
  19. 19. 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
  20. 20. 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.
  21. 21. 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
  22. 22. VIEWS The Bootstrap Paragraphs Views type allows you to easily embed a View in and around your other Paragraphs using a .Views Reference Field
  23. 23. 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.
  24. 24. 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.
  25. 25. EQUAL COLUMNS
  26. 26. TWO UNEVEN COLUMNS
  27. 27. THREE UNEVEN COLUMNS
  28. 28. 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.
  29. 29. 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
  30. 30. 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
  31. 31. MODAL
  32. 32. TABS The Bootstrap Paragraphs Tabs lets you put Paragraph entities in different tabs using the Tab Section bundle.
  33. 33. THOSE ARE THE BASIC PARAGRAPH TYPES
  34. 34. 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.
  35. 35. 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
  36. 36. WIDTHS
  37. 37. 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
  38. 38. BACKGROUND COLORS
  39. 39. TEMPLATE & MARKUP STRATEGY
  40. 40. 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
  41. 41. 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
  42. 42. 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.
  43. 43. 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.
  44. 44. TWIG - WIDTH EXAMPLE
  45. 45. 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') }}
  46. 46. BONUS ROUND
  47. 47. 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 %}
  48. 48. 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;
  49. 49. OVERRIDING Customize Bootstrap Paragraphs in your own theme a er you've installed.
  50. 50. 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.
  51. 51. CSS & TEMPLATES Your theme has a higher priority than this module. Move the template files, and Overwrite the CSS from your theme if desired.
  52. 52. 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.
  53. 53. PLAY US OFF KEYBOARD CAT
  54. 54. EXTENDING BOOTSTRAP PARAGRAPHS
  55. 55. CREATE A NEW "CUSTOM BLOCK" PARAGRAPHS BUNDLE TYPE Use the Drupal Block Paragraph to provide the example.
  56. 56. CUSTOM BLOCK Add a new Paragraph Type.
  57. 57. CUSTOM BLOCK Add the existing Background field.
  58. 58. CUSTOM BLOCK Add the existing Width field.
  59. 59. CUSTOM BLOCK Add a new Reference Revisions field, select Other for type.
  60. 60. CUSTOM BLOCK Select Custom Block in the Reference Revisions field settings.
  61. 61. CUSTOM BLOCK Select which Custom Block Type Bundles.
  62. 62. CUSTOM BLOCK Manage Display
  63. 63. UP NEXT, THE HERO
  64. 64. 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
  65. 65. HERO
  66. 66. HERO - FIELDS
  67. 67. HERO - DISPLAY
  68. 68. HERO - OVERLAY
  69. 69. HERO - PARALLAX
  70. 70. HERO - INVERT
  71. 71. HERO - ZOOM
  72. 72. 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
  73. 73. UP NEXT, WORKING GLOBALLY
  74. 74. BUILDING A MODULE USING CONFIG
  75. 75. 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
  76. 76. 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.
  77. 77. CREATE MODULE STRUCTURE
  78. 78. 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.
  79. 79. ADD FUNCTION TO OVERRIDE TEMPLATE IN .MODULE FILE
  80. 80. EXPORT CONFIG, DELETE UUIDS, NAME SPACE/CHANGE FILE NAMES
  81. 81. INSTALL, TEST, & SHARE THE FINISHED PRODUCT This example can be found at on Github.Xeno Hero
  82. 82. LET'S FINISH UP!
  83. 83. 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...
  84. 84. Xeno Media, Inc. is a Chicago-based agency providing Drupal Development, Web Consulting and Design to the world's greatest clients. XENO MEDIA
  85. 85. 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
  86. 86. ZOOMDATA Founded: 2012 Employees: 125 Offices: San Mateo, CA Reston, VA New York, NY Customers: Goldman Sachs Amazon Cisco Juniper Deloitte
  87. 87. 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
  88. 88. 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
  89. 89. THE END CONTINUING THE CONVERSATION: jimbir.ch/bp @thejimbirch Xeno Media, Inc. Leave feedback about this presentation Take the DrupalCon survey

×