Using Pure Grids (with Drupal)

August 23, 2015

A few years ago, I was introduced to the CSS framework “YUI grids” (now “Pure grids”) by a friend at work (@kristhegrump). As it turned out, it was very similar to the way I had been styling applications for years and by simply including the framework I no longer had to bother maintaning any of my own grid system styles. Since then, i’ve used it on almost every project (Drupal, WordPress, ExpressionEngine… you name it).

So, why do I continue to use it?

It’s not particularly clever, it doesn’t adhere to BEM, but it gets the job done quickly and in an ultra-maintainable fashion (for the majority of the projects you work on this is exactly what you are paid and required to do).

However, during this blog post, I will be discussing my Drupal implementation.

# Creating grids with views

Creating a grid with Views is easy, all we have to do is override two of the templates that are provided by default. First we have to add our grid container class (.pure-g) to our main view template and then add the unit classes (.pure-u-) to the rows output.

# Creating grids with Display Suite

Overriding existing layouts

There are many layouts provided by default and, for most builds, these are probably enough. To template any one of these layouts we can create overrides from within our own theme. For example, if we wanted to override the ds-2col template, we could use one of the following suggestions:

To switch the layout to use Pure Grids, we can replace the Display Suite classes with the grid and unit classes like we have done below.

Create a custom layout

If we want to create a new layout, first we must create a directory within our theme called ds_layouts. The directory structure for our layout article_small is as follows:

Our layout regions and other options can be defined in the file:

The article-small.tpl.php template file is where we render our defined regions and add our grid classes:

Once we have created our new layout, it will be available for selection on the admin screen.

That’s essentially it, I will make sure to update this post If I can think of any other appropriate examples of using Pure within Drupal, but I think this covers the majority of the specific use-cases.