Web development changes quickly. It wasn’t that long ago (centuries in web time) that a CMS was optional and only added if budget/time permitted. Responsive design has now moved from “sounds interesting” to “that’s how God intended it.”
Bootstrap has been a key player in making this transition and has some killer tools to help. It is also bulky if you use the entire package. CSS frameworks started popping up as the movement gained steam: Foundation, Skeleton, Gumby, Amazium… So many to choose from. At Paragon we dabbled in all these, rolled our own, went completely custom based on the project and now have settled on a handy bare-bones framework called Base. You don’t know hard it was to not title this post “All your base are belong to us.” I’m a web senior citizen.
The grid system is simple. Containers, Rows and Columns.
Containers wrap content into a given width, based on screen size, and then center it on screen. Rows divide content into groups and clear floats. Columns are, well, columns and can be 1 to 12 units in width.
<div class=”container”> <div class=”row”> <div id=”content” class=”col col-8”> <p>Lorem is my favorite ipsum.</p> </div><!-- #content.col.col-8 --> <div id=”sidebar” class=”col col-4”> <p>My sidebar stuffs go here</p> </div><!-- #sidebar.col.col-4 --> </div><!-- .row --> </div><!-- .container -->
And there you have it. A cross-browser friendly sidebar and content area layout. The above is great for desktop and will even work for tablet and mobile. But you can target tablet and mobile independently… which is awesome.
Lorem is my favorite ipsum.