BitGoblin/Bones
1
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases Wiki Activity

one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles

Browse Source
This commit is contained in:
Dave Gamache 2014-12-01 03:02:51 -08:00
parent 7a68cd5b80
commit 2cbda075be
10 changed files with 696 additions and 751 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/apple-touch-icon-114x114.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.9 KiB

BIN
images/apple-touch-icon-72x72.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.8 KiB

BIN
images/apple-touch-icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.4 KiB

6
images/feathers.svg Normal file
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g>
<path d="M26.789,78.345l2.878,0.084v8.228c0,0.828,0.672,1.5,1.5,1.5s1.5-0.672,1.5-1.5v-8.228l2.877-0.084 c0.452-0.013,0.875-0.23,1.149-0.591l10-13.14c0.43-0.564,0.405-1.353-0.059-1.889l-4.245-4.912l3.969-2.768 c0.402-0.28,0.642-0.74,0.642-1.23V32.122c0-0.329-0.108-0.648-0.308-0.91L32.359,12.432c-0.034-0.045-0.081-0.074-0.12-0.115 c-0.059-0.062-0.115-0.124-0.184-0.176c-0.065-0.048-0.136-0.08-0.206-0.117c-0.051-0.027-0.095-0.064-0.15-0.085 c-0.015-0.006-0.03-0.005-0.045-0.01c-0.077-0.027-0.157-0.037-0.237-0.05c-0.071-0.012-0.14-0.029-0.211-0.03 c-0.071-0.002-0.141,0.011-0.213,0.019c-0.084,0.01-0.165,0.019-0.246,0.042c-0.02,0.006-0.04,0.004-0.06,0.01 c-0.046,0.015-0.081,0.046-0.125,0.065c-0.079,0.035-0.156,0.071-0.228,0.12c-0.061,0.041-0.113,0.089-0.166,0.138 c-0.04,0.036-0.086,0.061-0.122,0.102l-9.972,11.236c-0.38,0.429-0.483,1.037-0.265,1.567l2.253,5.472h-5.229 c-0.828,0-1.5,0.672-1.5,1.5v16.631c0,0.381,0.145,0.747,0.405,1.025l4.574,4.888l-4.779,8.292 c-0.302,0.523-0.26,1.177,0.106,1.657l10,13.14C25.914,78.115,26.337,78.333,26.789,78.345z M44,53.034l-4.691,3.271 c-0.349,0.243-0.577,0.623-0.63,1.044c-0.053,0.422,0.075,0.846,0.354,1.167l4.537,5.25L34.74,75.368l-2.073,0.061v-1.057V17.78 L44,32.629V53.034z M23.467,55.201c0.329-0.572,0.246-1.292-0.205-1.774l-4.929-5.267V33.622h5.969c0.5,0,0.968-0.25,1.246-0.665 c0.278-0.416,0.331-0.943,0.141-1.406l-2.749-6.677l6.728-7.581v33.247l-4.744-3.701c-0.655-0.51-1.597-0.393-2.105,0.26 c-0.51,0.653-0.394,1.596,0.26,2.105l6.59,5.141v11.88l-4.744-3.7c-0.655-0.51-1.597-0.393-2.105,0.26 c-0.51,0.653-0.394,1.596,0.26,2.105l6.59,5.14v4.343v1.057l-2.074-0.061l-8.962-11.776L23.467,55.201z"/>
<path d="M79.688,45.335l4.779-8.292c0.302-0.523,0.26-1.177-0.106-1.657l-10-13.141c-0.274-0.361-0.697-0.578-1.15-0.591 l-2.877-0.083v-8.229c0-0.828-0.672-1.5-1.5-1.5s-1.5,0.672-1.5,1.5v8.229l-2.876,0.083c-0.453,0.013-0.876,0.229-1.15,0.591 l-10,13.141c-0.43,0.564-0.405,1.353,0.059,1.889l4.245,4.911l-3.969,2.768c-0.402,0.28-0.642,0.74-0.642,1.23v21.694 c0,0.329,0.108,0.648,0.308,0.91l14.333,18.779c0.075,0.099,0.162,0.185,0.256,0.26c0.014,0.011,0.03,0.018,0.044,0.028 c0.098,0.073,0.202,0.131,0.313,0.177c0.017,0.007,0.029,0.02,0.046,0.026c0.018,0.007,0.038,0.004,0.057,0.01 c0.153,0.052,0.312,0.087,0.475,0.087c0.147,0,0.29-0.029,0.429-0.071c0.017-0.005,0.034-0.003,0.051-0.008 c0.015-0.005,0.026-0.016,0.041-0.021c0.131-0.049,0.257-0.11,0.371-0.195c0.007-0.005,0.012-0.012,0.019-0.018 c0.074-0.057,0.146-0.119,0.21-0.191l9.972-11.236c0.38-0.429,0.483-1.037,0.265-1.567l-2.253-5.472h5.229 c0.828,0,1.5-0.672,1.5-1.5v-16.63c0-0.381-0.145-0.747-0.405-1.025L79.688,45.335z M56,46.966l4.691-3.271 c0.349-0.243,0.577-0.623,0.63-1.044c0.053-0.422-0.075-0.846-0.354-1.167l-4.537-5.25l8.829-11.602l2.073-0.06v1.057v56.591 L56,67.371V46.966z M81.667,66.378h-5.969c-0.5,0-0.968,0.25-1.246,0.665c-0.278,0.416-0.331,0.943-0.141,1.406l2.749,6.677 l-6.728,7.581V49.461l4.744,3.7c0.274,0.214,0.6,0.317,0.922,0.317c0.446,0,0.888-0.198,1.184-0.577 c0.51-0.653,0.394-1.596-0.26-2.105l-6.59-5.14v-11.88l4.744,3.7c0.274,0.214,0.6,0.317,0.922,0.317 c0.446,0,0.888-0.198,1.184-0.577c0.51-0.653,0.394-1.596-0.26-2.105l-6.59-5.14v-4.343v-1.057l2.074,0.06l8.962,11.777 l-4.836,8.391c-0.329,0.572-0.246,1.292,0.205,1.774l4.929,5.267V66.378z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

324
index.html
View File

@ -1,14 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]--> <html lang="en">
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head> <head>
<!-- Basic Page Needs <!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– --> –––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8"> <meta charset="utf-8">
<title>Your Page Title Here :)</title> <title>Your Page Title Here</title>
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
@ -23,21 +20,12 @@
<!-- CSS <!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– --> –––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="stylesheets/normalize.css"> <link rel="stylesheet" href="stylesheets/normalize.css">
<link rel="stylesheet" href="stylesheets/base.css">
<link rel="stylesheet" href="stylesheets/skeleton.css"> <link rel="stylesheet" href="stylesheets/skeleton.css">
<link rel="stylesheet" href="stylesheets/layout.css">
<link rel="stylesheet" href="stylesheets/custom.css"> <link rel="stylesheet" href="stylesheets/custom.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Favicons <!-- Favicons
–––––––––––––––––––––––––––––––––––––––––––––––––– --> –––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="shortcut icon" href="images/favicon.ico"> <link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
</head> </head>
<body> <body>
@ -46,76 +34,132 @@
–––––––––––––––––––––––––––––––––––––––––––––––––– --> –––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="container"> <div class="container">
<section class="header"> <section class="header">
<h3 class="title">A responsive boilerplate just for the basics.</h3> <h3 class="title">A dead simple, responsive boilerplate.</h3>
<a class="button">Download</a> <a class="button button-primary">Download</a>
<div class="value-props row"> <div class="value-props row">
<div class="four columns offset-by-two"> <div class="four columns offset-by-two">
<img class="value-img" src="images/frame.svg"> <img class="value-img" src="images/feathers.svg">
Mobile first and weighing in at measly .5kb Super light at less than a kb &amp; built with mobile in mind.
</div> </div>
<div class="four columns"> <div class="four columns">
<img class="value-img" src="images/frame.svg"> <img class="value-img" src="images/frame.svg">
Only styles basic HTML elements Styles designed to be a starting point, not a UI framework.
</div> </div>
<div class="four columns"> <div class="four columns">
<img class="value-img" src="images/frame.svg"> <img class="value-img" src="images/frame.svg">
Not a framework, but a jumping off point for devs No compiling or installing necessary. Just vanilla CSS.
</div> </div>
</div> </div>
</section> </section>
<!-- Why use Skeleton --> <div class="social-bar">
<div class="row">
<div class="twelve columns offset-by-two docs-section">
<h6 class="docs-header">Why use Skeleton</h6>
<p>You should use Skeleton if you're feeling like whole UI frameworks like Bootstrap, Foundation, and Pure are overkill for your projects and you just want the basics. Just styling the 80+ standard HTML elements (&lt;button&gt;, &lt;p&gt;, &lt;nav&gt;, &hellip;) can get you really far. For what it's worth, <u>this site is built on Skeleton and only requires ~100 lines of additional CSS.</u></p>
</div> </div>
<!-- Why use Skeleton -->
<div class="docs-section">
<h6 class="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>
<a href="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>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.getskeleton.com&amp;width&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=true&amp;height=21&amp;appId=151131931646052" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px; width:140px" allowTransparency="true"></iframe>
<iframe src="http://ghbtns.com/github-btn.html?user=dhg&repo=Skeleton&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
<iframe src="http://ghbtns.com/github-btn.html?user=dhg&repo=Skeleton&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
</div> </div>
<!-- Grid --> <!-- Grid -->
<div class="row"> <div class="docs-section">
<div class="twelve columns offset-by-two docs-section">
<h6 class="docs-header">The grid</h6> <h6 class="docs-header">The grid</h6>
<p>The grid is just a <u>12-column fluid grid with a max width of 960px</u> (but this 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> <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>
<div class="example-grid docs-example"> <div class="example-grid docs-example">
<div class="one column alpha">One</div> <div class="row">
<div class="eleven columns omega">Eleven</div> <div class="one column">One</div>
<div class="two columns alpha">Two</div> <div class="eleven columns">Eleven</div>
<div class="ten columns omega">Ten</div>
<div class="three columns alpha">Three</div>
<div class="nine columns omega">Nine</div>
<div class="four columns alpha">Four</div>
<div class="eight columns omega">Eight</div>
<div class="five columns alpha">Five</div>
<div class="seven columns omega">Seven</div>
<div class="six columns alpha">Six</div>
<div class="six columns omega">Six</div>
<div class="seven columns alpha">Seven</div>
<div class="five columns omega">Five</div>
<div class="eight columns alpha">Eight</div>
<div class="four columns omega">Four</div>
<div class="nine columns alpha">Nine</div>
<div class="three columns omega">Three</div>
<div class="ten columns alpha">Ten</div>
<div class="two columns omega">Two</div>
<div class="eleven columns alpha">Eleven</div>
<div class="one column omega">One</div>
</div> </div>
<div class="row">
<div class="two columns">Two</div>
<div class="ten columns">Ten</div>
</div>
<div class="row">
<div class="three columns">Three</div>
<div class="nine columns">Nine</div>
</div>
<div class="row">
<div class="four columns">Four</div>
<div class="eight columns">Eight</div>
</div>
<div class="row">
<div class="five columns">Five</div>
<div class="seven columns">Seven</div>
</div>
<div class="row">
<div class="six columns">Six</div>
<div class="six columns">Six</div>
</div>
<div class="row">
<div class="seven columns">Seven</div>
<div class="five columns">Five</div>
</div>
<div class="row">
<div class="eight columns">Eight</div>
<div class="four columns">Four</div>
</div>
<div class="row">
<div class="nine columns">Nine</div>
<div class="three columns">Three</div>
</div>
<div class="row">
<div class="ten columns">Ten</div>
<div class="two columns">Two</div>
</div>
<div class="row">
<div class="eleven columns">Eleven</div>
<div class="one column">One</div>
</div> </div>
</div> </div>
<!-- Typography -->
<!-- CODE EXAMPLE ———————————————————————————————————————— -->
<pre class="code-example">
<code class="code-example-body">
<div class="container">
<div class="row"> <div class="row">
<div class="twelve columns offset-by-two docs-section"> <div class="one column">One</div>
<div class="eleven columns">Eleven</div>
</div>
<div class="row">
<div class="two columns">Two</div>
<div class="ten columns">Ten</div>
</div>
<!-- ...few more in-between .rows -->
<div class="row">
<div class="ten columns">Ten</div>
<div class="two columns">Two</div>
</div>
<div class="row">
<div class="eleven columns">Eleven</div>
<div class="one column">One</div>
</div>
</div>
</code>
</pre>
<!-- ————————————————————————————————————————————————————— -->
</div>
<!-- Typography -->
<div class="row docs-section">
<h6 class="docs-header">Typography</h6> <h6 class="docs-header">Typography</h6>
<p>Type is all set with the <code>rems</code>, so font-sizes and spacial relationships are responsively sized based on a single <code>&lt;html&gt;</code> font-size property. Everything is still base 10 though so, an <code>&lt;h1&gt;</code> is <code>5.0rem</code>, which just means <code>50px</code>.</p> <p>Type is all set with the <code>rems</code>, so font-sizes and spacial relationships are responsively sized based on a single <code>&lt;html&gt;</code> font-size property. Everything is still base 10 though so, an <code>&lt;h1&gt;</code> is <code>5.0rem</code>, which just means <code>50px</code>.</p>
<div class="docs-example"> <div class="docs-example">
<div class="row"> <div class="row">
<div class="six columns alpha"> <div class="six columns">
<p><strong>The typography base</strong> is 15rem (15px) over a 1.6 line height (24px). Other type basics like <a href="#">anchors</a>, <strong>strong</strong>, <em>emphasis</em>, and <u>underline</u> are all obviously included.</p> <p><strong>The typography base</strong> is 15rem (15px) over a 1.6 line height (24px). Other type basics like <a href="#">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><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>
</div> </div>
<div class="six columns omega"> <div class="six columns">
<h1>Heading<span class="heading-font-size"> <code>&lt;h1&gt;</code> 50rem</span></h1> <h1>Heading<span class="heading-font-size"> <code>&lt;h1&gt;</code> 50rem</span></h1>
<h2>Heading<span class="heading-font-size"> <code>&lt;h2&gt;</code> 42rem</span></h2> <h2>Heading<span class="heading-font-size"> <code>&lt;h2&gt;</code> 42rem</span></h2>
<h3>Heading<span class="heading-font-size"> <code>&lt;h3&gt;</code> 36rem</span></h3> <h3>Heading<span class="heading-font-size"> <code>&lt;h3&gt;</code> 36rem</span></h3>
@ -125,36 +169,64 @@
</div> </div>
</div> </div>
</div> </div>
<!-- CODE EXAMPLE ———————————————————————————————————————— -->
<pre class="code-example">
<code class="code-example-body">
<div class="container">
<div class="row">
<div class="one column">One</div>
<div class="eleven columns">Eleven</div>
</div> </div>
</div> </div>
</code>
</pre>
<!-- ————————————————————————————————————————————————————— -->
</div>
<!-- Buttons --> <!-- Buttons -->
<div class="row"> <div class="row docs-section">
<div class="twelve columns offset-by-two docs-section">
<h6 class="docs-header">Buttons</h6> <h6 class="docs-header">Buttons</h6>
<p>Buttons come in two basic flavors in Skeleton. The standard <code>&lt;button&gt;</code> element is vibrant, whereas the <code>.secondary</code> button takes a monotone backseat.</p> <p>Buttons come in two basic flavors in Skeleton. The standard <code>&lt;button&gt;</code> element is vibrant, whereas the <code>.secondary</code> button takes a monotone backseat.</p>
<div class="docs-example"> <div class="docs-example">
<a class="button">Anchor button</a> <a class="button" href="#">Anchor button</a>
<button>Button element</button> <button>Button element</button>
<a class="button secondary">Anchor button</a> <a class="button button-primary" href="#">Anchor button</a>
<button class="secondary">Button element</button> <button class="button button-primary">Button element</button>
</div>
</div> </div>
</div> </div>
<!-- Forms --> <!-- Forms -->
<div class="row"> <div class="row docs-section">
<div class="twelve columns offset-by-two docs-section">
<h6 class="docs-header">Forms</h6> <h6 class="docs-header">Forms</h6>
<p>Forms are a huge pain, but hopefully these styles make it a bit easier.</p>
<div class="docs-example docs-example-forms">
<form>
<div class="row">
<div class="six columns">
<label for="exampleTextInput">Your email</label>
<input class="u-full-width" type="email" placeholder="test@mailbox.com" id="exampleTextInput">
</div>
<div class="six columns">
<label for="exampleTextInput">Recipient's Email</label>
<input class="u-full-width" type="email" placeholder="secr3tPa55w0rd" id="exampleTextInput">
</div>
<label>Message</label>
<textarea class="u-full-width" placeholder="Hi Dave &hellip;"></textarea>
<label class="example-send-yourself-copy">
<input type="checkbox">
<span class="label-body">Send a copy to yourself</span>
</label>
<input type="submit" value="Submit">
</div>
</form>
</div> </div>
</div> </div>
<!-- Lists --> <!-- Lists -->
<div class="row"> <div class="docs-section">
<div class="twelve columns offset-by-two docs-section">
<h6 class="docs-header">Lists</h6> <h6 class="docs-header">Lists</h6>
<div class="row docs-example"> <div class="row docs-example">
<div class="six columns alpha"> <div class="six columns">
<ul> <ul>
<li>Unordered lists have basic styles</li> <li>Unordered lists have basic styles</li>
<li> <li>
@ -167,7 +239,7 @@
<li>Just more list items mama san</li> <li>Just more list items mama san</li>
</ul> </ul>
</div> </div>
<div class="six columns omega"> <div class="six columns">
<ol> <ol>
<li>Ordered lists also have basic styles</li> <li>Ordered lists also have basic styles</li>
<li> <li>
@ -182,53 +254,127 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- Code --> <!-- Code -->
<div class="row"> <div class="row docs-section">
<div class="twelve columns offset-by-two docs-section">
<h6 class="docs-header">Code</h6> <h6 class="docs-header">Code</h6>
<p>Code styling was kept super basic – basically just wrap something in a <code>&lt;code&gt;</code> tag and it will look just like that code tag just did. For blocks of code just use a <code>&lt;pre&gt;</code> tag.</p> <p>Code styling was kept super basic – basically just wrap something in a <code>&lt;code&gt;</code> tag and it will look just like that code tag just did. For blocks of code just use a <code>&lt;pre&gt;</code> tag.</p>
<div class="docs-example"> <div class="docs-example">
<pre>.some-class {<br>&nbsp;&nbsp;background-color: red<br>}</pre> <pre><code>.some-class {<br>&nbsp;&nbsp;background-color: red<br>}</code></pre>
</div>
</div> </div>
</div> </div>
<!-- Tables --> <!-- Tables -->
<div class="row"> <div class="row docs-section">
<div class="twelve columns offset-by-two docs-section">
<h6 class="docs-header">Tables</h6> <h6 class="docs-header">Tables</h6>
<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>
<div class="docs-example">
<table class="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>
</div> </div>
<!-- Queries --> <!-- Queries -->
<div class="row"> <div class="row docs-section">
<div class="twelve columns offset-by-two docs-section">
<h6 class="docs-header">Media queries</h6> <h6 class="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>
<div class="docs-example row">
<div class="six columns">
<ul>
<li><strong>Desktop HD</strong>: 1200px</li>
<li><strong>Desktop</strong>: 1000px</li>
<li><strong>Tablet</strong>: 750px</li>
</ul>
</div>
<div class="six columns">
<ul>
<li><strong>Phablet</strong>: 550px</li>
<li><strong>Mobile</strong>: 400px</li>
</ul>
</div>
</div> </div>
</div> </div>
<!-- Other --> <!-- Examples -->
<div class="row"> <div class="row docs-section">
<div class="twelve columns offset-by-two docs-section"> <h6 class="docs-header">Examples of Skeleton sites</h6>
<h6 class="docs-header">Miscellaneous</h6>
<p>hrs, images</p>
</div>
</div> </div>
<!-- License & Log -->
<div class="row docs-section">
<h6 class="docs-header">License &amp; Log</h6>
<p>All parts of Skeleton are free to use and abuse under the <a href="http://opensource.org/licenses/mit-license.php">open-source MIT license</a>. More importantly, if you're into coding head over to the <a href="https://github.com/dhg/Skeleton">Github page</a> and contribute or fork this bad boy.</p>
</div>
<!-- ONES I SHOULD MAYBE DO? --> <div class="code-toggler">
<!-- nav --> <span class="code-toggle"></span>
<!-- header --> <span class="code-label">
<!-- footer --> <span class="code-label-show">Show </span>
<!-- iframe --> <span class="code-label-hide">Hide </span>
<!-- video/object --> code
<!-- audio? --> </span>
</div>
</div> </div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var codeIsActive = false,
$sections = $('.docs-section'),
$window = $(window)
$('.code-toggler').on('click', toggleCode)
function toggleCode() {
var windowScrollTop = $window.scrollTop()
var offsetHeight = windowScrollTop
$sections.each(function (i) {
if($(this).children('.code-example').length > 0) {
var codeExampleHeight = $(this).children('.code-example').outerHeight(true),
sectionBottomPadding = parseInt($('.docs-section').css('padding-bottom'))
if(windowScrollTop > $(this).offset().top + $(this).outerHeight() - sectionBottomPadding) {
if(codeIsActive == false) {
offsetHeight += codeExampleHeight
} else {
offsetHeight -= codeExampleHeight
}
}
}
})
$('body').toggleClass('code-snippets-visible')
codeIsActive = !codeIsActive
$window.scrollTop(offsetHeight)
}
});
</script>
<!-- End Document <!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– --> –––––––––––––––––––––––––––––––––––––––––––––––––– -->

230
stylesheets/base.css
View File

@ -1,230 +0,0 @@
/*
* Skeleton V2.0
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2014
*/
/* Basic Styles
-------------------------------------------------- */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
font-size: 62.5%;
}
body {
background: #fff;
font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
line-height: 1.6;
font-weight: 400;
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #222;
}
/* Typography
-------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
font-weight: 300;
margin-top: 0;
margin-bottom: 2rem;
}
h1 { font-size: 5.0rem; line-height: 1.2; letter-spacing: -.1rem;}
h2 { font-size: 4.2rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.6rem; line-height: 1.3; letter-spacing: -.1rem; }
h4 { font-size: 3.0rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 2.4rem; line-height: 1.5; letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; }
/* Links
-------------------------------------------------- */
a {
color: #1EAEDB;
}
a:hover,
a:focus {
color: #0FA0CE;
}
/* Buttons
-------------------------------------------------- */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
background-color: #33C3F0;
border-radius: 4px;
color: #FFF;
display: inline-block;
text-align: center;
font-size: 11px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
height: 38px;
line-height: 38px;
padding: 0 30px;
border-width: 0;
letter-spacing: .1rem;
text-transform: uppercase;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
background-color: #1EAEDB;
color: #FFF;
}
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
background-color: #1EAEDB;
color: #FFF;
outline: 0;
}
.button.secondary,
button.secondary,
input[type="submit"].secondary,
input[type="reset"].secondary,
input[type="button"].secondary {
background-color: #B6B6B6;
}
.button.secondary:hover,
button.secondary:hover,
input[type="submit"].secondary:hover,
input[type="reset"].secondary:hover,
input[type="button"].secondary:hover {
background-color: #AAA;
color: #FFF;
}
.button.secondary:focus,
button.secondary:focus,
input[type="submit"].secondary:focus,
input[type="reset"].secondary:focus,
input[type="button"].secondary:focus {
background-color: #AAA;
color: #FFF;
outline: 0;
}
.button-full-width {
width: 100%;
padding: 0;
}
/* Forms
-------------------------------------------------- */
input[type="email"],
input[type="search"],
input[type="text"],
input[type="password"],
textarea,
select {
border: 1px solid #B6B6B6;
height: 36px;
padding: 0 10px;
border-radius: 4px;
box-shadow: none;
}
input[type="email"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
border: 1px solid #33C3F0;
outline: 0;
}
label,
legend {
display: block;
font-weight: 600;
margin-bottom: .3rem;
}
input[disabled] {
cursor: not-allowed;
background-color: #EFEFEF;
}
fieldset {
border-width: 0;
padding: 0;
}
input[type="checkbox"] {
display: inline;
}
label span,
legend span {
font-weight: normal;
margin-left: .5rem;
}
/* Lists
-------------------------------------------------- */
ul {
list-style: circle inside; }
ol {
list-style: decimal inside; }
ol, ul {
padding-left: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
margin: 1.5rem 0 1.5rem 3rem;
font-size: 90%; }
li {
margin-bottom: 1rem;
}
/* Code
-------------------------------------------------- */
code {
padding: .2rem .5rem;
margin: 0 .2rem;
font-size: 90%;
background: #F1F1F1;
border: 1px solid #E1E1E1;
border-radius: 4px;
white-space: nowrap;
}
pre {
padding: 1rem 1.5rem;
background: #F1F1F1;
font-size: 90%;
border: 1px solid #E1E1E1;
border-radius: 4px;
}
/* Spacing
-------------------------------------------------- */
input,
textarea,
select {
margin-bottom: 1.5rem;
}
p,
hr,
pre,
blockquote,
form,
dl,
figure,
table,
p,
ul,
ol {
margin-bottom: 2.5rem;
}

104
stylesheets/custom.css
View File

@ -1,29 +1,24 @@
.container { .container {
width: 760px; max-width: 760px; }
}
.header { .header {
margin-top: 17rem; margin-top: 18rem;
text-align: center; text-align: center; }
}
.value-props { .value-props {
margin-top: 15rem; margin-top: 15rem;
margin-bottom: 10rem; margin-bottom: 10rem; }
}
.docs-header { .docs-header {
text-transform: uppercase; text-transform: uppercase;
font-size: 1.4rem; font-size: 1.4rem;
letter-spacing: .2rem; letter-spacing: .2rem;
font-weight: 600; font-weight: 600; }
}
.docs-section { .docs-section {
border-top: 1px solid #eee; border-top: 1px solid #eee;
padding: 6rem 0; padding: 4rem 0;
} margin-bottom: 0;}
.value-img { .value-img {
display: block; display: block;
text-align: center; text-align: center;
margin: 0 auto 1rem; margin: 0 auto 1rem;}
}
.example-grid .column, .example-grid .column,
.example-grid .columns { .example-grid .columns {
background: #EEE; background: #EEE;
@ -33,41 +28,78 @@
text-transform: uppercase; text-transform: uppercase;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
margin-bottom: 1.5rem; margin-bottom: .75rem;
font-weight: 600; font-weight: 600;
letter-spacing: .1rem; letter-spacing: .1rem; }
}
.docs-example .row, .docs-example .row,
.docs-example.row, .docs-example.row {
.docs-example pre, margin-bottom: 0; }
.docs-example pre,
.docs-example .eleven.columns.alpha,
.docs-example .one.column.omega {
margin-bottom: 0;
}
.docs-example h1, .docs-example h1,
.docs-example h2, .docs-example h2,
.docs-example h3, .docs-example h3,
.docs-example h4, .docs-example h4,
.docs-example h5, .docs-example h5,
.docs-example h6 { .docs-example h6 {
margin-bottom: 1rem; margin-bottom: 1rem; }
}
.heading-font-size { .heading-font-size {
font-size: 1.2rem; font-size: 1.2rem;
color: #999; color: #999;
letter-spacing: normal; letter-spacing: normal; }
.code-example {
margin-top: 0;
margin-bottom: 0;
display: none;
} }
.code-snippets-visible .code-example {
display: block;
}
.code-toggler {
position: fixed;
bottom: 10px;
left: 10px;
width: 34px;
height: 20px;
background: #E5E5E5;
border: 1px solid #C6C6C6;
border-radius: 100px;
cursor: pointer; }
.code-toggle {
position: absolute;
width: 16px;
height: 16px;
top: 1px;
left: 1px;
background-color: #fff;
border: 1px solid #C6C6C6;
border-radius: 100px;
-webkit-transition: all .15s ease-out; }
.code-snippets-visible .code-toggler {
background: #67D55B;
border-color: #4CB340; }
.code-snippets-visible .code-toggle {
border-color: #4CB340;
left: 14px; }
.code-label {
width: 100px;
position: absolute;
left: 42px;
font-size: 11px;
color: #888; }
.code-toggler .code-label-hide {
display: none; }
.code-snippets-visible .code-label-hide {
display: inline; }
.code-snippets-visible .code-label-show {
display: none; }
@media only screen and (max-width: 1200px) { @media (min-width: 550px) {
.container { .example-grid .column,
width: 90%; .example-grid .columns {
} margin-bottom: 1.5rem; }
} .docs-section {
padding: 6rem 0; }
@media only screen and (max-width: 800px) { .example-send-yourself-copy {
.container { float: right;
width: 85%; margin-top: 12px;
} }
} }

58
stylesheets/layout.css
View File

@ -1,58 +0,0 @@
/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/
/* Table of Content
==================================================
#Site Styles
#Page Styles
#Media Queries
#Font-Face */
/* #Site Styles
================================================== */
/* #Page Styles
================================================== */
/* #Media Queries
================================================== */
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}
/* #Font-Face
================================================== */
/* This is the proper syntax for an @font-face file
Just create a "fonts" folder at the root,
copy your FontName into code below and remove
comment brackets */
/* @font-face {
font-family: 'FontName';
src: url('../fonts/FontName.eot');
src: url('../fonts/FontName.eot?iefix') format('eot'),
url('../fonts/FontName.woff') format('woff'),
url('../fonts/FontName.ttf') format('truetype'),
url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
font-weight: normal;
font-style: normal; }
*/

201
stylesheets/outdated.css
View File

@ -1,201 +0,0 @@
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;}
h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; }
h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; }
h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }
h5 { font-size: 17px; line-height: 24px; }
h6 { font-size: 14px; line-height: 21px; }
.subheader { color: #777; }
p { margin: 0 0 20px 0; }
p img { margin: 0; }
p.lead { font-size: 21px; line-height: 27px; color: #777; }
em { font-style: italic; }
strong { font-weight: bold; color: #333; }
small { font-size: 80%; }
/* Blockquotes */
blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; }
blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
blockquote cite { display: block; font-size: 12px; color: #555; }
blockquote cite:before { content: "\2014 \0020"; }
blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }
hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; }
/* #Links
================================================== */
a, a:visited { color: #333; text-decoration: underline; outline: 0; }
a:hover, a:focus { color: #000; }
p a, p a:visited { line-height: inherit; }
/* #Lists
================================================== */
ul, ol { margin-bottom: 20px; }
ul { list-style: none outside; }
ol { list-style: decimal; }
ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
ul.square { list-style: square outside; }
ul.circle { list-style: circle outside; }
ul.disc { list-style: disc outside; }
ul ul, ul ol,
ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%; }
ul ul li, ul ol li,
ol ol li, ol ul li { margin-bottom: 6px; }
li { line-height: 18px; margin-bottom: 12px; }
ul.large li { line-height: 21px; }
li p { line-height: 21px; }
/* #Images
================================================== */
img.scale-with-grid {
max-width: 100%;
height: auto; }
/* #Buttons
================================================== */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
background: #eee; /* Old browsers */
background: #eee -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */
background: #eee -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */
background: #eee -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */
background: #eee -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */
background: #eee -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */
background: #eee linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */
border: 1px solid #aaa;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
color: #444;
display: inline-block;
font-size: 11px;
font-weight: bold;
text-decoration: none;
text-shadow: 0 1px rgba(255, 255, 255, .75);
cursor: pointer;
margin-bottom: 20px;
line-height: normal;
padding: 8px 10px;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
color: #222;
background: #ddd; /* Old browsers */
background: #ddd -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.3) 100%); /* FF3.6+ */
background: #ddd -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */
background: #ddd -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Chrome10+,Safari5.1+ */
background: #ddd -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Opera11.10+ */
background: #ddd -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* IE10+ */
background: #ddd linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* W3C */
border: 1px solid #888;
border-top: 1px solid #aaa;
border-left: 1px solid #aaa; }
.button:active,
button:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active {
border: 1px solid #666;
background: #ccc; /* Old browsers */
background: #ccc -moz-linear-gradient(top, rgba(255,255,255,.35) 0%, rgba(10,10,10,.4) 100%); /* FF3.6+ */
background: #ccc -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.35)), color-stop(100%,rgba(10,10,10,.4))); /* Chrome,Safari4+ */
background: #ccc -webkit-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Chrome10+,Safari5.1+ */
background: #ccc -o-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Opera11.10+ */
background: #ccc -ms-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* IE10+ */
background: #ccc linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* W3C */ }
.button.full-width,
button.full-width,
input[type="submit"].full-width,
input[type="reset"].full-width,
input[type="button"].full-width {
width: 100%;
padding-left: 0 !important;
padding-right: 0 !important;
text-align: center; }
/* Fix for odd Mozilla border & padding issues */
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/* #Forms
================================================== */
form {
margin-bottom: 20px; }
fieldset {
margin-bottom: 20px; }
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
border: 1px solid #ccc;
padding: 6px 4px;
outline: none;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #777;
margin: 0;
width: 210px;
max-width: 100%;
display: block;
margin-bottom: 20px;
background: #fff; }
select {
padding: 0; }
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
border: 1px solid #aaa;
color: #444;
-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
box-shadow: 0 0 3px rgba(0,0,0,.2); }
textarea {
min-height: 60px; }
label,
legend {
display: block;
font-weight: bold;
font-size: 13px; }
select {
width: 220px; }
input[type="checkbox"] {
display: inline; }
label span,
legend span {
font-weight: normal;
font-size: 13px;
color: #444; }
/* #Misc
================================================== */
.remove-bottom { margin-bottom: 0 !important; }
.half-bottom { margin-bottom: 10px !important; }
.add-bottom { margin-bottom: 20px !important; }

386
stylesheets/skeleton.css vendored
View File

@ -1,39 +1,57 @@
/* /*
* Skeleton V1.2 * Skeleton V2.0
* Copyright 2011, Dave Gamache * Copyright 2014, Dave Gamache
* www.getskeleton.com * www.getskeleton.com
* Free to use under the MIT license. * Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php * http://www.opensource.org/licenses/mit-license.php
* 6/20/2012 * 11/25/2014
*/ */
/* Table of Contents /* Table of contents
================================================== ––––––––––––––––––––––––––––––––––––––––––––––––––
#Base 960 Grid - Grid
#Tablet (Portrait) - Base Styles
#Mobile (Portrait) - Typography
#Mobile (Landscape) - Links
#Clearing */ - Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/
/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* #Base 960 Grid .container {
================================================== */ position: relative;
width: 80%;
max-width: 960px;
margin: 0 auto;
padding: 0; }
.container .column,
.container .columns {
float: left;
width: 100%;
box-sizing: border-box; }
.row {
margin-bottom: 20px; }
.row .column:first-child,
.row .columns:first-child {
margin-left: 0; }
@media (min-width: 550px) {
.container { position: relative; max-width: 960px; margin: 0 auto; padding: 0; }
.container .column, .container .column,
.container .columns { float: left; margin-left: 4%; box-sizing: border-box;} .container .columns {
.row { margin-bottom: 20px; } margin-left: 4%; }
.row .column:first-child,
.row .columns:first-child { margin-left: 0; }
/* Nested Column Classes */
.column.alpha, .columns.alpha { margin-left: 0; }
.column.omega, .columns.omega { margin-right: 0; }
/* Base Grid */
.container .one.column, .container .one.column,
.container .one.columns { width: 4.66666666667%; } .container .one.columns { width: 4.66666666667%; }
.container .two.columns { width: 13.3333333333%; } .container .two.columns { width: 13.3333333333%; }
@ -46,60 +64,292 @@
.container .nine.columns { width: 74.0%; } .container .nine.columns { width: 74.0%; }
.container .ten.columns { width: 82.6666666667%; } .container .ten.columns { width: 82.6666666667%; }
.container .eleven.columns { width: 91.3333333333%; } .container .eleven.columns { width: 91.3333333333%; }
.container .twelve.columns { width: 100%; } .container .twelve.columns { width: 100%; margin-left: 0; }
.container .one-third.column { width: 30.6666666667%; } .container .one-third.column { width: 30.6666666667%; }
.container .two-thirds.column { width: 48%; } .container .two-thirds.column { width: 65.3333333333%; }
.container .one-half.column { width: 48%; }
/* #Tablet (Portrait)
================================================== */
@media only screen and (max-width: 1200px) {
.container {
width: 85%;
}
}
@media only screen and (max-width: 800px) {
.container {
width: 80%;
}
} }
/* #Clearing /* Base Styles
================================================== */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
font-size: 62.5%; }
body {
background: #fff;
font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
line-height: 1.6;
font-weight: 400;
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #222; }
/* Self Clearing Goodness */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
/* Use clearfix class on parent to clear nested columns, /* Typography
or wrap each row of columns in a <div class="row"> */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
.clearfix:before, h1, h2, h3, h4, h5, h6 {
.clearfix:after, font-weight: 300;
.row:before, margin-top: 0;
.row:after { margin-bottom: 2rem; }
content: '\0020'; h1 { font-size: 5.0rem; line-height: 1.2; letter-spacing: -.1rem;}
h2 { font-size: 4.2rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.6rem; line-height: 1.3; letter-spacing: -.1rem; }
h4 { font-size: 3.0rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 2.4rem; line-height: 1.5; letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; }
/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
color: #1EAEDB; }
a:hover,
a:focus {
color: #0FA0CE; }
/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
display: inline-block;
background-color: transparent;
border-radius: 4px;
color: #555;
text-align: center;
font-size: 11px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
border: 1px solid #bbb;
height: 38px;
line-height: 38px;
padding: 0 30px;
letter-spacing: .1rem;
text-transform: uppercase;
white-space: nowrap;
box-sizing: border-box; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
border-color: #888;
color: #333;
outline: 0; }
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
color: #FFF;
border-color: #33C3F0;
background-color: #33C3F0; }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
background-color: #1EAEDB;
border-color: #1EAEDB;
color: #FFF; }
/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="search"],
input[type="text"],
input[type="password"],
textarea,
select {
border: 1px solid #D1D1D1;
height: 36px;
padding: 0 10px;
border-radius: 4px;
box-shadow: none; }
textarea {
min-height: 65px;
padding-top: 6px;
padding-bottom: 6px; }
input[type="email"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
border: 1px solid #33C3F0;
outline: 0; }
label,
legend {
display: block; display: block;
overflow: hidden; font-weight: 600;
visibility: hidden; margin-bottom: .5rem; }
width: 0; input[disabled] {
height: 0; } cursor: not-allowed;
.row:after, background-color: #EFEFEF; }
.clearfix:after { fieldset {
border-width: 0;
padding: 0; }
input[type="checkbox"] {
display: inline; }
label > .label-body {
font-weight: normal;
margin-left: .5rem;
display: inline-block; }
/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
list-style: circle inside; }
ol {
list-style: decimal inside; }
ol, ul {
margin-top: 0;
padding-left: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
margin: 1.5rem 0 1.5rem 3rem;
font-size: 90%; }
li {
margin-bottom: 1rem; }
/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
padding: .2rem .5rem;
margin: 0 .2rem;
font-size: 90%;
background: #F1F1F1;
border: 1px solid #E1E1E1;
border-radius: 4px;
white-space: nowrap; }
pre > code {
display: block;
padding: 1rem 1.5rem;
white-space: normal; }
/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {
padding-left: 0; }
th:last-child,
td:last-child {
padding-right: 0; }
/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
margin-bottom: 1.5rem; }
p,
hr,
pre,
blockquote,
form,
dl,
figure,
table,
p,
ul,
ol,
form {
margin-bottom: 2.5rem; }
/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
width: 100%;
box-sizing: border-box; }
.u-pull-right {
float: right; }
.u-pull-left {
float: left; }
/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
content: "";
display: table;
clear: both; } clear: both; }
.row,
.clearfix {
zoom: 1; }
/* You can also use a <br class="clear" /> to clear columns */
.clear { /* Media Queries
clear: both; –––––––––––––––––––––––––––––––––––––––––––––––––– */
display: block; /*
overflow: hidden; Note: The best way to structure the use of media queries is to create the queries
visibility: hidden; near the relevant code. For example, if you wanted to change the styles for buttons
width: 0; on small devices, paste the mobile query code up in the buttons secion and style it
height: 0; there.
} */
/* Larger than Desktop HD */
@media (min-width: 1200px) {}
/* Larger than desktop */
@media (min-width: 1000px) {}
/* Larger than tablet */
@media (min-width: 750px) {}
/* Larger than phablet */
@media (min-width: 550px) {}
/* Larger than mobile */
@media (min-width: 400px) {}
/* Smaller than Desktop HD */
@media (max-width: 1199px) {}
/* Smaller than desktop */
@media (max-width: 999px) {}
/* Smaller than tablet */
@media (max-width: 749px) {}
/* Smaller than phablet */
@media (max-width: 549px) {}
/* Smaller than mobile */
@media (max-width: 399px) {}