Bootstrap Paragraphs for Drupal 8
3 likes4,585 views
The Bootstrap Paragraphs module by Jim Birch enhances content creation in Drupal using the Bootstrap framework, offering a variety of customizable paragraph types and layout options. It allows users to build responsive, structured content with features such as different column layouts, carousels, and modals while providing easy administration and semantic markup capabilities. This document outlines the module's functionality, installation process, and customization strategies, enabling developers to integrate it seamlessly with existing themes.
Bootstrap Paragraphs for Drupal 8
- 1. BOOTSTRAP PARAGRAPHS Created by Jim Birch jimbir.ch/bp @thejimbirch Xeno Media, Inc.
- 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. DEMO SITE
- 4. ALREADY USING PARAGRAPHS? How many times have you built... Three Column Paragraph Text and Image Paragraph Slideshow Paragraph Simple HTML Paragraph
- 5. How many times have you built it just a little bit different???
- 6. IF YOU'RE NOT USING PARAGRAPHS YET Install this module on a test site and start exploring all the possibilities Paragraphs offers.
- 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. DRUPAL PARAGRAPHS Paragraphs is a contrib module for Drupal that allows creation, administration, and display of customizable content components.
- 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. BOOTSTRAP FRAMEWORK Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
- 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. 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. 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. LAYOUT BUNDLES Entity Reference Revisions fields to other Paragraphs. Columns Carousel Accordion Modal Tabs
- 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.
- 18. 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.
- 20. 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
- 22. 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
- 24. 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.
- 26. 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
- 27. VIEWS The Bootstrap Paragraphs Views type allows you to easily embed a View in and around your other Paragraphs using a .Views Reference Field
- 29. 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.
- 30. 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.
- 31. EQUAL COLUMNS
- 34. 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.
- 36. 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
- 38. 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
- 39. MODAL
- 41. TABS The Bootstrap Paragraphs Tabs lets you put Paragraph entities in different tabs using the Tab Section bundle.
- 43. THOSE ARE THE BASIC PARAGRAPH TYPES
- 44. 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.
- 45. 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
- 46. WIDTHS
- 47. 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
- 50. 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
- 51. 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
- 52. 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.
- 53. 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.
- 54. TWIG - WIDTH EXAMPLE
- 56. 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') }}
- 57. BONUS ROUND
- 58. 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 %}
- 59. 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;
- 60. OVERRIDING Customize Bootstrap Paragraphs in your own theme a er you've installed.
- 61. 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.
- 62. CSS & TEMPLATES Your theme has a higher priority than this module. Move the template files, and Overwrite the CSS from your theme if desired.
- 63. 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.
- 64. PLAY US OFF KEYBOARD CAT
- 66. CREATE A NEW "CUSTOM BLOCK" PARAGRAPHS BUNDLE TYPE Use the Drupal Block Paragraph to provide the example.
- 67. CUSTOM BLOCK Add a new Paragraph Type.
- 68. CUSTOM BLOCK Add the existing Background field.
- 70. CUSTOM BLOCK Add the existing Width field.
- 72. CUSTOM BLOCK Add a new Reference Revisions field, select Other for type.
- 74. CUSTOM BLOCK Select Custom Block in the Reference Revisions field settings.
- 75. CUSTOM BLOCK Select which Custom Block Type Bundles.
- 78. UP NEXT, THE HERO
- 79. 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
- 80. HERO
- 81. HERO - FIELDS
- 82. HERO - DISPLAY
- 83. HERO - OVERLAY
- 85. HERO - PARALLAX
- 86. HERO - INVERT
- 87. HERO - ZOOM
- 88. 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
- 89. UP NEXT, WORKING GLOBALLY
- 91. 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
- 92. 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.
- 94. 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.
- 95. ADD FUNCTION TO OVERRIDE TEMPLATE IN .MODULE FILE
- 96. EXPORT CONFIG, DELETE UUIDS, NAME SPACE/CHANGE FILE NAMES
- 98. INSTALL, TEST, & SHARE THE FINISHED PRODUCT This example can be found at on Github.Xeno Hero
- 100. LET'S FINISH UP!
- 101. 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...
- 102. Xeno Media, Inc. is a Chicago-based agency providing Drupal Development, Web Consulting and Design to the world's greatest clients. XENO MEDIA
- 103. 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
- 104. ZOOMDATA Founded: 2012 Employees: 125 Offices: San Mateo, CA Reston, VA New York, NY Customers: Goldman Sachs Amazon Cisco Juniper Deloitte
- 105. 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
- 106. 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
- 107. THE END CONTINUING THE CONVERSATION: jimbir.ch/bp @thejimbirch Xeno Media, Inc. Leave feedback about this presentation Take the DrupalCon survey