The Semantic Grid System: Page Layout For Tomorrow

Advertisement

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

Problem #1: They’re Not Semantic

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

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

Responsive Web design is the buzzword of the year. While new tools such as 1140 CSS Grid263 and Adapt.js274 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

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?

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

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

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

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

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

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

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

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?

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

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

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

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

(al)

Footnotes

  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://fadeyev.net/2010/06/19/lessjs-will-obsolete-css/
  25. 25 http://www.alistapart.com/articles/responsive-web-design/
  26. 26 http://cssgrid.net/
  27. 27 http://adapt.960.gs/
  28. 28 http://www.markboulton.co.uk/journal/comments/rethinking-css-grids
  29. 29 http://www.lukew.com/ff/entry.asp?1379
  30. 30 http://1kbgrid.com/

↑ Back to top Tweet itShare on Facebook

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.

Advertisement
  1. 1

    Is there any smart way to “push” and “pull” like in for example the 960 grid system?

    0
    • 52

      Not currently, but if enough people want it it could be added.

      0
      • 103

        What might be some ways forward for the push and pull classes in a responsive design?

        0
      • 154

        I think zurb foundation does something like this to move columns around without changeing markup order. I made the following changes to my semantic.gs grid file (using scss) and it seams to work just fine, any other ideas?

        @mixin push($offset:1) {
        left: $total-width*((($gutter-width+$column-width)*$offset) / gridsystem-width($columns)) + $total-width*(($gutter-width*.5)/gridsystem-width($columns));
        position:relative;
        }
        @mixin pull($offset:1) {
        right: $total-width*((($gutter-width+$column-width)*$offset) / gridsystem-width($columns)) + $total-width*(($gutter-width*.5)/gridsystem-width($columns));
        position: relative;
        }

        0
  2. 205

    Nice work Tyler, great use of LESS.

    One thing I would change, as much as I love it is the overflow: hidden clearfix method. It works in a lot of instances, but for example, it clips box-shadow among other things, so you’d need to add either margin or padding to compensate.

    For an example, add a box-shadow to footer div in the example that ships from your github repo, you’ll notice it clips the top and bottom shadow.

    0
  3. 256

    So, if I unterstand well, it’s HTML 5 ?
    What about SEO (in terms of search engine understanding), are spiders able to understand the layout well ?
    Thanks (sorry, i’m french)

    0
    • 307

      The examples I gave here use HTML5 tags but Semantic.gs is independent of doctype. It works just as well with XHTML.

      0
  4. 358

    I’m pretty fascinated by this idea! I started working with LESS recently and this grid systems seems great since you are not forced into some system but can kind of create your own!

    However, I’ve got one question concerning the compatibility (especially IE of course). I tested the samples on semantic.gs with IE7 and IE6. Due to some rounding issues I guess the float doesn’t work proberly on every browser-width. Sometimes the last column breaks into a new row.

    Is that a known issue and does any workaround exist for that?
    I can skip support for IE6 maybe but not for IE7 yet.

    Any comments on that are very much appreciated!

    0
  5. 409

    Am I alone in wanting to position my content on a more individual basis rather than sticking to a grid layout?

    It may not be as transferable as grid layouts/templates but having a main layout which you can then add id’s/classes to in order to tweak positioning in the CSS makes sense to me. It doesn’t feel as restricted.

    0
    • 460

      I don’t think you fully understand Grids with statements like this. Grids are design 101 and have been firmly established and accepted within the profession since at least the 50’s. Grids do not equal templates. The grid (columns and baseline) is only there to to help facilitate the logical placement of elements and to ensure consistency among pages. You can change content placement page to page if you desire. When used right it should never feel restrictive.

      0
      • 511

        I have to disagree, though accepted it isn’t as if grids are something 99%of designers use is it? Grids are restrictive in that they define borders and fixed layouts.

        I can understand their advantages but don’t think the downfalls should be overlooked. I think it may be just preference rather than an actual major disadvantage though.

        0
        • 562

          Hmm? In my 14 years working in the industry, I’ve yet to meet a single web designer (or should I clarify…a “qualified” web designer) that doesn’t start with a grid.

          0
          • 613

            I know plenty, ranging from 3-15 years exp which I would class as qualified, that don’t use grids. Out of the ones that do, the majority seem to only use them for Photoshop mockups.

            As somebody who has never really used grids I’m trying to figure out for what projects they would suit.

            0
        • 664

          There are no limits to grids. You can place an element on a site using grids and have it ignore the grid. But you have to be aware of the layout problems that might cause, grid or no grid.

          IMHO Doing a layout without thinking about a grid is like design without colour theory. Yes you might end up with the same results either way but why not understand some of the rules behind it.

          Grids are not restrictive!

          0
        • 715

          Grids are not restrictive in the slightest. That’s a bit like saying understanding typography would restrict you from creating something completely typographically unique.

          I would recommend searching out and reading up on some of the classic graphic design books on grid designs, there’s a few that come highly recommended.

          0
    • 766

      The question is, James, how happy are the designers with the grid-free layouts/templates turned out by those qualified developers?

      I’ve met and worked with many eminently qualified developers with years of experience who take a Photoshop mock and turn it into an abomination. (Not that I agree with the workflow that has a designer piddling with a Photoshop mock and then handing it to someone else for HTML & CSS, but I acknowledge it’s quite common.)

      I can’t figure out if they just literally can’t see the difference, or what…?

      But I feel strongly that if a designer has used a consistent grid and baseline in his/her designs, the front end dev should reproduce and enforce that grid in the CSS. The CSS should accurately reflect the architecture of the design and the grid system is that architecture.

      You’re right that there were lots of web designers who didn’t use grids on the web. In the past I viewed that as a technical limitation. If they were truly qualified designers (web or no) they knew about grids and would have liked to use them. If they are still not using them, well, they may just not realize that it’s now technically feasible to actually implement them on the web. We get into habits. I don’t see any excuse for ignoring grids on the web these days, however, though there are many, many different ways to implement them.

      0
  6. 817

    Can someone please convert this to .scss style?

    0
    • 868

      Here you go.

      // Defaults which you can freely override
      $column-width: 60;
      $gutter-width: 20;
      $columns: 12;

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

      // Set $total-width to 100% for a fluid layout //Set to $_gridsystem-width if you want standard fixed grid
      $total-width: 100%;

      body {
      width: 100%;
      float: left; }

      @mixin 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); }

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

      0
  7. 970

    for those coding in a .NET environment, phil haack made a t4 template for transforming less css into plain ol’ css: http://haacked.com/archive/2009/12/02/t4-template-for-less-css.aspx. this is actually a build-time step so it is not done on the fly, and even uses YUI compressor to compress the output CSS :-)

    also, there is a .NET implementation of less (surprisingly called .LESS), this uses a HttpHandler to generate the CSS on the fly (rather than spit out files at build-time as with Haack’s implementation). This can be found here http://www.dotlesscss.org/

    Hope that’s helpful

    0
    • 1021

      There’s now a Windows equivalent of Mac’s LESS.app here: http://winless.org. You install it, add folders with .less files to watch, then go on editing and saving your .less files. As soon as you save your edits, it automatically compiles the .less files that have changed and output the .css files in the same directory. Awesome!

      0
  8. 1072

    I’ve played with SASS (the .scss variant) a bit. I’d love to see a comparison of SASS and LESS beyond just the syntax: things like how robust is is, how fast the engine is, how actively it’s being developed, how big the developer community is, etc.

    0
  9. 1123

    I love it. I came up with a similar idea about a year ago. Responsive is the next logical step. (My original article, which was linked to from smashing mag since nettuts is a partner: http://net.tutsplus.com/tutorials/php/how-to-squeeze-the-most-out-of-less/).

    0
  10. 1174

    Congrats on great framework. Was there a special reason why you used overflow:hidden trick instead of clearfix in your framework?

    0
  11. 1225

    This is amazing. This is going to change the way we work with stylesheets and how we create pages. The only thing keeping me off grids was lack of proper semantics. I am excited to try this out in my next project.

    0
  12. 1276

    sandro (Guave Studios)

    August 28, 2011 11:43 pm

    Ever heard of GoldenGrid? (http://goldengridsystem.com/). It’s also a responsive grid system

    0
  13. 1327

    In my 8 years I’ve met many who don’t, many who do and many who vary depending on project.

    0
  14. 1378

    I think this is a really cool concept. I’ll certainly be re-reading this and experimenting with it.

    But I have to bring this to the conversation — I think that the notion that there is only one kind of “semantic” is deeply flawed.

    Martin Sutherland (http://sunpig.com/martin/archives/2011/06/25/oocss-and-html-semantics.html) broke out semantics as follows:

    * Structural semantics are represented by the core HTML elements that define the document outline.

    * Ontological semantics are layers of domain-specific meaning that add information about what a piece of structural markup is in the world beyond the document outline.

    * Visual semantics represent the intent but not the implementation of the visual hierarchy of a document.

    Think about this for a moment. Your article may be your main content and it be 9 grid spans wide. But it’s not 9 grid spans wide because it’s an article. Two different things are being addressed. Eliminating my layout logic’s dependency on my structural and ontological semantics actually gave me the freedom to write markup while thinking of nothing other than semantics.

    It’s a way of conceptualizing semantics that I concede is not terribly popular. I find it persuasive, YMMV.

    It’s true that this semantic grid system provides the same freedom. Yet, there are related, completely pragmatic issues. One possible negative side effect of LESS grids–this new idea or the approach of using a grid framework’s classes as a LESS mixins–is the amount of bloat it can introduce.

    This barely matters on a small scale site. And, yes, there are ways to write your LESS to prevent it (though you can’t use lots of the neat LESS syntax & features that way). But on a large scale site the increase through grid-related property repetition could be exponential, and keeping it DRY arguably results in less maintainable CSS.

    Writing plain old CSS classes into a grid system that addresses the visual semantics and abstracts the design of your site into a site-specific framework does not have this problem, however. As a tactic, it may have other problems, but I personally no longer think semantics is one of those problems.

    0
  15. 1429

    I had a look a less a few days ago and was not totally convinced.

    I haven’t read all the comments above, but given Less is Javascript, does it work if the client does not have Javascript or if the user has disabled Javascript?

    I’d consider there may be issues if the Javascript relies on being able to run on all systems.

    If the device does not allow media queries what happens then?

    Has anyone looked at these issues? What were the outcomes.
    I’m always ready to look at something tried and tested!

    best regards,
    Bill W

    0
    • 1480

      You can use a server-side compiler. Implementations exist in PHP, Node.js, and .NET.

      You can also use a desktop app to compile and push out the compiled CSS rather than LESS.

      It is not at all advisable to use the less.js implementation as client side JavaScript on a production site.

      0
  16. 1531

    I’m a big fan of my CSS in PHP. I just write the header to echo as CSS, then create a CSS file as PHP. I put all my vars in an include, then echo the vars in the PHP CSS. This is all server side, and in a lang that everyone already knows so it is easy for anyone to make changes. 

    0
    • 1582

      I agree that this way has merit, although I would disagree that all front-end developers know PHP (although the same could be said for the learning curve of SASS or LESS). One of the things I liked about PHP CSS was that I could add dynamic background images into the mix, for example generating an icon in a different colourway to match a theme’s $color variable (caching the generated images rather than running GD every time the stylesheet was requested).

      0
  17. 1633

    The real beauty of this LESS.js solution is the fact that it uses localStorage to cache the parsed style sheet. So the first hit to the Web site may be a bit ‘slow’, but from then on out it should be as fast as a regular style sheet.

    0
  18. 1684

    I cant get this to work. I think the guide on the semantic.gs page is very thin. They reference a screen.less file in their setup, but such a file doesnt even exist when you download the grid. I replaced it with a fixed.less and from that imported the grid.less, but it doesnt want to work for me.

    When checking the page in firebug, the .less files are read in and the js also, but I get a below it in firebug. It just contains some css, but I cant see any error messages on the page.

    I´m sure this works just fine, it would just be nice to have a little more help to get started with for those of us that arent very well versed in these matters.

    0
    • 1735

      …I get a style with the id of less:error-message that is. I was pasting the code but It didnt come through in my post.

      0
  19. 1786

    There’s a typo right under “LESS what?” header: ” Similar to SASS, LESS _is_ extends CSS “

    0
  20. 1837

    Why the CSS produced by .column() define “display:inline”? a floated element by definition is display:block

    0
  21. 1939

    If you’re using Dreamweaver on Windows to code your websites, there’s a free (donation-ware) plugin that will directly compile your .less files into pure CSS!

    It’s available on the Adobe Exchange:

    http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=2692522

    0
  22. 1990

    “It’s not necessary to insert an extra element or add a .clearfix class to clear floating columns.”

    I still need to add stupid tags in order to get background colors added for #maincoloumn, #boxes etc.

    What am I missing?

    0
    • 2041

      Another question, can I use negative margins with this Grid System? I am guessing not unless I can incorporate into the Grid formula/mixin code.

      0
  23. 2092

    A few comments and questions:

    1 – The response version is not working on IE 6 – 8.
    IE 6-8 does not recognize Media Queries. Two solutions:
    http://code.google.com/p/css3-mediaqueries-js/
    https://github.com/scottjehl/Respond

    2 – Is it possible to define the following:
    Around fixed 1180px width for devices with 1280px or higher;
    Around 920px for devices with 980px to 1180px width;
    Fluid for devices with width less then 980px.
    I have seen this approach.

    3 – Is it possible to have header and footer 100% width?
    However, I would like their contents to follow (2).

    4 – For IE with Javascript disabled is it possible to use a 980px version by default?

    5 – How do setup the font sizes, image and video?
    By not defining their height and width?

    6 – Consider the main area is 10 columns of 60px.
    Inside I need to display a grid (4 columns) of images.
    How would you do this?

    For the past few weeks I have been reading a lot about Responsive Design and trying most grids available.

    However, some have a lot in the HTML and it is not easy to set specific designs.

    I am trying to figure what can be done with Semantic Grid.

    Thank You,
    Miguel

    0
    • 2143

      1 – Another option is IE6-8 just don’t get a responsive design.
      2 – This is possible with different styles for different media queries
      3 – This system doesn’t allow for mix of % and PX units. You could have two separate systems for the fluid elements and fixed elements. But one semantic grid can’t handle both.
      4 – All media queries should always have a default option.
      5 – You don’t have to apply your grid system to all elements. If you need your video a specific width just put it in a parent grid element.
      6 – All the instructions are above. Check this out if you want an easy way to plan out your grid http://grids.heroku.com/

      0
  24. 2194

    I’ll probably dig into Less some time in the future but I feel very ambivalent about using such a system. It’s way too easy to generate bloated code at the cost of the user.
    It clearly can do wonders for organizing on the dev side though, so my stance currently is: first learn to write good, optimized reusable code then maybe see where something like Less or Sass can help out.

    And don’t we have html for semantics? It doesn’t belong in visual design implementation. I want styles that are modular, reusable and extensible. I’ve seen classes like “.biography”. Great, now a sidebar must get the same styling and reusing that class becomes a problem. Classnames are almost always only interpreted by other developers. Styling classes should have classnames that reflect the function of the visual design, not the meaning of its content.

    end of rant, sorry about that ;-)

    0
    • 2245

      this is exactly where Less or Sass can help out, by writing a very good ‘common’ grid-selector, and then using the properties of that one where you need them in your semantic classnames. And use the semantic classes in your layout.. Best of both worlds kinda approach.. it’s grid-based, but the html doesn’t reflect it..

      0
  25. 2296

    hello
    usefull tool. thank you.

    could you explain me the meaning of this syntax ?

    .row(@columns:@columns) { …
    and
    .column(@x,@columns:@columns) { …

    thanks

    0
  26. 2347

    Cool system…just wondering what you recommend as the best way to offset columns to achieve something similar to http://960.gs/demo.html?

    0
    • 2398

      semantic.gs has a .offset method so just add .offset(3) (or whatever column offset you want)

      0
  27. 2449

    Jean-Philippe Encausse

    October 28, 2011 8:11 am

    Hope that Bootstrap will sooner add fluid grid layout to it’s framework. Current version to not allow 100% width ;-(

    0
  28. 2500

    Semantic, responsive, customizable by columns, uses Sass and Less: http://framelessgrid.com/

    This is a massively awesome grid system IMO.

    0
  29. 2551

    Wanted to thank you for the article. I have been toying with the idea of using a grid system and had decided upon 1kb when finding this. A friend had previously mentioned less and sass, this is a great time to jump in!

    0
  30. 2602

    It’s my first trying LESS and it rocks!

    So the first problem I run was when I imported “less-1.2.0.min.js” it showed me the error “a.extract[1] is undefined”, but some clever people found a quick solution that adding “js/less-1.1.3.min.js” solves the problem. So done that and it works.

    So just wanted to be sure that everything that I did in a simplest form in the head section os 100% correct:

    [meta charset=”utf-8″]
    [title]Framework for the future[/title]
    [link rel=”stylesheet/less” type=”text/css” href=”css/reset.css”]
    [link rel=”stylesheet/less” type=”text/css” href=”css/style.less”]
    [script src=”js/less-1.1.3.min.js” type=”text/javascript”][/script]

    One thing that intrigues me is when I type rel=”stylesheet/css” to the reset.css it actually does not apply. How come? It’s not a .less, but a regular css file. I also tried to include it in my styles.less as @import ‘reset.css’, bot does not work. So I guess what I have in my head section is perfectly ok, right?

    0
  31. 2653

    “So the first problem I run was when I imported “less-1.2.0.min.js” it showed me the error “a.extract[1] is undefined”, but some clever people found a quick solution that adding “js/less-1.1.3.min.js” solves the problem. So done that and it works.”

    I also encountered this problem and calling 1.1.3 instead of 1.2.0 which removed the error but properties i type in my .less file are being ignored nonetheless. any help appreciated. thanks.

    0
    • 2704

      Still trying to figure this out. I put in a test code to see if LESS works [ body {background: #000} ] and it doesn’t. I realize the renaming of 1.2.0 to 1.1.3 doesn’t really do anything removing the [ @import “grid.less”; ] actually enables the bgcolor change.

      Did a couple more tests and erased and retyped the @import line a couple of times, one of which managed to type @include instead and that seems to have done the job, so I suggest you guys having this same trouble try that :)

      If anybody finds a reason why I should avoid using @include “grid.less”; instead of @import “grid.less”; kindly let us know :D Thanks guys

      0
      • 2755

        Ended up using version 1.1.3 instead which comes with the semantic grid system instead of using the newest 1.2.0 from lesscss.org, i don’t experience the problem using @import with this one.

        0
  32. 2806

    First time I’m thinking to use grid framework after reading this.

    0
  33. 2857

    I m wondering, if a vertical center for less high div layouts would work. First try with jquery did smash the layout. Any experiences on that?

    0
  34. 2908

    I’m interested in using this semantic features with Bootstrap. Do you know how should I start? What should I mix from SemanticGrid? Thanks

    0
  35. 2959

    This grid is 12 columns AND 12 gutters. I prefer 12 columns and 11 gutters. Or if you want x columns and x-1 gutters. Has the benefit that the center point is in the middle of the gutter between your two centermost columns. What do you think?

    See also in this context: http://modulargrid.org/

    0
  36. 3010

    I’ve just been playing around with this. It’s an elegant solution – smart thinking. I really like the way you’ve got nested columns to work on flexible grids. Great work!

    I’ve been doing some work myself on complex responsive grids: http://www.benhayes.com/2012/06/css-sleeping-columns-in-responsive-layouts/ (but without a CSS pre-processor). So I thought I’d try using your system with the same layouts.

    I have to admit I do tend to agree with Sebastian above, that 12 columns and 11 gutters works a bit better. By adding the external margins separately, you can define them as equal to 1 gutter width, which looks a bit more balanced to me, especially at narrower screen widths where the layout comes right to the edge of the browser window.

    Is there a way your Semantic grid system can be made to work in this way?

    0
  37. 3061

    Can someone please explain or provide a reference on how to adapt semantic.gs for SCSS?

    Specifically, I’m unsure of how to reference the following in my .scss file. I’m also wondering if the js file is still necessary since I’m using compass to compile the final CSS file.

    And for folks using SASS: Do you prefer Semantic over Susy?

    /*My column and gutter definitions*/
    $column-width: 60;
    $gutter-width: 20;
    $columns: 12;


    /*My best guess that seems to be causing an error*/

    header {
    $column(12);
    background-color: $white;
    text-align:center;
    margin: 60px 0 60px 0;
    }
    article {
    $column(8);
    border: 1px dotted $green;
    }
    section {
    $column(4);
    background-color: $white;
    }

    0
  38. 3112

    Push() and Pull() only add margins to the columns. In Zurbs Foundation Grid it is possible to move columns around If you want the order of your markup to not necessarily be the same as the order items are flowed into the grid. Making this changes to semantic.gs (using scss in my case) seams to emulate that… tested on IE8+:

    @mixin push($offset:1) {
    left: $total-width*((($gutter-width+$column-width)*$offset) / gridsystem-width($columns)) + $total-width*(($gutter-width*.5)/gridsystem-width($columns));
    position:relative;
    }
    @mixin pull($offset:1) {
    right: $total-width*((($gutter-width+$column-width)*$offset) / gridsystem-width($columns)) + $total-width*(($gutter-width*.5)/gridsystem-width($columns));
    position: relative;
    }

    is this a good approach?

    0
  39. 3163

    Good article.

    But I’d disagree with the author on the “semantic” markup thing. The markup still makes sense and is 100% semantic even if we use classes like ‘grid_xx’. ClassNames have no role to play in determining the semantics (unless they are standardized like Microformats).

    0
    • 3214

      It’s okay if you prefer using classes which specifically invoke presentational styling. No one is going to confiscate your website for using non-semantic markup. However, you can’t claim that using <div>’s and <span>’s for no purpose other than formatting is semantic just because the the formatting is specified by classes and id’s. The point is that the <div>’s and <span>’s serve no semantic function in the DOM. That’s why Bootstrap isn’t semantic. You can argue about whether or not that’s a Bad Thing, but the meaning of “semantic” is not a matter of personal opinion.

      0

↑ Back to top