Wolf’s Little Store

Today I was slicing a design and came up with a simple but flexible column system. I wanted to make a little video about it, thought it would be done in about half an hour. Little did I know!

I’m not going to bore you with the technical details, but let’s say an hour of editing ended up in the trashcan. Hint: the Apple Animation codec and iMovie don’t like each other.

So this is long, and without titles or voiceover. But I still wanted to share it.

Quick explanation:

• column-14 stands for 1/4 width, all widths in the CSS are handled in %
• the spacing-right and spacing-left divs add 20px spacing to a column. Alternatively there’s spacing-right-half and spacing-left-half to create a nice equal gap between two columns
• If you wanted to make a three column layout with equal column widths you’d write this:

  <div class="columns">
  	<div class="column column-13">
  		<!-- Content of first column -->
  	</div>
  	<div class="column column-13">
  		<!-- Content of second column -->
  	</div>
  	<div class="column column-13">
  		<!-- Content of third column -->
  	</div>
  </div>

• By changing the values to 12, 14, and 14 you’d create a two column layout in which the first column takes up half the horizontal space, followed by two narrower columns which both take up 25%.

• Category: webdesign
• Back to the overview