“Things like CSS grids should remain behind the curtain. No one really needs to know how it works, or why. Until you have a broken design or something complex and you can’t figure out why your spacing, margins, paddings etc are all messed up. It can be a real pain, especially when you are generating content dynamically in some sort of interface that changes and shifts.” (via The Subtle Magic Behind Why the Bootstrap 3 Grid Works | Experience Design at Hello Erik)

I am an online publisher and writer. In the 1990s, I learned HTML because that was the only way to get something to be viewable online. In those days, you used Netscape browser to write your “home page” and any other pages.

I read Cascading style sheets designing for the Web by Ha?kon Wium Lie, Bert Bos when it came out, and though I routinely look and use CSS, I have never written it, I have had to understand what was going on with CSS in order to make troubleshoot online layouts.

There used to be a site where you could get the “layout-o-matic” from Dan Burns at inknoise, and with a sense of how the container-row-column set up worked, you could generate CSS that was tweakable into decent online layouts.

The days of DIY pages in publishing have been transformed by WordPress and other content management systems and today the CSS is largely hidden from my view. I found this article on the Bootstrap Grid that is used today to design responsive pages. 

The explanation is clear and without having to write a line of code, I can understand now how some templates can look good whether I’m on a phone, tablet, laptop or big computer. Thanks to Erik at Hello Erik for taking the time to explain it so clearly. The diagrams are almost as good as the ones in the Hakon/Bos original book. Thanks @Erik_UX.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.