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

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
    }
}

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.

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

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>.

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;
}

Use parent div size for bootstrap responsive grid system

As @makshh mentionned in the comment, it does not seem to be possible to do this right now. The only way I found is from another stack overflow question by @tsdexter:

$(document).ready(function(){
  $('.somecontainer').on('resize',function(){
    if ($('.somecontainer').width() < 640) {
        $('.somecontainer').addClass('m');
    } else {
        $('.somecontainer').removeClass('m');
    }
  });
});

---

Related Topics