<h3class="title">A dead simple, responsive boilerplate.</h3>
<aclass="button button-primary">Download</a>
<divclass="value-props row">
<divclass="four columns offset-by-two">
<imgclass="value-img"src="images/feathers.svg">
Super light at less than a kb & built with mobile in mind.
</div>
<divclass="four columns">
<imgclass="value-img"src="images/frame.svg">
Styles designed to be a starting point, not a UI framework.
</div>
<divclass="four columns">
<imgclass="value-img"src="images/frame.svg">
No compiling or installing necessary. Just vanilla CSS.
</div>
</div>
</section>
<divclass="social-bar">
</div>
<!-- Why use Skeleton -->
<divclass="docs-section">
<h6class="docs-header">Is Skeleton for you?</h6>
<p>You should use Skeleton if you're feeling like whole UI frameworks like Bootstrap and Foundation are overkill for your project and you just want the basics. 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, <u>this site is built on Skeleton and has less than 100 lines of custom CSS.</u></p>
<p>Love Skeleton and want to share it, follow it, love it? Well, I appreciate that <3</p>
<ahref="https://twitter.com/share"class="twitter-share-button"data-url="http://www.getskeleton.com"data-text="Skeleton - A dead simple, responsive boilerplate."data-via="dhg"data-related="dhg">Tweet</a>
<p>The grid is just a <u>12-column fluid grid with a max width of 960px</u>, 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 responsive implementation much, much easier. Go ahead, resize the browser. </p>
<divclass="example-grid docs-example">
<divclass="row">
<divclass="one column">One</div>
<divclass="eleven columns">Eleven</div>
</div>
<divclass="row">
<divclass="two columns">Two</div>
<divclass="ten columns">Ten</div>
</div>
<divclass="row">
<divclass="three columns">Three</div>
<divclass="nine columns">Nine</div>
</div>
<divclass="row">
<divclass="four columns">Four</div>
<divclass="eight columns">Eight</div>
</div>
<divclass="row">
<divclass="five columns">Five</div>
<divclass="seven columns">Seven</div>
</div>
<divclass="row">
<divclass="six columns">Six</div>
<divclass="six columns">Six</div>
</div>
<divclass="row">
<divclass="seven columns">Seven</div>
<divclass="five columns">Five</div>
</div>
<divclass="row">
<divclass="eight columns">Eight</div>
<divclass="four columns">Four</div>
</div>
<divclass="row">
<divclass="nine columns">Nine</div>
<divclass="three columns">Three</div>
</div>
<divclass="row">
<divclass="ten columns">Ten</div>
<divclass="two columns">Two</div>
</div>
<divclass="row">
<divclass="eleven columns">Eleven</div>
<divclass="one column">One</div>
</div>
</div>
<!-- CODE EXAMPLE ———————————————————————————————————————— -->
<preclass="code-example">
<codeclass="code-example-body prettyprint"><!-- .container is main centered wrapper -->
<divclass="container">
<!-- all columns must be wrapped in a .row -->
<divclass="row">
<divclass="one column">One</div>
<divclass="eleven columns">Eleven</div>
</div>
<!-- just use a number and class 'column' or 'columns' -->
<divclass="row">
<divclass="two columns">Two</div>
<divclass="ten columns">Ten</div>
</div>
<!-- there are a few shorthand columns widths as well -->
<divclass="row">
<divclass="one-third columns">1/3</div>
<divclass="two-thirds columns">2/3</div>
</div>
<divclass="row">
<divclass="one-half columns">1/2</div>
<divclass="one-half columns">1/2</div>
</div>
</div>
<!-- Note: columns *cannot* be nested, but you shouldn't ever need to -->
<p>Type is all set with the <code>rems</code>, so font-sizes and spacial relationships are responsively sized based on a single <code><html></code> font-size property. Everything is still base 10 though so, an <code><h1></code> is <code>5.0rem</code>, which just means <code>50px</code>.</p>
<divclass="docs-example">
<divclass="row">
<divclass="six columns">
<p><strong>The typography base</strong> is 15rem (15px) over a 1.6 line height (24px). Other type basics like <ahref="#">anchors</a>, <strong>strong</strong>, <em>emphasis</em>, and <u>underline</u> are all obviously included.</p>
<p><strong>Headings</strong> create a family of distinct sizes each with specific <code>letter-spacing</code>, <code>line-height</code>, and <code>margins</code>.</p>
<p>Buttons come in two basic flavors in Skeleton. The standard <code><button></code> element is plain, whereas the <code>.button-primary</code> button is vibrant and prominent.</p>
<textareaclass="u-full-width"placeholder="Hi Dave …"></textarea>
<labelclass="example-send-yourself-copy">
<inputtype="checkbox">
<spanclass="label-body">Send a copy to yourself</span>
</label>
<inputtype="submit"value="Submit">
</div>
</form>
</div>
</div>
<!-- Lists -->
<divclass="docs-section">
<h6class="docs-header">Lists</h6>
<divclass="row docs-example">
<divclass="six columns">
<ul>
<li>Unordered lists have basic styles</li>
<li>
They use the circle list style
<ul>
<li>Nested lists styled to feel right</li>
<li>Can nest either type of list into the other</li>
</ul>
</li>
<li>Just more list items mama san</li>
</ul>
</div>
<divclass="six columns">
<ol>
<li>Ordered lists also have basic styles</li>
<li>
They use the decimal list style
<ul>
<li>Ordered and unordered can be nested</li>
<li>Can nest either type of list into the other</li>
</ul>
</li>
<li>Last list item just for the fun</li>
</ol>
</div>
</div>
</div>
<!-- Code -->
<divclass="row docs-section">
<h6class="docs-header">Code</h6>
<p>Code styling was kept super basic –basically just wrap something in a <code><code></code> tag and it will look just like that code tag just did. For blocks of code, wrap a <code><code></code> tag with a <code><pre></code> tag.</p>
<p>Only most basic styling for tabular data. Remember to always use a proper table structure –check the code example if you're not sure about it.</p>
<divclass="docs-example">
<tableclass="u-full-width">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dave Gamache</td>
<td>26</td>
<td>Male</td>
<td>San Francisco</td>
</tr>
<tr>
<td>Dwayne Johnson</td>
<td>42</td>
<td>Male</td>
<td>Hayward</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Queries -->
<divclass="row docs-section">
<h6class="docs-header">Media queries</h6>
<p>Skeleton uses media queries to serve the scalable grid, but also has a list of queries for convenience of styling your site across devices. There are two sets of queries, the first is mobile-first style, meaning they target <code>min-width</code> so all the base styles are mobile, then queries are used to enhance for larger screen sizes. Mobile-first queries are how Skeleton's grid is styled. I've also provided the same set of queries with <code>max-width</code> if that's your preference. The sizes for the queries are:</p>
<divclass="docs-example row">
<divclass="six columns">
<ul>
<li><strong>Desktop HD</strong>: 1200px</li>
<li><strong>Desktop</strong>: 1000px</li>
<li><strong>Tablet</strong>: 750px</li>
</ul>
</div>
<divclass="six columns">
<ul>
<li><strong>Phablet</strong>: 550px</li>
<li><strong>Mobile</strong>: 400px</li>
</ul>
</div>
</div>
</div>
<!-- Examples -->
<divclass="row docs-section">
<h6class="docs-header">Examples of Skeleton sites</h6>
</div>
<!-- License & Log -->
<divclass="row docs-section">
<h6class="docs-header">License & Log</h6>
<p>All parts of Skeleton are free to use and abuse under the <ahref="http://opensource.org/licenses/mit-license.php">open-source MIT license</a>. More importantly, if you're into coding head over to the <ahref="https://github.com/dhg/Skeleton">Github page</a> and contribute or fork this bad boy.</p>
