<p>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, <u>this site is built on Skeleton and has ~200 lines of custom CSS</u> (half of which is the docking navigation).</p>
<p>Love Skeleton and want to Tweet it, share it, or star 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 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 coding responsive 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 -->
<p>Type is all set with the <code>rems</code>, so font-sizes and spacial relationships can be responsively sized based on a single <code><html></code> font-size property. Out of the box, Skeleton never changes the <code><html></code> font-size, but it's there in case you need it for your project. All measurements are still base 10 though so, an <code><h1></code> with <code>5.0rem</code>font-size just means <code>50px</code>.</p>
<divclass="docs-example">
<divclass="row">
<divclass="six columns">
<p><strong>The typography base</strong> is <ahref="http://www.google.com/fonts/specimen/Raleway">Raleway</a> served by Google, set at 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. Button styles are applied to a number of appropriate form elements, but can also be arbitrarily attached to anchors with a <code>.button</code> class.</p>
<p>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.</p>
<p>Code styling is kept basic – just wrap anything in a <code><code></code> and it will appear like <code>this</code>. For blocks of code, wrap a <code><code></code> with a <code><pre></code>.</p>
<divclass="docs-example">
<pre><code>.some-class {
background-color: red;
}</code></pre>
</div>
<!-- CODE EXAMPLE ———————————————————————————————————————— -->
<p>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 <code>min-width</code>. 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:</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>
<!-- CODE EXAMPLE ———————————————————————————————————————— -->
<preclass="code-example">
<codeclass="code-example-body prettyprint">/* Mobile first queries */
<p>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.</p>
<!-- CODE EXAMPLE ———————————————————————————————————————— -->
<pclass="example-description">This template is an example of how easy it can be to create a landing page with just the Skeleton grid and a few custom styles. The entire demo is ~150 lines of CSS including comments (most of which is positioning the phones at the top).</p>
<pclass="example-description">More examples will be added to help anyone get started or more familiar with how Skeleton works. The goal is education. If you're more interested in real, live examples of Skeleton sites, I'll be creating a "Built on Skeleton" list soon!</p>
