broke the grid into a spearate file from base called skeleton, really really refined the grid across different devices (although it still needs a lot of testing). I've also started a documentation
This commit is contained in:
Dave Gamache
parent
887f2f4d86
commit
82d63e753d
@ -13,13 +13,9 @@
|
||||
|
||||
/* Doc nav */
|
||||
nav {
|
||||
position: fixed;
|
||||
margin-left: 10px; }
|
||||
h1#logo {
|
||||
background: url(images/logo.png);
|
||||
width: 199px;
|
||||
height: 198px;
|
||||
text-indent: -9999px;
|
||||
margin-left: 10px;
|
||||
position: fixed; }
|
||||
#logo {
|
||||
margin-bottom: 30px; }
|
||||
nav ul {
|
||||
margin-left: 40px;
|
||||
@ -62,3 +58,62 @@
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px; }
|
||||
|
||||
|
||||
/* Mobile */
|
||||
@media only screen and (max-width: 767px) {
|
||||
header p { font-size: 25px; line-height: 30px;}
|
||||
nav { position: relative; }
|
||||
nav ul { display: none; }
|
||||
#logo {
|
||||
width: 100px;
|
||||
display: block;
|
||||
margin: 0 auto; }
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
@media only screen and (max-width: 969px) {
|
||||
#logo {
|
||||
max-width: 130px; }
|
||||
nav ul { margin-left: 10px; }
|
||||
}
|
||||
|
||||
|
||||
/* iPad Portrait/Browser */
|
||||
@media only screen and (min-width: 768px) and (max-width: 991px) {}
|
||||
|
||||
/* 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: 991px) 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) {
|
||||
body {
|
||||
font-size: 50%;
|
||||
line-height: 1.5em; }
|
||||
header p {
|
||||
font-size: 25px;
|
||||
line-height: 30px; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
65
index.php
65
index.php
@ -16,10 +16,11 @@
|
||||
<!-- Mobile Specific Metas
|
||||
================================================== -->
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
<meta name="viewport" content="width=960" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
|
||||
|
||||
<!-- CSS
|
||||
================================================== -->
|
||||
<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">
|
||||
@ -42,9 +43,9 @@
|
||||
|
||||
|
||||
<div class="container fluid">
|
||||
<div class="four columns">
|
||||
<div class="four columns sidebar">
|
||||
<nav>
|
||||
<h1 id="logo">Skeleton</h1>
|
||||
<img src="documentation-assets/images/logo.png" id="logo"></img>
|
||||
<ul>
|
||||
<li><a class="active" href="#whatAndWhy">What & Why</a></li>
|
||||
<li><a href="#basics">Basics</a></li>
|
||||
@ -59,7 +60,7 @@
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
<div class="twelve columns">
|
||||
<div class="twelve columns content">
|
||||
<header>
|
||||
<p>Skeleton is a lightweight framework for HTML, CSS & jQuery that makes building websites easier.</p>
|
||||
</header>
|
||||
@ -88,33 +89,45 @@
|
||||
<div class="doc-section clearfix" id="grid">
|
||||
<h3>Grid</h3>
|
||||
<p>Skeleton's base grid is a simpler variation of the 960 grid system. The syntax is simpler and is just as effective cross browser and across devices, but the awesome part is that it also has the flexibility to go mobile like a champ. The option is yours to have the site scale fluidly or to have a scaled fixed grid.</p>
|
||||
<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 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>
|
||||
<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>
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="doc-section" id="forms">
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
<!-- Mobile Specific Metas
|
||||
================================================== -->
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
<meta name="viewport" content="width=960" />
|
||||
<meta name="viewport" content="width=960" />
|
||||
|
||||
<!-- CSS
|
||||
================================================== -->
|
||||
|
||||
@ -5,8 +5,12 @@
|
||||
* 4/30/2011
|
||||
*/
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
/* iPhone fix to scroll away iPhone browser chrome */
|
||||
setTimeout(function(){window.scrollTo(0, 1);}, 100);
|
||||
|
||||
/* Tabs Activiation
|
||||
================================================== */
|
||||
var tabs = $('ul.tabs');
|
||||
@ -18,7 +22,7 @@ $(document).ready(function() {
|
||||
tab.click(function(e) {
|
||||
|
||||
//Get Location of tab's content
|
||||
var contentLocation = $(this).attr("href")
|
||||
var contentLocation = $(this).attr("href")+"Tab"
|
||||
contentLocation = contentLocation;
|
||||
|
||||
//Let go if not a hashed one
|
||||
|
||||
113
src/stylesheets/base.css
Normal file
113
src/stylesheets/base.css
Normal file
@ -0,0 +1,113 @@
|
||||
/*
|
||||
* Skeleton V0.1
|
||||
* Created by Dave Gamache
|
||||
* www.skeleton.gs
|
||||
* 4/30/2011
|
||||
*/
|
||||
|
||||
|
||||
/* Table of Content
|
||||
==================================================
|
||||
#Reset & Basics
|
||||
#Basic Styles
|
||||
#Site Styles
|
||||
#Typography
|
||||
#Links
|
||||
#Lists */
|
||||
|
||||
|
||||
/* #Reset & Basics (Inspired by E. Meyers)
|
||||
================================================== */
|
||||
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline; }
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
|
||||
display: block; }
|
||||
body {
|
||||
line-height: 1; }
|
||||
ol, ul {
|
||||
list-style: none; }
|
||||
blockquote, q {
|
||||
quotes: none; }
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none; }
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0; }
|
||||
|
||||
|
||||
/* #Basic Styles
|
||||
================================================== */
|
||||
body {
|
||||
background: #fff;
|
||||
font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
color: #444;
|
||||
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
|
||||
}
|
||||
|
||||
|
||||
/* #Typography
|
||||
================================================== */
|
||||
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; }
|
||||
.subheader { color: #777; }
|
||||
|
||||
p { margin: 0 0 20px; }
|
||||
p img { margin: 0; }
|
||||
p.lead { font-size: 21px; line-height: 27px; color: #777; }
|
||||
|
||||
em { font-style: italic; line-height: inherit; }
|
||||
strong { font-weight: bold; line-height: inherit; }
|
||||
small { font-size: 80%; line-height: inherit; }
|
||||
|
||||
/* Blockquotes */
|
||||
blockquote, blockquote p { line-height: 20px; 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"; }
|
||||
blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }
|
||||
|
||||
hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; }
|
||||
|
||||
|
||||
/* #Links
|
||||
================================================== */
|
||||
a, a:visited { color: #333; font-weight: bold; text-decoration: underline; outline: 0; line-height: inherit; }
|
||||
a:hover, a:focus { color: #000; }
|
||||
p a, p a:visited { line-height: inherit; }
|
||||
|
||||
|
||||
/* #List
|
||||
================================================== */
|
||||
ul, ol { margin-bottom: 20px; }
|
||||
ul { list-style: none outside; }
|
||||
ol { list-style: decimal; }
|
||||
ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
|
||||
ul.square { list-style: square outside; }
|
||||
ul.circle { list-style: circle outside; }
|
||||
ul.disc { list-style: disc outside; }
|
||||
ul ul, ul ol
|
||||
ol ol, ol ul { margin: 4px 0 5px 30px; }
|
||||
li { line-height: 18px; margin-bottom: 12px; }
|
||||
ul.large li { line-height: 21px; }
|
||||
li p { line-height: 21px; }
|
||||
|
||||
|
||||
|
||||
@ -1,258 +0,0 @@
|
||||
/*
|
||||
* Skeleton V0.1
|
||||
* Created by Dave Gamache
|
||||
* www.skeleton.gs
|
||||
* 4/30/2011
|
||||
*/
|
||||
|
||||
|
||||
/* Table of Content
|
||||
==================================================
|
||||
@Reset & Basics
|
||||
@Basic Styles
|
||||
@Typography
|
||||
@Links
|
||||
@Lists
|
||||
@Grid
|
||||
@Tables
|
||||
@Misc
|
||||
*/
|
||||
|
||||
|
||||
/* Reset & Basics (Inspired by E. Meyers)
|
||||
================================================== */
|
||||
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline; }
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
|
||||
display: block; }
|
||||
body {
|
||||
line-height: 1; }
|
||||
ol, ul {
|
||||
list-style: none; }
|
||||
blockquote, q {
|
||||
quotes: none; }
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none; }
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0; }
|
||||
|
||||
|
||||
/* Basic Styles
|
||||
================================================== */
|
||||
body {
|
||||
background: #fff;
|
||||
font: 13px/18px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;; ;
|
||||
color: #444;
|
||||
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ }
|
||||
|
||||
|
||||
/* Typography
|
||||
================================================== */
|
||||
h1, h2, h3, h4, h5, h6 { color: #181818; font-weight: bold; line-height: 1.25 }
|
||||
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
|
||||
h1 { font-size: 46px; margin-bottom: 4px;}
|
||||
h2 { font-size: 35px; margin-bottom: 2px; }
|
||||
h3 { font-size: 28px; }
|
||||
h4 { font-size: 21px; }
|
||||
h5 { font-size: 18px; }
|
||||
h6 { font-size: 15px; }
|
||||
.subheader { color: #777; }
|
||||
|
||||
p { margin: 0 0 20px; }
|
||||
p img { margin: 0; }
|
||||
p.lead { font-size: 18px; line-height: 24px; }
|
||||
|
||||
em { font-style: italic; line-height: inherit; }
|
||||
strong { font-weight: bold; line-height: inherit; }
|
||||
small { font-size: 80%; line-height: inherit; }
|
||||
|
||||
/* Blockquotes */
|
||||
blockquote, blockquote p { line-height: 20px; color: #777; }
|
||||
blockquote { margin: 0 0 18px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
|
||||
blockquote cite { display: block; font-size: 12px; color: #555; }
|
||||
blockquote cite:before { content: "\2014 \0020"; }
|
||||
blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }
|
||||
|
||||
hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 12px 0 18px; height: 0; }
|
||||
|
||||
|
||||
/* Links
|
||||
================================================== */
|
||||
a, a:visited { color: #d00b47; text-decoration: none; outline: 0; line-height: inherit; }
|
||||
a:hover, a:focus { color: #9d0a37; }
|
||||
p a, p a:visited { line-height: inherit; }
|
||||
|
||||
|
||||
/* List
|
||||
================================================== */
|
||||
ul, ol { margin-bottom: 20px; }
|
||||
ul { list-style: none outside; }
|
||||
ol { list-style: decimal; }
|
||||
ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
|
||||
ul.square { list-style: square outside; }
|
||||
ul.circle { list-style: circle outside; }
|
||||
ul.disc { list-style: disc outside; }
|
||||
ul ul, ul ol
|
||||
ol ol, ol ul { margin: 4px 0 5px 30px; }
|
||||
li { line-height: 18px; margin-bottom: 12px; }
|
||||
ul.large li { line-height: 21px; }
|
||||
|
||||
|
||||
/* Grid
|
||||
================================================== */
|
||||
|
||||
.container { position: relative; width: 320px; margin: 0 auto; padding: 0; }
|
||||
.columns, .columns { float: left; display: inline; background: #f79421; margin-left: 10px; margin-right: 10px; }
|
||||
|
||||
.column.alpha,
|
||||
.columns.alpha {
|
||||
margin: 0; }
|
||||
.column.omega,
|
||||
.columns.omega {
|
||||
margin: 0; }
|
||||
|
||||
.container:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
|
||||
|
||||
|
||||
/* Mobile portrait and smaller */
|
||||
.container .one.column,
|
||||
.container .two.columns,
|
||||
.container .three.columns,
|
||||
.container .four.columns,
|
||||
.container .five.columns,
|
||||
.container .six.columns,
|
||||
.container .seven.columns,
|
||||
.container .eight.columns,
|
||||
.container .nine.columns,
|
||||
.container .ten.columns,
|
||||
.container .eleven.columns,
|
||||
.container .twelve.columns,
|
||||
.container .thirteen.columns,
|
||||
.container .fourteen.columns,
|
||||
.container .fifteen.columns,
|
||||
.container .sixteen.columns { width: 300px; }
|
||||
|
||||
|
||||
/* All non-Mobile Portrait */
|
||||
@media screen and (min-width: 480px) {
|
||||
.column.alpha,
|
||||
.columns.alpha {
|
||||
margin-left: 0; }
|
||||
.column.omega,
|
||||
.columns.omega {
|
||||
margin-right: 0; }
|
||||
}
|
||||
|
||||
|
||||
/* Mobile Landscape */
|
||||
@media screen and (min-width: 480px) and (max-width: 767px) {
|
||||
body { background: #333; }
|
||||
.container { width: 480px; }
|
||||
.columns, .columns { margin-left: 8px; margin-right: 8px; }
|
||||
|
||||
.container .one.column { width: 14px; }
|
||||
.container .two.columns { width: 44px; }
|
||||
.container .three.columns { width: 74px; }
|
||||
.container .four.columns { width: 104px; }
|
||||
.container .five.columns { width: 134px; }
|
||||
.container .six.columns { width: 164px; }
|
||||
.container .seven.columns { width: 194px; }
|
||||
.container .eight.columns { width: 224px; }
|
||||
.container .nine.columns { width: 254px; }
|
||||
.container .ten.columns { width: 284px; }
|
||||
.container .eleven.columns { width: 314px; }
|
||||
.container .twelve.columns { width: 344px; }
|
||||
.container .thirteen.columns { width: 374px; }
|
||||
.container .fourteen.columns { width: 404px; }
|
||||
.container .fifteen.columns { width: 434px; }
|
||||
.container .sixteen.columns { width: 464px; }
|
||||
}
|
||||
|
||||
|
||||
/* Tablet Landscape */
|
||||
@media screen and (min-width: 768px) and (max-width: 959px) {
|
||||
.container { width: 768px; }
|
||||
.columns, .columns { margin-left: 10px; margin-right: 10px; }
|
||||
|
||||
.container .one.column { width: 28px; }
|
||||
.container .two.columns { width: 76px; }
|
||||
.container .three.columns { width: 124px; }
|
||||
.container .four.columns { width: 172px; }
|
||||
.container .five.columns { width: 220px; }
|
||||
.container .six.columns { width: 268px; }
|
||||
.container .seven.columns { width: 316px; }
|
||||
.container .eight.columns { width: 364px; }
|
||||
.container .nine.columns { width: 412px; }
|
||||
.container .ten.columns { width: 460px; }
|
||||
.container .eleven.columns { width: 508px; }
|
||||
.container .twelve.columns { width: 556px; }
|
||||
.container .thirteen.columns { width: 604px; }
|
||||
.container .fourteen.columns { width: 652px; }
|
||||
.container .fifteen.columns { width: 700px; }
|
||||
.container .sixteen.columns { width: 748px; }
|
||||
}
|
||||
|
||||
/* Standard 960 size */
|
||||
@media screen and (min-width: 960px) {
|
||||
body { background: #333; }
|
||||
.container { width: 960px; }
|
||||
.columns, .columns { margin-left: 10px; margin-right: 10px; }
|
||||
|
||||
.container .one.column { width: 40px; }
|
||||
.container .two.columns { width: 100px; }
|
||||
.container .three.columns { width: 160px; }
|
||||
.container .four.columns { width: 220px; }
|
||||
.container .five.columns { width: 280px; }
|
||||
.container .six.columns { width: 340px; }
|
||||
.container .seven.columns { width: 400px; }
|
||||
.container .eight.columns { width: 460px; }
|
||||
.container .nine.columns { width: 520px; }
|
||||
.container .ten.columns { width: 580px; }
|
||||
.container .eleven.columns { width: 640px; }
|
||||
.container .twelve.columns { width: 700px; }
|
||||
.container .thirteen.columns { width: 760px; }
|
||||
.container .fourteen.columns { width: 820px; }
|
||||
.container .fifteen.columns { width: 880px; }
|
||||
.container .sixteen.columns { width: 940px; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
|
||||
.clear {
|
||||
clear: both;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
height: 0; }
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
content: '\0020';
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
height: 0; }
|
||||
.clearfix:after {
|
||||
clear: both; }
|
||||
.clearfix {
|
||||
zoom: 1; }
|
||||
|
||||
*/
|
||||
|
||||
/* TEST STYLES */
|
||||
.sixteen.columns { height: auto; }
|
||||
nav ul { float: right; }
|
||||
nav ul li { float: left; margin-left: 20px; }
|
||||
.slider { width: 100%; height: auto; background: #000; }
|
||||
@ -4,3 +4,39 @@
|
||||
* www.skeleton.gs
|
||||
* 4/30/2011
|
||||
*/
|
||||
|
||||
/* Table of Content
|
||||
==================================================
|
||||
#Site Styles
|
||||
#Page Styles
|
||||
#Media Queries */
|
||||
|
||||
/* Site Styles
|
||||
================================================== */
|
||||
|
||||
/* Page Styles
|
||||
================================================== */
|
||||
|
||||
/* Media Queries
|
||||
================================================== */
|
||||
|
||||
/* iPad Portrait/Browser */
|
||||
@media only screen and (min-width: 768px) and (max-width: 991px) {}
|
||||
|
||||
/* 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: 991px) 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) {}
|
||||
324
src/stylesheets/skeleton.css
vendored
324
src/stylesheets/skeleton.css
vendored
@ -8,116 +8,32 @@
|
||||
|
||||
/* Table of Content
|
||||
==================================================
|
||||
#Reset & Basics
|
||||
#Basic Styles
|
||||
#Site Styles
|
||||
#Typography
|
||||
#Links
|
||||
#Lists
|
||||
#Tabs
|
||||
#Grid
|
||||
#Media Queries */
|
||||
#Base 960 Grid
|
||||
#Responsive: Fluid Grid for Downscaling
|
||||
#Responsive: Full Fluid Grid
|
||||
#Mobile: iPad Portrait
|
||||
#Mobile: iPhone Portrait
|
||||
#Mobile: iPhone Landscape
|
||||
#Clearing
|
||||
|
||||
|
||||
/* #Reset & Basics (Inspired by E. Meyers)
|
||||
================================================== */
|
||||
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline; }
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
|
||||
display: block; }
|
||||
body {
|
||||
line-height: 1; }
|
||||
ol, ul {
|
||||
list-style: none; }
|
||||
blockquote, q {
|
||||
quotes: none; }
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none; }
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0; }
|
||||
/* Quick Note: The way the grid system works is that the default is a 960 grid that
|
||||
scales identical to it's mobile styles. There is also an option to make browser version
|
||||
fluid rather than mirror mobile on downscale (.fluid960). There is also a fully fluid grid (.fluid),
|
||||
which applies to mobile as well.*/
|
||||
|
||||
|
||||
/* #Basic Styles
|
||||
================================================== */
|
||||
body {
|
||||
background: #fff;
|
||||
font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
color: #444;
|
||||
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ }
|
||||
|
||||
|
||||
/* #Typography
|
||||
================================================== */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #181818;
|
||||
font-weight: normal;
|
||||
line-height: 40px;
|
||||
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }
|
||||
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-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }
|
||||
h6 { font-size: 14px; font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; }
|
||||
.subheader { color: #777; }
|
||||
|
||||
p { margin: 0 0 20px; }
|
||||
p img { margin: 0; }
|
||||
p.lead { font-size: 21px; line-height: 27px; color: #777; }
|
||||
|
||||
em { font-style: italic; line-height: inherit; }
|
||||
strong { font-weight: bold; line-height: inherit; }
|
||||
small { font-size: 80%; line-height: inherit; }
|
||||
|
||||
/* Blockquotes */
|
||||
blockquote, blockquote p { line-height: 20px; 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"; }
|
||||
blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }
|
||||
|
||||
hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; }
|
||||
|
||||
|
||||
/* #Links
|
||||
================================================== */
|
||||
a, a:visited { color: #333; font-weight: bold; text-decoration: underline; outline: 0; line-height: inherit; }
|
||||
a:hover, a:focus { color: #000; }
|
||||
p a, p a:visited { line-height: inherit; }
|
||||
|
||||
|
||||
/* #List
|
||||
================================================== */
|
||||
ul, ol { margin-bottom: 20px; }
|
||||
ul { list-style: none outside; }
|
||||
ol { list-style: decimal; }
|
||||
ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
|
||||
ul.square { list-style: square outside; }
|
||||
ul.circle { list-style: circle outside; }
|
||||
ul.disc { list-style: disc outside; }
|
||||
ul ul, ul ol
|
||||
ol ol, ol ul { margin: 4px 0 5px 30px; }
|
||||
li { line-height: 18px; margin-bottom: 12px; }
|
||||
ul.large li { line-height: 21px; }
|
||||
li p { line-height: 21px; }
|
||||
|
||||
|
||||
/* #Grid
|
||||
/* #Base 960 Grid
|
||||
================================================== */
|
||||
|
||||
.container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
|
||||
.column, .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
|
||||
|
||||
/* Actual Grid */
|
||||
/* Nested Column Classes */
|
||||
.column.alpha, .columns.alpha { margin-left: 0; }
|
||||
.column.omega, .columns.omega { margin-right: 0; }
|
||||
|
||||
/* Base Grid */
|
||||
.container .one.column { width: 40px; }
|
||||
.container .two.columns { width: 100px; }
|
||||
.container .three.columns { width: 160px; }
|
||||
@ -152,9 +68,171 @@
|
||||
.container .offset-by-fourteen { padding-left: 840px; }
|
||||
.container .offset-by-fifteen { padding-left: 900px; }
|
||||
|
||||
/* Nested Column Classes */
|
||||
.column.alpha, .columns.alpha { margin-left: 0; }
|
||||
.column.omega, .columns.omega { margin-right: 0; }
|
||||
|
||||
|
||||
|
||||
|
||||
/* #Responsive: Fluid Grid for Downscaling
|
||||
================================================== */
|
||||
|
||||
/* NOTE: Cannot be used with nested columns. */
|
||||
|
||||
/*
|
||||
@media screen and (min-device-width: 789px) and (max-width: 959px) {
|
||||
.fluid960.container {
|
||||
width: 100%;
|
||||
min-width: 320px; }
|
||||
.fluid960.container .column,
|
||||
.fluid960.container .columns { margin-left: 1%; margin-right: 1%; }
|
||||
|
||||
.fluid960.container .one.column { width: 4.25%; }
|
||||
.fluid960.container .two.columns { width: 10.5%; }
|
||||
.fluid960.container .three.columns { width: 16.75%; }
|
||||
.fluid960.container .four.columns { width: 23%; }
|
||||
.fluid960.container .five.columns { width: 29.25%; }
|
||||
.fluid960.container .six.columns { width: 35.5%; }
|
||||
.fluid960.container .seven.columns { width: 41.75%; }
|
||||
.fluid960.container .eight.columns { width: 48%; }
|
||||
.fluid960.container .nine.columns { width: 54.25%; }
|
||||
.fluid960.container .ten.columns { width: 60.5%; }
|
||||
.fluid960.container .eleven.columns { width: 66.75%; }
|
||||
.fluid960.container .twelve.columns { width: 73%; }
|
||||
.fluid960.container .thirteen.columns { width: 79.25%; }
|
||||
.fluid960.container .fourteen.columns { width: 85.5%; }
|
||||
.fluid960.container .fifteen.columns { width: 91.75%; }
|
||||
.fluid960.container .sixteen.columns { width: 98%; }
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
/* #Responsive: Fully Fluid Grid
|
||||
================================================== */
|
||||
|
||||
/* NOTE: Cannot be used with nested columns. */
|
||||
|
||||
/*
|
||||
.fluid.container {
|
||||
width: 100%;
|
||||
min-width: 320px; }
|
||||
.fluid.container .column,
|
||||
.fluid.container .columns { margin-left: 1%; margin-right: 1%; }
|
||||
|
||||
.fluid.container .one.column { width: 4.25%; }
|
||||
.fluid.container .two.columns { width: 10.5%; }
|
||||
.fluid.container .three.columns { width: 16.75%; }
|
||||
.fluid.container .four.columns { width: 23%; }
|
||||
.fluid.container .five.columns { width: 29.25%; }
|
||||
.fluid.container .six.columns { width: 35.5%; }
|
||||
.fluid.container .seven.columns { width: 41.75%; }
|
||||
.fluid.container .eight.columns { width: 48%; }
|
||||
.fluid.container .nine.columns { width: 54.25%; }
|
||||
.fluid.container .ten.columns { width: 60.5%; }
|
||||
.fluid.container .eleven.columns { width: 66.75%; }
|
||||
.fluid.container .twelve.columns { width: 73%; }
|
||||
.fluid.container .thirteen.columns { width: 79.25%; }
|
||||
.fluid.container .fourteen.columns { width: 85.5%; }
|
||||
.fluid.container .fifteen.columns { width: 91.75%; }
|
||||
.fluid.container .sixteen.columns { width: 98%; }
|
||||
*/
|
||||
|
||||
|
||||
/* #Responsive: Go Mobile
|
||||
================================================== */
|
||||
|
||||
/* NOTE: These styles mimic mobile styles in browser */
|
||||
|
||||
|
||||
/* #Responsive: iPad Portrait
|
||||
================================================== */
|
||||
|
||||
/* Note: Design for a width of 768px */
|
||||
|
||||
@media only screen and (min-width: 768px) and (max-width: 959px) {
|
||||
.container { width: 768px; }
|
||||
.container .column,
|
||||
.container .columns { margin-left: 10px; margin-right: 10px; }
|
||||
.column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; }
|
||||
.column.omega, .columns.omega { margin-right: 0; margin-left: 10px; }
|
||||
|
||||
.container .one.column { width: 28px; }
|
||||
.container .two.columns { width: 76px; }
|
||||
.container .three.columns { width: 124px; }
|
||||
.container .four.columns { width: 172px; }
|
||||
.container .five.columns { width: 220px; }
|
||||
.container .six.columns { width: 268px; }
|
||||
.container .seven.columns { width: 316px; }
|
||||
.container .eight.columns { width: 364px; }
|
||||
.container .nine.columns { width: 412px; }
|
||||
.container .ten.columns { width: 460px; }
|
||||
.container .eleven.columns { width: 508px; }
|
||||
.container .twelve.columns { width: 556px; }
|
||||
.container .thirteen.columns { width: 604px; }
|
||||
.container .fourteen.columns { width: 652px; }
|
||||
.container .fifteen.columns { width: 700px; }
|
||||
.container .sixteen.columns { width: 748px; }
|
||||
}
|
||||
|
||||
|
||||
/* Mobile
|
||||
================================================== */
|
||||
|
||||
/* Note: Design for a width of 320px */
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
.container { width: 320px; }
|
||||
.columns, .column { margin: 0; }
|
||||
|
||||
.container .one.column,
|
||||
.container .two.columns,
|
||||
.container .three.columns,
|
||||
.container .four.columns,
|
||||
.container .five.columns,
|
||||
.container .six.columns,
|
||||
.container .seven.columns,
|
||||
.container .eight.columns,
|
||||
.container .nine.columns,
|
||||
.container .ten.columns,
|
||||
.container .eleven.columns,
|
||||
.container .twelve.columns,
|
||||
.container .thirteen.columns,
|
||||
.container .fourteen.columns,
|
||||
.container .fifteen.columns,
|
||||
.container .sixteen.columns { width: 300px; }
|
||||
}
|
||||
|
||||
|
||||
/* Mobile Landscape
|
||||
================================================== */
|
||||
|
||||
/* Note: Design for a width of 480px */
|
||||
|
||||
@media only screen and (min-width: 480px) and (max-width: 767px) {
|
||||
.container { width: 440px; }
|
||||
.columns, .column { margin: 0; }
|
||||
|
||||
.container .one.column,
|
||||
.container .two.columns,
|
||||
.container .three.columns,
|
||||
.container .four.columns,
|
||||
.container .five.columns,
|
||||
.container .six.columns,
|
||||
.container .seven.columns,
|
||||
.container .eight.columns,
|
||||
.container .nine.columns,
|
||||
.container .ten.columns,
|
||||
.container .eleven.columns,
|
||||
.container .twelve.columns,
|
||||
.container .thirteen.columns,
|
||||
.container .fourteen.columns,
|
||||
.container .fifteen.columns,
|
||||
.container .sixteen.columns { width: 420px; }
|
||||
}
|
||||
|
||||
|
||||
/* Clearing
|
||||
================================================== */
|
||||
|
||||
/* Self Clearing Goodness */
|
||||
.container:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
|
||||
@ -173,38 +251,14 @@
|
||||
.clearfix {
|
||||
zoom: 1; }
|
||||
|
||||
/* Scaling with a Fluid Grid */
|
||||
@media screen and (max-width: 959px) {
|
||||
.container.fluid { max-width: 100%; }
|
||||
.fluid .column, .fluid .columns { margin-left: 1%; margin-right: 1%; }
|
||||
|
||||
.fluid.container .one.column { width: 4.25%; }
|
||||
.fluid.container .two.columns { width: 10.5%; }
|
||||
.fluid.container .three.columns { width: 16.75%; }
|
||||
.fluid.container .four.columns { width: 23%; }
|
||||
.fluid.container .five.columns { width: 29.25%; }
|
||||
.fluid.container .six.columns { width: 35.5%; }
|
||||
.fluid.container .seven.columns { width: 41.75%; }
|
||||
.fluid.container .eight.columns { width: 48%; }
|
||||
.fluid.container .nine.columns { width: 54.25%; }
|
||||
.fluid.container .ten.columns { width: 60.5%; }
|
||||
.fluid.container .eleven.columns { width: 66.75%; }
|
||||
.fluid.container .twelve.columns { width: 73%; }
|
||||
.fluid.container .thirteen.columns { width: 79.25%; }
|
||||
.fluid.container .fourteen.columns { width: 85.5%; }
|
||||
.fluid.container .fifteen.columns { width: 91.75%; }
|
||||
.fluid.container .sixteen.columns { width: 98%; }
|
||||
.clear {
|
||||
clear: both;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* #Media Queries
|
||||
================================================== */
|
||||
|
||||
/* Mobile portrait and smaller (code for 320px wide)*/
|
||||
@media screen and (max-width: 479px) {}
|
||||
|
||||
/* Mobile Landscape (code for 480px) */
|
||||
@media screen and (min-width: 480px) and (max-width: 767px) {}
|
||||
|
||||
|
||||
/* Tablet Portrait (Code for 768px) */
|
||||
@media screen and (max-width: 959px) {}
|
||||
@ -35,19 +35,18 @@
|
||||
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;
|
||||
border-width: 1px 0 0px 0;
|
||||
height: 30px;
|
||||
margin: 0 -1px 0 0;
|
||||
color: #111; }
|
||||
ul.tabs li:first-child a.active {
|
||||
border-width: 1px 0 0 1px; }
|
||||
ul.tabs li:last-child a.active {
|
||||
border-width: 1px 1px 0 0; }
|
||||
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; }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user