Reusable base CSS styles for easy responsive site structure

August 13, 2014 0

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%; }

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.

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.

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!