HTML5 frameworks an overview (part I): Skeleton

An html5 framework is a pre-built set of pages in html5 with a highly structured css/css3 and some enhances and features added by javascript, so it's not only html5 but concerns a set of technologies always more strictly integrated.

Comparing different solutions you notice some big features more or less included in the most popular frameworks:

• Best practices like: a “human readable” directory structure, robots.txt, humans.txt, a 404 page, use of CDN, url rewriting, convention over configuration. 
• Prototyped web pages elements: page structure (header, content, footer), tabs, breadcrumbs, navigation menus, glyphicons, styled buttons, forms helpers, carousel / gallery / lightbox, sliding / scrolling / collapsig / fading effects. 
• A strong approach to changes in web user experience: a responsive layout normally based on grids of floating DIVs (see http://960.gs/), collapsible menus, images resizing / fitting /cropping, autocompletion, ajax search.

The first framework we're going to consider is:

Skeleton

http://www.getskeleton.com/

"Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone."

Skeleton is the zen garden of HTML5 frameworks, clean, light (40kb uncompressed), essential, no javascript added, without other files than the needed for a basic page.


Responsive and mobile-friendly, defined as “Style Agnostic” to underline that the product is a solid foundation where you can add your favorite styles.

The raw folder structure 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: File with no specific styles, but a variety of useful media queries 
• images (folder): 
• favicon.ico: Standard 16x16 favicon 
• apple-touch-icon (x3): All three sizes of Apple touch icons for iPhone 3, iPad and iPhone 4 with retina.

Based on a variation of the 960 grid style system with 16 colums, the maximun page width is fixed at 748px, you can set the colums number by css classes names, using absolute values or proportional fractions.

For instance, the code for a two-columns layout could be:

 

  
Mauris feugiat
  
metus at condimentum tempor
  

 
 

  
Lorem ipsum dolor
 
 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit volutpat aliquam. Praesent et enim venenatis, gravida sem sit amet, mollis mauris. Proin euismod, mauris sed sodales gravida, felis nisi scelerisque massa, vitae ornare mauris ante id nulla.
 

Or:

 

  

  Here the sidebar with the menu
  
 
 

Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus bibendum aliqua est, at condimentum turpis. Pellentesque nec erat ornare, auctor urna et, laoreet diam. Nam scelerisque vel purus id posuere. 
 

The css files contain a set of predefined values for: a stable typography, buttons, form classes, and several built in media queries:

• Smaller than 960: Smaller than the standard base grid
• Tablet Portrait: Between 768px and 959px
• All Mobile Sizes: Less than 767px
• Just Mobile Landscape: Between 480px and 767px
• Just Mobile Portrait: Less than 479px

Some interesting extensions: Skeleton for Wordpress, for Drupal and a Gem for Rails can help developers to easily try this wireframe as a base for the user frontend of their projects.

Guides:
http://www.1stwebdesigner.com/css/psd-to-html-artthatworks-skeleton-boilerplate/
http://untame.net/2012/06/responsive-design-with-the-skeleton-css-boilerplate/

Videos:
Using Skeleton in 11 videos: 

Create a Responsive Homepage in 5 Minutes or Less with Skeleton: