Don’t want a bloated framework you have to learn/master just to be able to build a robust site structure that breaks down nicely into RWD (responsive web design)?

We don’t either.

For most projects we use a few simple reusable CSS classes to make RWD much easier. Frameworks like HTML5 boilerplate or Zurb’s foundation are great – but if you’re building something custom for a client or yourself, it’s nice if you don’t need a terrible amount of documentation. We don’t use 95% of the bloated JavaScript that comes with most frameworks, because we write our own. Same with CSS.

So we use some simple classes all the time that have accelerated our RWD development.



/* reusable classes */
.hidden { display: none; }
.invisible {visibility: hidden; }

/* micro clearfix below. contains floats like .clearfix. */
.cf:before, .cf:after { content: " "; display: table; }
.cf:after { clear: both; }

/* need to clear floats instead of contain them? use this below. */
.clear, .clear-both { clear: both; }

/* need to float things? we got you covered. */
.left, .floatleft { float: left !important; }
.right, .floatright { float: right !important; }

/* these are for images, below. gives a nice margin. sweet. */
.alignright { float: right; margin: 0 0 15px 15px;}
.alignleft { float: left; margin: 0 15px 15px 0;}
.floatnone { float: none; }

/* need a middle-aligned header. don't write another CSS rule. just use these! */
.text-left {text-align: left;}
.text-right {text-align: right;}
.text-center {text-align: center;}

/* magic. many combinations exists with simplicity. */
.float20 { float: left; width: 20%; }
.float25 { float: left; width: 25%; }
.float33 { float: left; width: 33%; }
.float50 { float: left; width: 50%; }
.float66 { float: left; width: 66%; }
.float75 { float: left; width: 75%; }
.float80 { float: left; width: 80%; }

Breaking down the CSS

So, let’s say you have a container split into one-third/two-thirds. Use a .float33 and a .float66. Bam! Easy.

Using some code like this:

<div class="cf"><!-- like, clear your floats! --> 
  <div class="float66">stuff here</div> 
  <div class="float33">MOAR stuff</div> 
</div>

You’d get this:

stuff here
MOAR stuff

 

 

Then, when you get to your desired breakpoint, you just assign:

 .float33, .float66 { float: none, width: 100%; }

to make them span the full container/window/etc. Like so:

stuff here
MOAR stuff

But wait. You say you want the sidebar .float33 to be on top when it hits the breakpoint?

Just put .float33 above .float66 in the DOM, and add a class of .right. Dishes are done!

<div class="cf"><!-- like, clear your floats! --> 
  <div class="float33 right">MOAR stuff</div>   
  <div class="float66">stuff here</div> 
</div>

And you get:

MOAR stuff
stuff here

I mean, really…

RWD does not need to be overly complicated. Yet frameworks often feel that way. Above may be too simple for every project, but they help us immensely in rapidly developing RWD sites.

Reuse and recycle!