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

finished the grid and added a lot more documentation on the skeleton project, including some code snippets and other pieces

Browse Source
This commit is contained in:
Dave Gamache 2011-05-05 12:41:53 -07:00
parent 82d63e753d
commit 48aa42b216
6 changed files with 270 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
documentation-assets/docs.css
View File

@ -43,10 +43,19 @@
div.doc-section {
margin: 30px 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: #111;
background: #222;
height: 25px;
line-height: 25px;
margin-bottom: 10px;
@ -58,6 +67,7 @@
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px; }
#grid .example-grid { overflow: hidden; }
/* Mobile */
@ -73,10 +83,7 @@
/* Mobile Landscape */
@media only screen and (min-width: 480px) and (max-width: 767px) {
/* .container .four.columns.sidebar { width: 464px; } */
nav ul { display: none; }
/* .container .twelve.columns.content { width: 464px; } */
/* #grid .example-grid { width: 344px; } */
}
/* Non 960 */
@ -107,9 +114,6 @@
/* Mobile Landscape Only */
@media only screen and (min-width: 480px) and (max-width: 767px) and (max-device-width: 1000px) {
body {
font-size: 50%;
line-height: 1.5em; }
header p {
font-size: 25px;
line-height: 30px; }

116
index.php
View File

@ -22,7 +22,6 @@
================================================== -->
<link rel="stylesheet" href="src/stylesheets/base.css">
<link rel="stylesheet" href="src/stylesheets/skeleton.css">
<link rel="stylesheet" href="src/stylesheets/ui.css">
<link rel="stylesheet" href="src/stylesheets/layout.css">
<link rel="stylesheet" href="documentation-assets/docs.css">
<!--[if lt IE9]><link rel="stylesheet" href="css/ie.css"><![endif]-->
@ -42,12 +41,12 @@
<div class="container fluid">
<div class="container">
<div class="four columns sidebar">
<nav>
<img src="documentation-assets/images/logo.png" id="logo"></img>
<ul>
<li><a class="active" href="#whatAndWhy">What & Why</a></li>
<li><a href="#whatAndWhy">What & Why</a></li>
<li><a href="#basics">Basics</a></li>
<li><a href="#typography">Typography</a></li>
<li><a href="#grid">Grid</a></li>
@ -65,7 +64,7 @@
<p>Skeleton is a lightweight framework for HTML, CSS & jQuery that makes building websites easier.</p>
</header>
<hr class="large" />
<div class="doc-section" id="whyAndWhat">
<div class="doc-section" id="whatAndWhy">
<h3>What &amp; Why</h3>
<p>Here is where I need to chat about what Skeleton is, why it's awesome and how what the file structure is. Focus on: 1) Speed, 2) Best Practices , 3) Across devices</p>
</div>
@ -75,15 +74,23 @@
<p>Here is where I need to chat about what Skeleton is, why it's awesome and how what the file structure is. Focus on: 1) Speed, 2) Best Practices , 3) Across devices</p>
</div>
<hr />
<div class="doc-section" id="typography">
<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 changes with just a couple adjustments.</p>
<h1>Heading &lt;h1&gt;</h1>
<h2>Heading &lt;h2&gt;</h2>
<h3>Heading &lt;h3&gt;</h3>
<h4>Heading &lt;h4&gt;</h4>
<h5>Heading &lt;h5&gt;</h5>
<h6>Heading &lt;h6&gt;</h6>
<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 changes with just a couple adjustments. Regular paragraphs are set at a 14px base with 21px line height.</p>
<div class="seven columns alpha headings">
<h1>Heading &lt;h1&gt;</h1>
<h2>Heading &lt;h2&gt;</h2>
<h3>Heading &lt;h3&gt;</h3>
<h4>Heading &lt;h4&gt;</h4>
<h5>Heading &lt;h5&gt;</h5>
<h6>Heading &lt;h6&gt;</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>
<hr />
<div class="doc-section clearfix" id="grid">
@ -113,31 +120,95 @@
<div class="eleven columns alpha">Eleven</div>
<div class="one column omega">One</div>
</div>
<div class="hidden-code">
<a href="">Code Example</a>
<script type="text/javascript" src="http://snipt.net/embed/44d7e5e7fece4e269ef873fc448804bb"></script>
</div>
</div>
<hr />
<div class="doc-section" id="buttons">
<h3>Buttons</h3>
<p>Button are intended for action and thus should have appropriate weight. The standard buttons are given that weight by being strong and dark, but they could just as easily be colorful.</p>
<a href="#" class="button">Save Now</a>
<a href="#" class="secondary button">Dismiss Changes</a>
<div class="hidden-code">
<a href="">Code Example</a>
<script type="text/javascript" src="http://snipt.net/embed/c9ba7e6bef73adc206a1f2f156336b1f"></script>
</div>
</div>
<hr />
<div class="doc-section" id="tabs">
<h3>Tabs</h3>
<p>Here is where I need to chat about what Skeleton is, why it's awesome and how what the file structure is. Focus on: 1) Speed, 2) Best Practices , 3) Across devices</p>
<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="simpleTab">This is content about how these tabs are simple</li>
<li id="lightweightTab">This is content about how these tabs are lightweight</li>
<li id="mobileFriendlyTab">This is content about how these tabs are mobile friendly</li>
<li class="active" id="simpleTab">The tabs are clean and simple unordered-list markup and basic CSS.</li>
<li id="lightweightTab">The tabs are cross-browser, but don't need a ton of hacky CSS or markup.</li>
<li id="mobileFriendlyTab">The tabs work like a charm even on mobile devices.</li>
</ul>
<div class="hidden-code">
<a href="">Code Example</a>
<script type="text/javascript" src="http://snipt.net/embed/4b46e3f57681fb03107aee169cd7e252"></script>
</div>
</div>
<hr />
<div class="doc-section" id="forms">
<div class="doc-section clearfix" id="forms">
<h3>Forms</h3>
<p>Here is where I need to chat about what Skeleton is, why it's awesome and how what the file structure is. Focus on: 1) Speed, 2) Best Practices , 3) Across devices</p>
<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" style="overflow: hidden">
<form action="">
<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>
<label for="">Checkboxes</label>
<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>
<label for="">Radio Buttons</label>
<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>
<!-- <input type="text" id="placeholderInput" placeholder="Placeholder Input" /> -->
</form>
</div>
</div>
<hr />
<div class="doc-section" id="mediaQueries">
<h3>Media Queries</h3>
<p>Here is where I need to chat about what Skeleton is, why it's awesome and how what the file structure is. Focus on: 1) Speed, 2) Best Practices , 3) Across devices</p>
<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">
<li><strong>iPad Portrait</strong> or any other tablet device </li>
<li><strong>iPhone</strong> or mobile styles in general for small screens</li>
<li><strong>iPhone Landscape</strong> or other mobile devices with a large screen size (cascades over standard mobile styles)</li>
<li><strong>Less than 960</strong> to style anything across browsers and devices that is smaller than the base grid</li>
</ul>
</div>
<hr />
<div class="doc-section" id="theFuture">
@ -158,5 +229,12 @@
<script>window.jQuery || document.write("<script src='src/javascripts/jquery-1.5.1.min.js'>\x3C/script>")</script>
<script src="src/javascripts/modernizr-1.7.min.js"></script>
<script src="src/javascripts/app.js"></script>
<script>
$('.hidden-code').click(function(e) {
e.preventDefault();
$(this).children('div').slideDown();
})
</script>
</body>
</html>

4
src/javascripts/app.js
View File

@ -9,7 +9,9 @@
$(document).ready(function() {
/* iPhone fix to scroll away iPhone browser chrome */
setTimeout(function(){window.scrollTo(0, 1);}, 100);
if(window.width < '800px') {
setTimeout(function(){window.scrollTo(0, 1);}, 100);
}
/* Tabs Activiation
================================================== */

167
src/stylesheets/base.css
View File

@ -13,7 +13,10 @@
#Site Styles
#Typography
#Links
#Lists */
#Lists
#Buttons
#Tabs
#Forms */
/* #Reset & Basics (Inspired by E. Meyers)
@ -49,6 +52,7 @@
font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #444;
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
-webkit-text-size-adjust: none;
}
@ -57,16 +61,15 @@
h1, h2, h3, h4, h5, h6 {
color: #181818;
font-weight: normal;
line-height: 40px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
h1 { font-size: 46px; margin-bottom: 14px;}
h2 { font-size: 35px; margin-bottom: 8px; }
h3 { font-size: 28px; margin-bottom: 4px; }
h4 { font-size: 21px; }
h5 { font-size: 17px; font-weight: normal; }
h6 { font-size: 14px; font-weight: bold; }
h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;}
h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; }
h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; }
h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }
h5 { font-size: 17px; line-height: 30px; font-weight: normal; }
h6 { font-size: 14px; line-height: 30px; font-weight: bold; }
.subheader { color: #777; }
p { margin: 0 0 20px; }
@ -74,11 +77,11 @@
p.lead { font-size: 21px; line-height: 27px; color: #777; }
em { font-style: italic; line-height: inherit; }
strong { font-weight: bold; line-height: inherit; }
strong { font-weight: bold; line-height: inherit; color: #333; }
small { font-size: 80%; line-height: inherit; }
/* Blockquotes */
blockquote, blockquote p { line-height: 20px; color: #777; }
blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; }
blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
blockquote cite { display: block; font-size: 12px; color: #555; }
blockquote cite:before { content: "\2014 \0020"; }
@ -89,7 +92,7 @@
/* #Links
================================================== */
a, a:visited { color: #333; font-weight: bold; text-decoration: underline; outline: 0; line-height: inherit; }
a, a:visited { color: #333; text-decoration: underline; outline: 0; line-height: inherit; }
a:hover, a:focus { color: #000; }
p a, p a:visited { line-height: inherit; }
@ -110,4 +113,146 @@
li p { line-height: 21px; }
/* #Buttons
================================================== */
.button {
background: #222;
display: inline-block;
padding: 9px 34px 11px;
color: #fff !important;
text-decoration: none;
font-weight: bold;
line-height: 1;
position: relative;
cursor: pointer;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
font-size: 12px;
line-height: 12px;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
border: none;
margin-bottom: 20px;
}
.button.square {
-moz-border-radius: none;
-webkit-border-radius: none;
border-radius: none; }
.button.full-width {
width: 100%;
padding-left: 0 !important;
padding-right: 0 !important;
text-align: center; }
/* Sizes ---------- */
.small.button { font-size: 11px; padding: 8px 20px 10px; }
.medium.button { font-size: 12px; }
.large.button { font-size: 18px; padding: 11px 48px 13px; }
/* Types ---------- */
.secondary.button { background-color: #666; font-size: 11px; }
/* Hovers ---------- */
.button:hover { background-color: #000; }
.secondary.button:hover { background-color: #555; }
/* #Tabs (activate in app.js)
================================================== */
ul.tabs {
display: block;
margin: 0 0 20px 0;
padding: 0;
height: 30px;
border-bottom: solid 1px #ddd; }
ul.tabs li {
display: block;
width: auto;
height: 30px;
padding: 0;
float: left; }
ul.tabs li a {
display: block;
text-decoration: none;
width: auto;
height: 29px;
padding: 0px 16px;
line-height: 30px;
border: solid 1px #ddd;
border-width: 1px 0 0 1px;
font-weight: normal;
margin: 0;
background: #eee;
font-size: 13px; }
ul.tabs li a.active {
background: #fff;
height: 30px;
margin: 0 -1px 0 0;
color: #111; }
ul.tabs li:last-child a {
border-width: 1px 1px 0 1px; }
ul.tabs-content { margin: 0; display: block; }
ul.tabs-content > li { display:none; }
ul.tabs-content > li.active { display: block; }
/* Sample Markup
<ul class="tabs">
<li><a class="active" href="#info1"></a></li>
<li><a href="#info2"></a></li>
</ul>
<ul class="tabs-content">
<li class="active" id="info1"></li>
<li id="info2"></li>
</ul> */
/* #Forms
================================================== */
form {
margin-bottom: 20px; }
fieldset {
margin-bottom: 20px; }
input[type="text"], input[type="password"],
textarea, select {
border: 1px solid #ccc;
padding: 6px 4px;
outline: none;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #777;
margin: 0;
width: 210px;
display: block;
margin-bottom: 20px;
background: #fff; }
input:focus {
border: 1px solid #aaa;
color: #444;
-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
box-shadow: 0 0 3px rgba(0,0,0,.2); }
textarea {
height: 60px; }
label {
display: block;
font-weight: bold;
font-size: 13px; }
select {
width: 220px; }
input[type="checkbox"] {
display: inline; }
label span {
font-weight: normal;
font-size: 13px;
color: #444; }

4
src/stylesheets/skeleton.css vendored
View File

@ -181,7 +181,7 @@ which applies to mobile as well.*/
/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
.container { width: 320px; }
.container { width: 300px; }
.columns, .column { margin: 0; }
.container .one.column,
@ -209,7 +209,7 @@ which applies to mobile as well.*/
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.container { width: 440px; }
.container { width: 420px; }
.columns, .column { margin: 0; }
.container .one.column,

129
src/stylesheets/ui.css
View File

@ -1,129 +0,0 @@
/*
* Skeleton V0.1
* Created by Dave Gamache
* www.skeleton.gs
* 4/30/2011
*/
/* Table of Content
==================================================
#Tabs
#Buttons */
/* #Tabs (activate in app.js)
================================================== */
ul.tabs {
display: block;
margin: 0 0 20px 0;
padding: 0;
height: 30px;
border-bottom: solid 1px #ddd; }
ul.tabs li {
display: block;
width: auto;
height: 30px;
padding: 0;
float: left; }
ul.tabs li a {
display: block;
text-decoration: none;
width: auto;
height: 29px;
padding: 0px 16px;
line-height: 30px;
border: solid 1px #ddd;
border-width: 1px 0 0 1px;
font-weight: normal;
margin: 0;
background: #eee;
font-size: 13px; }
ul.tabs li a.active {
background: #fff;
height: 30px;
margin: 0 -1px 0 0;
color: #111; }
ul.tabs li:last-child a {
border-width: 1px 1px 0 1px; }
ul.tabs-content { margin: 0; display: block; }
ul.tabs-content > li { display:none; }
ul.tabs-content > li.active { display: block; }
/* Sample Markup
<ul class="tabs">
<li><a class="active" href="#info1"></a></li>
<li><a href="#info2"></a></li>
</ul>
<ul class="tabs-content">
<li class="active" id="info1"></li>
<li id="info2"></li>
</ul> */
/* #Buttons
================================================== */
a.button {
background: #00a6fc;
display: inline-block;
padding: 9px 34px 11px;
color: #fff !important;
text-decoration: none;
font-weight: bold;
line-height: 1;
position: relative;
cursor: pointer;
}
.button.nice {
background: #00a6fc;
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.28);
background: #00a6fc -moz-linear-gradient(top, rgba(255,255,255,.4) 0%, transparent 100%);
background: #00a6fc -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.4)), color-stop(100%,transparent));
border: 1px solid #0593dc;
-webkit-transition: all .15s ease-in-out;
-moz-transition: all .15s ease-in-out;
-o-transition: all .15s ease-in-out;
}
.button.radius {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px; }
.button.round {
-moz-border-radius: 300px;
-webkit-border-radius: 300px;
border-radius: 300px; }
.button.full-width {
width: 100%;
padding-left: 0 !important;
padding-right: 0 !important;
text-align: center;
}
/* Sizes ---------- */
.small.button { font-size: 11px; padding: 8px 20px 10px; }
.medium.button { font-size: 13px; }
.large.button { font-size: 18px; padding: 11px 48px 13px; }
/* Colors ---------- */
.blue.button { background-color: #00a6fc; }
.white.button { background-color: #e9e9e9; color: #333; }
.charcoal.button { background-color: #141414; }
/* Nice Colors ---------- */
.nice.blue.button { border: 1px solid #0593dc; }
.nice.white.button { border: 1px solid #cacaca; text-shadow: none !important; }
.nice.charcoal.button { border: 1px solid #000; }
/* Hovers ---------- */
.button:hover { background-color: #0192dd; color: #fff; }
.blue.button:hover { background-color: #0192dd; }
.white.button:hover { background-color: #dadada; color: #333; }
.charcoal.button:hover { background-color: #000; }