Vitals is simply a bundle of two Sass tools for building modern, flexible websites: a normalize/reset and a flexbox-based grid layout system.
- IE 11
- Firefox 28+
- Chrome 44+
- Safari/iOS 10.1+
- Opera 31+
- Chrome for Android
- Firefox for Android
The normalize/reset is my own (smaller) spin on Normalize.css, and it is also available in pure CSS.
The goal is to be compatible with the most common browsers and versions currently in use. For example, older versions of IE (like 6-8) are intentionally not supported. Very few people use those versions, and if support for them is needed, I'm not interested in tackling that as it involves a lot of extra work for not much benefit.
I highly recommend combining Vitals Grid with the excellent Breakpoint library to create responsive grids.
How to use Vitals in your Sass project
If you grab both
_grid.scss and put them in the same directory
as the main file you're working on, you can use:
That's all you need in order to use the main part of Vitals. However, it also includes a few constants you can use in your own code:
$stdvgapis set to 1.125rem (18px in a typical browser). This controls the vertical rhythm.
$stdhgapis set to 1.25rem (20px in a typical browser). This is currently used only with blockquote and legend elements to calculate reasonable horizontal margins.
How to use Vitals Grid
Any class you write for elements that are to be grid containers must begin with:
From there, you can use the following mixins to tweak it:
// reverses the flow of cells in the grid (like LTR -> RTL) @include vg-reverse; // sets the vertical alignment of all cells within container @include vg-valign-top; @include vg-valign-middle; @include vg-valign-bottom;
Now that you have a container, let's make some cells to put in it. Put ONE of these in your cell classes:
// creates a cell 1/3 of the container's width including a gutter of the default size @include vg-cell(1/3); // creates a cell 2/3 of the container's width including a custom gutter size of 1rem @include vg-cell(2/3, 1rem); // creates a cell 1/4 of the container's width including no gutter @include vg-cell(1/4, 0);
Then, you can further tweak your cells using the following:
@include vg-cell-border; // adds border on all sides of default color and width @include vg-cell-border(size); // custom size, default color @include vg-cell-border(size, color); // custom size and color // overrides the vertical alignment setting for this cell only @include vg-cell-valign-top; @include vg-cell-valign-middle; @include vg-cell-valign-bottom;
Vitals Grid allows you to set your own defaults for the above mixins to use.
Before importing Vitals into your SCSS code, you may set the following variables to meet your needs.
$vg-gutter- default is 0.625rem (10px in a typical browser). Used in
$vg-border-width- default is 0.0625rem (1px in a typical browser). Used in
$vg-border-color- default is #666 (gray). Used in
About the grid layout system
At some point in my journey as a web dev, I came across Bootstrap like so many have. Then at a later date, I decided to see what else was out there, and decided I liked Foundation better. But as I started to look into using Sass, while Foundation had a Sass version, I came to find that there were some grid systems that were built primarily for Sass usage.
... like Bourbon Neat. I was about to adopt that as my own when I realized that it was a float-based grid like the Bootstrap and Foundation I had left behind. But I did appreciate its emphasis on semantics, and I wanted to hang onto that as I looked for a flexbox-based system.
So I found a project called Batch that implemented flexbox using Sass. It looked cool until I saw the unsemantic class names that resembled Bootstrap.
I figured surely it wouldn't take much to adapt Batch into something that would allow better semantics. So that's what I've done here.
Then Neat 2.0 came out and introduced me to the concept of a push-left grid being better than the old half-gutter grid I had originally written for Vitals. Because Neat is still sticking to a float-based grid, I adapted the push-left concept to flexbox to make the current Vitals Grid system.
You'll notice that there's no compiled version of the grid system. That's intentional; my entire purpose for making it was for it to be used with Sass to generate grid code for semantic CSS selectors. That's just not possible with pure CSS. So if you want a pure CSS flexbox grid system, check out Batch.
Is that it?
Yes, for now. I think there are some existing projects that adequately address their goals, such as:
I'll add to this list as I find other useful Sass projects.