

The LESS CSS Grid - bobds
http://designshack.co.uk/articles/css/introducing-the-less-css-grid

======
Semiapies

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

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

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

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

~~~
kaylarose
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/>

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

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

~~~
atgm
What kinds of benefits does it offer?

------
bobds
Sidenote:

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

~~~
Semiapies
Or less.js, here: <https://github.com/cloudhead/less.js/>

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

(Plug warning - I wrote this.)

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

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

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

