ProcessWire + RepeaterMatrix + CSS Grid Page Builder Concept

[Jonathan Lahijani]

If you're looking to do an elaborate a page builder with ProcessWire and don't want to pull your hair out, I highly recommended viewing this video:

A couple notes:

• with the css grid specification, you can assign multiple blocks to the same grid-area but they will overlap each other.  I've "overcome" this by combining multiple blocks into a parent div and assigning that instead. pretty easy to do.
• i didn't demonstrate it, if your blocks have a grid structure within them (like built with flexbox), you can still assign that block to a grid-area.  so if your blocks themselves have a grid structure, that's ok.  for example, if your css grid layout is 6 columns, but you have a block that has a grid inside of it (built with like uikit's grid that's 5 columns), you can assign that block to the grid-area.
• with the css grid specification, the flow of the blocks does not have to match the flow of the grid-areas.  this is insanely powerful.

Enjoy.

[Sergio]

This is awesome, @Jonathan Lahijani!!! Great work!! 

For those eager to learn CSS Grid, I recommend this excellent (and free) course by Web Bos: https://cssgrid.io

[LostKobrakai]

The grid-template-areas field might want to sport a monospace font for better alignment of those single letter area names

[bernhard]

Really, really nice!

What do you think of packing this into a fieldtype? Would be nice to have all the logic, files and fields packed into a module and to only have to add your field in the template editor

I'm also working on a site with matrix content builder and using field rendering makes the code very clean:

My matrix field is called "content" and all my items are included via WireRenderfile(). Then it's as easy as placing a file with the markup in /templates/matrix (here 2columnlayout.php).

 

[howdytom]

really nice. Thanks for your sharing.

[louisstephens]

First of all, this is amazing! It makes what I was trying to do look like a pile of trash.  Just wondering, if you don't mind divulging a bit of information, just how did you accomplish the "demo grid" ?

[neosin]

@bernhard just curious, what code editor/IDE is that? looks pretty

[bernhard]

it is great  i switched from sublime

[gmclelland]

Thanks for sharing your video @Jonathan Lahijani!  In case your interested, I added your technique to my "Techniques for flexible page layouts in Processwire" document https://docs.google.com/document/d/1peY-FUpevKgy87cKOxIVz8jwcv2-3c61zbiJr3QKO6c/edit?usp=sharing