Knowledge brings light

Semantic Grids

In case all this sounds new to you, Sass is a preprocessor for CSS that can help improve your CSS workflow tremendously. Bourbon is a set of mixins for Sass that enhances and extends Sass’s power. If you’re not familiar with Sass and Bourbon check out my previous article describing how to get set up with Sass and Bourbon in a few simple steps. Once you’ve gone through that, you should be ready to follow along and learn all about Neat.

Modular Approach

One of the objectives of the Bourbon framework is to keep things modular, so you don’t end up cluttering your code with features you don’t actually use. With this in mind, the makers of Bourbon released their Neat grid system as an optional add-on for Bourbon. They wanted a small and semantic grid system that could help with the majority of common layout tasks without being too opinionated.

The goal was to make something that you could take advantage of when you wanted it, and that would get out of your way when you didn’t. Neat can be included in a Bourbon project if you want it, but unless you make use of it, it won’t add anything to the compiled CSS you will end up serving to your visitors.

What is a Semantic Grid?

Semantic is a term that gets thrown around a lot in web development. For the purposes of Neat, what makes this grid system semantic is that it allows you to target your HTML elements based on the way they are named natively, and use them as they were intended to behave, keeping your markup clean.

A quick example might help.

Imagine you’re building a page that needs to display an article with an aside inside a section. You want to use the correct HTML elements, and you don’t want to have to clutter the page up with unnecessary classes or wrappers. You want the aside to stay positioned to the left of the article on a typical desktop display. You know you’ll want the flexibility to present the same elements in different ways on different devices as well.

You start with some simple HTML:

Highlighted information

This is the content of the article

Without any CSS, this is going to put the aside content at the top, followed immediately by the article. To make the presentation use a grid layout, you need to target the appropriate elements with Neat’s grid classes. You define the section element as a container, and then establish the number of columns (out of 12 by default) to allocate for its children (the aside and the article).

@import bourbon/bourbon @import neat/neat section { @include outer-container; aside { @include span-columns(3); } article { @include span-columns(9); } }

This all works seamlessly with any of your usual Sass and Bourbon conventions, and all the classes and CSS selectors you might prefer to use. So if you want to make this happen only for section elements that have a particular class, Neat does its job and gets out of your way. So for the following HTML:

Related video
GridVine: Building Internet-Scale Semantic Overlay Networks
GridVine: Building Internet-Scale Semantic Overlay Networks
06. Core UI - using Semantic UI for HTML/CSS Grid and more
06. Core UI - using Semantic UI for HTML/CSS Grid and more
Semantic Grid: A love match? or A marriage of convenience?
Semantic Grid: A love match? or A marriage of convenience?
Grid Resource Management: On-demand Provisioning, Advance Reservation, and Capacity Planning of Grid Resources (Lecture Notes in Computer Science / Theoretical Computer Science and General Issues)
Book (Springer)
CoffeeCup Responsive Layout Maker [Download]
Digital Software
  • Multiple Configurable Grid Systems: Multiple Configurable Grid Systems Layout Maker comes with a growing number of integrated grid systems, including the Bootstrap...
  • Drag-n-Drop Content Blocks: Drag-n-Drop Content BlocksDesign from the content out and tailor layouts around unique content and business needs. Add anything from...
  • Clean CSS + Semantic HTML: Clean CSS - Semantic HTML No superfluous machine-generated code here. Specify your own classes & IDs, assign semantic tags, and more...
  • Custom Layout Designs: Custom Layout Designs Add rows and content containers with a simple click. Toggle column spans, stretch rows, or constrain their widths. You...
Interesting facts
Related Posts