A dead simple, responsive boilerplate. Download Light as a feather at ~400 lines & built with mobile in mind. Light as a feather at ~400 lines & built with mobile in mind. Styles designed to be a starting point, not a UI framework. Styles designed to be a starting point, not a UI framework. Quick to start with zero compiling or installing necessary. Quick to start with zero compiling or installing necessary.

Is Skeleton for you? You should use Skeleton if you're embarking on a smaller project or just don't feel like you need all the utility of larger frameworks. Skeleton only styles a handful of standard HTML elements and includes a grid, but that's often more than enough to get started. In fact, this site is built on Skeleton and has ~200 lines of custom CSS (half of which is the docking navigation). Love Skeleton and want to Tweet it, share it, or star it? Well, I appreciate that <3 Tweet

The grid The grid is a 12-column fluid grid with a max width of 960px , that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly. The syntax is simple and it makes coding responsive much easier. Go ahead, resize the browser. One Eleven Two Ten Three Nine Four Eight Five Seven Six Six Seven Five Eight Four Nine Three Ten Two Eleven One One Eleven Two Ten 1/3 2/3 1/2 1/2

Typography Type is all set with the rems , so font-sizes and spacial relationships can be responsively sized based on a single <html> font-size property. Out of the box, Skeleton never changes the <html> font-size, but it's there in case you need it for your project. All measurements are still base 10 though so, an <h1> with 5.0rem font-size just means 50px . The typography base is Raleway served by Google, set at 15rem (15px) over a 1.6 line height (24px). Other type basics like anchors, strong, emphasis, and underline are all obviously included. Headings create a family of distinct sizes each with specific letter-spacing , line-height , and margins . Heading <h1> 50rem Heading <h2> 42rem Heading <h3> 36rem Heading <h4> 30rem Heading <h5> 24rem Heading <h6> 15rem Heading Heading Heading Heading Heading Heading The base type is 15px over 1.6 line height (24px) Bolded Italicized Colored Underlined

Buttons Buttons come in two basic flavors in Skeleton. The standard <button> element is plain, whereas the .button-primary button is vibrant and prominent. Button styles are applied to a number of appropriate form elements, but can also be arbitrarily attached to anchors with a .button class. Anchor button Button element Anchor button Button element Anchor button Button element Anchor button Button element

Forms Forms are a huge pain, but hopefully these styles make it a bit easier. All inputs, select, and buttons are normalized for a common height cross-browser so inputs can be stacked or placed alongside each other. Your email Reason for contacting Questions Admiration Can I get your number? Message Send a copy to yourself Your email Reason for contacting Questions Admiration Can I get your number? Message Send a copy to yourself

Lists Unordered lists have basic styles

They use the circle list style Nested lists styled to feel right Can nest either type of list into the other

Just more list items mama san Ordered lists also have basic styles They use the decimal list style Ordered and unordered can be nested

Can nest either type of list into the other Last list item just for the fun Item 1

Item 2 Item 2.1 Item 2.2

Item 3

Code Code styling is kept basic – just wrap anything in a <code> and it will appear like this . For blocks of code, wrap a <code> with a <pre> . .some-class { background-color: red; } .some-class { background-color: red; }

Tables Be sure to use properly formed table markup with <thead> and <tbody> when building a table . Name Age Sex Location Dave Gamache 26 Male San Francisco Dwayne Johnson 42 Male Hayward Name Age Sex Location Dave Gamache 26 Male San Francisco Dwayne Johnson 42 Male Hayward

Media queries Skeleton uses media queries to serve its scalable grid, but also has a list of queries for convenience of styling your site across devices. The queries are mobile-first, meaning they target min-width . Mobile-first queries are how Skeleton's grid is built and is the preferrable method of organizing CSS. It means all styles outside of a query apply to all devices, then larger devices are targeted for enhancement. This prevents small devices from having to parse tons of unused CSS. The sizes for the queries are: Desktop HD : 1200px

: 1200px Desktop : 1000px

: 1000px Tablet: 750px Phablet : 550px

: 550px Mobile: 400px /* Mobile first queries */ /* Larger than mobile */ @media (min-width: 400px) {} /* Larger than phablet */ @media (min-width: 550px) {} /* Larger than tablet */ @media (min-width: 750px) {} /* Larger than desktop */ @media (min-width: 1000px) {} /* Larger than Desktop HD */ @media (min-width: 1200px) {}

Utilities Skeleton has a number of small utility classes that act as easy-to-use helpers. Sometimes it's better to use a utility class than create a whole new class just to float an element. /* Utility Classes */ /* Make element full width */ .u-full-width { width: 100%; box-sizing: border-box; } /* Make sure elements don't run outside containers (great for images in columns) */ .u-max-full-width { max-width: 100%; box-sizing: border-box; } /* Float either direction */ .u-pull-right { float: right; } .u-pull-left { float: left; } /* Clear a float */ .u-cf { content: ""; display: table; clear: both; }