Recently I started to use a more minimally-responsive CSS framework called Neat, since I was unhappy with the total offerings of so many others. This article will explain how to start using the basics of Neat in order to better understand how the framework works before using it in projects.

Intro

Neat is a responsive, systematic grid framework composed of a default 12 columns layout. Since it is systematic, we no longer need to crowd our HTML with class names. Instead, we are able to put the layout logic directly inside of the stylesheet. In order to get away from using class names inside of the HTML, Neat utilizes SCSS.

Before we begin this article, you are expected to know what SCSS is, as well as how a grid framework works. In case you’re unfamiliar, you still could follow along after a brief into. SCSS is a CSS preprocessor I use to better write CSS. A CSS grid framework could be described as something similar to when web pages are typically laid out in tables using rows and columns. A table-based website would break out the page into rows and columns in order to achieve a table-based webpage. Obviously a grid framework has nothing to do with laying out the page in tables, but that was only a very rough description for a better understanding of what we are about to do.

Neat is based on a default 12 column system as mentioned earlier. The number 12 is easily changeable but it is a very typical column number across several frameworks, so changing it is usually not necessary for a standard desktop view. Later when we start using a mobile layout our columns will be changed to 4. However, for now let’s get started in explaining how to use Neat in your projects.

Syntax

Lets go over some syntax to help understand the layout code.

@content-container says that the container element will hold a 12 column system. It can be called as many times as you want, as long as it is not nested. It takes one variable to specify the width of the container that will hold your columns. Typically, I don’t specify anything here since it reads from the local variable $max-width that could be defaulted to another value.

@column-span As mentioned above content-container can’t be nested. So in order to break out the columns you would use @column-span on your nested child elements. For example, if you wanted 8 of the 12 columns, then @column-span(8) would give you that.

This also works for sub divs. For instance let’s say we have this jade file:

#container
  div.one
  div.two
    .inner
    .inner

Now what we want the to do is have the two .inner elements side-by-side inside of their div.two container.

We start by making one parent container that has the @content-container and then div.one and div.two both 6 in order to fill up the container of 12.

#container { @include content-container(); }
.one, .two { @include column-span(6); }
.two .inner { @include column-span(3 of 6); }

The above would generate the expected outcome of having the two .inner elements side-by-side both taking up equal space inside of .two.

@shift lets you move over a few columns. If you want to center an element inside of an container, here is what your jade snippet might look like:

.container
  .middle

Then using some basic math of 8+(2+2)=12 you can easily see that if we have two columns on each end, our middle element would be at max 8 in order to total up to 12. Let’s look at the SCSS:

.container { @include content-container(); }
.middle {
  @include shift(2);
  @include column-span(8);
}

In case that is still unclear, we first shift over 2 columns then make the .middle 8 columns and have a 12 column grid, thus centering the element. @Shift can take both a positive and negative number, with a negative number shifting from the opposite side.

Since this article is only a quick intro, I don’t plan to cover any more than the three most commonly used, the rest can be found on the Neat Docs. For a more detailed description and better visual learning, please visit their examples page.

Mobile

Mobile development is easily done inside of Neat. First off, all of the columns are percentage based, so depending on your designs, you might not need anything more. However, more often than not, a typical design looks quite a bit different from the standard size and might fit better on a smaller grid. In Neat that is not an issue, since we can simply specify a new grid size for each of the breakpoints. Let’s say you have a tablet screen size with an 8 column layout and a mobile screen size with a column layout of 4. In order to set up the tablet we could simply specify the size and columns with $tablet: new-breakpoint(min-width 720px 8). The new-breakpoint function returns a meta query that we are saving under the variable $tablet. We could now utilize the query as follows:

.box {
label {
	color: blue; /* Mobile */

	@include media($tablet) { /* Tablet */
		color: gray;
	}

            @include media($desktop) { /* Desktop */
                        color: purple;
            }
 }
}

That wraps up getting familiar with how Neat can be used, now let’s quickly go over adding it to your projects.

Setup

By now you should have a better understanding of how things work, and are ready to set up a project of your own. Here is what I like to do:

normalize.css /* Not Required */
bourbon
custom-neat-responsive-sizes /* Required only for mobile */
bitters /* Not Required */
neat

Bourbon is required by Neat since it builds upon it’s library of mixins. Bourbon is an extremely helpful mixin library that you will find useful in your stylesheets. Custom-neat-responsive-sizes is a SCSS that will hold any of your @new-breakpoints, just don’t forget to import neat/neat-helpers in that file, and bourbon first. This file can also hold any override variables that you might have for Neat, for example $max-width. As you noticed, I skipped over the two non required files since they are not important but are useful enough to mention. Normalize.css is used to standardize your elements across browsers. Bitters is a minimal-getting-started theme, it adds some basic formatting to your page for the popular elements. Plus the added benefit of including Bitters is that can fully utilize the Refills.

Conclusion

Neat will neatly layout your web page in a systematic grid framework. It is built on top of Bourbon and can handle your mobile designs. This article is intended to be a brief intro into the minimal world of Neat. Hopefully you have found it easy to learn, and this article has inspired to you to remove your bloated css framework for a cleaner approach.