In Bootstrap, 12 columns fit in one div.row (by default at least), and If you put more of them in there, the excessive ones end up in a new row. Now unless all of the columns are the same height, your layout can suddenly break this way.
To address this issue (a quite common one – think e-shop product grid), Bootstrap provides special clearfix classes we should use in every problematic point, for every layout variant. I always hated this solution, as it pollutes the markup and forces me to waste time thinking about the stuff that someone should’ve fixed once for all.
Well, someone did. To never worry about clearing columns again, read the article and get the CSS at: http://www.bluthemes.com/blog/3/clearing-bootstrap-3-columns
It’s simple, beautiful and it 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
Just stumbled across this article. Interesting idea!
Click the GIF to read about responsive icons.
Creating a MySQL powered websites, applications or content management systems often involves dealing with unpleasant character encoding related issues that are hard (and so not fun) to diagnose. In the worst case the behavior may even vary between your development and production environment.
I’ve never been digging deep enough into character encoding (since it’s not fun), but I plan to reading this promising blog post recommended somewhere at stackoverflow: Getting out of MySQL Character Set Hell
Before I get around to doing it (it’s quite long and detailed), here is a quick list of rules to follow I’ve came up with after a lot of trial and error. I might update it after I read the article.
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:
-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:
…which generates the following CSS output: