How to create fluid semantical layout with Twitter Bootstrap using LESS?
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?
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> .
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);
}
}