Skip to main content

Building a layout system for Paragraphs

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.

by rikki.bochow /

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 Paragrahs layout which you can now download from drupal.org and add to your paragraph based landing pages too.

Posted by rikki.bochow
Front end Developer

Dated

Comments

Comment by Jordi Mateu

Dated

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.

Pagination

Add new comment

Restricted HTML

  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <h2> <h3> <h4> <h5> <h6>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.