<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>, but the max can be changed with one line of CSS. 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 ———————————————————————————————————————— -->
<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 vibrant, whereas the <code>.secondary</code> button takes a monotone backseat.</p>
<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 just use a <code><pre></code> tag.</p>
<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>
<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>
