Response web design seems to be the direction of the web design community, as programming for multiple devices – desktop, table, smartphone – requires so many unique sizes. With a responsive design, your website flexes to the screen size it’s being rendered on.
Skeleton does just that.
It’s a responsive boilerplate based on the 960 grid system, with a small set of CSS & JS files that can help you rapidly develop sites that look beautiful on a 17″ screen or an iPhone.
Skeleton is built on three core principles:
The Core
1. Responsive Grid Down To Mobile
If you’ve used the 960 grid system, or any other grid system, Skeleton will be familiar. It also looks sharp in landscape, portrait, desktop, tablet or mobile.
2. Quick Start
Skeleton is all about rapid dev.
Get started fast with CSS best practices, a well-structured grid that makes mobile consideration easy, an organized file structure and super basic UI elements like lightly styled forms, buttons, tabs and more.
Yummy.
3. Style Agnostic
Skeleton is a dev kit, not a UI framework. It’s a … well … skeleton. You drop in the design and style.
The Grid
Skeleton’s a variation of the 960 grid system, so the syntax is simple and handles multiple browser flavors.
Best of all, it flexes:
Word & Buttons
Like any great boilerplate, it comes with great typography:
The typography of Skeleton is designed to create a strong hierarchy with basic styles. The primary font is the classic Helvetica Neue, but the font stack can be easily changed with just a couple adjustments. Regular paragraphs are set at a 14px base with 21px line height.
And the buttons?
They’re subtle and solid:
Tabs, Forms & Media Queries
Skeleton comes with simple tabs hooked with simple jQuery.
Classy, stuff.
As for your forms, these are as simple as they come, which I think is a good thing.
Media queries are part of Skeleton’s backbone, as to serve the scalable grid. It also makes it convenient for styling your site on different size screens.
Skeleton’s media queries are almost exclusively targeted at max and min widths rather than device sizes or orientations. The advantage of this is browsers and future mobile devices that don’t map to exact set dimensions will still benefit from the styles. That being said, all of the queries were written to be optimal on Apple iOS devices.
The built-in media queries include:
- iPad Portrait or any other tablet device.
- iPhone or mobile styles in general for small screens.
- iPhone Landscape or other mobile devices with a large screen size (cascades over standard mobile styles).
- Less than 960 to style anything across browsers and devices that is smaller than the base grid.
Compatibility & Structure
Skeleton has been tested on:
- Latest Chrome (Mac/PC)
- Firefox 4.0, 3.6, 3.5, 3.0 (Mac/PC)
- Latest Safari
- IE9, IE8, IE7
- iPhone (Retina)
- Droid (Charge/Original)
- iPad
The file structure for Skeleton is:
- index.html: The base html page that includes the necessary initial markup
- stylesheets (folder)
- base.css: Basic styles of Skeleton
- skeleton.css: The glorious Skeleton grid
- layout.css: Empty file made for your site specific styles
- javascripts (folder)
- jquery-1.5.1.min.js: jQuery is served the Google CDN, but I’ve provided a local fallback. If you don’t want jQuery, feel free to remove, but the standard Skeleton tabs won’t work (if somebody wants to write the tabs jQuery code in raw JS, please do so and let me know!)
- app.js: Contains code for activating tabs and should house your site’s JS/jQuery
- plugins (folder): An empty directory for your jQuery plugins
- images (folder):
- favicon.ico: Standard 16×16 favicon
- apple-touch-icon (x3): All three sizes of Apple touch icons for iPhone 3, iPad and iPhone 4 with retina.
- robots.txt: SEO, search-crawler file. Don’t need to touch it, just there for your own good
- 404.html: Placeholder 404 page just to get you started
Download & Design!
Take a trip to the Skeleton website for support info, details, and best of all, to download!
NOTE: You can use this framework in conjunction with 3 of these 10 Solid Web Layouts. Read more.
James Cooper says
Looks really interesting – will have to play! I’ve also been looking: http://adapt.960.gs/ Nathan’s responsive way of doing things. It used js rather than media queries and allows you to serve different css depending on the browser size.
Eric Dye says
I want to give that one a crack, too. I’ve used Nathan’s regular 960gs and loved it.
If you get a chance to dig into, soon, you should consider doing a write-up for us.
https://churchm.ag/contribute/
David says
It’s not a Skeleton at all if it includes some style -_-