The LESS CSS Grid | Hacker News Reader

The LESS CSS Grid

designshack.co.uk

14 pointsbobds18 comments

  <div class="column grid_12"><p>12</p></div>

OFFS, people. You've got an excellent CSS preprocessor with mixin capability here, use it. Do something like this:

    #sidebar {
        .column;
        .grid_12;
        // other styling
    }

and then this:

   <div id="sidebar"><p>twelve</p></div>

It's easy, clean, and doesn't maul your markup.

That's a great idea. I've been trying to think of better ways to combine the power of 1kbgrid and LESS.

Thanks - you can pretty much take any class-based grid system and use them this way in LESS (and SASS, of course).

(And if you're rolling your own, you can even be more concise - such as, instead of invoking theWidth() twelve times to build your classes as shown here, make an atGridColumn() function and skip making those classes.)

If I could upvote you 100x I would.

Indeed. Sass and Compass have been doing this for years. Using mixins for CSS framework rules so markup stays semantic is basically the core concept behind Compass.

Would you care to elaborate on this for a newbie?

.column and .grid_12 looks more like classes than CSS properties to me.

Why cannot people just assign the required width to the proper elements without polluting markup with those .grid_x classes is beyond me. One may just put some .top_left_red_link and .orange_button there as well then.

If you do it properly and want your .features element to take more space you just go to your CSS and adjust width: accordingly.

If you are using some "grid system", then you go to your markup and change .grid_2 to .grid_4. And when you change markup to change presentation instead of modifying CSS—you are doing something wrong.

Just so, and when you can use all these grid classes and get their benefits transparently in the .less files without touching the markup, it's especially mystifying.

This. It is completely against the whole concept of separating markup from styling.

I recently stumbled upon a pretty nice CSS "framework" (it's more of a starter template) that doesn't have all the crap most grid-frameworks have. It's ironically called Less Framework 3[1] (has nothing to do with LESS.js or the parent article).

It basically boils down to a base adaptive-layout body width, and some comments that tell you the width you should make an element if you want it to span X columns on X screen/device width and adhere to a grid

[1]http://lessframework.com/

I've always been a fan of typing things out in notepad++ and never even realized that there were CSS preprocessors. What's the advantage of using them versus using raw CSS?

It just seems like one more thing to learn, at this point...

There's very little to learn, totally worth it if you ask me.

I'm also a fan of Notepad++, seems like it would be easy to integrate less.js as a plugin.

What kinds of benefits does it offer?

Sidenote:

If you are not a Ruby guy and want to use LESS without much hassle, try lessphp: https://github.com/leafo/lessphp

Or less.js, here: https://github.com/cloudhead/less.js/

Or as a Kohana module: https://github.com/DanHulton/kohana-jscompile

(Plug warning - I wrote this.)

I like the idea, but working with Sass and the 1140px cssgrid.net (cssgrid because it degrades so nicely on mobile phones) I don't see much pain taken away there.

how how people gone working with designers and grid layouts?

i have real difficulty getting them to stick to any kind of structure.

a grid seems very restrictive to me, so assume designers would get pretty shitty.

The restrictiveness is the main point; using a grid is a relatively easy way to divide a page up into areas, and to make sure that things line up --- which in turn contributes to having an overall "clean look". (If things on the page look like they could be lined up but aren't quite, people read that as "sloppy", even if the things in question don't have much to do with each other functionally or topically. Using a grid is an easy way to avoid this sort of thing.)

Reply on news.ycombinator.com