Semantic Grid with Bootstrap + Less Mixins ¿ How

Semantic Grid with Bootstrap + LESS Mixins ¿ HOW?

In navbar.less of bootstrap you will find the following.

grid and .core are used to namespace the .span()

.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
#grid > .core > .span(@gridColumns);
}

In cases where you want to keep "span3" etc out of your html you could very well do something similar to:

header {
   #grid > .core .span(12)
}

article.right {
   #grid > .core .span(6)
}

aside.right {
   #grid > .core .span(6)
}

footer {
   #grid > .core .span(12)
}

(12) and (6) are the number of columns you'd like your header element to span. This is of course replacing

<header class="span12"></header>
<article class="span6"></article>
<aside class="span6"></aside>
<footer class="span12"></footer>

is bootstrap less mixin .makeColumn smaller than a span?

No. If your required number of columns is n, the .makeColumn mixin and the .span (#grid > .core > .span) mixin both calculate width as follows:

(@gridColumnWidth * n) + (@gridGutterWidth * (n-1))

which is the width you'll need to set your element to a width of n columns on the grid.

If n = 6, it calculates all column widths and gutter widths from the left edge of your grid to the right-hand edge of column 6. 6 columns and 5 gutters.

.span only does width, .makeColumn also adds a float: left, and has an optional @offset argument that which isn't important to your current problem, but which allows you to add columns to the left of the element by adding a margin: left.

As @sody says above, wrapping your existing elements in a .container should fix your problem.
And I agree with @kleinfreund on using the html elements where you can:

<div class="container">
    <article>
        <div class="main-section">Bootstrap rocks
            <aside>
                 By the way...
            </aside>
        </div>
    </article>
</div>

I hope that helps.

Using mixins in bootstrap 3 to avoid unsemantic markup for layout structure

You should import the bootstrap.lessfile. So, download the full bootstrap project, and copy out the less folder. It contains everything. And then put the less folder in your project. Also make sure to add the less.js file to your project if you want to get your less compiled while your working. Look at lesscss.org for more information. And also make sure that you have a local server like mamp or xamp, because you can't see the results if you are just serving static html from file:// ....

Sample Image

In your custom less file do something like this:

custom.less

@import "../less/bootstrap.less";

 section {
    .make-row();
}
.left-navigation {
    .make-sm-column(3);
}
.main-content {
    .make-sm-column(9);
}

html

<head>
    <link rel="stylesheet/less" href="css/custom.less">
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.4.1/less.min.js"></script>
</head>
<section>
<div class="left-navigation">
</div>
<div class="main-content">
</div>
</section>

Bootstrap 3 grid in less vs in html

Personally i think using Bootstrap's class will give you a maintainable structure. Otherwise you could prefer a more semantic solution. Note your appropriate html structure don't have added value in my opinion and is not semantic.

Using and implementing Bootstrap in a more semantic way won't be always easy:

Example of problem with the grid to have to solve: How can I create multiple rows using semantic markup in Bootstrap 3?. Also Twitter's Bootstrap 3.x semantic mobile grid and especially pay attention to the answer of @Gravy (https://stackoverflow.com/a/18667955/1596547).

Also interesting : How to use sass to properly avoid embedding twitter bootstrap class names on HTML

Tweaking Bootstrap 2.0 for Semantic Markup

ok in less, this is how I figured it out. Its the best I could do, and I couldn't figure out how to deal with .row semantically, but oh well.

Basically I created a custom-mixins.less and created a mixin called .col and the variable is @col. So when you write your selector and do something like .col(3); .col(4); .col(5); or something like that. It should create the proper width. I don't know how this would work for nested columns.

//custom-mixins.less
.col (@col) {
  #gridSystem > .gridColumn(@gridGutterWidth);
  #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @col);
}

//styles.less
.greetings {
  .col(3);
}

lessc will generate the following in styles.css

//styles.css
.greetings {
  float: left;
  margin-left: 20px;
  width: 220px;
}

How to make a Responsive (Row Fluid) Mixin for Bootstrap

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:

.article {
    .makeFluidRow();
    .main-section {
        .makeFluidCol(10); //Spans 10 cols
    }
    .aside {
        .makeFluidCol(1,1); //offset by one, spans 1
    }
}

Tweaking Bootstrap 2.0 for Semantic Markup

ok in less, this is how I figured it out. Its the best I could do, and I couldn't figure out how to deal with .row semantically, but oh well.

//custom-mixins.less
.col (@col) {
  #gridSystem > .gridColumn(@gridGutterWidth);
  #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @col);
}

//styles.less
.greetings {
  .col(3);
}

lessc will generate the following in styles.css

//styles.css
.greetings {
  float: left;
  margin-left: 20px;
  width: 220px;
}

Twitter's Bootstrap 3.x semantic mobile grid

If i understand your question well i think you should use:

~~<div class="row"> <div class="col-span-6 col-small-span-6″>6</div> <div class="col-span-6 col-small-span-6″>6</div> </div>~~

~~Where col-span-6 is your class for the large grid and col-small-span-6 for the small grid. If you leave col-small-span-6 your div will stack. The small grid don't use the col-span-* classes.~~

See also: http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/

From now Twitter’s Bootstrap defines three grids: Tiny grid for Phones (<480px), Small grid for Tablets (<768px) and the Medium-large grid for Destkops (>768px). The row class prefixes for these grid are “.col-”, “.col-sm-” and “.col-lg-”. The Medium-large grid will stack below 768 pixels screen width. So does the Small grid below 480 pixels and the tiny grid never stacks.

So your html should be:

<div class="row">
  <div class="col-6 col-lg-6 col-sm-6">6</div>
  <div class="col-6 col-lg-6 col-sm-6">6</div>
</div>

LESS
~~The latest version: https://github.com/twitter/bootstrap/archive/3.0.0-wip.zip doesn't contain a .make-small-column function any more.~~ See also: https://github.com/twbs/bootstrap/pull/8302 .make-column() will add a media query for min-width: @grid-float-breakpoint so on the small grid your columns will stack always using this function.

You could try:

// Generate the small columns
.make-small-column(@columns) {
  position: relative;
  float: left;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@grid-gutter-width / 2);
  padding-right: (@grid-gutter-width / 2);
  @max : (@grid-float-breakpoint - 1 );
  // Calculate width based on number of columns available
  @media (max-width: @max) {
    width: percentage((@columns / @grid-columns));
  }
}

.wrapper {  .make-row(); }
.left    { .make-column(6); .make-small-column(6);}
.right   { .make-column(6); .make-small-column(6);}

UPDATE

The answer above will be based on the release candidates of Twitter's Bootstrap 3. The final version of Twitter's Bootstrap 3 has 4 grid extra small (xs), small (sm), medium (md) and large (lg). Also the Less code has been change according these grids. So use the .make-{x}-column mixins as described by @gravy in his answer: https://stackoverflow.com/a/18667955/1596547

Semantic Grid with Bootstrap + Less Mixins ¿ How