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 topShare on Twitter

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.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  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!

  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.

    • 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.

  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?

    • 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 ;)

      • 6

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

      • 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 :)

    • 8

      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.

      • 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.

      • 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 :)

  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.

  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

  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 ;)

  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.

  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

    • 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.

  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.

    • 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.

  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.

    • 21

      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

      • 22

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

  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?

  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.

  13. 26

    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.

    • 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.

      • 28

        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.

  14. 29

    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.

  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!

  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.

  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?

  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/

  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

  20. 39

    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.”

    • 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.

      • 41

        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.

        • 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.

  21. 43

    Hi Tyler,

    great article I’m looking forward to start testing this out.

    I’m pretty sure this has something to do with a local setting but I can’t seem to find the reason, I keep getting this error message and the CSS is not being compiled:

    “Access to restricted URI denied”

    My guess is that it has something to do with type=”text/less”

    do I need to put the sample files on a web server even to work on client side compiling?

    • 44

      I was having the same issue, however moving the html file to the root directory fixed it.
      Move whichever example html file you are using into the folder that contains the css & js folders and then update your links in the corresponding .less file.

      • 45

        Hi rgudinho,

        I’ve been struggling with this one (and am dangerously close to abandoning LESS altogether as a result).

        The location of the .less and JS file don’t seem to matter as an “Access to restricted URI denied” error appears, regardless of the paths to these files.

        Did you ever figure this one out?

        Any input or direction would be greatly appreciated.

        Tyler

        • 46

          Ok, worked it out, FINANLLY!!

          Had to put the html file in the root directory as John says, but also had to add the LESS file there too and change the @import file paths in that file.

          @import ‘stylesheets/reset.css';
          @import ‘stylesheets/demo.css';
          @import ‘stylesheets/less/grid.less';

  22. 48

    great remake folks, thanks for staying ‘smashing’ ;)

  23. 49

    I’m surprised to see Compass mentioned only once, and in the comments at that. While LESS is aimed at a much wider audience(since it can be compiled by a multitude of ways using js) Compass is still a very powerful framework(not to mention with the advent of the web dev frameworks for static sites like http://staticmatic.rubyforge.org/ -HAML templating for web designers) — it supports a multitude of other frameworks: https://github.com/chriseppstein/compass/wiki/Compass-Plugins, from blueprint, 960, and yes, Less too.

    As mentioned above, SASS also has the alternative SCSS syntax for those hesitant to switch to none-curly-brace syntax :)

    In any case, it was a good read, especially the fluid layouts part. Some of the leading grid-layouts today still feels hard to play around with when going the fluid/responsive layout way.

  24. 50

    “Susy”:http://susy.oddbird.net/ for Sass / Compass does the same thing, but there is no mention of it here. Were you not aware of that project? If you referenced Susy, I think some credit should be attributed to its creators. The similarities are rather striking.

    • 51

      I wasn’t aware of Compass for Sass until after the article was published (haven’t used Sass before). But you’re right, we should add a link to it in the article.

      • 52

        It’s a peculiar oversight to be in this line of work and not be aware of Compass/SASS! :)

        Until last year, I was also working with a similar approach with LESS (see slides http://vimeo.com/12705263) – before SASS 3 introduced scss. Since then (perhaps until Twitter Bootstrap reintroduced LESS as a contender?) there has been a lot more activity and adoption around SASS.

        I know things change fast on the web, and Sematic/Less could end up surpassing Compass/SASS, but I would advise folks to look at the documentation on http://compass-style.org/ before deciding on a framework.

  25. 53

    I will def give this a shot on my next project. Thanks!

  26. 54

    And what happens when js is disabled?

    • 55

      i played around with lessphp and now it works. i don’t like to depend on js layoutwise.
      the problem: there are some differences between less.js and lessphp. but it seems it is possible to realize an lessphp version of semantic.gs.
      you need to change an “,” against “;” so seperate values for instance. but there seems to be some more problems. im an less.js novice…so maybe some of the experiencend guys likes to transfer semantic.gs to an lessphp-version ?

      • 56

        LessPHP is getting closer to less.js all the time, so I don’t foresee that being a problem as it evolves. I’ve just implemented a Semantic.gs fluid layout with the latest lessphp without any problem.

      • 57

        When I discovered SASS last year, I used phalmp for the same reason (SASS to avoid the dependency on JS which came with LESS, and PHP because we were on Windows and didn’t want to try and install Ruby) and found it to be really buggy. In the end I could only use a very little of what SASS had to offer, which was disappointing, and other developers were angry about having to wait for the recompile to happen. Technology moves on and things improve, but having been burnt by this experience I would not be in a hurry to use any compiler except the original one used by the language’s creators.

  27. 58

    Just to mention… a proper fluid grid system for http://goldengridsystem.com

    • 59

      +1 GGS is a brilliant grid system (also uses LESS)… the way it “folds”, uses box-sizing: border-box, and a zoomable baseline makes it well worth a look for anyone digging into fluid/flexible grids.

  28. 60

    If you’ve built a responsive layout before, then you know how complex the grid can get. This will save me a lot of time in the future. Thanks!

  29. 61

    Fantastic, great use of LESS.

    I’ve also made a little set of LESS tools for responsive/fluid layouts. Takes the maths out of it all! https://github.com/paulmist/responsive.less

  30. 62

    My concern about responsive layout is, what happens to the content? if div of e.g. 400x100px with 1500 characters inside will be downgraded to a 50x125px dimension div than the 1500 characters won’t pass in those fields. I think responsive layouts must used far more carefully not just only with css, the content must be sized for different devices as well. This is a far more complex task than just editing some line of css.

    my 2 cents

  31. 63

    Hey, thanks for this article.. Looks interesting. I just wonder what would happen once you have attached styles to the element tags e.g. In your example what would happen if I nested an article in another article, or in a sidebar? Doesn’t it require me to be more careful about how I define my markup?

    • 64

      My CSS selectors were very concise in the examples. Realistically, the article and section elements would often need a class or ID so that styles aren’t accidentally applied more broadly than intended.

      • 65

        I’ve created a SASS script that does the same but allows you to pass in padding and border of the element you want to conform to the grid. Using your example it would allow the and to have their own styling and not just be grid objects. It even allow for you element to be asymmetrical.

        You should also change your margin property to a margin-left and margin-right as you are overriding margin-top and margin-bottom unnecessarily.

        Also I’d recommend breaking up all those parentheses into variables on multiple lines to make your code easier to understand. As the .less gets compiled there’s no need to compact everything onto one line.

        • 66

          Hi moefinley,

          I have been working on a script to add padding to grid elements (particularly where background colours feature). Are you ok to share your script so I can see what you have come up with?

          Thanks.

  32. 67

    I just started using ‘SASS’ (http://sass-lang.com/), can you tell me how it is different from ‘LESS’? It has all the same things it seems.

  33. 68

    How does this grid system deal with the margin right or left when you place multiples images in columns for a portfolio page for example, it adds a class to every last element or it uses a negative margin like in this article:

    http://csswizardry.com/2011/08/building-better-grid-systems/

    • 69

      Every column gets margin: 0 10px; (or whatever the actual value is). Rows contain negative margin. There’s no first/last selectors used.

  34. 70

    LOVE IT. Excellent work. I had this same exact idea recently, but now you’ve saved me the work of creating it myself. Thanks!

  35. 71

    another day another grid system…

    j/k — looks like some great inovations, can’t wait to try it out

    b r e n t
    @
    mimoYmima.com

  36. 72

    Can people stop recommending LESS? Development on it is practically non-existant these days, and its still full of bugs that will make your life hell when you start using it at scale. (It makes for fun looking tutorials, but who cares.)

    Look at SCSS instead. Actively developed, and CSS syntax.

  37. 73

    1) css will always be a pain to work with, no matter what tools are made available. I really appreciate the hard work of the developers of these tools, but the fact remains – css is painful.

    2) Despite the coolness that css frameworks bring to the table, I always brush up against their limitations quickly and hard. I always have some basic requirement that the frameworks do not meet. Again – I appreciate the hard work that the developers put into the frameworks. But each one is built by their respective developers for their own needs. As such, they are always lacking when it comes to my own requirements.

  38. 74

    Not to be picky or anything, SASS is also a superset of CSS :-)

    All the things (and more) you’ve shown can also be achieved in SASS. If you’re going to state something, get it right ;-)

    • 75

      Thanks for pointing out, we’ve updated the text. And yes, I’m hoping to port Semantic.gs over to SASS as well in the future.

  39. 76

    Awesome stuff! I’ve been using this method for a few months now as I described in a blog post earlier:
    http://www.paulsprangers.com/2011/04/more-semantic-html-with-less-css/

    Your system looks a lot cleaner than what I’m using so I’m definitely going to look into it. I’m wondering how you manage clearing floats etc.

    I do have some tips after having used this system in several projects.

    Tip 1: When making something responsive it’s always best to start with the mobile first. It’s a best practice anyway, but the CSS default (which don’t float anything) is a lot more suitable for a one column layout. A regular layout probably has a lot of floats, which will all need to be reset for a nice one column layout.

    Tip 2: LESS is great, but don’t use the nesting to much. It can make the compiled code a lot larger. It looks like it improves readability, but that’s not the case if you can’t see in what block your currently editing because the opening bracket is not in view (if you use media queries you have probably some experience with this: “In what query am I working now?”). It will also come back and bite you if you introduce media queries since (because of specificity) you will have to make big, big selectors before your new styles get applied.

    It’s hard to go back to the old way of doing things, but I now that a lot can be improved in how I do things now. Hopefully your work will improve mine!

    • 77

      Re ‘Tip 2′ – I second that. I’ve only used nesting with SASS, and while the nesting hierarchy looks really cool/progressive in your code editor, the generated selectors can be much longer than hand-coded selectors. However, my experience was with using @mixins rather than @extends due to bugs with the latter in phamlp, so it’s possible that others may be able to generate more optimised code.

  40. 78

    An interesting and timely article, I had an investigation in making an semantic and responsive grid with Sass only the other week. http://forwardtechnology.co.uk/blog/a-responsive-grid-system-with-sass

    Arguably the mark-up looks better but at the same time you do can make a trade off for file size depending on how many times you include the columns function. But this is definitely the way we should be going.

    • 79

      Nice one! You’re fortunate that in SASS you can nest the @media queries. I wish that was possible in LESS.

  41. 80

    great article.. I had used an early version of less but didn’t really get into it too much. seems like it’s worth re-checking it, thanks.

  42. 81

    Is it just me, or does this system make things overly complicated compared to the “good old” html and css?

    While I see the benefit of having a responsive design, I personally believe that people see it as the holy grail. Not every website benefits from a responsive design imho, just as nog every website benefits from a fluid design.

    About LESS:
    I can really see some handy little timesavers with this system, but also one downside that wasn’t mentioned in the article:

    If you specify a color or column width with LESS, and you have to make changes 2 years from now, you’d have to read all the code to figure out what you did back then, like for example: “now I knów I specified my text to be #e2e2e2 with LESS, but where’s that used in my CSS again?” If you have that color set for, I don’t know, 6 different locations and you need to change 2 of them, it would mean (I think) a lot more going back and forth compared to just go to those 2 pieces, change them, and be done with it :)

    You’ll be forced to go back and forth too much to see which piece of code is used where, since you specified LESS at the top of the page, while your actual code might be used throughout the page. Isn’t that a far more roundabout way of doing things?

    Somehow it feels like people are trying to devise systems to make things easier when you start a new website, but don’t always fully realize that there might be other people who eventually have to dig into their code. Person A might use LESS, leaves that company in 2 years, and Person B who never used LESS before (because no one ever does 100% the same in webdevelopment) has to figure out what to do with it. Why not use nice and clean semantic code, and try to devise a simple-to-use-for-everyone system? :)

    (I’ll probably kick a lot of people’s legs with this comment, but I think it’s important not to forget that you’re also coding for the next employee or company, and therefore have to remember that not all systems are ment for everyone and thus perhaps not the best thing to use) :)

    • 82

      You ain’t kicking my leg! :)

      I totaly agree.

      Over the years developing tons of sites ( small and large ) i’ve gathered my own set of re-usable templates with wich i can create complex layouts within minutes.

      And i would be suprised if not almost every experienced developer has their own set.

      And indeed, that responsive trend lately is way overcooked. People tend to look way too much at what is the latest fuzz rather than looking at what is needed: Don’t create something with what CAN be used, create with what you need.

      • 83

        Joram Oudenaarde

        August 25, 2011 9:58 pm

        Thanks :)

        With people like Mark Boulton, who is absolutely brilliant by the way, apparently going full throttle on responsive design, other webdesigners are seemingly tending to simply “obey and follow”. Webdesign has and always will need a level of consistency between them and the other webdesigners, but that doesn’t mean they should simply follow 1 solution to 1 certain problem for a specific client… they should still find their own solution for each and every client based on what the client himself needs, and then code/design that with the consistent techniques that are available without having to consort to a single “hyped up” way of doing things.

        I personally believe responsive design is a trend that acts as a temporary solution. When I asked around, a lot of people didn’t want to see websites that change according to what the creator of that website wanted. They simply wanted to see the website as they’re used to, on every and any device. And if they have a slow or limited connection (like mobile internet), they should be given the choice instead of to be forced to watch slimmed down websites right from the start. For me personally as well: I’d rather wait 5 more seconds to see a beautifull website than a “mobile one”, even if that means I might be using my data cap a lot faster. :)

  43. 84

    Wow… wow… wow! You’ve added dripping chocolate sauce and four-wheel drive capability to my web dev! How awesome is that!

    Thank you! Love it!

    DC

  44. 85

    Great article.
    I’ve just started with something similar in SASS. Saved me a lot of work. Big thanks.

    I question doh, since I’ve everything else made in sass i would like to keep working with that instead of less. But there is one thing that I don’t get how to translate into sass.
    It’s the argument used within the mixins. Someone knows what the syntax would be in sass for this?
    .column(@x,@columns:@columns)

    I get it to:
    @mixin column ($x,$columns:$columns)
    But what are the x and the colon for? I get an error when passing the column argument here. But only when using i fluid layout.

    • 86

      Found the solution I think. The problem was’t in the mixin. The problem was the 1px declared in the Utility variable, I removed the “px” and left the “1” by itself and the error disappeared. Otherwise it tries to declare a width that is set in both px and %.

      • 87

        Wondered about the same thing reading the tutorial… “how does 1px transform into %??” Thanks for confirming :)

  45. 88

    Antoine Lefeuvre

    August 24, 2011 7:31 am

    Many thanks for these great article and GS. A few weeks ago we gave a try to a CSS-only fluid GS featuring the 144 rules you mentioned. It’s called la Grid http://www.novius-labs.com/laGrid/demo.htm.
    Nevertheless the CSS-only approach limited us, so I’m pretty sure we’ll soon go for a JS-based solution like yours. Merci !

  46. 89

    Having been using 1140 grid for a while now I am excited to see the extra functionality and control this system adds. I also am very impressed with LESS and want to try it out.

    However I downloaded semantic.gs and none of the example files work for me. They are all stuck at 1 column for each row.

  47. 90

    The idea presented here is in it’s simplest form. Simple html and simple designs. In attempting to architect it for some sites I’m working on I ran into complexities not easily seen on the surface.

    For example, say you have an aside inside an article and for a box of content in a sidebar. One case the aside is for the article and one case the aside is for page. Or, you have an article in the main content and an article snippet in the right sidebar. Both should use the article tag. Or, you the main content that may show an article or a section. But, you use section elsewhere as well.

    These complexities are perfectly valid semantics. But, implementing them with semantic.gs would produce more complicated and difficult to understand less/css than using something like 960.gs.

    semantic.gs looks like it would work for something simple. Does anyone have an example where it scales in complexity of content?

    I took a little time to look at the structure of my markup and cannot achieve a smaller or less complex base html structure using semantic.gs. I found this to be unfortunate. It’s a matter of the limitations I can achieve with css rather than anything else.

    I could see using this for a simple site but anything complex I see more work. Something I find unfortunate.

    • 91

      Thanks for your comments Matt. You’re right, I’m using the simplest of elements and selectors in these examples. In the real world, you would almost never apply structural styles to ALL articles or ALL sections. Instead, one would have to use more specific CSS selectors and add ids or classes to elements.

      Semantic will not help you achieve simpler *markup* than other grid systems. But it will help you avoid placing presentational statements in your HTML.

  48. 92

    using less and rendering on the client is a brutal idea unless it’s in development only (though that’s easy to get around anyway). The feature-set of LESS is pretty inferior to Sass/Stylus though

    • 93

      TJ, native CSS has a “minimal feature set” – this is what make it so accessible. I think LESS’s feature set hits a sweet point for it’s target audience. CSS has never been about program logic or complexity.

      LESS.js biggest selling point is that it radically lowers the “barrier to entry”. This should not be underestimated. I’m sure many frontend dev’s shy away from terminal… or are on Windows.

      I agree that pre-compiled (and minified) LESS to CSS is not doubt the way to go for production. But… having a client-side compiler potentially opens doors for inovation e.g. in user-customised styles …theming, overriding media queries, etc. If such options are only presented to users in running HTML5 localStorage capable browsers – via Modernizer/yepnope tests/loading – then performance is (hypothetically) very close to native file cached resources.

      This could take Responsive Design up a notch. Currently we make assumptions like <480px width = mobile & white-on-black is what my designer likes for contrast …. but with LESS.js the power could be given back to the end-user to recompile the CSS (and have it cached), with what THEY want e.g. "force desktop 1024 layout", or "black-on-white text colour" … sure css classes or separate stylesheets could do the same in many cases … but I have a feeling there is more power to explore in this area of users personalising their UI/UX via re-compiled CSS.

  49. 94

    Another, example of a programmer( actual or similar mind set )
    complicating what is to be simple,…

    The semantic / management aspect is lost, you have simply moved the
    DRY method from well formed CSS to the LESS method,…

    Results,…

    Complicated, lost DRY method, third party reliance, and increased file sizes
    along with the need to complied,…

    The next should be better, not increased its complexity,… – Brianui

    • 95

      There is always a tradeoff between achieving semantic purity vs. developer simplicity. But just like we no longer use font tags in our HTML (which is probably “simpler” than using CSS), abstracting content from presentation has significant long-term advantages.

  50. 96

    I just wish regular old CSS would let you proclaim variables.

  51. 97

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

    • 98

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

      • 99

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

      • 100

        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;
        }

  52. 101

    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.

  53. 102

    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)

    • 103

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

  54. 104

    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!

  55. 105

    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.

    • 106

      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.

      • 107

        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.

        • 108

          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.

          • 109

            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.

        • 110

          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!

        • 111

          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.

    • 112

      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.

  56. 113

    Can someone please convert this to .scss style?

    • 114

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

  57. 116

    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

    • 117

      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!

  58. 118

    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.

  59. 119

    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/).

  60. 120

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

  61. 121

    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.

  62. 122

    sandro (Guave Studios)

    August 28, 2011 11:43 pm

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

  63. 123

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

  64. 124

    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.

  65. 125

    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

    • 126

      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.

  66. 127

    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. 

    • 128

      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).

  67. 129

    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.

  68. 130

    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.

    • 131

      …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.

  69. 132

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

  70. 133

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

  71. 135

    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

  72. 136

    “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?

    • 137

      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.

  73. 138

    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

    • 139

      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/

  74. 140

    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 ;-)

    • 141

      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..

  75. 142

    hello
    usefull tool. thank you.

    could you explain me the meaning of this syntax ?

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

    thanks

  76. 143

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

    • 144

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

  77. 145

    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 ;-(

  78. 146

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

    This is a massively awesome grid system IMO.

  79. 147

    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!

  80. 148

    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?

  81. 149

    “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.

    • 150

      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

      • 151

        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.

  82. 152

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

  83. 153

    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?

  84. 154

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

  85. 155

    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/

  86. 156

    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?

  87. 157

    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;
    }

  88. 158

    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?

  89. 159

    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).

    • 160

      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.

↑ Back to top