Bootstrap Framework and Drupal Paragraphs

Created by Jim Birch
jimbir.ch/bsp
@thejimbirch
Xeno Media, Inc.

Bootstrap Paragraphs Module

A suite of content and layout Paragraph bundles made with the Bootstrap framework and Entity reference fields.

Bootstrap Framework

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

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

Drupal Paragraphs

Paragraphs is a contrib module for Drupal that allows creation, administration, and display of customizable content components.

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

Let's make some Paragraphs!

Thanks to a great presentation I saw at Twin Cities Drupal Camp by Les Lim and David Needham, I was presented the idea of separating Content and Layout paragraph bundles.

Content bundles

Common semantically organized fields, and reference fields to common entities.

  • Simple HTML
  • Image
  • Block (Drupal and Custom)
  • Contact Forms
  • Views
  • Media

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...

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.

Widths - Twig

Widths - LESS

Carousel - Twig

Columns Field Template

Columns - LESS

Colors

Similar to widths, we have a list field with colors from Material Design for Bootstrap and five ready to style bootstrap-like classes (Primary, Secondary, Info, Warning, etc...)

Colors

Adding Classes

Rendering content without fields

Manage Display

Many thanks to:

THE END

Continuing the conversation:

Created by Jim Birch
jimbir.ch/bsp
@thejimbirch
Xeno Media, Inc.