amdavidson

Get Skeleton

posted on 2011-08-27 at 12:19 PM - amd.im/mhr3

Skeleton is a boilerplate for themeing your site to allow for a responsive design on a 960 grid with very simple syntax and structure.

The recent redesign of this site was based on that code. Try re-sizing this window to see the content re-flow based on the current window size. this was accomplished simply by including the CSS files that come with the Skeleton download and structuring the content with classed DIVs like this:

<div class="container">
  <div class="six columns">
    <div class="five columns">
      ...
    </div>
  </div>
  <div class="twelve columns">
    ...
  </div>
  <div class="four columns">
    ...
  </div>
</div>

Easy as pie.

The DIVs can be associated with multiple classes so if you want to offset the spacing by a few extra grids you can do something like six columns offset-by-one.

There is also a simple quoting and citation format:

<blockquote>
  ...
<cite>...</cite>
</blockquote>

The interesting options afforded by it really don't end there. One of my favorite features is adding the class scale-with-grid to the <img> tags. This causes them to re-size based on the size of the view port ensuring that your beautiful 640 pixel image doesn't render outside the view port of an iPhone that only has 320 pixels to play with.

I extended this feature to video embedding by including this code in each of the @media queries in the skeleton.css code provided with the skeleton download:

iframe.scale-with-grid { 
  width: 640px;
  height: 360px;
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
  iframe.scale-with-grid {  
    width: 508px;
    height: 286px;
  }
}
@media only screen and (max-width: 767px) {
  iframe.scale-with-grid { 
    width: 300px;
    height: 169px;
  }
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
  iframe.scale-with-grid { 
    width: 420px;
    height: 236px;
  }
}

With that code, you can include the scale-with-grid class in iframe embed code provided by Vimeo or YouTube and get the same scaling effect. I've tested it in Safari, Firefox, Chrome, and IE7 on iOS, Macs, and PCs and it seems to work well everywhere but your mileage may vary.

If you're looking for a quick way to get a grid design that is responsive, Skeleton is a really easy and flexible way to go about it.