Advertisement
Complete Websites

Building a Responsive Layout With Skeleton: Starting Out

by

Dave Gamache's Skeleton Boilerplate provides the perfect foundations upon which to build responsive websites rapidly and reliably. We're going to use Skeleton and build a responsive page based on the Magazine design featured on Webdesigntuts+ recently. We'll be looking at everything from multiple background images, through to media queries, flexible media and mobile-friendly navigation. Let's get started!


First Steps

In this first video we'll download the Skeleton Boilerplate and prepare our project. We'll dive into the .psd layout and take whichever images we deem necessary, creating a sprite file for bits and bobs like the logos.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!


Structure and Columns

It's time to get stuck into the markup and some styling. In this video we'll examine the structure of our design and translate that into HTML using Skeleton's markup. We'll use the grid system supplied by the boilerplate and set out some of the columns in our page.

We'll also deal with some of the aesthetics by using CSS multiple background images on certain areas.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!

Multiple Background Images

Browser support for multiple background images is pretty good, with Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) and even Internet Explorer (9.0+) all cooperating nicely.

Unfortunately, non-supporting browsers won't understand the rules and therefore won't display anything at all. It's therefore advisable to use a suitable fallback, for example by implementing Modernizr and declaring an additional background rule specifically for offending browsers. Skeleton approaches this by using conditional comments on the <html> tag; if viewed in Internet Explorer 8 or earlier then it will be assigned the class "ie". You can therefore target those browsers specifically by using something like this:

/*ie multiple background image fallbacks*/
.ie .band.navigation {
	background: url(../images/bg_dark.png) repeat left 2px #343434;
}
.ie .band.footer {
	background: url(../images/bg_dark.png) repeat left 2px #343434;
}
.ie .band.bottom {
	background: url(../images/bg_bottom.png) repeat #343434;
}

Additional Resources

Here are a few bits and bobs mentioned in the videos so far:

Related Posts
  • Web Design
    HTML & CSS
    Build a Dribbble Portfolio Grid With Flexboxgrid and JribbbleFlexboxgrid dribbble
    Flexboxgrid is a new framework which allows you to combine the predictability and common language structure of a grid system with the flexibility and simplicity of flexbox. Today, we will walk through the basics of using Flexboxgrid, and use it to build a simple Dribbble feed. Let's get started!Read More…
  • Web Design
    CMS
    Tumblr Appearance Options: ImagesTumblr 22 retina
    Moving on with our coverage of Tumblr's Appearance Options, we're now going add an option whereby users will be able to set a background image to the theme.Read More…
  • Web Design
    CMS
    Styling Our Tumblr ThemeTumblr 13 retina
    Having finished the HTML markup for our theme, it's now time to begin playing with CSS. In this tutorial we'll gather everything we need to start styling; colors, typography details and so on.Read More…
  • Web Design
    CMS
    Tumblr Link Post Types and PaginationTumblr 31 retina
    Let's now take a look at the markup for our Tumblr "link" post type. With that done, we'll also cover pagination.Read More…
  • Web Design
    CMS
    Starting Our Tumblr Theme's Post Markup Tumblr 8 retina
    In this video tutorial we're going to begin the main area of our Tumblr theme's page. In fact, we'll be using the <main> element to do so, but as mentioned in previous videos, you're welcome to use whatever specific markup you feel is most appropriate.Read More…
  • Web Design
    CMS
    Tumblr Theme Operators and VariablesTumblr 3 retina
    In this tutorial we'll be taking a detailed look at how Tumblr's theme operators and variables slot content into your theme markup.Read More…