Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

The Semantic Grid System: Page Layout For Tomorrow

CSS grid frameworks can make your life easier, but they’re not without their faults. Fortunately for us, modern techniques offer a new approach to constructing page layouts. But before getting to the solution, we must first understand the three seemingly insurmountable flaws currently affecting CSS grids.

Problems Link

Problem #1: They’re Not Semantic Link

The biggest complaint I’ve heard from purists since I created The 1KB CSS Grid1 two years ago is that CSS grid systems don’t allow for a proper separation of mark-up and presentation. Grid systems require that Web designers add .grid_x CSS classes to HTML elements, mixing presentational information with otherwise semantic mark-up.

Floated elements must also be cleared, often requiring unnecessary elements to be added to the page. This is illustrated by the “clearing” div that ships with 960.gs2:

<div class="grid_3">
	220
</div>
<div class="grid_9">
	700
</div>
<div class="clear"></div>

Problem #2: They’re Not Fluid Link

While CSS grids work well for fixed-width layouts, dealing with fluid percentages is trickier. While most grid systems do provide a fluid option, they break down when nested columns are introduced. In the 1KB CSS Grid example below, .grid_6 would normally be set to a width of 50%, while .grid_3 would typically be set to 25%.

But when .grid_3 appears inside of a .grid_6 cell, the percentages must be recalculated. While a typical grid system needs just 12 CSS rules to specify the widths of all 12 columns, a fluid grid would need 144 rules to allow for just one level of nesting: possible, but not very convenient.

<div class="column grid_6">
	<div class="row">
		<div class="column grid_3"> </div>
		<div class="column grid_3"> </div>
	</div>
</div>

Problem #3: They’re Not Responsive Link

Responsive Web design is the buzzword of the year. While new tools such as 1140 CSS Grid253 and Adapt.js264 are springing up that enable you to alter a page’s layout based on screen size or device type, an optimal solution has yet to arrive.

Blame It On The Tools Link

All three of these problems directly result from the limitations of our existing tools. CSS leaves us with the ultimatum of either compromising our principles by adding presentational classes to mark-up, or sticking to our guns and forgoing a grid system altogether. But, hey, we can’t do anything about it, right?

Well, not so fast. While we wait for browsers to add native CSS support5 for this flawed grid layout module6, a futuristic version of CSS is available today that’s already supported by every CSS-enabled browser: LESS CSS7.

screenshot8
LESS brings powerful new features to CSS.

LESS What? Link

You’ve probably heard of LESS but perhaps have never given it a try. Similar to SASS9, LESS is extends CSS by giving you the ability to use variables, perform operations and develop reusable mixins. Below are a few examples of what it can do.

Variables

Specify a value once, and then reuse it throughout the style sheet by defining variables.

// LESS
@color: #4D926F;

#header {
  color: @color;
}

The above example would compile as follows:

/* Compiled CSS */
#header {
  color: #4D926F;
}

Operations Link

Multiply, divide, add and subtract values and colors using operations.

// LESS
@border-width: 1px;

#header {
	border-left: @border-width * 3;
}

In this example, 1px is multiplied by 3 to yield the following:

/* Compiled CSS */
#header {
	border-left: 3px;
}

Mixins Link

Most powerful of all, mixins enable entire snippets of CSS to be reused. Simply include the class name of a mixin within another class. What’s more, LESS allows parameters to be passed into the mixin.

// LESS
.rounded(@radius) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

#header {
    .rounded(5px);
}

Verbose, browser-specific CSS3 properties demonstrate the benefit that mixins bring:

/* Compiled CSS */
#header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

Downsides to LESS Link

Having been skeptical of LESS at first, I’m now a strong advocate. LESS style sheets are concise and readable, and they encourage code to be reused. However, there are some potential downsides to be aware of:

  1. It has to be compiled. This is one extra step that you don’t have to worry about with vanilla CSS.
  2. Depending on how LESS documents are structured, the compiled CSS file might be slightly larger than the equivalent hand-crafted CSS file.

A Note on Compiling LESS Link

There are three approaches to compiling LESS style sheets into CSS:

  • Let the browser do the compiling.
    As its name suggests, LESS.js10 is written in JavaScript and can compile LESS into CSS directly in the user’s browser. While this method is convenient for development, using one of the next two methods before going into production would be best (because compiling in the browser can take a few hundred milliseconds).
  • Use a server-side compiler.
    LESS.js can also compile server-side with Node.js11, and it has been ported to several other sever-side languages.
  • Use a desktop app.
    LESS.app12 is a Mac app that compiles local files as they’re saved on your computer.

Introducing The Semantic Grid System Link

The innovations that LESS brings to CSS are the foundation for a powerful new approach to constructing page layouts. That approach is the The Semantic Grid System13. This new breed of CSS grid shines where the others fall short:

  1. It’s semantic;
  2. It can be either fixed or fluid;
  3. It’s responsive;
  4. It allows the number of columns, column widths and gutter widths to be modified instantly, directly in the style sheet.

screenshot14
The Semantic Grid System uses LESS CSS to offer a new approach to page layout.

Configuring the Grid Link

Sounds too good to be true? Here’s how it works.

First, import the semantic grid into your working LESS style sheet.

@import 'grid.less';

Next, define variables for the number of columns, and set the desired widths for the column and gutter. The values entered here will result in a 960-pixel grid system.

@columns: 12;
@column-width: 60;
@gutter-width: 20;

The grid is now configured and ready to be used for page layout.

Using the Grid Link

Now that the grid has been configured, consider two elements on an HTML page that you would like to lay out side by side.

<body>
	<article>Main</article>
	<section>Sidebar</section>
</body>

The side-by-side layout can be achieved by passing the desired number of grid units to the .column() mixin (which is defined in the grid.less file).

// LESS
@import 'grid.less';

@columns: 12;
@column-width: 60;
@gutter-width: 20;

article {
	.column(9);
}
section {
	.column(3);
}

The above LESS would be compiled to CSS as the following:

/* Compiled CSS */
article {
	display: inline;
	float: left;
	margin: 0px 10px;
	width: 700px;
}
section {
	display: inline;
	float: left;
	margin: 0px 10px;
	width: 220px;
}

This page15 demonstrates the result. What makes this approach so different is that it does away with ugly .grid_x classes in the mark-up. Instead, column widths are set directly in the style sheet, enabling a clean separation between declarative mark-up and presentational style sheets. (It’s called the semantic grid for a reason, after all.)

So, What’s Behind the Curtain? Link

For the curious among you, below are the mixins at the center of it all. Fortunately, these functions are hidden away in the grid.less file and need not ever be edited.

// Utility variable — you will never need to modify this
@_gridsystem-width: (@column-width*@columns) + (@gutter-width*@columns) * 1px;

// Set @total-width to 100% for a fluid layout
@total-width: @_gridsystem-width;

// The mixins
.row(@columns:@columns) {
   display: inline-block;
   overflow: hidden;
   width: @total-width*((@gutter-width + @_gridsystem-width)/@_gridsystem-width);
   margin: 0 @total-width*(((@gutter-width*.5)/@_gridsystem-width)*-1);
}
.column(@x,@columns:@columns) {
   display: inline;
   float: left;
   width: @total-width*((((@gutter-width+@column-width)*@x)-@gutter-width) / @_gridsystem-width);
   margin: 0 @total-width*((@gutter-width*.5)/@_gridsystem-width);
}

Fluid Layouts Link

The example above demonstrates a fixed pixel-based layout. But fluid percentage-based layouts are just as easy. To switch from pixels to percentages, simply add one variable:

// LESS
@total-width: 100%;

With no other changes, the compiled CSS then becomes this:

/* Compiled CSS */
article {
	display: inline;
	float: left;
	margin: 0px 1.04167%;
	width: 72.9167%;
}
section {
	display: inline;
	float: left;
	margin: 0px 1.04167%;
	width: 22.9167%;
}

This example16 shows how the percentages are dynamically calculated using LESS operations, which also applies to nested columns.

Responsive Layouts Link

No modern grid system would be complete unless we had the ability to adapt the layout of the page to the size of the user’s screen or device. With Semantic.gs, manipulating the grid using media queries couldn’t be any easier17:

article { .column(9); }
section { .column(3); }

@media screen and (max-width: 720px) {
	article { .column(12); }
	section { .column(12); }
}

Try It For Yourself Link

Just a couple of days ago Twitter released a project called Bootstrap18 which provides similar (but more limited) grid system built using LESS variable and mixins. The future of the CSS grid seems to be taking shape before us.

The Semantic Grid System delivers the best of both worlds: the power and convenience of a CSS grid and the ideal separation of mark-up and presentation. Download the grid19 for yourself, fork it on GitHub20, and let us know what you think!

21
Download the grid from Semantic.gs.

Further Reading Link

(al)

Footnotes Link

  1. 1 http://1kbgrid.com/
  2. 2 http://960.gs/
  3. 3 http://cssgrid.net/
  4. 4 http://adapt.960.gs/
  5. 5 http://www.netmagazine.com/features/future-css-layouts
  6. 6 http://www.markboulton.co.uk/journal/comments/rethinking-css-grids
  7. 7 http://lesscss.org/
  8. 8 http://lesscss.org/
  9. 9 http://sass-lang.com/docs/yardoc/file.INDENTED_SYNTAX.html
  10. 10 http://lesscss.org/
  11. 11 http://nodejs.org/
  12. 12 http://incident57.com/less/
  13. 13 http://semantic.gs/
  14. 14 http://semantic.gs/
  15. 15 http://semantic.gs/examples/fixed/fixed.html
  16. 16 http://semantic.gs/examples/fluid/fluid.html
  17. 17 http://semantic.gs/examples/responsive/responsive.html
  18. 18 http://twitter.github.com/bootstrap/
  19. 19 http://semantic.gs
  20. 20 https://github.com/twigkit/semantic.gs
  21. 21 http://semantic.gs
  22. 22 http://semantic.gs
  23. 23 http://lesscss.org
  24. 24 http://www.alistapart.com/articles/responsive-web-design/
  25. 25 http://cssgrid.net/
  26. 26 http://adapt.960.gs/
  27. 27 http://www.markboulton.co.uk/journal/comments/rethinking-css-grids
  28. 28 http://www.lukew.com/ff/entry.asp?1379
  29. 29 http://1kbgrid.com/
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement

Tyler Tate is a user interface designer at Vyre in London. He is the creator of the 1KB CSS Grid, and his latest venture is TwigKit.

  1. 1

    Nice! I’ve been working on something very similar for the last week or so. I’ll definitely update my system with a couple of ideas from semantic.gs. Thanks!

    0
  2. 2

    Personally i don’t use grids as i find them more time consuming & over complicated full of html & css i don’t need.

    I have tryed to use them don’t get me wrong i’m not a hater, they are just not for me.

    Others i know would argue how amazing they are, After reading through your article i like the way this works so i may try it out on a small project & see how i get on.

    Nice article.

    0
    • 3

      My opinion was identical to yours, until I sat down and really worked with a few different grids to find the one I liked best. Now that I’ve used them, I absolutely love using grids and find it way faster.

      0
  3. 4

    Wonderfull! I visit the semantic grid system website, and their entire styling is down, so much for good self advertising ey ;)

    But hey things like that happen.

    Personaly i’m not a big fan of al those css systems. I think it feels like i have to do basic things in a strange and odd way. And for somehow i get the feeling it’ll only take me longer.

    I mean, to create simple column layouts, either fixed or fluid i just use normal css and there is no thinkable layout i can’t create with normal css so it just can’t find a good reason to start with those systems…

    Maybe i’m missing the point or advantage?

    0
    • 5

      Maxime Lafontaine

      August 23, 2011 5:35 am

      They forgot to change “text/less” in the for their CSS which are compiled… That why their css does’nt work… The problem is not less in this case ;)

      0
      • 6

        Thanks for pointing that out, I’ve just made the correction.

        0
      • 7

        I know i didn’t bother me. Sometimes little problems occur everyone has them once in a while :)

        But it still was funny though, putting a good word out for a css grid system while the site of that system is lacking it’s complete styling was funny to see :)

        0
    • 8

      Chris Raymond

      August 23, 2011 6:23 am

      Alex, if you are doing simple sites with “one-off” design then you would probably not benefit much from grid systems.

      But, speaking from personal experience, when you develop multi-section content-heavy websites in a CMS, where the content providers may need many different column configurations and page templates, and have new content and page types arise over time, it is a LOT more efficient to use a grid css system to do the math for you, instead of having to do all the calculations for complex layouts for multiple page templates and new content types that arise as the site grows.

      0
      • 9

        This is an excellent point of delineation, Chris! For large sites with multiple devlopers working in concert with each other, or for sites that grow and change and morph over time, grid systems help unify coding styles and make sites more maintainable by a diverse set of programmers.

        But for a one-off site that doesn’t need to be responsive and will only have one developer… grids become less helpful.

        0
      • 10

        Hi Chris!

        I see your point. Fact is i work at lots of supersized online projects. Sometimes sites have multiple templates. But it’s in my believe, that even a xxl online site/project never has to need too many different templates, it kills the flow.

        So even for big projects i can’t imagine myself using like 10 templates or so.

        And the math… well the math to calculate a dozen of templates with different rows and columns etc etc is like elementry school for me so that’s no problem.

        BUT, i still get your point though.

        Allthough i don’t agree with Chris Ames under here, if you create descent code every other developer will understand it, that’s no reason to use a grid system in my opinion. Looking at the way gridsystems call the elements it maybe is even more complicated to work with more developers!

        BUT, again, i’ll give a grid system a shot when i have the time. I’m open for it but never could find a good reason, and still heard of any.

        Good luck to you all :)

        0
  4. 11

    Nice.
    I do use grid system for a series of Gov websites. They must have the same look and feel, but I can change the visual interface. With the grid system, it is so consistent.

    0
  5. 12

    Fernando de Sá López

    August 23, 2011 5:33 am

    Gran artículo!!! datos realmente significativos para la contrucción de web´s

    0
  6. 13

    Just a note about SASS… Yes originally (and definitely still supported) is the .sass extension, a much less verbose pattern which has variables / mixins / etc. and compiles to CSS.

    BUT… they now provide a .scss extension which is also a superset of CSS.

    AND… whether you’re using SASS, LESS, or pure CSS, it’s kind of independent of whether or not you’re using an off the shelf grid system or not.

    Just sayin ;)

    0
  7. 15

    I’m actually super excited about this.

    I don’t currently use grids, for the reasons outlined above. The non-semantic nature and tendency to overcomplicate things means I have often avoided using such systems.

    However, the ability to create semantic grids that can be fluid/fixed as well as responsive means we as web designers/developers can now go about utilising grids, without the pitfalls we may have been subject to before. Sounds like just the solution I’ve been looking for, and one that may convince me make the switch to grids.

    0
  8. 16

    Sass has also now moved to be much more like Less with its scss syntax (i.e. it attempts to be a superset of css).

    Also Susy is a Sass framework which attempts some of the same things as semantic.gs

    0
    • 17

      Steve, I think it’s great that there are 3 or 4 flavours of this idea (Less/Sass/Susy/Compass/etc) floating around out there. But sooner or later, you’re going to have to kick the kid out of the candy store and get some work done. It’s worth sticking your head up and looking around at what else is out there every so often; I generally make a disciplined effort every year or so. with occasional quick glances at the Hype-O-Meter in the interim.I’d been longing after Less for some time, but didn’t want to inject Ruby dependencies into a PHP-based workflow. Less.app, and its transparent background operation, fix that for me. Sure, (I assume) Ruby’s still there, but it’s packaged up into something else that looks just like something I’m used to managing anyway (a Mac app), and produces CSS output that browsers can’t tell from hand coding. It Just Works — at least for me.

      The nice thing about compiling down to standardised output (CSS, in this case) is that you can just pick up and change tools if the pain of using yours gets too high, or if The Competition brings out some killer feature you just have to have right now. That’s going to both make it easy for people to switch (or mix) tools, and motivate tool developers to keep improving. A definite win for us user-developers.

      1
  9. 18

    This is great. Tons of thanks!

    I have wished for an expression-based styling system for years. IE started with expression() but it lacked the power of variables. LESS solves so many problems that we face in CSS layouts. I wish W3C incorporates this in their standards so that compiling is not required.

    0
    • 19

      I agree with you. I think CSS supersets like LESS and SASS would make a great starting point for a new W3C CSS standard.

      0
  10. 20

    Interesting take on the grid. I’ve felt the same issue with the question of semantics and filling the HTML up with extra classes. This might be an interesting solution. Has also pushed me a little further towards actually trying out some of these CSS processors. I still write everything flat.

    0
    • 21

      Chris Raymond

      August 23, 2011 6:27 am

      Matt: I am reminded of a comment made by a presenter at An Event Apart a couple of years ago, to the effect that one can become so hung up on semantics that you remove all the tables from your house.

      It is always good to strive for semantic markup, but really, no one is going to give you an F if your markup includes a class of grid_X. Don’t sacrifice the good in search of the perfect! IMHO

      0
      • 22

        Excellent point! I’ve had thoughts like this myself. Might have to write a post about this sometime

        0
  11. 23

    So, do you guys think a grid system should have its base column width set with or without the gutter width included in it?

    Semantic.gs doesn’t include the gutter in the base column width, which makes for more complex calculations and requires you to set both gutter and column width when changing the layout.

    Pretty minor stuff, I know, but I’m trying to find the best solution for making a complex grid with multiple levels of nesting, without using any additional container elements. So I was wondering about all this. What do you guys think?

    0
  12. 25

    a tutorial how to use less-compiling with this node-thing and php woud be amazing for the html&css-only folks like me.

    0
  13. 26

    Stephen Tudor

    August 23, 2011 6:14 am

    I wasn’t aware there was a sidebar element (referenced in the CSS after article in all the examples) in HTML. Purely good-natured ribbing, though — great post!

    For those curious about Sass, semantic grids have been available for some time in the form of the Blueprint and 960.gs Compass plugins, but to my knowledge, this implementation goes a bit further to include fluid grid support. Fortunately, LESS code is easily ported to Sass, and vice-versa ;)

    I would also like to throw up a general caution flag since, while this might seem like CSS nirvana to us front-end devs at first, don’t forget that it will inevitably result in generated CSS in the end. Focusing too much on “semantic” classnames could easily end up bloating your CSS. Achieving the right balance between semantics and maintainability is up to you, but it’s a very difficult challenge in my view.

    0
    • 27

      Thanks for pointing out my (repeated) typo Stephen, it’s corrected now!

      While it’s true that in the Semantic Grid each column declaration will add 5 lines of compiled CSS to the compiled stylesheet, one has to remember that Semantic has an 0-line overhead of styles. In other words, only the declarations that are needed get compiled. On the other hand, the traditional 960.gs grid systems has 653 lines of CSS that the user has to download every time. So, in many cases, Semantic.gs will actually have a lighter footprint than traditional grids.

      0
      • 28

        Stephen Tudor

        August 25, 2011 5:17 am

        The Sass/Compass plugins for Blueprint and 960.gs are also implemented as mixins, and all the “non-semantic” classnames are optional. The 960 mixin counterpart of your .column(6) would be @include grid(6), and .row() would roughly equate to @include grids().

        I personally think it’s awesome to have multiple approaches to the same problem, because it lowers the barriers to more developers. I’ve been pretty impressed by the way InuitCSS handles its grid layouts, requiring no “first” or “last” constructs by using a clever negative-margin trick on the container.

        1
  14. 29

    Anthony Watts

    August 23, 2011 6:23 am

    I have been using something similar in Sass in my personal projects:

    https://github.com/watts/960sass
    https://github.com/ricardohsd/960sass (SCSS version by ricardohsd)

    It’s based on 960.gs but no where near as flexible as the example posted above. It might make a good starting point for someone though.

    0
  15. 30

    Guilherme Ventura

    August 23, 2011 6:52 am

    I like to use LESS, and this approach to the Grid System seems to be really awesome, but i don’t trust 100% on LESS because it have some dependences (for example: node.js and a .js file), anyone already has gotten a problem using LESS?

    Regards!

    0
    • 31

      If you’re on a Mac, use the Less app which compiles your .less files into .css whenever you save, no dependencies required.

      0
    • 33

      There’s also LessPHP, which compiles LESS serverside using (you guessed it) PHP. It can also cache the output so it serves up a static CSS file when there have been no changes to the imported LESS files.

      http://leafo.net/lessphp

      0
  16. 34

    Interesting article. I am also working in a project where I wrote a dynamic grid, http://axle.dalesande.com, is one part of the overall styleguide concept. Interested in your LESS solution to grids compared to mine. Thanks for posting.

    0
  17. 35

    One of the things I like about 1140gs is that it will reflow the columns down for mobile. In other words, at some point columns that are to the right will be reflowed under columns to the left.

    Is that possible here?

    0
  18. 37

    Be warned that LESS (and SASS) have more downsides. Here is an german article about the negative aspects of CSS frameworks: http://www.shiftedwork.de/blog/2010/09/09/uber-den-unsinn-von-css-frameworks/

    0
  19. 38

    Great article.
    Grids are for web designers the first rules to consider before starting work, and thanks to less to bringing us this fancy clever way to work with.
    Thanks

    0
  20. 39

    Charles Roper

    August 23, 2011 7:28 am

    This article could have done with some technical editing. Sass (SCSS syntax) has been a *true* superset of CSS for while now. Less is not a true superset. Lines like “Unlike other tools such as SASS and CleverCSS, which try to reinvent the CSS syntax” are not only factually incorrect but also misleading.

    Here is a comparison of Less/Sass: https://gist.github.com/674726

    Also, from the Sass homepage:

    “The new main syntax (as of Sass 3) is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.”

    0
    • 40

      I don’t have any grudge against SASS; LESS and SASS have a lot of similarities, and I think they both make a lot of sense. When first comparing CSS frameworks, however, I chose LESS because of it’s more native syntax, which of course SASS later adopted as well. Also, while the sentence structure is a bit ambiguous, I wasn’t implying that SASS *isn’t* a superset.

      0
      • 41

        Charles Roper

        August 24, 2011 3:53 am

        Ah, no worries. I came across as a bit sour, which I didn’t intend. Sorry. You’re doing great work here and CSS pre-processors need all the publicity they can get. Who knows, one day the ideas contained within them will be developed into standards.

        0
        • 42

          Thanks for understanding, and for pointing out the issue. We’ve changed the text to be much more favorable towards Sass, which it should have been in the beginning.

          By the way, I’d love to start offering Semantic.gs for multiple CSS frameworks including Sass. Hopefully I can get to it sometime in the near future.

          0

↑ Back to top