A recent Drupal 8 project of ours had some great requirements around it’s landing pages, aimed at reusing existing components in a range of layouts and combinations. Paragraphs quickly established itself as the site-building tool of choice and Flexbox always wins for me as the CSS grid/layout approach, so we looked at how the two could be combined to give the client the flexibility they needed, without over-complicating the editor experience.
For me this is a great example of multi-disciplinary team communication. The site builders didn’t quite know what flexbox was capable of and us front-end devs weren’t up to date on Drupal 8’s layout sitebuilding tools, and neither groups of developers fully considered what would be best for the content editors.
The site builder’s perspective
There are of course other approaches to layout in Drupal - Panels being the most obvious but at the time it’s 8.x branch wasn’t fleshed out enough (though it sounds it's progressed a lot) and it’s UI/UX seemed a little overkill for this project. Blocks being fieldable in Drupal 8 also makes them an option but the limitations around user permissions and the fact that they each have their own edit screen ruled them out from the “ease of editing” perspective.
Paragraphs attached to a Landing page content type gave us one edit location per landing page and structured content that can easily be mapped to existing design components.
But Paragraphs isn’t a layout tool… and we certainly don’t want to nest paragraphs inside paragraphs just to get the markup structure needed to apply a complex grid to it!!
The front-enders perspective
So Flexbox is amazing! If you haven’t looked at it, I’d recommend starting with this visual guide to get an idea of what it’s capable of. It’s also simple enough to write in fallbacks for older browser so there are no excuses not to start using it.
You can of course use any grid system but one of the big advantages of Flexbox is that you don’t have to set widths on the grid items. You want all the children to sit next to each other and for their widths to distribute evenly in the amount of space you have? Flexbox is your friend. You want one of those children to have a width and the rest to fill the space around it?? Flexbox is your best friend :)
The other big advantage is you don’t need to nest grids. All of the grid items can be siblings of each other (within reason of course).
One row (and by row I mean strictly visual row, as no actual grouping is needed) can be two columns, the next row can be three and the third row can just be one full width column. Or you can have one half width column with just white space next to it and the next row goes back to three columns.
Now that might only make sense in my head so here is an example of the kind of layout I’m talking about:
So when a design comes in with a whole range of different column sizes and spacing, don’t curse the designer, thank Flexbox.
Now we have a grid system capable of displaying our single level of paragraph content in any position and at any column size we can fathom. What’s the glue?
Classy Paragraphs of course!
Classy paragraphs lets you specify a predefined list of classes (or combination of classes) in Drupal that can be selected when adding a paragraph’s content. Once specified you can add a select field to your paragraph type and then the content edit can not only re-order the paragraphs but they can give choose what flexbox layout it should have.
The disadvantage is the editor can’t see the grid visually like they can in something like Panels, instead just the name you’ve associated with the class but preview works pretty well in Drupal 8.
You can of course do the same thing in Drupal 7.
We launched amaysim.com a few weeks ago, and each of the top level landing pages, including the homepage is built this way. We’ve simplified the layout options somewhat and thought it a good generic enough candidate to bundle up in a Drupal 8 ‘feature’ module (being just config and css) called Paragraphs layout which you can now download from drupal.org and add to your paragraph based landing pages too.
We've swapped to using the entity_class_formatter module instead of Classy paragraphs now as it gives a bit more control over what classes should be available where and how the classes can be managed.
Interesting approach (no matter you use Flexbox, Bootstrap or whatelse) and agree with you about visual limitation, although the preview is indeed a great help. Thanks for share and the nice module.
I too am convinced of Paragraphs currently being the best way to approch flexible content layout, but I haven't yet managed to get around nesting paragraphs when
- I nee a "Hero" paragraph that breaks out of the main content's max width
- I have paragraph types that are specifically required to sit on their own rows (e.g. a "Quote" component)
- I implement other component-type paragraphs the are not supposed to live within a grid (gallery, multi-column text etc)
Do you have any thoughts on this?
Daniel Wentsch check out https://css-tricks.com/full-width-containers-limited-width-parents/
I was able to use this to create a full width background whet the main content was limited in width.
Thanks Frederick! Yes there are a few ways to pull out certain content.
Paragraphs that need their own row just get the full width layout. This can also apply to any paragraphs that have their own internal layout. They can be full width within the overall structure but have their own layout too. I also try to avoid nesting paragraphs as much as possible, but sometimes it's just necessary.
It will be interesting to see how Layout Builder competes with this approach,
what do you think about this new module.
I tried to combine all requirements of a layout in a grid module;
including a container break-out class, that works with a formulas:
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
flex: 0 0 100vw;