Author: oli.G

Awesome CSS snippet for Bootstrap 3 column clearing

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:

It’s simple, beautiful and it works!


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

Avoiding character set issues with PHP & MySQL (checklist)

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.


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 {

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

Important points to remember about Photoshop Styles

  • Since Photoshop CS6, even a Layer Group (folder) can have its own Style, not just the layers. Older versions do not support this.
  • Each user created Layer Style can be saved as a preset. These appear in the Styles panel and are not saved with the PSD document. However, they can be exported an .ASL file.
  • When user selects a Layer Group in the Layers panel and clicks a style in the Styles palen, Photoshop applies the style separately to every single layer in the group, not to the group itself (in CS5 and below, it wouldn’t be possible).
  • I can’t tell if applying a style to every layer in a group, vs, applying it to the whole group, is supposed to produce the same result or not. In a test I tried it looked exactly the same, while in a more complex project I’ve been working on it shows all kinds of quirks and little differences, even when I did my very best to minimize all external factors…