Responsive Design is Base

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.

We like Base because it keeps it simple. No fancy javascript pieces, sleek components, automagic menu systems. Instead, Base provides a great set of CSS classes for its grid along with basic form/element styling and resets. All the things that a front-end developers have in their toolkit when kicking off a project. It gives you what is needed to start and doesn’t get in the way after that. It also comes LESS’ed out which makes me happy.

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.

My sidebar stuffs go here

<div class=”container”>
	<div class=”row”>
		<div id=”content” class=”col col-8 tablet-col-10 mobile-full”>
			<p>Lorem is my favorite ipsum.</p>
		</div><!-- #content.col.col-8.tablet-col-10.mobile-full -->
 
		<div id=”sidebar” class=”col col-4 tablet-col-2 mobile-full”>
			<p>My sidebar stuffs go here</p>
		</div><!-- #sidebar.col.col-4.tablet-col2.mobile-full -->
	</div><!-- .row -->
</div><!-- .container -->

Here we take our example and change how many columns are used in tablet. We also have mobile become full width. You can even change content columns with mobile:

.mobile-col-1-2 is 50% width
.mobile-col-1-3 is 33.333% width
.mobile-col-1-4 is 25% width
.mobile-col-3-4 is 75% width

Even hide elements based on browser size with:
.no-desktop
.no-tablet
.no-mobile

Pretty good stuff. Base is in active development and past updates have changed column classes so later version may not be backwards compatible. All updates have refined Base into a very capable responsive kit.

Because I can’t leave well enough alone, I did create a version of Base that separates desktop, tablet, mobile and print styles, moves sizes, colors, and all sorts of things into a global variables list and created a LESS ready starting point with some useful libraries thrown in. If you’d like to check it out, you’ll find Base-Start on my GitHub.

Finally, when Keep-It-Simple-Stupid meets Base, it looks a little something like this…

Photo by Diario de un pixel

I’ll take my applause off the air. Hugs. This one is for you, Terry.