I recently had the task of converting an old static site to a responsive site. After doing a little research I decided to go with Skeleton. Although I find the 960 grid always a bit confining, the grid is a great choice for rapid development. The grid also works really well in responsive degradation. The boilerplate comes with three stylesheets – base.css, layout.css, and skeleton.css. Let’s break them down and look at the methodology on how to integrate an existing static site using your existing stylesheet.
First take a look at the existing site. Can it fit neatly or approximately into the 960 grid? If it can your pretty much good to go. If not you might want to think about a redesign or you’re going to be spending an awful lot of time tweaking the grid and the grid might not be for you.
base.css
This is your resets, typography, links, lists, images, buttons, and forms. Look at the site you are converting. Try to pull as much of these elements from the old site’s styles into it.
layout.css
These are the media queries styles. You have
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px)
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px)
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px)
* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px)
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px)
As in every responsive site things are going to change as the view-port size changes. Style the changes in width accordingly.
skeleton.css
The grid settings. My recommendation is to leave this alone unless you really need to change the grid widths.
Putting It All Together
The site I was working on, of course, had it’s own stylesheet. I tried to leverage as much as possible from it so I put it in the cascade before the media queries of layout.css. This will make your life much easier because you want the media queries to be read last. Think of your old stylesheet as your mobile first stylesheet.
<link rel=”stylesheet” href=”stylesheets/base.css”>
<link rel=”stylesheet” href=”stylesheets/skeleton.css” >
<link rel=”stylesheet” href=”stylesheets/styles.css”><!–YOUR OLD STYLES–>
<link rel=”stylesheet” href=”stylesheets/layout.css”>
The Results
Event though the original site was 960 wide it wasn’t in a grid. Subtle changes in width only noticeable to the trained eye fit the site into the grid quite nicely.
The main tweak for the site was the main navigation menu. Obviously a long horizontal menu has to become a block menu once hitting mobile devices at 420. If you want to get fancy you can show/hide a button in layout.css and add some jQuery to toggle the menu on and off with some groovy animation or slideDown effects.I recently had the task of converting an old static site to a responsive site. After doing a little research I decided to go with Skeleton. Although I find the 960 grid always a bit confining, the grid is a great choice for rapid development. The grid also works really well in responsive degradation. The boilerplate comes with three stylesheets – base.css, layout.css, and skeleton.css. Let’s break them down and look at the methodology on how to integrate an existing static site using your existing stylesheet.
First take a look at the existing site. Can it fit neatly or approximately into the 960 grid? If it can your pretty much good to go. If not you might want to think about a redesign or you’re going to be spending an awful lot of time tweaking the grid and the grid might not be for you.