web design

Bootstrap 3 grid system illustrated & explained

The Subtle Magic Behind Why the Bootstrap 3 Grid Works

I came across a cool article by Erik Flowers that explains the Bootstrap 3 grid system in a clear, illustrated, easy to read and straight-to-the-point view. Great for newbies and experienced developers alike.

Read it here: The Subtle Magic Behind Why the Bootstrap 3 Grid Works

Advertisements

Cross browser opacity snippet in LESS

I’m relying on this CSS-Tricks snippet for cross-browser opacity of HTML elements. Since I’m using the CSS preprocessor LESS, I wanted to make the snipped a little more reusable, so I turned it into a parametric mixin:

.opacity(@val) {
    -ms-filter: %("progid:DXImageTransform.Microsoft.Alpha(Opacity=%a)", @val*100); // IE 8
    filter: e(%("alpha(opacity=%a)", @val*100)); // IE 5-7
    -moz-opacity: @val; // Netscape
    -khtml-opacity: @val; // Safari 1.x
    opacity: @val; // good browsers
}

And of course, this is how we use it:

div.transparent {
    .opacity(0.5);
}

…which generates the following CSS output:

div.transparent {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50;
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}