A suite of content and layout Paragraph bundles made with the Bootstrap framework and Entity reference fields.
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
- Readable Typography base
- Standardization helps teams become more productive
- Onboarding new developers is quicker
- Completely customizable for large projects
- Mixins for adding existing styles to semantic html
- Best practices for small/low budget projects
- Open Source - MIT License
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
Common semantically organized fields, and reference fields to common entities.
- Simple HTML
- Block (Drupal and Custom)
- Contact Forms
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...
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
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...)
Rendering content without fields