I like to give the site a bit of a facelift every year. It gives me a chance to review how stuff is going and to experiment with new techniques. Last year I used Twitter’s bootstrap to provide grids and structure, and I’ve bootstrapped everything since. This time around I’ve used Bootstrap 3, which I’d been putting off for a while because I could see I’d have to learn some new stuff.
Now, I rather like learning, but in a production environment I could do without using multiple syntaxes all at once. That’s one of the reasons for using a CSS framework, after all – it provides a common language. So I can shout across the table, “it’s a col3 offset4,” or some such. Before using a css framework you may come to the same solution many times but call it whatever makes sense that day.
Bootstrap 3 changes the column names for its grid. That’s the last thing I wanted. Why would you want to do that?
To make it better, obviously.
Now I can give a column multiple class names. So on a big screen an element might be 3 columns, then on a phone it could be 6 columns. Or 1. Or 4. Or even stay at 3 columns. With the old system it would auto snap to full width (12 columns), which is mostly what you’d want it to do. But quite often not what you wanted at all.
Bootstrap 3 grids in action
This is perfect for something like a row of icons. On a big screen you might want them to be no wider than one column. On a phone that’s too small but now I can specify for extra small devices that each be 2 columns, or 4, or 6.
So now I have to shout across the room, “it’s a col-lg-1 col-lg-offset-1 col-md-2 col-xs-3.” Which is not nearly so snappy. But its much more flexible…