In this last section about Bourbon Neat we’ll look at the various “built-in” Sass variables it gives us. This will be a short ride, but knowing how to tweak your grids is important.
Variables
We’ll be covering the following:
- default-layout-direction
- visual-grid-opacity
- border-box-sizing
- visual-grid-index
- disable-warnings
- visual-grid-color
- default-feature
- grid-columns
- max-width
- visual-grid
- column
- gutter
Before we start, I should remind you that most of the time your Neat variables are best placed in one central location like in your **grid-settings** partial. In any case, to avoid any surprises, make sure you import this file _before you import Neat.
Sass:
@import "bourbon/bourbon" @import "grid-settings" @import "neat/neat"
Visualizing your grid
Let’s start with something that you should be using from day one. Neat can show you a visual grid that makes it easier to “see” your designs and better spot opportunities for experimentation.
I’m definitely in the camp of people who advocate designing in the browser as soon as possible. Seeing the grid skeleton for your layout in the browser makes it a whole lot easier to leave other graphical design tools behind.
visual-grid
By default, Neat sets $ visual-grid to false. Jump into _grid-settings and change it to true so you can see it.
Sass:
$ visual-grid: true
The color you’ll see will be a bit different (I already tweaked that a bit) but it will show you the number of columns you’ve set via $ grid-columns, all within your outer containers.
visual-grid-index
If you already have some content which spans the full width of the outer container(s) on the page you might be surprised to see $ visual-grid take no effect. If this should happen, remember that the $ visual-grid-index is set to back by default, placing the grid behind your layout (which is, admittedly, a curious default).
SCSS:
$ visual-grid-index: back !default
If you want to see the visual grid displayed in front of the content on the page, just make this little change:
Sass:
$ visual-grid-index: front
visual-grid-color
If you’re unhappy with the default grid color you can change that too. It’s a good idea to choose a color that contrasts well with your design.
Sass:
$ visual-grid-color: black
visual-grid-opacity
If you’re unhappy with the default opacity of 40% you can also overrule that. I believe 0.4 is a good choice for a default, but every project is different.
Sass:
$ visual-grid-opacity: 0.2
grid-columns
If you think the default 12-column grid fails to give you the flexibility or structure you were looking for, you can change the default via this variable globally.
Let’s go through a couple of reasonable examples:
Sass:
$ grid-columns(6)
Sass:
$ grid-columns(16)
Sass:
$ grid-columns(4)
column
For this example we’ll have to take a step back for a minute. Neat’s grid system is based on the Golden Ratio, and we can change the relative width of a single grid column via this variable. Let’s look under the hood.
SCSS:
$ column: modular-scale(3, 1em, $ golden) !default;
Internally it uses the modular-scale function which I also described in an article about Bourbon’s various functions. Here it sets up the base value of 1em and makes every column as wide as 3 increments from that base value. Additionally, it locks the scale of choice to the Golden Ratio via $ golden.
I’ve never felt the need to tweak these settings, but you may well feel the need out of curiosity. You can choose from seventeen scale proportions which come with the library, or make up your own of course.
SCSS
$ golden: 1.618; $ minor-second: 1.067; $ major-second: 1.125; $ minor-third: 1.2; $ major-third: 1.25; $ perfect-fourth: 1.333; $ augmented-fourth: 1.414; $ perfect-fifth: 1.5; $ minor-sixth: 1.6; $ major-sixth: 1.667; $ minor-seventh: 1.778; $ major-seventh: 1.875; $ octave: 2; $ major-tenth: 2.5; $ major-eleventh: 2.667; $ major-twelfth: 3; $ double-octave: 4;
Note: Make sure you import Bourbon first, because the variables are defined there and not in Neat. Also, if you decide that you want to change the width of your column via a different variable for your modular scale you should not forget to change this unit in your gutters as well (more on this in the next section about gutter).
Let’s compare the different modular scales for a default 12-column grid. Not all of them result in sensible choices, but take a look and see if something appeals to you:
Sass:
$ column: modular-scale(3, 1em, $ golden) $ gutter: modular-scale(1, 1em, $ golden)
Sass:
$ column: modular-scale(3, 1em, $ minor-second) $ gutter: modular-scale(1, 1em, $ minor-second)
Sass:
$ column: modular-scale(3, 1em, $ major-second) $ gutter: modular-scale(1, 1em, $ major-second)
Sass:
$ column: modular-scale(3, 1em, $ minor-third) $ gutter: modular-scale(1, 1em, $ minor-third)
Sass:
$ column: modular-scale(3, 1em, $ major-third) $ gutter: modular-scale(1, 1em, $ major-third)
Using the default Golden Ratio is an absolute solid choice for people who just wanna move on.
For more information on scales and proportions take a look at How to Establish a Modular Typographic Scale.
gutter
This is pretty much the same idea as with column, except it sets the relative width of a single gutter (the space between each column) in your grid. To create a coherent grid system that has the Golden Ratio baked into every aspect, by default, gutter also uses $ golden to calculate the gutters.
SCSS:
$ gutter: modular-scale(1, 1em, $ golden) !default;
Let me visualize this for you; all the tomato colored stuff are gutters:
Note: If you decide that you want to change the width of your gutter via a different variable for your modular scale, you should not forget to change this unit for your columns as well.
Sass:
$ column: modular-scale(3, 1em, $ octave) $ gutter: modular-scale(1, 1em, $ octave)
max-width
This variable lets you change the size of your outer containers used by the outer-container mixin. By default this is set to 1088 pixels which is calculated to em out of the box.
Here’s the default max-width of 1088px:
Now let’s alter it to 400px.
Sass:
$ max-width: em(400)
This variable is certainly handy since the “standards” for how wide web pages are supposed to span are changing rapidly and long gone are the 960px days. Through access to this variable you have one central place where you can determine how much space your content can span.
default-feature
If you have read through my previous tutorials you might remember that for media queries I really like the use of the media mixin from Neat, combined with the additional convenient usage of the new-breakpoint function. I also mentioned that if you provide no media feature to your breakpoint pixel value it will default to min-width. Let me refresh your memeory:
Sass:
$ tablet: new-breakpoint(800px 6) .some-responsive-element +media(tablet) +span-columns(6)
Resultant CSS:
@media screen and (min-width: 800px) { .some-responsive-element { ... ... }
As you can see, providing no media-feature makes things super easy if you want min-width for setting breakpoints. If that default is messing with your Zen when dealing with media queries you can change that default as well.
Sass:
$ default-feature: max-width
border-box-sizing
By default this is set to true. Check out our free course Understanding the CSS Box Model if you need to get up to speed on what this does.
default-layout-direction
Through this variable your layout uses the default orientation of LTR (left-to-right). This can take only one of two options, RTL being the second. If you design for cultures which digest content from the opposite direction, this one will make you love Neat even more.
disable-warnings
If “excess deprecation” warnings are the sort of thing that make you want to hug their authors around the neck, you can mute these messages by setting the disable-warnings variable to true.
Sass:
$ disable-warnings: true
Final Thoughts
In my opinion, Neat is pretty hard to beat these days. And I just learned that Bourbon and Neat are used in the new U.S. Web Design Standards. Pretty darn cool!
However, if you still don’t like the idea of using this framework for your projects I’d like it if you’d share your reasons and maybe even write about it. I’d love to hear reasonable opposing opinions, or learn about better options to build lightweight semantic grids with Sass.
Thank you for reading!