Whoa Cowboy, you've mozyed on over to an error that you ain't supposed to have! X
This here be a warnin to yuh, just a warnin mind you! X
What kind of bug is a debug? X
Hi, hi, hi, I am info X
Success, you sly dog you, keep killin those ladies! X

Mailpile Style Guide

Jumpstart your application with responsive HTML5, CSS3, SVG, and Webfonts

This Style Guide

This is a collection of CSS styles and corresponding HTML elements that are currently being styled. Use this code to develop the front-end of your website. A bit of this code was hacked from the Skeleton Framework. The CSS styles are all broken apart into smaller more easy to manage LESS files which need to compiled to see the changes affect the main template.css file. If you're unfamiliar with LESS I suggest CodeKit for Mac OS, or Grunt (which uses Node.js) for other platforms

About Rebar

Rebar is a collection of modular CSS files that helps rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. It's based on a responsive grid, but also provides very basic CSS for typography, buttons, forms and media queries. Go ahead, resize this super basic page to see the grid in action.

3 Core Principles

Skeleton is built on three core principles:

  • A Responsive Grid Down To Mobile: Elegant scaling from a browser to tablets to mobile.
  • Fast to Start: It's a tool for rapid development with best practices
  • Style Agnostic: It provides the most basic, beautiful styles, but is meant to be overwritten.

Docs & Support

The easiest way to really get started with Skeleton is to check out the full docs and info at www.getskeleton.com.. Skeleton is also open-source and has a project on git, so check that out if you want to report bugs or create a pull request. If you have any questions, thoughts, concerns or feedback, please don't hesitate to email me at hi@getskeleton.com.

Are You Hip?

Lomo locavore swag retro stumptown four loko keytar polaroid. Portland selfies cray, plaid pop-up salvia sustainable literally. Marfa church-key 3 wolf moon narwhal aesthetic. Hoodie Marfa fixie wayfarers, Pinterest trust fund fanny pack 3 wolf moon dreamcatcher. Echo Park chillwave jean shorts ugh. IPhone Terry Richardson letterpress, literally keytar scenester kale chips tumblr dreamcatcher deep v.

A Beautiful Boilerplate for Responsive, Mobile-Friendly Development

What Is It?

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 built on three core principles:

responsive
Responsive Grid Down To Mobile

Skeleton has a familiar, lightweight 960 grid as its base, but elegantly scales down to downsized browser windows, tablets, mobile phones (in landscape and portrait). Go ahead, resize this page!

responsive
Fast to Start

Skeleton is a tool for rapid development. 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.

responsive
Style Agnostic

Skeleton is not a UI framework. It's a development kit that provides the most basic styles as a foundation, but is ready to adopt whatever your design or style is.

Two Item Grid

Skeleton's base grid is a variation of the 960 grid system. The syntax is simple and it's effective cross browser, but the awesome part is that it also has the flexibility to go mobile like a champ. Go ahead, resize the browser and watch as the layout reacts!

One
Fifteen
Two
Fourteen
Three
Thirteen
Four
Twelve
Five
Eleven
Six
Ten
Seven
Nine
Eight
Eight
Nine
Seven
Ten
Six
Eleven
Five
Twelve
Four
Thirteen
Three
Fourteen
Two
Fifteen
One

Three Item Grid

These are examples of the grid with three columns.

Seven
Two
Seven
Six
Four
Six
Five
Six
Five
Four
Eight
Four
Three
Ten
Three
Two
Twelve
Two
One
Fourteen
One
Eight
Six
Two
Six
Six
Four
Four
Eight
Four

Four Item Grid

These are examples of the grid with four columns.

Four
Four
Four
Four
Three
Five
Five
Three
Code Example

Responsive Boxes

Common Communication

Common Food Phrases

How To Discuss The Weather

How To Make Introductions

Simple Greetings

Dates & Months

Sports Phrases

Number Phrases

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.

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
Code Example

Buttons

Buttons are intended for action and thus should have appropriate weight. The standard button is given that weight with a little bit of depth and a strong hover.

Normal
Button Primary Button Secondary Button Alert Button Warning
With Icons
Button Primary Button Secondary
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.

Checkboxes
Radio Buttons

Code Example

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:

  • 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
Code Example

Icons

Color Palate

Click square to copy HEX color value to clipboard

@blueDarkest
@blueDarker
@blueDark
@blue
@blueLight
@grayLight
@gray
@grayDark
@red
@redBorder
@orange
@brown
@greenDark
@green