creating the downloadish page
This commit is contained in:
Dave Gamache
parent
ca48ff0d72
commit
baec02aeb5
16
README.md
16
README.md
@ -43,11 +43,17 @@ Skeleton is lightweight and simple. It styles only raw HTML elements (with a few
|
|||||||
|
|
||||||
The above list is non-exhaustive. Skeleton works perfectly with almost all older versions of the browsers above, though IE certainly has large degradation prior to IE9.
|
The above list is non-exhaustive. Skeleton works perfectly with almost all older versions of the browsers above, though IE certainly has large degradation prior to IE9.
|
||||||
|
|
||||||
## Acknowledgement
|
|
||||||
|
|
||||||
Skeleton was created by [Dave Gamache](https://twitter.com/dhg) for a better web.
|
|
||||||
|
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
All parts of Skeleton are free to use and abuse under the [open-source MIT license](http://opensource.org/licenses/mit-license.php).
|
All parts of Skeleton are free to use and abuse under the [open-source MIT license](http://opensource.org/licenses/mit-license.php).
|
||||||
|
|
||||||
|
|
||||||
|
## Colophon
|
||||||
|
|
||||||
|
Skeleton was built using [Sublime Text 3](http://www.sublimetext.com/3) and designed with [Sketch](http://bohemiancoding.com/sketch). The typeface [Raleway](http://www.google.com/fonts/specimen/Raleway) was created by [Matt McInerney](http://matt.cc/) and [Pablo Impallari](http://www.impallari.com/). Code highlighting by Google's [Prettify library](https://code.google.com/p/google-code-prettify/). Icons in the header of the documentation are all derivative work of icons from [The Noun Project](thenounproject.com). [Feather](http://thenounproject.com/term/feather/22073) by Zach VanDeHey, [Pen](http://thenounproject.com/term/pen/21163) (with cap) by Ed Harrison, [Pen](http://thenounproject.com/term/pen/32847) (with clicker) by Matthew Hall, and [Watch](http://thenounproject.com/term/watch/48015) by Julien Deveaux.
|
||||||
|
|
||||||
|
|
||||||
|
## Acknowledgement
|
||||||
|
|
||||||
|
Skeleton was created by [Dave Gamache](https://twitter.com/dhg) for a better web.
|
||||||
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.9 KiB |
|
Before Width: | Height: | Size: 6.4 KiB After Width: | Height: | Size: 6.4 KiB |
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.9 KiB |
644
docs/index.html
Normal file
644
docs/index.html
Normal file
@ -0,0 +1,644 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
|
||||||
|
<!-- Basic Page Needs
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Skeleton: Responsive CSS Boilerplate</title>
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="author" content="">
|
||||||
|
|
||||||
|
<!-- Mobile Specific Metas
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||||
|
|
||||||
|
<!-- FONT
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
<link href='http://fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'>
|
||||||
|
|
||||||
|
<!-- CSS
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
<link rel="stylesheet" href="../css/normalize.css">
|
||||||
|
<link rel="stylesheet" href="../css/skeleton.css">
|
||||||
|
<link rel="stylesheet" href="css/custom.css">
|
||||||
|
|
||||||
|
<!-- Scripts
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
<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="js/github-prettify-theme.css">
|
||||||
|
<script src="js/site.js"></script>
|
||||||
|
|
||||||
|
<!-- Favicon
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
<link rel="icon" type="image/png" href="../images/favicon.png">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class="code-snippets-visible">
|
||||||
|
|
||||||
|
<!-- Primary Page Layout
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
<div class="container">
|
||||||
|
<section class="header">
|
||||||
|
<h2 class="title">A dead simple, responsive boilerplate.</h2>
|
||||||
|
<a class="button button-primary">Download</a>
|
||||||
|
<div class="value-props row">
|
||||||
|
<div class="four columns offset-by-two value-prop">
|
||||||
|
<img class="value-img" src="images/feather.svg">
|
||||||
|
Light as a feather at less than a kb & built with mobile in mind.
|
||||||
|
</div>
|
||||||
|
<div class="four columns value-prop">
|
||||||
|
<img class="value-img" src="images/pens.svg">
|
||||||
|
Styles designed to be a starting point, not a UI framework.
|
||||||
|
</div>
|
||||||
|
<div class="four columns value-prop">
|
||||||
|
<img class="value-img" src="images/watch.svg">
|
||||||
|
Quick to start with zero compiling or installing necessary.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div class="navbar-spacer"></div>
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="container">
|
||||||
|
<ul class="navbar-list">
|
||||||
|
<li class="navbar-item"><a class="navbar-link" href="#intro">Intro</a></li>
|
||||||
|
<li class="navbar-item">
|
||||||
|
<a class="navbar-link" href="#" data-popover="#codeNavPopover">Code</a>
|
||||||
|
<div id="codeNavPopover" class="popover">
|
||||||
|
<ul class="popover-list">
|
||||||
|
<li class="popover-item">
|
||||||
|
<a class="popover-link" href="#grid">Grid</a>
|
||||||
|
</li>
|
||||||
|
<li class="popover-item">
|
||||||
|
<a class="popover-link" href="#typography">Typography</a>
|
||||||
|
</li>
|
||||||
|
<li class="popover-item">
|
||||||
|
<a class="popover-link" href="#buttons">Buttons</a>
|
||||||
|
</li>
|
||||||
|
<li class="popover-item">
|
||||||
|
<a class="popover-link" href="#forms">Forms</a>
|
||||||
|
</li>
|
||||||
|
<li class="popover-item">
|
||||||
|
<a class="popover-link" href="#lists">Lists</a>
|
||||||
|
</li>
|
||||||
|
<li class="popover-item">
|
||||||
|
<a class="popover-link" href="#code">Code</a>
|
||||||
|
</li>
|
||||||
|
<li class="popover-item">
|
||||||
|
<a class="popover-link" href="#tables">Tables</a>
|
||||||
|
</li>
|
||||||
|
<li class="popover-item">
|
||||||
|
<a class="popover-link" href="#queries">Queries</a>
|
||||||
|
</li>
|
||||||
|
<li class="popover-item">
|
||||||
|
<a class="popover-link" href="#utilities">Utilities</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="navbar-item"><a class="navbar-link" href="#examples">Examples</a></li>
|
||||||
|
<li class="navbar-item">
|
||||||
|
<a class="navbar-link" href="#" data-popover="#moreNavPopover">More</a>
|
||||||
|
<div id="moreNavPopover" class="popover">
|
||||||
|
<ul class="popover-list">
|
||||||
|
<li class="popover-item">
|
||||||
|
<a class="popover-link" href="https://github.com/dhg/Skeleton">On Github</a>
|
||||||
|
</li>
|
||||||
|
<li class="popover-item">
|
||||||
|
<a class="popover-link" href="https://github.com/dhg/Skeleton/tree/v-2.0#browser-support">Browsers</a>
|
||||||
|
</li>
|
||||||
|
<li class="popover-item">
|
||||||
|
<a class="popover-link" href="#">License</a>
|
||||||
|
</li>
|
||||||
|
<li class="popover-item">
|
||||||
|
<a class="popover-link" href="#">Versions</a>
|
||||||
|
</li>
|
||||||
|
<li class="popover-item">
|
||||||
|
<a class="popover-link" href="#">Colophon</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Why use Skeleton -->
|
||||||
|
<div class="docs-section" id="intro">
|
||||||
|
<h6 class="docs-header">Is Skeleton for you?</h6>
|
||||||
|
<p>You should use Skeleton if you're overwhelmed by UI frameworks like Bootstrap and Foundation or if you're embarking on a smaller project. 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 just over 100 lines of custom CSS.</u></p>
|
||||||
|
<p>Love Skeleton and want to Tweet it, share it, or star 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&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=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Grid -->
|
||||||
|
<div class="docs-section" id="grid">
|
||||||
|
<h6 class="docs-header">The grid</h6>
|
||||||
|
<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>
|
||||||
|
<div class="example-grid docs-example">
|
||||||
|
<div class="row">
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- CODE EXAMPLE ———————————————————————————————————————— -->
|
||||||
|
<pre class="code-example">
|
||||||
|
<code class="code-example-body prettyprint"><!-- .container is main centered wrapper -->
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<!-- all columns must be wrapped in a .row -->
|
||||||
|
<div class="row">
|
||||||
|
<div class="one column">One</div>
|
||||||
|
<div class="eleven columns">Eleven</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- just use a number and class 'column' or 'columns' -->
|
||||||
|
<div class="row">
|
||||||
|
<div class="two columns">Two</div>
|
||||||
|
<div class="ten columns">Ten</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- there are a few shorthand columns widths as well -->
|
||||||
|
<div class="row">
|
||||||
|
<div class="one-third columns">1/3</div>
|
||||||
|
<div class="two-thirds columns">2/3</div>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
<!-- ————————————————————————————————————————————————————— -->
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Typography -->
|
||||||
|
<div class="row docs-section" id="typography">
|
||||||
|
<h6 class="docs-header">Typography</h6>
|
||||||
|
<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>
|
||||||
|
<div class="docs-example">
|
||||||
|
<div class="row">
|
||||||
|
<div class="six columns">
|
||||||
|
<p><strong>The typography base</strong> is <a href="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 <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>
|
||||||
|
</div>
|
||||||
|
<div class="six columns">
|
||||||
|
<h1>Heading<span class="heading-font-size"> <code><h1></code> 50rem</span></h1>
|
||||||
|
<h2>Heading<span class="heading-font-size"> <code><h2></code> 42rem</span></h2>
|
||||||
|
<h3>Heading<span class="heading-font-size"> <code><h3></code> 36rem</span></h3>
|
||||||
|
<h4>Heading<span class="heading-font-size"> <code><h4></code> 30rem</span></h4>
|
||||||
|
<h5>Heading<span class="heading-font-size"> <code><h5></code> 24rem</span></h5>
|
||||||
|
<h6>Heading<span class="heading-font-size"> <code><h6></code> 15rem</span></h6>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- CODE EXAMPLE ———————————————————————————————————————— -->
|
||||||
|
<pre class="code-example">
|
||||||
|
<code class="code-example-body prettyprint"><!-- Standard Headings -->
|
||||||
|
<h1>Heading</h1>
|
||||||
|
<h2>Heading</h2>
|
||||||
|
<h3>Heading</h3>
|
||||||
|
<h4>Heading</h4>
|
||||||
|
<h5>Heading</h5>
|
||||||
|
<h6>Heading</h6>
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
|
<!-- ————————————————————————————————————————————————————— -->
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Buttons -->
|
||||||
|
<div class="row docs-section" id="buttons">
|
||||||
|
<h6 class="docs-header">Buttons</h6>
|
||||||
|
<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>
|
||||||
|
<div class="docs-example">
|
||||||
|
<div>
|
||||||
|
<a class="button" href="#">Anchor button</a>
|
||||||
|
<button>Button element</button>
|
||||||
|
<input type="submit" value="submit input">
|
||||||
|
<input type="button" value="button input">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a class="button button-primary" href="#">Anchor button</a>
|
||||||
|
<button class="button-primary">Button element</button>
|
||||||
|
<input class="button-primary" type="submit" value="submit input">
|
||||||
|
<input class="button-primary" type="button" value="button input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- CODE EXAMPLE ———————————————————————————————————————— -->
|
||||||
|
<pre class="code-example">
|
||||||
|
<code class="code-example-body prettyprint"><!-- Standard buttons -->
|
||||||
|
<a class="button" href="#">Anchor button</a>
|
||||||
|
<button>Button element</button>
|
||||||
|
<input type="submit" value="submit input">
|
||||||
|
<input type="button" value="button input">
|
||||||
|
|
||||||
|
<!-- Primary buttons -->
|
||||||
|
<a class="button button-primary" href="#">Anchor button</a>
|
||||||
|
<button class="button-primary">Button element</button>
|
||||||
|
<input class="button-primary" type="submit" value="submit input">
|
||||||
|
<input class="button-primary" type="button" value="button input">
|
||||||
|
</code>
|
||||||
|
</pre>
|
||||||
|
<!-- ————————————————————————————————————————————————————— -->
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Forms -->
|
||||||
|
<div class="row docs-section" id="forms">
|
||||||
|
<h6 class="docs-header">Forms</h6>
|
||||||
|
<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>
|
||||||
|
<div class="docs-example docs-example-forms">
|
||||||
|
<form>
|
||||||
|
<div class="row">
|
||||||
|
<div class="six columns">
|
||||||
|
<label for="exampleEmailInput">Your email</label>
|
||||||
|
<input class="u-full-width" type="email" placeholder="test@mailbox.com" id="exampleEmailInput">
|
||||||
|
</div>
|
||||||
|
<div class="six columns">
|
||||||
|
<label for="exampleRecipientInput">Reason for contacting</label>
|
||||||
|
<select class="u-full-width">
|
||||||
|
<option value="Option 1">Questions</option>
|
||||||
|
<option value="Option 2">Admiration</option>
|
||||||
|
<option value="Option 3">Can I get your number?</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<label for="exampleMessage">Message</label>
|
||||||
|
<textarea class="u-full-width" placeholder="Hi Dave …" id="exampleMessage"></textarea>
|
||||||
|
<label class="example-send-yourself-copy">
|
||||||
|
<input type="checkbox">
|
||||||
|
<span class="label-body">Send a copy to yourself</span>
|
||||||
|
</label>
|
||||||
|
<input class="button-primary" type="submit" value="Submit">
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- CODE EXAMPLE ———————————————————————————————————————— -->
|
||||||
|
<pre class="code-example">
|
||||||
|
<code class="code-example-body prettyprint"><!-- The above form looks like this -->
|
||||||
|
<form>
|
||||||
|
<div class="row">
|
||||||
|
<div class="six columns">
|
||||||
|
<label for="exampleEmailInput">Your email</label>
|
||||||
|
<input class="u-full-width" type="email" placeholder="test@mailbox.com" id="exampleEmailInput">
|
||||||
|
</div>
|
||||||
|
<div class="six columns">
|
||||||
|
<label for="exampleRecipientInput">Reason for contacting</label>
|
||||||
|
<select class="u-full-width">
|
||||||
|
<option value="Option 1">Questions</option>
|
||||||
|
<option value="Option 2">Admiration</option>
|
||||||
|
<option value="Option 3">Can I get your number?</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<label for="exampleMessage">Message</label>
|
||||||
|
<textarea class="u-full-width" placeholder="Hi Dave …" id="exampleMessage"></textarea>
|
||||||
|
<label class="example-send-yourself-copy">
|
||||||
|
<input type="checkbox">
|
||||||
|
<span class="label-body">Send a copy to yourself</span>
|
||||||
|
</label>
|
||||||
|
<input class="button-primary" type="submit" value="Submit">
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!-- Always wrap checkbox and radio inputs in a label and use a <span class="label-body"> inside of it -->
|
||||||
|
|
||||||
|
<!-- Note: The class .u-full-width is just a utility class shorthand for width: 100% -->
|
||||||
|
</code>
|
||||||
|
</pre>
|
||||||
|
<!-- ————————————————————————————————————————————————————— -->
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Lists -->
|
||||||
|
<div class="docs-section" id="lists">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- CODE EXAMPLE ———————————————————————————————————————— -->
|
||||||
|
<pre class="code-example">
|
||||||
|
<code class="code-example-body prettyprint"><ul>
|
||||||
|
<li>Item 1</li>
|
||||||
|
<li>
|
||||||
|
Item 2
|
||||||
|
<ul>
|
||||||
|
<li>Item 2.1</li>
|
||||||
|
<li>Item 2.2</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>Item 3</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<!-- Easily substitute any <ul> or an <ol> to get number lists or sublists. Skeleton doesn't support lists nested deeper than 2 levels -->
|
||||||
|
</code>
|
||||||
|
</pre>
|
||||||
|
<!-- ————————————————————————————————————————————————————— -->
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Code -->
|
||||||
|
<div class="row docs-section" id="code">
|
||||||
|
<h6 class="docs-header">Code</h6>
|
||||||
|
<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>
|
||||||
|
<div class="docs-example">
|
||||||
|
<pre><code>.some-class {
|
||||||
|
background-color: red;
|
||||||
|
}</code></pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- CODE EXAMPLE ———————————————————————————————————————— -->
|
||||||
|
<pre class="code-example">
|
||||||
|
<code class="code-example-body prettyprint"><pre><code>.some-class {
|
||||||
|
background-color: red;
|
||||||
|
}</code></pre>
|
||||||
|
|
||||||
|
<!-- Remember every whitespace and break will be preserved in a <pre>, including indentation in your code -->
|
||||||
|
</code>
|
||||||
|
</pre>
|
||||||
|
<!-- ————————————————————————————————————————————————————— -->
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tables -->
|
||||||
|
<div class="row docs-section" id="tables">
|
||||||
|
<h6 class="docs-header">Tables</h6>
|
||||||
|
<p>Be sure to use properly formed table markup with <code><thead></code> and <code><tbody></code> when building a <code>table</code>.</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>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- CODE EXAMPLE ———————————————————————————————————————— -->
|
||||||
|
<pre class="code-example">
|
||||||
|
<code class="code-example-body prettyprint"><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>
|
||||||
|
</code>
|
||||||
|
</pre>
|
||||||
|
<!-- ————————————————————————————————————————————————————— -->
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Queries -->
|
||||||
|
<div class="row docs-section" id="queries">
|
||||||
|
<h6 class="docs-header">Media queries</h6>
|
||||||
|
<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. There are two sets of queries. The first set is mobile-first, meaning it targets <code>min-width</code>. The other set is desktop-first, meaning it targets <code>max-width</code>. Mobile-first queries are how Skeleton's grid is built and is a preferrable method of organizing CSS. 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>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- CODE EXAMPLE ———————————————————————————————————————— -->
|
||||||
|
<pre class="code-example">
|
||||||
|
<code class="code-example-body prettyprint">/* Mobile first queries */
|
||||||
|
|
||||||
|
/* Larger than mobile */
|
||||||
|
@media (min-width: 400px) {}
|
||||||
|
|
||||||
|
/* Larger than phablet */
|
||||||
|
@media (min-width: 550px) {}
|
||||||
|
|
||||||
|
/* Larger than tablet */
|
||||||
|
@media (min-width: 750px) {}
|
||||||
|
|
||||||
|
/* Larger than desktop */
|
||||||
|
@media (min-width: 1000px) {}
|
||||||
|
|
||||||
|
/* Larger than Desktop HD */
|
||||||
|
@media (min-width: 1200px) {}
|
||||||
|
|
||||||
|
|
||||||
|
/* Desktop first queries */
|
||||||
|
|
||||||
|
/* 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) {}
|
||||||
|
|
||||||
|
/* Note: Values are 1px less on desktop first queries so there's no overriding in case you use both types of queries */
|
||||||
|
</code>
|
||||||
|
</pre>
|
||||||
|
<!-- ————————————————————————————————————————————————————— -->
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Utilities and Misc. -->
|
||||||
|
<div class="row docs-section" id="utilities">
|
||||||
|
<h6 class="docs-header">Utilities</h6>
|
||||||
|
<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 ———————————————————————————————————————— -->
|
||||||
|
<pre class="code-example">
|
||||||
|
<code class="code-example-body prettyprint">/* Utility Classes */
|
||||||
|
|
||||||
|
/* Make element full width */
|
||||||
|
.u-full-width {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box; }
|
||||||
|
|
||||||
|
/* Make sure elements don't run outside containers (great for images in columns) */
|
||||||
|
.u-max-full-width {
|
||||||
|
max-width: 100%;
|
||||||
|
box-sizing: border-box; }
|
||||||
|
|
||||||
|
/* Float either direction */
|
||||||
|
.u-pull-right {
|
||||||
|
float: right; }
|
||||||
|
.u-pull-left {
|
||||||
|
float: left; }
|
||||||
|
|
||||||
|
/* Clear a float */
|
||||||
|
.u-cf {
|
||||||
|
content: "";
|
||||||
|
display: table;
|
||||||
|
clear: both; }
|
||||||
|
</code>
|
||||||
|
</pre>
|
||||||
|
<!-- ————————————————————————————————————————————————————— -->
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Examples -->
|
||||||
|
<div class="row docs-section" id="examples">
|
||||||
|
<h6 class="docs-header">Examples</h6>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- End Document
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -42,6 +42,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
function openPopover(e) {
|
function openPopover(e) {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
|
closePopover();
|
||||||
var popover = $($(this).data('popover'));
|
var popover = $($(this).data('popover'));
|
||||||
popover.toggleClass('open')
|
popover.toggleClass('open')
|
||||||
e.stopImmediatePropagation();
|
e.stopImmediatePropagation();
|
||||||
@ -60,7 +61,9 @@ $(document).ready(function() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
function resize() {
|
function resize() {
|
||||||
|
$body.removeClass('has-docked-nav')
|
||||||
navOffsetTop = $nav.offset().top
|
navOffsetTop = $nav.offset().top
|
||||||
|
onScroll()
|
||||||
}
|
}
|
||||||
|
|
||||||
function onScroll() {
|
function onScroll() {
|
||||||
610
index.html
610
index.html
@ -5,7 +5,7 @@
|
|||||||
<!-- Basic Page Needs
|
<!-- Basic Page Needs
|
||||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>Skeleton: Responsive CSS Boilerplate</title>
|
<title>Your page title here :)</title>
|
||||||
<meta name="description" content="">
|
<meta name="description" content="">
|
||||||
<meta name="author" content="">
|
<meta name="author" content="">
|
||||||
|
|
||||||
@ -19,624 +19,24 @@
|
|||||||
|
|
||||||
<!-- CSS
|
<!-- CSS
|
||||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
<link rel="stylesheet" href="stylesheets/normalize.css">
|
<link rel="stylesheet" href="css/normalize.css">
|
||||||
<link rel="stylesheet" href="stylesheets/skeleton.css">
|
<link rel="stylesheet" href="css/skeleton.css">
|
||||||
<link rel="stylesheet" href="stylesheets/custom.css">
|
|
||||||
|
|
||||||
<!-- Scripts
|
<!-- Scripts
|
||||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
|
<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
|
<!-- Favicon
|
||||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
<link rel="shortcut icon" href="images/favicon.ico">
|
|
||||||
<link rel="icon" type="image/png" href="images/favicon.png" />
|
<link rel="icon" type="image/png" href="images/favicon.png" />
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body class="code-snippets-visible">
|
<body>
|
||||||
|
|
||||||
<!-- Primary Page Layout
|
<!-- Primary Page Layout
|
||||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<section class="header">
|
<h1>DOWNLOAD THING</h1>
|
||||||
<h2 class="title">A dead simple, responsive boilerplate.</h2>
|
|
||||||
<a class="button button-primary">Download</a>
|
|
||||||
<div class="value-props row">
|
|
||||||
<div class="four columns offset-by-two value-prop">
|
|
||||||
<img class="value-img" src="images/feather.svg">
|
|
||||||
Light as a feather at less than a kb & built with mobile in mind.
|
|
||||||
</div>
|
|
||||||
<div class="four columns value-prop">
|
|
||||||
<img class="value-img" src="images/pens.svg">
|
|
||||||
Styles designed to be a starting point, not a UI framework.
|
|
||||||
</div>
|
|
||||||
<div class="four columns value-prop">
|
|
||||||
<img class="value-img" src="images/watch.svg">
|
|
||||||
Quick to start with zero compiling or installing necessary.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<div class="navbar-spacer"></div>
|
|
||||||
<nav class="navbar">
|
|
||||||
<div class="container">
|
|
||||||
<ul class="navbar-list">
|
|
||||||
<li class="navbar-item"><a class="navbar-link" href="#intro">Intro</a></li>
|
|
||||||
<li class="navbar-item">
|
|
||||||
<a class="navbar-link" href="#" data-popover="#codeNavPopover">Code</a>
|
|
||||||
<div id="codeNavPopover" class="popover">
|
|
||||||
<ul class="popover-list">
|
|
||||||
<li class="popover-item">
|
|
||||||
<a class="popover-link" href="#grid">Grid</a>
|
|
||||||
</li>
|
|
||||||
<li class="popover-item">
|
|
||||||
<a class="popover-link" href="#typography">Typography</a>
|
|
||||||
</li>
|
|
||||||
<li class="popover-item">
|
|
||||||
<a class="popover-link" href="#buttons">Buttons</a>
|
|
||||||
</li>
|
|
||||||
<li class="popover-item">
|
|
||||||
<a class="popover-link" href="#forms">Forms</a>
|
|
||||||
</li>
|
|
||||||
<li class="popover-item">
|
|
||||||
<a class="popover-link" href="#lists">Lists</a>
|
|
||||||
</li>
|
|
||||||
<li class="popover-item">
|
|
||||||
<a class="popover-link" href="#code">Code</a>
|
|
||||||
</li>
|
|
||||||
<li class="popover-item">
|
|
||||||
<a class="popover-link" href="#tables">Tables</a>
|
|
||||||
</li>
|
|
||||||
<li class="popover-item">
|
|
||||||
<a class="popover-link" href="#queries">Queries</a>
|
|
||||||
</li>
|
|
||||||
<li class="popover-item">
|
|
||||||
<a class="popover-link" href="#utilities">Utilities</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="navbar-item"><a class="navbar-link" href="#examples">Examples</a></li>
|
|
||||||
<li class="navbar-item"><a class="navbar-link" href="#support">Support</a></li>
|
|
||||||
<li class="navbar-item"><a class="navbar-link" href="#license">License</a></li>
|
|
||||||
<li class="navbar-item"><a class="navbar-link" href="#colophon">Colophon</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Why use Skeleton -->
|
|
||||||
<div class="docs-section" id="intro">
|
|
||||||
<h6 class="docs-header">Is Skeleton for you?</h6>
|
|
||||||
<p>You should use Skeleton if you're overwhelmed by UI frameworks like Bootstrap and Foundation or if you're embarking on a smaller project. 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 just over 100 lines of custom CSS.</u></p>
|
|
||||||
<p>Love Skeleton and want to Tweet it, share it, or star 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&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=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Grid -->
|
|
||||||
<div class="docs-section" id="grid">
|
|
||||||
<h6 class="docs-header">The grid</h6>
|
|
||||||
<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>
|
|
||||||
<div class="example-grid docs-example">
|
|
||||||
<div class="row">
|
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- CODE EXAMPLE ———————————————————————————————————————— -->
|
|
||||||
<pre class="code-example">
|
|
||||||
<code class="code-example-body prettyprint"><!-- .container is main centered wrapper -->
|
|
||||||
<div class="container">
|
|
||||||
|
|
||||||
<!-- all columns must be wrapped in a .row -->
|
|
||||||
<div class="row">
|
|
||||||
<div class="one column">One</div>
|
|
||||||
<div class="eleven columns">Eleven</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- just use a number and class 'column' or 'columns' -->
|
|
||||||
<div class="row">
|
|
||||||
<div class="two columns">Two</div>
|
|
||||||
<div class="ten columns">Ten</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- there are a few shorthand columns widths as well -->
|
|
||||||
<div class="row">
|
|
||||||
<div class="one-third columns">1/3</div>
|
|
||||||
<div class="two-thirds columns">2/3</div>
|
|
||||||
</div>
|
|
||||||
<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>
|
|
||||||
<!-- ————————————————————————————————————————————————————— -->
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Typography -->
|
|
||||||
<div class="row docs-section" id="typography">
|
|
||||||
<h6 class="docs-header">Typography</h6>
|
|
||||||
<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>
|
|
||||||
<div class="docs-example">
|
|
||||||
<div class="row">
|
|
||||||
<div class="six columns">
|
|
||||||
<p><strong>The typography base</strong> is <a href="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 <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>
|
|
||||||
</div>
|
|
||||||
<div class="six columns">
|
|
||||||
<h1>Heading<span class="heading-font-size"> <code><h1></code> 50rem</span></h1>
|
|
||||||
<h2>Heading<span class="heading-font-size"> <code><h2></code> 42rem</span></h2>
|
|
||||||
<h3>Heading<span class="heading-font-size"> <code><h3></code> 36rem</span></h3>
|
|
||||||
<h4>Heading<span class="heading-font-size"> <code><h4></code> 30rem</span></h4>
|
|
||||||
<h5>Heading<span class="heading-font-size"> <code><h5></code> 24rem</span></h5>
|
|
||||||
<h6>Heading<span class="heading-font-size"> <code><h6></code> 15rem</span></h6>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- CODE EXAMPLE ———————————————————————————————————————— -->
|
|
||||||
<pre class="code-example">
|
|
||||||
<code class="code-example-body prettyprint"><!-- Standard Headings -->
|
|
||||||
<h1>Heading</h1>
|
|
||||||
<h2>Heading</h2>
|
|
||||||
<h3>Heading</h3>
|
|
||||||
<h4>Heading</h4>
|
|
||||||
<h5>Heading</h5>
|
|
||||||
<h6>Heading</h6>
|
|
||||||
|
|
||||||
<!-- 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>
|
|
||||||
<!-- ————————————————————————————————————————————————————— -->
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Buttons -->
|
|
||||||
<div class="row docs-section" id="buttons">
|
|
||||||
<h6 class="docs-header">Buttons</h6>
|
|
||||||
<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>
|
|
||||||
<div class="docs-example">
|
|
||||||
<div>
|
|
||||||
<a class="button" href="#">Anchor button</a>
|
|
||||||
<button>Button element</button>
|
|
||||||
<input type="submit" value="submit input">
|
|
||||||
<input type="button" value="button input">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<a class="button button-primary" href="#">Anchor button</a>
|
|
||||||
<button class="button-primary">Button element</button>
|
|
||||||
<input class="button-primary" type="submit" value="submit input">
|
|
||||||
<input class="button-primary" type="button" value="button input">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- CODE EXAMPLE ———————————————————————————————————————— -->
|
|
||||||
<pre class="code-example">
|
|
||||||
<code class="code-example-body prettyprint"><!-- Standard buttons -->
|
|
||||||
<a class="button" href="#">Anchor button</a>
|
|
||||||
<button>Button element</button>
|
|
||||||
<input type="submit" value="submit input">
|
|
||||||
<input type="button" value="button input">
|
|
||||||
|
|
||||||
<!-- Primary buttons -->
|
|
||||||
<a class="button button-primary" href="#">Anchor button</a>
|
|
||||||
<button class="button-primary">Button element</button>
|
|
||||||
<input class="button-primary" type="submit" value="submit input">
|
|
||||||
<input class="button-primary" type="button" value="button input">
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
<!-- ————————————————————————————————————————————————————— -->
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Forms -->
|
|
||||||
<div class="row docs-section" id="forms">
|
|
||||||
<h6 class="docs-header">Forms</h6>
|
|
||||||
<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>
|
|
||||||
<div class="docs-example docs-example-forms">
|
|
||||||
<form>
|
|
||||||
<div class="row">
|
|
||||||
<div class="six columns">
|
|
||||||
<label for="exampleEmailInput">Your email</label>
|
|
||||||
<input class="u-full-width" type="email" placeholder="test@mailbox.com" id="exampleEmailInput">
|
|
||||||
</div>
|
|
||||||
<div class="six columns">
|
|
||||||
<label for="exampleRecipientInput">Reason for contacting</label>
|
|
||||||
<select class="u-full-width">
|
|
||||||
<option value="Option 1">Questions</option>
|
|
||||||
<option value="Option 2">Admiration</option>
|
|
||||||
<option value="Option 3">Can I get your number?</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<label for="exampleMessage">Message</label>
|
|
||||||
<textarea class="u-full-width" placeholder="Hi Dave …" id="exampleMessage"></textarea>
|
|
||||||
<label class="example-send-yourself-copy">
|
|
||||||
<input type="checkbox">
|
|
||||||
<span class="label-body">Send a copy to yourself</span>
|
|
||||||
</label>
|
|
||||||
<input class="button-primary" type="submit" value="Submit">
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- CODE EXAMPLE ———————————————————————————————————————— -->
|
|
||||||
<pre class="code-example">
|
|
||||||
<code class="code-example-body prettyprint"><!-- The above form looks like this -->
|
|
||||||
<form>
|
|
||||||
<div class="row">
|
|
||||||
<div class="six columns">
|
|
||||||
<label for="exampleEmailInput">Your email</label>
|
|
||||||
<input class="u-full-width" type="email" placeholder="test@mailbox.com" id="exampleEmailInput">
|
|
||||||
</div>
|
|
||||||
<div class="six columns">
|
|
||||||
<label for="exampleRecipientInput">Reason for contacting</label>
|
|
||||||
<select class="u-full-width">
|
|
||||||
<option value="Option 1">Questions</option>
|
|
||||||
<option value="Option 2">Admiration</option>
|
|
||||||
<option value="Option 3">Can I get your number?</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<label for="exampleMessage">Message</label>
|
|
||||||
<textarea class="u-full-width" placeholder="Hi Dave …" id="exampleMessage"></textarea>
|
|
||||||
<label class="example-send-yourself-copy">
|
|
||||||
<input type="checkbox">
|
|
||||||
<span class="label-body">Send a copy to yourself</span>
|
|
||||||
</label>
|
|
||||||
<input class="button-primary" type="submit" value="Submit">
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<!-- Always wrap checkbox and radio inputs in a label and use a <span class="label-body"> inside of it -->
|
|
||||||
|
|
||||||
<!-- Note: The class .u-full-width is just a utility class shorthand for width: 100% -->
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
<!-- ————————————————————————————————————————————————————— -->
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Lists -->
|
|
||||||
<div class="docs-section" id="lists">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- CODE EXAMPLE ———————————————————————————————————————— -->
|
|
||||||
<pre class="code-example">
|
|
||||||
<code class="code-example-body prettyprint"><ul>
|
|
||||||
<li>Item 1</li>
|
|
||||||
<li>
|
|
||||||
Item 2
|
|
||||||
<ul>
|
|
||||||
<li>Item 2.1</li>
|
|
||||||
<li>Item 2.2</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li>Item 3</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<!-- Easily substitute any <ul> or an <ol> to get number lists or sublists. Skeleton doesn't support lists nested deeper than 2 levels -->
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
<!-- ————————————————————————————————————————————————————— -->
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Code -->
|
|
||||||
<div class="row docs-section" id="code">
|
|
||||||
<h6 class="docs-header">Code</h6>
|
|
||||||
<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>
|
|
||||||
<div class="docs-example">
|
|
||||||
<pre><code>.some-class {
|
|
||||||
background-color: red;
|
|
||||||
}</code></pre>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- CODE EXAMPLE ———————————————————————————————————————— -->
|
|
||||||
<pre class="code-example">
|
|
||||||
<code class="code-example-body prettyprint"><pre><code>.some-class {
|
|
||||||
background-color: red;
|
|
||||||
}</code></pre>
|
|
||||||
|
|
||||||
<!-- Remember every whitespace and break will be preserved in a <pre>, including indentation in your code -->
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
<!-- ————————————————————————————————————————————————————— -->
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Tables -->
|
|
||||||
<div class="row docs-section" id="tables">
|
|
||||||
<h6 class="docs-header">Tables</h6>
|
|
||||||
<p>Be sure to use properly formed table markup with <code><thead></code> and <code><tbody></code> when building a <code>table</code>.</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>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- CODE EXAMPLE ———————————————————————————————————————— -->
|
|
||||||
<pre class="code-example">
|
|
||||||
<code class="code-example-body prettyprint"><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>
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
<!-- ————————————————————————————————————————————————————— -->
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Queries -->
|
|
||||||
<div class="row docs-section" id="queries">
|
|
||||||
<h6 class="docs-header">Media queries</h6>
|
|
||||||
<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. There are two sets of queries. The first set is mobile-first, meaning it targets <code>min-width</code>. The other set is desktop-first, meaning it targets <code>max-width</code>. Mobile-first queries are how Skeleton's grid is built and is a preferrable method of organizing CSS. 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>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- CODE EXAMPLE ———————————————————————————————————————— -->
|
|
||||||
<pre class="code-example">
|
|
||||||
<code class="code-example-body prettyprint">/* Mobile first queries */
|
|
||||||
|
|
||||||
/* Larger than mobile */
|
|
||||||
@media (min-width: 400px) {}
|
|
||||||
|
|
||||||
/* Larger than phablet */
|
|
||||||
@media (min-width: 550px) {}
|
|
||||||
|
|
||||||
/* Larger than tablet */
|
|
||||||
@media (min-width: 750px) {}
|
|
||||||
|
|
||||||
/* Larger than desktop */
|
|
||||||
@media (min-width: 1000px) {}
|
|
||||||
|
|
||||||
/* Larger than Desktop HD */
|
|
||||||
@media (min-width: 1200px) {}
|
|
||||||
|
|
||||||
|
|
||||||
/* Desktop first queries */
|
|
||||||
|
|
||||||
/* 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) {}
|
|
||||||
|
|
||||||
/* Note: Values are 1px less on desktop first queries so there's no overriding in case you use both types of queries */
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
<!-- ————————————————————————————————————————————————————— -->
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Utilities and Misc. -->
|
|
||||||
<div class="row docs-section" id="utilities">
|
|
||||||
<h6 class="docs-header">Utilities</h6>
|
|
||||||
<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 ———————————————————————————————————————— -->
|
|
||||||
<pre class="code-example">
|
|
||||||
<code class="code-example-body prettyprint">/* Utility Classes */
|
|
||||||
|
|
||||||
/* Make element full width */
|
|
||||||
.u-full-width {
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box; }
|
|
||||||
|
|
||||||
/* Make sure elements don't run outside containers (great for images in columns) */
|
|
||||||
.u-max-full-width {
|
|
||||||
max-width: 100%;
|
|
||||||
box-sizing: border-box; }
|
|
||||||
|
|
||||||
/* Float either direction */
|
|
||||||
.u-pull-right {
|
|
||||||
float: right; }
|
|
||||||
.u-pull-left {
|
|
||||||
float: left; }
|
|
||||||
|
|
||||||
/* Clear a float */
|
|
||||||
.u-cf {
|
|
||||||
content: "";
|
|
||||||
display: table;
|
|
||||||
clear: both; }
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
<!-- ————————————————————————————————————————————————————— -->
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Examples -->
|
|
||||||
<div class="row docs-section" id="examples">
|
|
||||||
<h6 class="docs-header">Examples</h6>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Support -->
|
|
||||||
<div class="row docs-section" id="support">
|
|
||||||
<h6 class="docs-header">Support</h6>
|
|
||||||
<p>Skeleton supports all latest versions of major browsers (both on desktops and mobile devices). That said, it basically works with any version of Chrome, Firefox, Opera, or Safari and as far back as IE9.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- License -->
|
|
||||||
<div class="row docs-section" id="license">
|
|
||||||
<h6 class="docs-header">License</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>
|
|
||||||
<p>Skeleton's version history is available <a href="#">on Github</a>.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Colophon -->
|
|
||||||
<div class="row docs-section" id="colophon">
|
|
||||||
<h6 class="docs-header">Colophon</h6>
|
|
||||||
<p>Skeleton was built using <a href="http://www.sublimetext.com/3">Sublime Text 3</a> and designed with <a href="http://bohemiancoding.com/sketch/">Sketch</a>. The typeface <a href="http://www.google.com/fonts/specimen/Raleway">Raleway</a> was created by <a href="http://matt.cc/">Matt McInerney</a> and <a href="http://www.impallari.com/">Pablo Impallari</a>. Code highlighting by Google's Prettify library. Icons in the header are all derivative work of icon from <a href="thenounproject.com">The Noun Project</a>.<a href="http://thenounproject.com/term/feather/22073/"> Feather</a> by Zach VanDeHey, <a href="http://thenounproject.com/term/pen/21163/">Pen</a> (with cap) by Ed Harrison, <a href="http://thenounproject.com/term/pen/32847/">Pen</a> (with clicker) by Matthew Hall, and <a href="http://thenounproject.com/term/watch/48015/">Watch</a> by Julien Deveaux.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- End Document
|
<!-- End Document
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user