3 ms·
<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
by 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.