adding some real code styling to the docs to make them legible and starting to add the docs code content
This commit is contained in:
Dave Gamache
parent
2cbda075be
commit
4785e60a39
683
index.html
683
index.html
@ -2,381 +2,400 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<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="">
|
||||||
|
|
||||||
<!-- Mobile Specific Metas
|
<!-- Mobile Specific Metas
|
||||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||||
|
|
||||||
<!-- FONT
|
<!-- FONT
|
||||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
<link href='http://fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'>
|
<link href='http://fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'>
|
||||||
|
|
||||||
<!-- CSS
|
<!-- CSS
|
||||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
<link rel="stylesheet" href="stylesheets/normalize.css">
|
<link rel="stylesheet" href="stylesheets/normalize.css">
|
||||||
<link rel="stylesheet" href="stylesheets/skeleton.css">
|
<link rel="stylesheet" href="stylesheets/skeleton.css">
|
||||||
<link rel="stylesheet" href="stylesheets/custom.css">
|
<link rel="stylesheet" href="stylesheets/custom.css">
|
||||||
|
|
||||||
<!-- Favicons
|
<!-- Scripts
|
||||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
<link rel="shortcut icon" href="images/favicon.ico">
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
|
||||||
|
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
|
||||||
|
<link rel="stylesheet" href="stylesheets/github-prettify-theme.css">
|
||||||
|
<script src="scripts/site.js"></script>
|
||||||
|
|
||||||
|
<!-- Favicon
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
<link rel="shortcut icon" href="images/favicon.ico">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="code-snippets-visible">
|
||||||
|
|
||||||
<!-- Primary Page Layout
|
<!-- Primary Page Layout
|
||||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<section class="header">
|
<section class="header">
|
||||||
<h3 class="title">A dead simple, responsive boilerplate.</h3>
|
<h3 class="title">A dead simple, responsive boilerplate.</h3>
|
||||||
<a class="button button-primary">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/feathers.svg">
|
<img class="value-img" src="images/feathers.svg">
|
||||||
Super light at less than a kb & built with mobile in mind.
|
Super light at less than a kb & 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">
|
||||||
Styles designed to be a starting point, not a UI framework.
|
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">
|
||||||
No compiling or installing necessary. Just vanilla CSS.
|
No compiling or installing necessary. Just vanilla CSS.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div class="social-bar">
|
<div class="social-bar">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Why use Skeleton -->
|
<!-- Why use Skeleton -->
|
||||||
<div class="docs-section">
|
<div class="docs-section">
|
||||||
<h6 class="docs-header">Is Skeleton for you?</h6>
|
<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>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>
|
<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>
|
<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>
|
<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&width&layout=button_count&action=like&show_faces=false&share=true&height=21&appId=151131931646052" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px; width:140px" allowTransparency="true"></iframe>
|
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.getskeleton.com&width&layout=button_count&action=like&show_faces=false&share=true&height=21&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=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>
|
<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="docs-section">
|
<div class="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 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>
|
<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>
|
||||||
<div class="example-grid docs-example">
|
<div class="example-grid docs-example">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="one column">One</div>
|
<div class="one column">One</div>
|
||||||
<div class="eleven columns">Eleven</div>
|
<div class="eleven columns">Eleven</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="two columns">Two</div>
|
<div class="two columns">Two</div>
|
||||||
<div class="ten columns">Ten</div>
|
<div class="ten columns">Ten</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="three columns">Three</div>
|
<div class="three columns">Three</div>
|
||||||
<div class="nine columns">Nine</div>
|
<div class="nine columns">Nine</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="four columns">Four</div>
|
<div class="four columns">Four</div>
|
||||||
<div class="eight columns">Eight</div>
|
<div class="eight columns">Eight</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="five columns">Five</div>
|
<div class="five columns">Five</div>
|
||||||
<div class="seven columns">Seven</div>
|
<div class="seven columns">Seven</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="six columns">Six</div>
|
<div class="six columns">Six</div>
|
||||||
<div class="six columns">Six</div>
|
<div class="six columns">Six</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="seven columns">Seven</div>
|
<div class="seven columns">Seven</div>
|
||||||
<div class="five columns">Five</div>
|
<div class="five columns">Five</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="eight columns">Eight</div>
|
<div class="eight columns">Eight</div>
|
||||||
<div class="four columns">Four</div>
|
<div class="four columns">Four</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="nine columns">Nine</div>
|
<div class="nine columns">Nine</div>
|
||||||
<div class="three columns">Three</div>
|
<div class="three columns">Three</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="ten columns">Ten</div>
|
<div class="ten columns">Ten</div>
|
||||||
<div class="two columns">Two</div>
|
<div class="two columns">Two</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="eleven columns">Eleven</div>
|
<div class="eleven columns">Eleven</div>
|
||||||
<div class="one column">One</div>
|
<div class="one column">One</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- CODE EXAMPLE ———————————————————————————————————————— -->
|
<!-- CODE EXAMPLE ———————————————————————————————————————— -->
|
||||||
<pre class="code-example">
|
<pre class="code-example">
|
||||||
<code class="code-example-body">
|
<code class="code-example-body prettyprint"><!-- .container is main centered wrapper -->
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
|
||||||
<div class="one column">One</div>
|
<!-- all columns must be wrapped in a .row -->
|
||||||
<div class="eleven columns">Eleven</div>
|
<div class="row">
|
||||||
</div>
|
<div class="one column">One</div>
|
||||||
<div class="row">
|
<div class="eleven columns">Eleven</div>
|
||||||
<div class="two columns">Two</div>
|
</div>
|
||||||
<div class="ten columns">Ten</div>
|
|
||||||
</div>
|
<!-- just use a number and class 'column' or 'columns' -->
|
||||||
<!-- ...few more in-between .rows -->
|
<div class="row">
|
||||||
<div class="row">
|
<div class="two columns">Two</div>
|
||||||
<div class="ten columns">Ten</div>
|
<div class="ten columns">Ten</div>
|
||||||
<div class="two columns">Two</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="row">
|
<!-- there are a few shorthand columns widths as well -->
|
||||||
<div class="eleven columns">Eleven</div>
|
<div class="row">
|
||||||
<div class="one column">One</div>
|
<div class="one-third columns">1/3</div>
|
||||||
</div>
|
<div class="two-thirds columns">2/3</div>
|
||||||
</div>
|
</div>
|
||||||
</code>
|
<div class="row">
|
||||||
|
<div class="one-half columns">1/2</div>
|
||||||
|
<div class="one-half columns">1/2</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Note: columns *cannot* be nested, but you shouldn't ever need to -->
|
||||||
|
</code>
|
||||||
</pre>
|
</pre>
|
||||||
<!-- ————————————————————————————————————————————————————— -->
|
<!-- ————————————————————————————————————————————————————— -->
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Typography -->
|
</div>
|
||||||
<div class="row docs-section">
|
|
||||||
<h6 class="docs-header">Typography</h6>
|
<!-- Typography -->
|
||||||
<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>
|
<div class="row docs-section">
|
||||||
<div class="docs-example">
|
<h6 class="docs-header">Typography</h6>
|
||||||
<div class="row">
|
<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>
|
||||||
<div class="six columns">
|
<div class="docs-example">
|
||||||
<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>
|
<div class="row">
|
||||||
<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 class="six columns">
|
||||||
</div>
|
<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>
|
||||||
<div class="six columns">
|
<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>
|
||||||
<h1>Heading<span class="heading-font-size"> <code><h1></code> 50rem</span></h1>
|
</div>
|
||||||
<h2>Heading<span class="heading-font-size"> <code><h2></code> 42rem</span></h2>
|
<div class="six columns">
|
||||||
<h3>Heading<span class="heading-font-size"> <code><h3></code> 36rem</span></h3>
|
<h1>Heading<span class="heading-font-size"> <code><h1></code> 50rem</span></h1>
|
||||||
<h4>Heading<span class="heading-font-size"> <code><h4></code> 30rem</span></h4>
|
<h2>Heading<span class="heading-font-size"> <code><h2></code> 42rem</span></h2>
|
||||||
<h5>Heading<span class="heading-font-size"> <code><h5></code> 24rem</span></h5>
|
<h3>Heading<span class="heading-font-size"> <code><h3></code> 36rem</span></h3>
|
||||||
<h6>Heading<span class="heading-font-size"> <code><h6></code> 15rem</span></h6>
|
<h4>Heading<span class="heading-font-size"> <code><h4></code> 30rem</span></h4>
|
||||||
</div>
|
<h5>Heading<span class="heading-font-size"> <code><h5></code> 24rem</span></h5>
|
||||||
</div>
|
<h6>Heading<span class="heading-font-size"> <code><h6></code> 15rem</span></h6>
|
||||||
</div>
|
</div>
|
||||||
<!-- CODE EXAMPLE ———————————————————————————————————————— -->
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- CODE EXAMPLE ———————————————————————————————————————— -->
|
||||||
<pre class="code-example">
|
<pre class="code-example">
|
||||||
<code class="code-example-body">
|
<code class="code-example-body prettyprint"><!-- Standard Headings -->
|
||||||
<div class="container">
|
<h1>Heading</h1>
|
||||||
<div class="row">
|
<h2>Heading</h2>
|
||||||
<div class="one column">One</div>
|
<h3>Heading</h3>
|
||||||
<div class="eleven columns">Eleven</div>
|
<h4>Heading</h4>
|
||||||
</div>
|
<h5>Heading</h5>
|
||||||
</div>
|
<h6>Heading</h6>
|
||||||
</code>
|
|
||||||
|
<!-- Base type size -->
|
||||||
|
<p>The base type is 15px over 1.6 line height (24px)</p>
|
||||||
|
|
||||||
|
<!-- Other styled text tags -->
|
||||||
|
<strong>Bolded</strong>
|
||||||
|
<em>Italicized</em>
|
||||||
|
<a>Colored</a>
|
||||||
|
<u>Underlined</u>
|
||||||
|
</code>
|
||||||
</pre>
|
</pre>
|
||||||
<!-- ————————————————————————————————————————————————————— -->
|
<!-- ————————————————————————————————————————————————————— -->
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Buttons -->
|
|
||||||
<div class="row docs-section">
|
|
||||||
<h6 class="docs-header">Buttons</h6>
|
|
||||||
<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>
|
|
||||||
<div class="docs-example">
|
|
||||||
<a class="button" href="#">Anchor button</a>
|
|
||||||
<button>Button element</button>
|
|
||||||
<a class="button button-primary" href="#">Anchor button</a>
|
|
||||||
<button class="button button-primary">Button element</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Forms -->
|
</div>
|
||||||
<div class="row docs-section">
|
|
||||||
<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 …"></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>
|
|
||||||
|
|
||||||
<!-- Lists -->
|
<!-- Buttons -->
|
||||||
<div class="docs-section">
|
<div class="row docs-section">
|
||||||
<h6 class="docs-header">Lists</h6>
|
<h6 class="docs-header">Buttons</h6>
|
||||||
<div class="row docs-example">
|
<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>
|
||||||
<div class="six columns">
|
<div class="docs-example">
|
||||||
<ul>
|
<div>
|
||||||
<li>Unordered lists have basic styles</li>
|
<a class="button" href="#">Anchor button</a>
|
||||||
<li>
|
<button>Button element</button>
|
||||||
They use the circle list style
|
<input type="submit" value="submit input">
|
||||||
<ul>
|
<input type="button" value="button input">
|
||||||
<li>Nested lists styled to feel right</li>
|
</div>
|
||||||
<li>Can nest either type of list into the other</li>
|
<div>
|
||||||
</ul>
|
<a class="button button-primary" href="#">Anchor button</a>
|
||||||
</li>
|
<button class="button-primary">Button element</button>
|
||||||
<li>Just more list items mama san</li>
|
<input class="button-primary" type="submit" value="submit input">
|
||||||
</ul>
|
<input class="button-primary" type="button" value="button input">
|
||||||
</div>
|
</div>
|
||||||
<div class="six columns">
|
</div>
|
||||||
<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 -->
|
|
||||||
<div class="row docs-section">
|
|
||||||
<h6 class="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 just use a <code><pre></code> tag.</p>
|
|
||||||
<div class="docs-example">
|
|
||||||
<pre><code>.some-class {<br> background-color: red<br>}</code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Tables -->
|
<!-- CODE EXAMPLE ———————————————————————————————————————— -->
|
||||||
<div class="row docs-section">
|
<pre class="code-example">
|
||||||
<h6 class="docs-header">Tables</h6>
|
<code class="code-example-body prettyprint"><!-- Standard buttons -->
|
||||||
<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>
|
<a class="button" href="#">Anchor button</a>
|
||||||
<div class="docs-example">
|
<button>Button element</button>
|
||||||
<table class="u-full-width">
|
<input type="submit" value="submit input">
|
||||||
<thead>
|
<input type="button" value="button input">
|
||||||
<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 -->
|
<!-- Primary buttons -->
|
||||||
<div class="row docs-section">
|
<a class="button button-primary" href="#">Anchor button</a>
|
||||||
<h6 class="docs-header">Media queries</h6>
|
<button class="button-primary">Button element</button>
|
||||||
<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>
|
<input class="button-primary" type="submit" value="submit input">
|
||||||
<div class="docs-example row">
|
<input class="button-primary" type="button" value="button input">
|
||||||
<div class="six columns">
|
</code>
|
||||||
<ul>
|
</pre>
|
||||||
<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>
|
|
||||||
|
|
||||||
<!-- Examples -->
|
|
||||||
<div class="row docs-section">
|
|
||||||
<h6 class="docs-header">Examples of Skeleton sites</h6>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- License & Log -->
|
</div>
|
||||||
<div class="row docs-section">
|
|
||||||
<h6 class="docs-header">License & 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>
|
|
||||||
|
|
||||||
<div class="code-toggler">
|
<!-- Forms -->
|
||||||
<span class="code-toggle"></span>
|
<div class="row docs-section">
|
||||||
<span class="code-label">
|
<h6 class="docs-header">Forms</h6>
|
||||||
<span class="code-label-show">Show </span>
|
<p>Forms are a huge pain, but hopefully these styles make it a bit easier.</p>
|
||||||
<span class="code-label-hide">Hide </span>
|
<div class="docs-example docs-example-forms">
|
||||||
code
|
<form>
|
||||||
</span>
|
<div class="row">
|
||||||
</div>
|
<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 …"></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>
|
<!-- Lists -->
|
||||||
|
<div class="docs-section">
|
||||||
|
<h6 class="docs-header">Lists</h6>
|
||||||
|
<div class="row docs-example">
|
||||||
|
<div class="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>
|
||||||
|
<div class="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>
|
||||||
|
|
||||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
|
<!-- Code -->
|
||||||
<script>
|
<div class="row docs-section">
|
||||||
|
<h6 class="docs-header">Code</h6>
|
||||||
$(document).ready(function() {
|
<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>
|
||||||
|
<div class="docs-example">
|
||||||
|
<pre><code>.some-class {<br> background-color: red<br>}</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
var codeIsActive = false,
|
<!-- Tables -->
|
||||||
$sections = $('.docs-section'),
|
<div class="row docs-section">
|
||||||
$window = $(window)
|
<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>
|
||||||
|
|
||||||
$('.code-toggler').on('click', toggleCode)
|
<!-- Queries -->
|
||||||
|
<div class="row docs-section">
|
||||||
|
<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>
|
||||||
|
|
||||||
function toggleCode() {
|
<!-- Examples -->
|
||||||
var windowScrollTop = $window.scrollTop()
|
<div class="row docs-section">
|
||||||
var offsetHeight = windowScrollTop
|
<h6 class="docs-header">Examples of Skeleton sites</h6>
|
||||||
$sections.each(function (i) {
|
</div>
|
||||||
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)
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
<!-- License & Log -->
|
||||||
</script>
|
<div class="row docs-section">
|
||||||
|
<h6 class="docs-header">License & 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>
|
||||||
|
|
||||||
|
<div class="code-toggler">
|
||||||
|
<span class="code-toggle"></span>
|
||||||
|
<span class="code-label">
|
||||||
|
Code
|
||||||
|
<span class="code-label-show">hidden</span>
|
||||||
|
<span class="code-label-hide">visible</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- End Document
|
<!-- End Document
|
||||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
58
scripts/site.js
Normal file
58
scripts/site.js
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
$(document).ready(function() {
|
||||||
|
|
||||||
|
// Variables
|
||||||
|
var codeIsActive = true,
|
||||||
|
$codeSnippets = $('.code-example-body'),
|
||||||
|
$sections = $('.docs-section'),
|
||||||
|
$window = $(window),
|
||||||
|
entityMap = {
|
||||||
|
"&": "&",
|
||||||
|
"<": "<",
|
||||||
|
">": ">",
|
||||||
|
'"': '"',
|
||||||
|
"'": ''',
|
||||||
|
"/": '/'
|
||||||
|
}
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
$('.code-toggler').on('click', toggleCode)
|
||||||
|
buildSnippets();
|
||||||
|
}
|
||||||
|
|
||||||
|
function escapeHtml(string) {
|
||||||
|
return String(string).replace(/[&<>"'\/]/g, function (s) {
|
||||||
|
return entityMap[s];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildSnippets() {
|
||||||
|
$codeSnippets.each(function() {
|
||||||
|
var newContent = escapeHtml($(this).html())
|
||||||
|
$(this).html(newContent)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
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)
|
||||||
|
}
|
||||||
|
|
||||||
|
init();
|
||||||
|
|
||||||
|
});
|
||||||
@ -32,7 +32,8 @@
|
|||||||
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 form {
|
||||||
margin-bottom: 0; }
|
margin-bottom: 0; }
|
||||||
.docs-example h1,
|
.docs-example h1,
|
||||||
.docs-example h2,
|
.docs-example h2,
|
||||||
@ -46,10 +47,13 @@
|
|||||||
color: #999;
|
color: #999;
|
||||||
letter-spacing: normal; }
|
letter-spacing: normal; }
|
||||||
.code-example {
|
.code-example {
|
||||||
margin-top: 0;
|
margin-top: 1.5rem;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
.code-example-body {
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
.code-snippets-visible .code-example {
|
.code-snippets-visible .code-example {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|||||||
149
stylesheets/github-prettify-theme.css
Normal file
149
stylesheets/github-prettify-theme.css
Normal file
@ -0,0 +1,149 @@
|
|||||||
|
/* GitHub Theme */
|
||||||
|
.prettyprint {
|
||||||
|
background: #fff;
|
||||||
|
font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
padding: 2.5rem 3rem;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pln {
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen {
|
||||||
|
.str {
|
||||||
|
color: #dd1144;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kwd {
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.com {
|
||||||
|
color: #999988;
|
||||||
|
}
|
||||||
|
|
||||||
|
.typ {
|
||||||
|
color: #445588;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lit {
|
||||||
|
color: #445588;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pun {
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.opn {
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clo {
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
color: navy;
|
||||||
|
}
|
||||||
|
|
||||||
|
.atn {
|
||||||
|
color: teal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.atv {
|
||||||
|
color: #dd1144;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dec {
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.var {
|
||||||
|
color: teal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fun {
|
||||||
|
color: #990000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media print, projection {
|
||||||
|
.str {
|
||||||
|
color: #006600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kwd {
|
||||||
|
color: #006;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.com {
|
||||||
|
color: #600;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.typ {
|
||||||
|
color: #404;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lit {
|
||||||
|
color: #004444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pun, .opn, .clo {
|
||||||
|
color: #444400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
color: #006;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.atn {
|
||||||
|
color: #440044;
|
||||||
|
}
|
||||||
|
|
||||||
|
.atv {
|
||||||
|
color: #006600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* Specify class=linenums on a pre to get line numbering */
|
||||||
|
ol.linenums {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* IE indents via margin-left */
|
||||||
|
li.L0,
|
||||||
|
li.L1,
|
||||||
|
li.L2,
|
||||||
|
li.L3,
|
||||||
|
li.L4,
|
||||||
|
li.L5,
|
||||||
|
li.L6,
|
||||||
|
li.L7,
|
||||||
|
li.L8,
|
||||||
|
li.L9 {
|
||||||
|
/* */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Alternate shading for lines */
|
||||||
|
li.L1,
|
||||||
|
li.L3,
|
||||||
|
li.L5,
|
||||||
|
li.L7,
|
||||||
|
li.L9 {
|
||||||
|
/* */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* My additional styles */
|
||||||
|
|
||||||
|
/*li.L0, li.L1, li.L2, li.L3,
|
||||||
|
li.L5, li.L6, li.L7, li.L8
|
||||||
|
{ list-style-type: decimal !important }*/
|
||||||
|
|
||||||
|
.prettyprint li {
|
||||||
|
margin-bottom: .3rem;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user