How to create fluid semantical layout with Twitter Bootstrap using LESS?

Question

I want to create fluid layout using LESS and without using Bootstrap grid clasess like .span6 on html code. How can I do this? When I wrote without LESS I create layout like this:

<div class="container-fluid">

<div class="row-fluid" id="header">
    <div class="span4 block">
        <h1 class="title">Sample Site</h1>
        <h2 class="sub-title">Powered by Twitter Bootstrap</h2>
    </div>
    <div class="span6 block">
        <ul class="nav nav-pills">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Pages</a></li>
            <li><a href="#">Typography</a></li>
            <li><a href="#">UI</a></li>
            <li><a href="#">Calendar</a></li>
            <li><a href="#">Tables</a></li>
        </ul>
    </div>
    <div class="span2 block">
        <div class="btn-group open">
            <button class="btn">Dropdown</button>
            <button class="btn dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">Change password</a></li>
                <li><a href="#">Log in with another user</a></li>
                <li><a href="#">Change token</a></li>
                <li><a href="#">Log out</a></li>
            </ul>
        </div>
    </div>
</div>

<div class="row-fluid" id="slider">
    <div class="span12 block">
        <div id="myCarousel" class="carousel slide">
            <div class="carousel-inner">

Now, my layout looks next way:

<div id="wrap">
<div id="header">
    <div id="logo">SiteLogo</div>
    <div id="top-menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Page 1</a></li>
            <li><a href="#">Page 2</a></li>
        </ul>
    </div>
    <div id="logout">
        <a href="#">Logout</a>
    </div>
</div>
<div id="slider">

and what I should write on my .less file if I want to make div#wrap -> .container-fluid, div#header -> .row-fluid, div#logo -> .span4, div#top-menu -> .span6, div#logout -> .span2 without writting this clasess on html code?

A more comprehensive answer: http://stackoverflow.com/questions/9906571/semantic-grid-with-bootstrap-less-mixins-how — ptbello, Jan 02 '13 at 03:34

Adam Grant · Accepted Answer · 2012-10-10T14:01:42.247

4

First, this wouldn't really be semantic, at least, no more so.

The semantic form of <div id="top-menu"> is <nav> or <nav id="top">

The semantic form of <div id="header"> is <header>

In any case, there are instructions on doing this here:

Please stop embedding Bootstrap classes in your HTML

Honestly, though, it's not as simple as the author makes it look. Just because you have a <nav> inherit the styles of .nav from Bootstrap doesn't mean its children will inherit inherited styles as well.

So if I define a style from .nav ul, a <ul> element will not receive this style if it's in a <nav>.

edited Oct 10 '12 at 14:01

answered Oct 10 '12 at 13:48

Adam Grant

12,477
10
58
65

ajkochanowicz, I wrote this article earlier. When I wrote #header { #grid > .fluid > .row-fluid; } for use .row-fluid class from #grid namespace LESS says me ".spanX is undefined". What is spanX ? Whats wrong? – setback Oct 10 '12 at 13:56
That's a mixin from grid.less I believe. You'll need to define that variable. – Adam Grant Oct 10 '12 at 14:01
no, it's from mixins.less - `.row-fluid { width: 100%; .clearfix(); [class*="span"] { .input-block-level(); float: left; margin-left: @fluidGridGutterWidth; *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%); } [class*="span"]:first-child { margin-left: 0; } // generate .spanX and .offsetX .spanX (@gridColumns); .offsetX (@gridColumns); }` – setback Oct 10 '12 at 14:11
You're right. It's from mixins.less. If you use "#grid," you must define the parameters `@gridColumnWidth, @gridGutterWidth`. For example: `#grid > .fluid(300px, 20px)`; – Adam Grant Oct 10 '12 at 18:48

score 2 · Answer 2 · answered Jul 03 '13 at 16:36

This worked for me.. posting in case it helps anyone else.

Mixins for semantic fluid grid:

.makeFluidRow(){
    width: 100%;
    .clearfix();
}

.makeFluidCol(@span:1,@offset:0){
    float: left;
    #grid > .fluid .span(@span);
    #grid > .fluid .offset(@offset);
    &:first-child {
        margin-left: 0;
        .offsetFirstChild(@offset);
    }
}

Use them just like the non-fluid mixins:

div#header{
    .makeFluidRow();
    div#logo {
        .makeFluidCol(4); //Spans 4 cols
    }
    div#top-menu {
        .makeFluidCol(6); //Spans 6 cols
    }
    div#logout {
        .makeFluidCol(2); //Spans 2 cols
        //Or you could have span1, offset1 using .makeFluidCol(1,1);
    }    
}

How to create fluid semantical layout with Twitter Bootstrap using LESS?

2 Answers2