If you use a grid framework of any kind, chances are you will have wasted some time trying to figure out if things line up properly and trying to work out what breakpoint you’re currently viewing. I know that I have!
I recently tried to solve this problem when working with WordPress and Neat 2 on our upcoming re-design. Here’s what I came up with.
There are two main things going on here. The first is the debugging output on the bottom right of the screen and the second is the grid overlay toggle button on the button left.
Displaying the Neat 2 grid settings
I was often comparing my source code to the inspector browser width to understand what breakpoint I was currently viewing. This meant looking in two places, neither of which were always instantly accessible, and then doing some quick mental arithmetic.
What I needed was to see the current breakpoint on the screen, but only when working locally (possibly on staging too).
The above code uses depends on a body class of
env--localwhich we apply using a filter.
WP_PRODUCTION constants are defined in a custom, environment specific WP config file using
define( 'WP_LOCAL', true );.
Taking it further
As we got more adventurous with our grids, there was more information that we wanted to have easy access to. For example, Neat 2 allows you to set different numbers of columns, sizes of gutter, etc. per breakpoint. Wouldn’t it be cool to have access to that too?
The above code does just that. Unfortunately, I have to manually add each breakpoint to a SASS map, and I’d love to find a function that removes that step. Ideally, I could simply pull in the breakpoints from where they are originally defined. (Can anyone help with that?)
Now we know the grid settings at each breakpoint. But what if I want to visually line up elements with that grid?
Revealing the invisible grid
In most designs the grid isn’t explicitly displayed, it’s behind the scenes, the glue and framework holding a design together. I’ve often wanted that grid to be more visible so that I can see if elements are correctly aligned (or correctly not aligned!).
Neat 2 allows us to reveal the grid by using
@include grid-visual(); on grid container elements. However, that is only on an individual element by element basis. Sometimes I want to be able to view the global grid to see how everything fits together.
The first thing to do is to output the necessary markup, but only when in a local development environment.
In this function, I’m outputting an inline script which handles the click event for the toggle button and adding the `is–clicked` class to the grid overlay. I’m outputting this code near the bottom of the document using the `wp_footer` action.
That gives us all of the markup and behaviour that we need, now we need to apply the styles.
There are a few things to note here:
- I’ve used the
pointer-events: noneproperty to effectively make the overlay ‘invisible’ to the mouse – allowing you to ‘click through’ the grid.
- I’m using
@include grid-visualto visualise the grid, but it’s important to add this for every breakpoint and to define the grid used, e.g. on line 26 above.
pointer-events: allis used on the toggle button to reverse the previous
pointer-events: nonehigher up the cascade.
That’s pretty much it! I haven’t tested this across multiple browsers and some of the code above will need to be adapted to your environment (e.g. SASS variables) but hopefully, this will give you a good start.
If you have any ideas on how to improve this please let me know. I’m @keithdevon on Twitter.