pushing new github pages stuff
This commit is contained in:
Dave Gamache
parent
015a69fc97
commit
d901ff3f38
BIN
documentation-assets/Skeleton-Grid.psd.zip
Normal file
BIN
documentation-assets/Skeleton-Grid.psd.zip
Normal file
Binary file not shown.
200
documentation-assets/docs.css
Normal file
200
documentation-assets/docs.css
Normal file
@ -0,0 +1,200 @@
|
|||||||
|
/*
|
||||||
|
* Skeleton V1.0.3
|
||||||
|
* Copyright 2011, Dave Gamache
|
||||||
|
* www.getskeleton.com
|
||||||
|
* Free to use under the MIT license.
|
||||||
|
* http://www.opensource.org/licenses/mit-license.php
|
||||||
|
* 7/17/2011
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
/* Documentation Styles
|
||||||
|
================================================== */
|
||||||
|
div.container {
|
||||||
|
padding-top: 60px; }
|
||||||
|
|
||||||
|
/* Doc nav */
|
||||||
|
nav {
|
||||||
|
position: fixed;
|
||||||
|
width: 160px; }
|
||||||
|
#logo {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||||
|
letter-spacing: -1px;
|
||||||
|
font-weight: bold; }
|
||||||
|
nav ul {
|
||||||
|
float: left; }
|
||||||
|
nav ul li {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 10px; }
|
||||||
|
nav ul li a,
|
||||||
|
nav ul li a:visited,
|
||||||
|
nav ul li a:active {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #555;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: bold; }
|
||||||
|
nav ul li a:hover,
|
||||||
|
nav ul li a:focus {
|
||||||
|
color: #222; }
|
||||||
|
header h1 {
|
||||||
|
font-size: 52px;
|
||||||
|
line-height: 61px;
|
||||||
|
letter-spacing: -1px;
|
||||||
|
font-weight: normal;
|
||||||
|
font-family: "Georgia", "Times New Roman", Helvetica, Arial, sans-serif; }
|
||||||
|
hr.large {
|
||||||
|
border: none;
|
||||||
|
height: 8px;
|
||||||
|
background: #ebebeb;
|
||||||
|
margin: 50px 0; }
|
||||||
|
div.doc-section {
|
||||||
|
margin: 30px 0; }
|
||||||
|
|
||||||
|
#whatAndWhy .row {
|
||||||
|
padding: 30px 0 0; }
|
||||||
|
|
||||||
|
#typography blockquote {
|
||||||
|
margin-top: 20px; }
|
||||||
|
|
||||||
|
.hidden-code a {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999; }
|
||||||
|
.hidden-code>div {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
|
|
||||||
|
/* Grid */
|
||||||
|
#grid .column,
|
||||||
|
#grid .columns {
|
||||||
|
background: #ddd;
|
||||||
|
height: 25px;
|
||||||
|
line-height: 25px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
text-align: center;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #555;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
-moz-border-radius: 2px;
|
||||||
|
-webkit-border-radius: 2px;
|
||||||
|
border-radius: 2px; }
|
||||||
|
#grid .column:hover,
|
||||||
|
#grid .columns:hover {
|
||||||
|
background: #bbb;
|
||||||
|
color: #333; }
|
||||||
|
#grid .example-grid { overflow: hidden; }
|
||||||
|
|
||||||
|
.post-button-note,
|
||||||
|
.post-button-note a {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #999; }
|
||||||
|
|
||||||
|
#examples .four.columns a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
#examples .four.columns a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.resize {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 80px;
|
||||||
|
width: 80px;
|
||||||
|
background: url(images/resize.png); }
|
||||||
|
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto; }
|
||||||
|
|
||||||
|
.gist-meta { display: none !important;}
|
||||||
|
|
||||||
|
ul ul ul li { margin-bottom: 3px; }
|
||||||
|
|
||||||
|
.twitter-share-button { margin-bottom: -18px; }
|
||||||
|
|
||||||
|
.carbonad,
|
||||||
|
.carbonad-image,
|
||||||
|
.carbonad-text,
|
||||||
|
.carbonad-tag {
|
||||||
|
background: none !important;
|
||||||
|
border: none !important;
|
||||||
|
margin-left: 0 !important;
|
||||||
|
}
|
||||||
|
.carbonad-tag {
|
||||||
|
margin-top: 6px !important;
|
||||||
|
padding-top: 0 !important;
|
||||||
|
}
|
||||||
|
.carbonad-text {
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
.carbonad-image {
|
||||||
|
margin-top: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Mobile */
|
||||||
|
@media only screen and (max-width: 767px) {
|
||||||
|
header h1 { font-size: 34px; line-height: 37px; }
|
||||||
|
nav { position: relative; }
|
||||||
|
nav ul,
|
||||||
|
.carbonad {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#logo { text-align: left; }
|
||||||
|
#examples .four.columns {
|
||||||
|
padding-top: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile Landscape */
|
||||||
|
@media only screen and (min-width: 480px) and (max-width: 767px) {
|
||||||
|
nav ul {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Non 960 */
|
||||||
|
@media only screen and (max-width: 959px) {
|
||||||
|
#logo {
|
||||||
|
font-size: 21px;
|
||||||
|
margin-bottom: 15px; }
|
||||||
|
nav .button {
|
||||||
|
padding: 9px 20px 11px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iPad Portrait/Browser */
|
||||||
|
@media only screen and (min-width: 768px) and (max-width: 959px) {
|
||||||
|
nav {
|
||||||
|
width: 124px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile/Browser */
|
||||||
|
@media only screen and (max-width: 767px) {}
|
||||||
|
|
||||||
|
/* Mobile Landscape/Browser */
|
||||||
|
@media only screen and (min-width: 480px) and (max-width: 767px) {}
|
||||||
|
|
||||||
|
/* Anything smaller than standard 960 */
|
||||||
|
@media only screen and (max-width: 959px) {}
|
||||||
|
|
||||||
|
|
||||||
|
/* iPad Portrait Only */
|
||||||
|
@media only screen and (min-width: 768px) and (max-width: 959px) and (max-device-width: 1000px) {}
|
||||||
|
|
||||||
|
/* Mobile Only */
|
||||||
|
@media only screen and (max-width: 767px) and (max-device-width: 1000px) {}
|
||||||
|
|
||||||
|
/* Mobile Landscape Only */
|
||||||
|
@media only screen and (min-width: 480px) and (max-width: 767px) and (max-device-width: 1000px) {}
|
||||||
|
|
||||||
|
/* Anything smaller than standard 960 on a device */
|
||||||
|
@media only screen and (max-width: 959px) and (max-device-width: 1000px) {
|
||||||
|
.resize { display: none; }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
BIN
documentation-assets/images/artisticly.jpg
Normal file
BIN
documentation-assets/images/artisticly.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
documentation-assets/images/blink182.jpg
Normal file
BIN
documentation-assets/images/blink182.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
documentation-assets/images/eleventhedition.jpg
Normal file
BIN
documentation-assets/images/eleventhedition.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
BIN
documentation-assets/images/fast.jpg
Normal file
BIN
documentation-assets/images/fast.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
documentation-assets/images/foundation.jpg
Normal file
BIN
documentation-assets/images/foundation.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
BIN
documentation-assets/images/resize.png
Normal file
BIN
documentation-assets/images/resize.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
documentation-assets/images/responsive.jpg
Normal file
BIN
documentation-assets/images/responsive.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
436
index.html
436
index.html
@ -8,9 +8,12 @@
|
|||||||
<!-- Basic Page Needs
|
<!-- Basic Page Needs
|
||||||
================================================== -->
|
================================================== -->
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>Your Page Title Here :)</title>
|
<title>Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development</title>
|
||||||
<meta name="description" content="">
|
<meta name="description" content="Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development">
|
||||||
<meta name="author" content="">
|
<meta name="author" content="Dave Gamache">
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||||
|
<![endif]-->
|
||||||
|
|
||||||
<!-- Mobile Specific Metas
|
<!-- Mobile Specific Metas
|
||||||
================================================== -->
|
================================================== -->
|
||||||
@ -18,65 +21,414 @@
|
|||||||
|
|
||||||
<!-- CSS
|
<!-- CSS
|
||||||
================================================== -->
|
================================================== -->
|
||||||
<link rel="stylesheet" href="stylesheets/base.css">
|
<link rel="stylesheet" href="src/stylesheets/base.css">
|
||||||
<link rel="stylesheet" href="stylesheets/skeleton.css">
|
<link rel="stylesheet" href="src/stylesheets/skeleton.css">
|
||||||
<link rel="stylesheet" href="stylesheets/layout.css">
|
<link rel="stylesheet" href="src/stylesheets/layout.css">
|
||||||
|
<link rel="stylesheet" href="documentation-assets/docs.css">
|
||||||
|
|
||||||
<!--[if lt IE 9]>
|
<!-- Favicon
|
||||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
|
||||||
<![endif]-->
|
|
||||||
|
|
||||||
<!-- Favicons
|
|
||||||
================================================== -->
|
================================================== -->
|
||||||
<link rel="shortcut icon" href="images/favicon.ico">
|
<link rel="shortcut icon" href="src/images/favicon.ico">
|
||||||
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
|
<link rel="apple-touch-icon" sizes="57x57" href="src/images/apple-touch-icon.png">
|
||||||
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
|
<link rel="apple-touch-icon" sizes="72x72" href="src/images/apple-touch-icon-72x72.png">
|
||||||
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
|
<link rel="apple-touch-icon" sizes="114x114" href="src/images/apple-touch-icon-114x114.png">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Primary Page Layout
|
|
||||||
================================================== -->
|
|
||||||
|
|
||||||
<!-- Delete everything in this .container and get started on your own site! -->
|
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="sixteen columns">
|
<div class="three columns sidebar">
|
||||||
<h1 class="remove-bottom" style="margin-top: 40px">Skeleton</h1>
|
<nav>
|
||||||
<h5>Version 1.1</h5>
|
<h3 id="logo">Skeleton</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#whatAndWhy">What & Why</a></li>
|
||||||
|
<li><a href="#grid">Grid</a></li>
|
||||||
|
<li><a href="#typography">Typography</a></li>
|
||||||
|
<li><a href="#buttons">Buttons</a></li>
|
||||||
|
<li><a href="#tabs">Tabs</a></li>
|
||||||
|
<li><a href="#forms">Forms</a></li>
|
||||||
|
<li><a href="#mediaQueries">Media Queries</a></li>
|
||||||
|
<li><a href="#support">Support</a></li>
|
||||||
|
<li><a href="#examples">Examples</a></li>
|
||||||
|
<li><a href="#download">Download</a></li>
|
||||||
|
</ul>
|
||||||
|
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/13109/azcarbon_2_1_0_VERT"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="twelve columns offset-by-one content">
|
||||||
|
<header>
|
||||||
|
<h1>A Beautiful Boilerplate for Responsive, Mobile-Friendly Development</h1>
|
||||||
|
<a href="http://twitter.com/share" class="twitter-share-button" data-text="Skeleton - A Beautiful Boilerplate for Responsive, Mobile-Friendly Development" data-count="horizontal" data-via="dhg">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
|
||||||
|
</header>
|
||||||
|
<hr class="large" />
|
||||||
|
<div class="doc-section" id="whatAndWhy">
|
||||||
|
<h3>What Is It?</h3>
|
||||||
|
<p>Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. Skeleton is built on three core principles:</p>
|
||||||
|
<div class="row clearfix">
|
||||||
|
<div class="four columns alpha">
|
||||||
|
<img src="documentation-assets/images/responsive.jpg" alt="responsive" width="220" height="113" />
|
||||||
|
</div>
|
||||||
|
<div class="eight columns omega">
|
||||||
|
<h5>Responsive Grid Down To Mobile</h5>
|
||||||
|
<p>Skeleton has a familiar, lightweight 960 grid as its base, but elegantly scales down to downsized browser windows, tablets, mobile phones (in landscape and portrait). <strong>Go ahead, resize this page!</strong></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row clearfix">
|
||||||
|
<div class="four columns alpha">
|
||||||
|
<img src="documentation-assets/images/fast.jpg" alt="responsive" width="220" height="113" />
|
||||||
|
</div>
|
||||||
|
<div class="eight columns omega">
|
||||||
|
<h5>Fast to Start</h5>
|
||||||
|
<p>Skeleton is a tool for rapid development. Get started fast with CSS best practices, a well-structured grid that makes mobile consideration easy, an organized file structure and super basic UI elements like lightly styled forms, buttons, tabs and more.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row clearfix">
|
||||||
|
<div class="four columns alpha">
|
||||||
|
<img src="documentation-assets/images/foundation.jpg" alt="responsive" width="220" height="113" />
|
||||||
|
</div>
|
||||||
|
<div class="eight columns omega">
|
||||||
|
<h5>Style Agnostic</h5>
|
||||||
|
<p>Skeleton is not a UI framework. It's a development kit that provides the most basic styles as a foundation, but is ready to adopt whatever your design or style is.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<hr />
|
<hr />
|
||||||
|
<div class="doc-section clearfix" id="grid">
|
||||||
|
<h3>The Grid</h3>
|
||||||
|
<p>Skeleton's base grid is a variation of the 960 grid system. The syntax is simple and it's effective cross browser, but the awesome part is that it also has the flexibility to go mobile like a champ. <strong>Go ahead, resize the browser and watch as the layout reacts!</strong></p>
|
||||||
|
<div class="example-grid">
|
||||||
|
<div class="one column alpha">One</div>
|
||||||
|
<div class="eleven columns omega">Eleven</div>
|
||||||
|
<div class="two columns alpha">Two</div>
|
||||||
|
<div class="ten columns omega">Ten</div>
|
||||||
|
<div class="three columns alpha">Three</div>
|
||||||
|
<div class="nine columns omega">Nine</div>
|
||||||
|
<div class="four columns alpha">Four</div>
|
||||||
|
<div class="eight columns omega">Eight</div>
|
||||||
|
<div class="five columns alpha">Five</div>
|
||||||
|
<div class="seven columns omega">Seven</div>
|
||||||
|
<div class="six columns alpha">Six</div>
|
||||||
|
<div class="six columns omega">Six</div>
|
||||||
|
<div class="seven columns alpha">Seven</div>
|
||||||
|
<div class="five columns omega">Five</div>
|
||||||
|
<div class="eight columns alpha">Eight</div>
|
||||||
|
<div class="four columns omega">Four</div>
|
||||||
|
<div class="nine columns alpha">Nine</div>
|
||||||
|
<div class="three columns omega">Three</div>
|
||||||
|
<div class="ten columns alpha">Ten</div>
|
||||||
|
<div class="two columns omega">Two</div>
|
||||||
|
<div class="eleven columns alpha">Eleven</div>
|
||||||
|
<div class="one column omega">One</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="one-third column">
|
<div class="hidden-code">
|
||||||
<h3>About Skeleton?</h3>
|
<a href="">Code Example</a>
|
||||||
<p>Skeleton is a small collection of well-organized CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. It's based on a responsive grid, but also provides very basic CSS for typography, buttons, tabs, forms and media queries. Go ahead, resize this super basic page to see the grid in action.</p>
|
<script src="https://gist.github.com/959632.js?file=Skeleton%20Grid"></script>
|
||||||
</div>
|
</div>
|
||||||
<div class="one-third column">
|
</div>
|
||||||
<h3>Three Core Principles</h3>
|
<hr />
|
||||||
<p>Skeleton is built on three core principles:</p>
|
<div class="doc-section clearfix" id="typography">
|
||||||
|
<h3>Typography</h3>
|
||||||
|
<p>The typography of Skeleton is designed to create a strong hierarchy with basic styles. The primary font is the classic Helvetica Neue, but the font stack can be easily changed with just a couple adjustments. Regular paragraphs are set at a 14px base with 21px line height.</p>
|
||||||
|
<div class="row">
|
||||||
|
<div class="seven columns alpha headings">
|
||||||
|
<h1>Heading <h1></h1>
|
||||||
|
<h2>Heading <h2></h2>
|
||||||
|
<h3>Heading <h3></h3>
|
||||||
|
<h4>Heading <h4></h4>
|
||||||
|
<h5>Heading <h5></h5>
|
||||||
|
<h6>Heading <h6></h6>
|
||||||
|
</div>
|
||||||
|
<div class="five columns omega">
|
||||||
|
<blockquote>
|
||||||
|
<p>This is a blockquote style example. It stands out, but is awesome</p>
|
||||||
|
<cite>Dave Gamache, Skeleton Creator</cite>
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hidden-code">
|
||||||
|
<a href="">Code Example</a>
|
||||||
|
<script src="https://gist.github.com/973460.js?file=typography"></script>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
<div class="doc-section" id="buttons">
|
||||||
|
<h3>Buttons</h3>
|
||||||
|
<p>Buttons are intended for action and thus should have appropriate weight. The standard button is given that weight with a little bit of depth and a strong hover.</p>
|
||||||
|
<a href="#" class="button">Click Me For Action</a>
|
||||||
|
<div class="hidden-code">
|
||||||
|
<a href="">Code Example</a>
|
||||||
|
<script src="https://gist.github.com/973448.js?file=buttons"></script>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
<div class="doc-section" id="tabs">
|
||||||
|
<h3>Tabs</h3>
|
||||||
|
<p>Some very simple tabs that have dead simple jQuery that hook them up to their corresponding content.</p>
|
||||||
|
<ul class="tabs">
|
||||||
|
<li><a class="active" href="#simple">Simple</a></li>
|
||||||
|
<li><a href="#lightweight">Lightweight</a></li>
|
||||||
|
<li><a href="#mobileFriendly">Mobile</a></li>
|
||||||
|
</ul>
|
||||||
|
<ul class="tabs-content">
|
||||||
|
<li class="active" id="simple">The tabs are clean and simple unordered-list markup and basic CSS.</li>
|
||||||
|
<li id="lightweight">The tabs are cross-browser, but don't need a ton of hacky CSS or markup.</li>
|
||||||
|
<li id="mobileFriendly">The tabs work like a charm even on mobile devices. If there are too many they will stack (it's not completely awesome, but still retains functionality).</li>
|
||||||
|
</ul>
|
||||||
|
<div class="hidden-code">
|
||||||
|
<a href="">Code Example</a>
|
||||||
|
<script src="https://gist.github.com/973450.js?file=tabs"></script>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
<div class="doc-section clearfix" id="forms">
|
||||||
|
<h3>Forms</h3>
|
||||||
|
<p>Forms can be one of the biggest pains for web developers, but just use these dead simple styles and you should be good to go. </p>
|
||||||
|
<div class="four columns alpha">
|
||||||
|
<form>
|
||||||
|
<label for="regularInput">Regular Input</label>
|
||||||
|
<input type="text" id="regularInput" />
|
||||||
|
<label for="regularTextarea">Regular Textarea</label>
|
||||||
|
<textarea id="regularTextarea"></textarea>
|
||||||
|
<label for="selectList">Select List</label>
|
||||||
|
<select id="selectList">
|
||||||
|
<option value="Option 1">Option 1</option>
|
||||||
|
<option value="Option 2">Option 2</option>
|
||||||
|
<option value="Option 3">Option 3</option>
|
||||||
|
<option value="Option 4">Option 4</option>
|
||||||
|
</select>
|
||||||
|
<fieldset>
|
||||||
|
<legend>Checkboxes</legend>
|
||||||
|
<label for="regularCheckbox">
|
||||||
|
<input type="checkbox" id="regularCheckbox" value="checkbox 1" />
|
||||||
|
<span>Regular Checkbox</span>
|
||||||
|
</label>
|
||||||
|
<label for="secondRegularCheckbox">
|
||||||
|
<input type="checkbox" id="secondRegularCheckbox" value="checkbox 2" />
|
||||||
|
<span>Regular Checkbox</span>
|
||||||
|
</label>
|
||||||
|
</fieldset>
|
||||||
|
<fieldset>
|
||||||
|
<legend>Radio Buttons</legend>
|
||||||
|
<label for="regularRadio">
|
||||||
|
<input type="radio" name="radios" id="regularRadio" value="radio 1" />
|
||||||
|
<span>Regular Radio</span>
|
||||||
|
</label>
|
||||||
|
<label for="secondRegularRadio">
|
||||||
|
<input type="radio" name="radios" id="secondRegularRadio" value="radio 2" />
|
||||||
|
<span>Regular Radio</span>
|
||||||
|
</label>
|
||||||
|
</fieldset>
|
||||||
|
<button type="submit">Submit Form</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<br class="clear" />
|
||||||
|
<div class="hidden-code">
|
||||||
|
<a href="">Code Example</a>
|
||||||
|
<script src="https://gist.github.com/973455.js?file=forms"></script>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
<div class="doc-section" id="mediaQueries">
|
||||||
|
<h3>Media Queries</h3>
|
||||||
|
<p>Skeleton uses a <strong>lot</strong> of media queries to serve the scalable grid, but also for the convenience of styling your site on different size screens. Skeleton's media queries are almost exclusively targeted at max and min widths rather than device sizes or orientations. The advantage of this is browsers and future mobile devices that don't map to exact set dimensions will still benefit from the styles. That being said, all of the queries were written to be optimal on Apple iOS devices. The built in media queries include:</p>
|
||||||
<ul class="square">
|
<ul class="square">
|
||||||
<li><strong>A Responsive Grid Down To Mobile</strong>: Elegant scaling from a browser to tablets to mobile.</li>
|
<li><strong>Smaller than 960</strong>: Smaller than the standard base grid</li>
|
||||||
<li><strong>Fast to Start</strong>: It's a tool for rapid development with best practices</li>
|
<li><strong>Tablet Portrait</strong>: Between 768px and 959px</li>
|
||||||
<li><strong>Style Agnostic</strong>: It provides the most basic, beautiful styles, but is meant to be overwritten.</li>
|
<li><strong>All Mobile Sizes</strong>: Less than 767px</li>
|
||||||
|
<li><strong>Just Mobile Landscape</strong>: Between 480px and 767px</li>
|
||||||
|
<li><strong>Just Mobile Portrait</strong>: Less than 479px</li>
|
||||||
|
</ul>
|
||||||
|
<div class="hidden-code">
|
||||||
|
<a href="">Code Example</a>
|
||||||
|
<script src="https://gist.github.com/973467.js?file=media%20queries"></script>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
<div class="doc-section" id="support">
|
||||||
|
<h3>Support for Skeleton</h3>
|
||||||
|
<p>Do you have feedback, questions or thoughts about Skeleton - hit me up at <em>hi@getskeleton.com</em> and I will get back to you as soon as I can :)</p>
|
||||||
|
<ul class="tabs">
|
||||||
|
<li><a class="active" href="#browsers">Browsers</a></li>
|
||||||
|
<li><a href="#changelog">Changelog</a></li>
|
||||||
|
<li><a href="#licensing">License</a></li>
|
||||||
|
</ul>
|
||||||
|
<ul class="tabs-content">
|
||||||
|
<li class="active" id="browsers">
|
||||||
|
<p>Skeleton has been tested across as many devices and browsers as I could get my hands on:</p>
|
||||||
|
<ul class="square add-bottom">
|
||||||
|
<li>Latest Chrome (Mac/PC)</li>
|
||||||
|
<li>Firefox 4.0, 3.6, 3.5, 3.0 (Mac/PC)</li>
|
||||||
|
<li>Latest Safari</li>
|
||||||
|
<li>IE9, IE8, IE7</li>
|
||||||
|
<li>iPhone (Retina)</li>
|
||||||
|
<li>Droid (Charge/Original)</li>
|
||||||
|
<li>iPad</li>
|
||||||
|
</ul>
|
||||||
|
<p>There is a small hiccup though - older non-CSS3 browsers aren't going to respond to the media-queries and thus will be served the standard 960 grid even if they are resized. In the spirit of graceful degradation though, I'm going to let this be instead of trying to implement a JS solution. If you are interested in one though, try the <a href="https://github.com/scottjehl/Respond">respond.js polyfill</a>.</p>
|
||||||
|
<p><strong>Notes on IE</strong>: We all know sometimes IE doesn't behave, so through the genius of conditional CSS I've added a class of "ie" to all versions of the browser, as well as specific targets for each (i.e. "ie6", "ie7", "ie8"). It's not a perfect world, but hopefully this will help make naughty IE behave.</p>
|
||||||
|
</li>
|
||||||
|
<li id="changelog">
|
||||||
|
<ul class="square">
|
||||||
|
<li>
|
||||||
|
<strong>V1.0.0</strong> <em>(5/15/2011)</em>: Initial release of Skeleton.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>V1.0.1</strong> <em>(5/19/2011)</em>: Made some quick changes based on input from Github and fellow designers.
|
||||||
|
<ul class="square">
|
||||||
|
<li>Refined the app.js to make faster and cleaner</li>
|
||||||
|
<li>Added Apple touch icons</li>
|
||||||
|
<li>Removed some bloated CSS lines from the base.css</li>
|
||||||
|
<li>Added an :active button class</li>
|
||||||
|
<li>Changed Skeleton favicon</li>
|
||||||
|
<li>Added MIT licensing</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>V1.0.2</strong> <em>(5/20/2011)</em>: Added more input declarations to the .button styles and included legend in CSS
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>V1.0.3</strong> <em>(7/17/2011)</em>: Fixed the issue of failed "zooming" on browsers.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>V1.1</strong> <em>(8/17/2011)</em>: A lot of cleanup changes. I finally feel comfortable throwing a 1.1 on this bad boy.
|
||||||
|
<ul class="square">
|
||||||
|
<li>App.js is now just tabs.js</li>
|
||||||
|
<li>Tab CSS now works perfectly on IE7+</li>
|
||||||
|
<li>Rewrote layout.css media-query spaces to be easier to understand</li>
|
||||||
|
<li>Stripping some rogue whitespace and reformatting a bit</li>
|
||||||
|
<li>Fixing broken doctype declaration</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li id="licensing">
|
||||||
|
<p>All parts of Skeleton are free to use and abuse under the open-source MIT license. The full licensing language can be found here: <a href="http://www.opensource.org/licenses/mit-license.php">http://www.opensource.org/licenses/mit-license.php</a>. </p>
|
||||||
|
<p>More importantly, I would love to have a small community of contributors to Skeleton, so please feel free to jump over the <a href="https://github.com/dhgamache/Skeleton">Skeleton Github page</a> and contribute to make Skeleton a better boilerplate for everyone! <strong>I would also love to know if you built a site on Skeleton</strong> - I'm planning on tying a gallery into these docs, so just shoot me the URL at <em>hi@getskeleton.com</em></p>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="one-third column">
|
<hr />
|
||||||
<h3>Docs & Support</h3>
|
<div class="doc-section" id="examples">
|
||||||
<p>The easiest way to really get started with Skeleton is to check out the full docs and info at <a href="http://www.getskeleton.com">www.getskeleton.com.</a>. Skeleton is also open-source and has a <a href="https://github.com/dhgamache/skeleton">project on git</a>, so check that out if you want to report bugs or create a pull request. If you have any questions, thoughts, concerns or feedback, please don't hesitate to email me at <a href="mailto:hi@getskeleton.com">hi@getskeleton.com</a>.</p>
|
<h3>Examples & Extensions</h3>
|
||||||
|
<p>Skeleton has been in the wild for quite a few months now and reception has been pretty awesome so far. Nothing pleases me more than receiving emails about projects using Skeleton or constructive feedback (this is really the reason Skeleton gets better). Here is a quick list of some of the most awesome sites using Skeleton:</p>
|
||||||
|
<div class="row clearfix">
|
||||||
|
<div class="four columns alpha">
|
||||||
|
<a href="http://www.eleventhedition.com/">
|
||||||
|
<img src="documentation-assets/images/eleventhedition.jpg" alt="eleventh edition" width="220" height="125" />
|
||||||
|
<h6>The Eleventh Edition</h6>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="four columns">
|
||||||
|
<a href="http://neighborhoods.blink182.com/">
|
||||||
|
<img src="documentation-assets/images/blink182.jpg" alt="blink 182 neighborhoods" width="220" height="125" />
|
||||||
|
<h6>Blink 182 Neighborhoods</h6>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="four columns omega">
|
||||||
|
<a href="http://artistic.ly/">
|
||||||
|
<img src="documentation-assets/images/artisticly.jpg" alt="artisticly" width="220" height="125" />
|
||||||
|
<h6>Artistic.ly</h6>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p>Skeleton also has been extended in a number of ways! These are the extensions I've heard of so far!</p>
|
||||||
|
<ul class="square">
|
||||||
|
<li><a href="http://demos.simplethemes.com/skeleton/"><strong>Skeleton Wordpress</strong></a></li>
|
||||||
|
<li><a href="https://github.com/wycks/WP-Skeleton-Theme"><strong>Alternate Skeleton Wordpress on Github</strong></a></li>
|
||||||
|
<li><a href="https://github.com/helios-technologies/skeleton-rails"><strong>Skeleton Rails Gem on Github</strong></a><small> or check it out on <a href=" https://rubygems.org/gems/skeleton-rails">Rubygems.org</a></small></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
<div class="doc-section" id="download">
|
||||||
|
<h3>Downloads</h3>
|
||||||
|
<p>The Skeleton download is a zip file (~25kb) containing all the CSS groundwork and JS goodies to get started on any web project. </p>
|
||||||
|
<a href="https://github.com/dhgamache/Skeleton/tarball/master" class="remove-bottom button">Download Skeleton 1.1 from Github</a>
|
||||||
|
<div class="post-button-note half-bottom">or <a href="https://github.com/dhgamache/Skeleton">View Source on Github</a></div>
|
||||||
|
<a href="documentation-assets/Skeleton-Grid.psd.zip" class="button remove-bottom">Download Skeleton PSD Template</a>
|
||||||
|
<div class="post-button-note add-bottom">(A la <a href="http://www.960.gs">960.gs</a> PSD template)</div>
|
||||||
|
<p>The file structure for Skeleton is:</p>
|
||||||
|
<ul class="square">
|
||||||
|
<li><strong>index.html</strong>: The base html page that includes the necessary initial markup</li>
|
||||||
|
<li>
|
||||||
|
<strong>stylesheets</strong> <em>(folder)</em>
|
||||||
|
<ul class="circle">
|
||||||
|
<li><strong>base.css</strong>: Basic styles of Skeleton</li>
|
||||||
|
<li><strong>skeleton.css</strong>: The glorious Skeleton grid</li>
|
||||||
|
<li><strong>layout.css</strong>: File with no specific styles, but a variety of useful media queries</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>javascripts</strong> <em>(folder)</em>
|
||||||
|
<ul class="circle">
|
||||||
|
<li><strong>tabs.js</strong>: Contains code for activating tabs and should house your site's JS/jQuery (using Google's CDN to pull in jQuery as well)</li>
|
||||||
|
<li><strong>plugins</strong> <em>(folder)</em>: An empty directory for your jQuery plugins</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>images</strong> <em>(folder):</em>
|
||||||
|
<ul class="circle">
|
||||||
|
<li><strong>favicon.ico</strong>: Standard 16x16 favicon</li>
|
||||||
|
<li><strong>apple-touch-icon (x3)</strong>: All three sizes of Apple touch icons for iPhone 3, iPad and iPhone 4 with retina.</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><strong>robots.txt</strong>: SEO, search-crawler file. Don't need to touch it, just there for your own good</li>
|
||||||
|
<li><strong>404.html</strong>: Placeholder 404 page just to get you started</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
<div class="doc-section" id="attribution">
|
||||||
|
<p class="remove-bottom"><small>Created by <a href="http://www.davegamache.com">Dave Gamache</a>, 2011 ©<br />
|
||||||
|
I want to thank <a href="http://twitter.com/#!/smileyj68">@smileyj68</a> for all the inspiration and for helping me get to a place to create Skeleton, <a href="http://twitter.com/#!/mdo">@mdo</a> for being a boss, giving awesome feedback and helping me get Skeleton out of the door, <a href="http://html5boilerplate.com/">the whole HTML5 Boilerplate project/team</a> that served as an indispensable resource, <a href="http://www.960.gs">960.gs</a> for a great starting point and their PSD template and <a href="http://twitter.com/#!/ashleybatz">@ashleybatz</a> for putting up with my late night coding and shenanigans.</small></p>
|
||||||
|
</div>
|
||||||
|
</div><!-- content -->
|
||||||
</div><!-- container -->
|
</div><!-- container -->
|
||||||
|
|
||||||
|
<div class="resize"></div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- JS
|
<!-- JS
|
||||||
================================================== -->
|
================================================== -->
|
||||||
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
|
||||||
<script src="javascripts/tabs.js"></script>
|
<script src="src/javascripts/tabs.js"></script>
|
||||||
|
|
||||||
<!-- End Document
|
|
||||||
================================================== -->
|
<script>
|
||||||
</body>
|
$('.hidden-code').click(function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
$(this).children('.gist').slideToggle();
|
||||||
|
})
|
||||||
|
|
||||||
|
var originalText;
|
||||||
|
$('.example-grid').children().hover(
|
||||||
|
function() {
|
||||||
|
originalText = $(this).text();
|
||||||
|
$(this).html($(this).width()+'px');
|
||||||
|
},
|
||||||
|
function() {
|
||||||
|
$(this).html(originalText);
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Google Analytics -->
|
||||||
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
var _gaq = _gaq || [];
|
||||||
|
_gaq.push(['_setAccount', 'UA-20752697-1']);
|
||||||
|
_gaq.push(['_trackPageview']);
|
||||||
|
|
||||||
|
(function() {
|
||||||
|
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||||
|
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||||
|
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||||
|
})();
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
Before Width: | Height: | Size: 9.9 KiB After Width: | Height: | Size: 9.9 KiB |
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.8 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
82
src/index.html
Normal file
82
src/index.html
Normal file
@ -0,0 +1,82 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
|
||||||
|
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
|
||||||
|
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
|
||||||
|
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
|
||||||
|
<head>
|
||||||
|
|
||||||
|
<!-- Basic Page Needs
|
||||||
|
================================================== -->
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Your Page Title Here :)</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">
|
||||||
|
|
||||||
|
<!-- CSS
|
||||||
|
================================================== -->
|
||||||
|
<link rel="stylesheet" href="stylesheets/base.css">
|
||||||
|
<link rel="stylesheet" href="stylesheets/skeleton.css">
|
||||||
|
<link rel="stylesheet" href="stylesheets/layout.css">
|
||||||
|
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||||
|
<![endif]-->
|
||||||
|
|
||||||
|
<!-- Favicons
|
||||||
|
================================================== -->
|
||||||
|
<link rel="shortcut icon" href="images/favicon.ico">
|
||||||
|
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Primary Page Layout
|
||||||
|
================================================== -->
|
||||||
|
|
||||||
|
<!-- Delete everything in this .container and get started on your own site! -->
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="sixteen columns">
|
||||||
|
<h1 class="remove-bottom" style="margin-top: 40px">Skeleton</h1>
|
||||||
|
<h5>Version 1.1</h5>
|
||||||
|
<hr />
|
||||||
|
</div>
|
||||||
|
<div class="one-third column">
|
||||||
|
<h3>About Skeleton?</h3>
|
||||||
|
<p>Skeleton is a small collection of well-organized CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. It's based on a responsive grid, but also provides very basic CSS for typography, buttons, tabs, forms and media queries. Go ahead, resize this super basic page to see the grid in action.</p>
|
||||||
|
</div>
|
||||||
|
<div class="one-third column">
|
||||||
|
<h3>Three Core Principles</h3>
|
||||||
|
<p>Skeleton is built on three core principles:</p>
|
||||||
|
<ul class="square">
|
||||||
|
<li><strong>A Responsive Grid Down To Mobile</strong>: Elegant scaling from a browser to tablets to mobile.</li>
|
||||||
|
<li><strong>Fast to Start</strong>: It's a tool for rapid development with best practices</li>
|
||||||
|
<li><strong>Style Agnostic</strong>: It provides the most basic, beautiful styles, but is meant to be overwritten.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="one-third column">
|
||||||
|
<h3>Docs & Support</h3>
|
||||||
|
<p>The easiest way to really get started with Skeleton is to check out the full docs and info at <a href="http://www.getskeleton.com">www.getskeleton.com.</a>. Skeleton is also open-source and has a <a href="https://github.com/dhgamache/skeleton">project on git</a>, so check that out if you want to report bugs or create a pull request. If you have any questions, thoughts, concerns or feedback, please don't hesitate to email me at <a href="mailto:hi@getskeleton.com">hi@getskeleton.com</a>.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div><!-- container -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- JS
|
||||||
|
================================================== -->
|
||||||
|
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
|
||||||
|
<script src="javascripts/tabs.js"></script>
|
||||||
|
|
||||||
|
<!-- End Document
|
||||||
|
================================================== -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user