Skeleton is a lightweight framework for HTML, CSS & jQuery that makes building websites easier.

What & Why

Here is where I need to chat about what Skeleton is, why it's awesome and how what the file structure is. Focus on: 1) Speed, 2) Best Practices , 3) Across devices

Basics

Here is where I need to chat about what Skeleton is, why it's awesome and how what the file structure is. Focus on: 1) Speed, 2) Best Practices , 3) Across devices

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 changes with just a couple adjustments. Regular paragraphs are set at a 14px base with 21px line height.

Heading <h1>

Heading <h2>

Heading <h3>

Heading <h4>

Heading <h5>
Heading <h6>

This is a blockquote style example. It stands out, but is awesome

Dave Gamache, Skeleton Creator

Grid

Skeleton's base grid is a simpler variation of the 960 grid system. The syntax is simpler and is just as effective cross browser and across devices, but the awesome part is that it also has the flexibility to go mobile like a champ. The option is yours to have the site scale fluidly or to have a scaled fixed grid.

One
Eleven
Two
Ten
Three
Nine
Four
Eight
Five
Seven
Six
Six
Seven
Five
Eight
Four
Nine
Three
Ten
Two
Eleven
One
Code Example

Buttons

Button are intended for action and thus should have appropriate weight. The standard buttons are given that weight by being strong and dark, but they could just as easily be colorful.

Save Now Dismiss Changes
Code Example

Tabs

Some very simple tabs that have dead simple jQuery that hook them up to their corresponding content.

  • The tabs are clean and simple unordered-list markup and basic CSS.
  • The tabs are cross-browser, but don't need a ton of hacky CSS or markup.
  • The tabs work like a charm even on mobile devices.
Code Example

Forms

Forms can be one of the biggest pains for web developers, but just use these dead simple styles and you should be good to go.

Media Queries

Skeleton uses a lot of media queries to serve the scalable grid, but also for the convenience of 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

The Future

Here is where I need to chat about what Skeleton is, why it's awesome and how what the file structure is. Focus on: 1) Speed, 2) Best Practices , 3) Across devices