CSS Grid for NationBuilder

A couple months ago I ran across the blog of Jen Simmons after finding her great talk on Modern Layouts for the web. This talk spoke to something I’d been lamenting for a couple of years: the trend of making every website look like it’s trying to sell you a freemium app. At cStreet, we’ve worked on hundreds of design projects and, especially under tight deadlines, it’s easy to fall into this trap and I’m not without sin. This talk on Modern Layouts is enlightening, though, and illustrates really well the step backward that we’ve taken from print layout.

 

Disclosure: I got my design start in print design when I applied for a writing internship at an underfunded magazine and wrote “Creative Suite” under “skills,” like a sucker. 3 years later I had the plush title of “Art Director” and even got to write an article or two. When I started working on the web I was frustrated at the energy it took to set a baseline grid. I was bored by the layout of the web.

Note: Our new NationBuilder theme, Action, is set on a 9px baseline grid.

If you follow Jen Simmons on Twitter, you’ll know she’s an advocate for CSS Grid. I followed loosely along with the conversation but became more interested when the new release of Firefox was supportive. I’m not going to go into depth about what Grid is or how it works, but here’s a brief overview. I highly recommend checking out Simmon’s article for resources on where to learn grid but I found Grid by Example, by Rachel Andrew to be especially helpful to get the basics, and it is fairly basic.

Grid allows you to control your layout in CSS without the use of clunky floats and tables. The exciting consequence being that you can then use media queries to compose different layouts according to device widths and resolutions.

A simple responsive layout example from: Grid by Example, Page Layout Examples

Honestly, blow your own mind and use one of the links above to read up on CSS Grid. I’m going to talk about some possibilities it opens up within NationBuilder’s theming environment.

Note that I’m using Andrews’ code from Grid by Example to illustrate some points below.  

For the uninitiated, NationBuilder is a community organizing platform that contains a Customer Relations Management (CRM) system combined with a Content Management System (CMS). NationBuilder themes are built with a combination of SaSS, HTML obvs, and Liquid (a templating language developed for designers by Shopify). NationBuilder has over 25 page types, each with different functionality, that have their own HTML/Liquid templates.

NationBuilder themeing + CSS Grid: Layout Variations

One of the great features of NationBuilder themes is almost hidden in plain site. When you’re choosing one of their official out-of-the-box themes, you can select their style variation. Each style variation has its own colour scheme, and generally this is where the variation ends. Under the hood, style variations are SaSS partials that redefine variables for a particular instance. So, if your $brand-primary colour is blue, you can redefine it to red in your variation partial and all instances of blue will become red.

If you’re using a bootstrap-based theme, the possibilities are quite endless as any of the variables can be redefined in your variation partial, changing colour, padding, etc. With CSS Grid, though, we could theoretically create variations in layout, not just colour.

This is one simple example from Grid by Example: 

HTML:

CSS:

Result:

First, we would define a variable using the grid settings:

We may have a totally different layout for mobile, in which case we’ll have twice the number of variables or so. Once we have these mapped out, we can jump into our variation partial and switch out the variables.

_style_simple.scss 

Which would look like: 

CSS Grid drag-and-drop NationBuilder site builder

At cStreet, we try to think systemically. When we design themes we move between UX, UI, theme, and custom page design until we have developed a durable design system that supports our creative dreams as well as our technical constraints. One result is a rich UI system for the page-level components of NationBuilder, for example forms, share buttons, comment streams, etc.

NationBuilder dipped a toe in the idea of modular theming a couple of years ago when they released “homepage widgets.” These were not a new feature, but just a brilliant use of liquid arrays to loop through tagged pages and pull snippets of these onto the homepage.

We use this widget code as a skeleton for a lot of projects to try to give clients the flexibility to arrange their homepage according to their shifting priorities. This is especially important for social change organizations who may go from trying to raise money one day to activating their communities for action the next. They often need more feature-rich interchangeability than just a featured content slider.

With CSS grid, we could set up a page on a grid and then create an external interface to let clients move and rescale objects on the page. They could then download a SaSS partial that they upload to their theme files. This would create a variation that they could save and use again in the future.

Check CSS Grid support here. As of this writing, most modern browsers are supportive. The possibilities are fascinating and definitely open the door to more flexible and modular theming in the future. We’re excited to pioneer this in the NationBuilder community!