4 ms·
The LESS CSS Grid
- jessor 16y agoI 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.
- rimantas 16y agoWhy 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.
- Semiapies 16y agoJust 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.
- kaylarose 16y agoThis. 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/ http://lessframework.com/
- Semiapies 16y ago<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 16y agoThat's a great idea. I've been trying to think of better ways to combine the power of 1kbgrid and LESS.
- Semiapies 16y agoThanks - 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.)
- chriseppstein 16y agoIf I could upvote you 100x I would.
- danieldon 16y agoIndeed. 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.
- unicornporn 16y agoWould you care to elaborate on this for a newbie? .column and .grid_12 looks more like classes than CSS properties to me.
- bobds 16y agoSidenote: If you are not a Ruby guy and want to use LESS without much hassle, try lessphp: https://github.com/leafo/lessphp https://github.com/leafo/lessphp
- fungi 16y agohow 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 16y agoThe 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.)
- atgm 16y agoI'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...