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

delete trailing whitespace :/

Browse Source
This commit is contained in:
Mauvis Ledford 2011-07-31 12:03:09 -07:00
parent cc6c5090c0
commit 626687a878
6 changed files with 184 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
404.html
View File

@ -14,17 +14,17 @@
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> <![endif]-->
<!-- Mobile Specific Metas <!-- Mobile Specific Metas
================================================== --> ================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!-- CSS <!-- CSS
================================================== --> ================================================== -->
<link rel="stylesheet" href="stylesheets/base.css"> <link rel="stylesheet" href="stylesheets/base.css">
<link rel="stylesheet" href="stylesheets/skeleton.css"> <link rel="stylesheet" href="stylesheets/skeleton.css">
<link rel="stylesheet" href="stylesheets/layout.css"> <link rel="stylesheet" href="stylesheets/layout.css">
<!-- Favicons <!-- Favicons
================================================== --> ================================================== -->
<link rel="shortcut icon" href="images/favicon.ico"> <link rel="shortcut icon" href="images/favicon.ico">
@ -37,19 +37,19 @@
<!-- Primary Page Layout <!-- Primary Page Layout
================================================== --> ================================================== -->
<div class="container"> <div class="container">
<h1 style="margin-top: 100px; text-align:center">Sorry. Couldn't Find That Page!</h1> <h1 style="margin-top: 100px; text-align:center">Sorry. Couldn't Find That Page!</h1>
</div> </div>
<!-- JS <!-- JS
================================================== --> ================================================== -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script>window.jQuery || document.write("<script src='javascripts/jquery-1.5.1.min.js'>\x3C/script>")</script> <script>window.jQuery || document.write("<script src='javascripts/jquery-1.5.1.min.js'>\x3C/script>")</script>
<script src="javascripts/app.js"></script> <script src="javascripts/app.js"></script>
</body> </body>
</html> </html>

32
index.html
View File

@ -14,24 +14,24 @@
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> <![endif]-->
<!-- Mobile Specific Metas <!-- Mobile Specific Metas
================================================== --> ================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!-- CSS <!-- CSS
================================================== --> ================================================== -->
<link rel="stylesheet" href="stylesheets/base.css"> <link rel="stylesheet" href="stylesheets/base.css">
<link rel="stylesheet" href="stylesheets/skeleton.css"> <link rel="stylesheet" href="stylesheets/skeleton.css">
<link rel="stylesheet" href="stylesheets/layout.css"> <link rel="stylesheet" href="stylesheets/layout.css">
<!-- Favicons <!-- Favicons
================================================== --> ================================================== -->
<link rel="shortcut icon" href="images/favicon.ico"> <link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png"> <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="72x72" href="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="images/apple-touch-icon-114x114.png" />
</head> </head>
<body> <body>
@ -41,21 +41,21 @@
<!-- Primary Page Layout <!-- Primary Page Layout
================================================== --> ================================================== -->
<!-- Delete everything in this .container and get started on your own site! --> <!-- Delete everything in this .container and get started on your own site! -->
<div class="container"> <div class="container">
<div class="sixteen columns"> <div class="sixteen columns">
<h1 class="remove-bottom" style="margin-top: 40px">Skeleton</h1> <h1 class="remove-bottom" style="margin-top: 40px">Skeleton</h1>
<h5>Version 1.0.3</h5> <h5>Version 1.0.3</h5>
<hr /> <hr />
</div> </div>
<div class="one-third column"> <div class="one-third column">
<h3>About Skeleton?</h3> <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> <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>
<div class="one-third column"> <div class="one-third column">
<h3>Three Core Principles</h3> <h3>Three Core Principles</h3>
<p>Skeleton is built on three core principles:</p> <p>Skeleton is built on three core principles:</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>A Responsive Grid Down To Mobile</strong>: Elegant scaling from a browser to tablets to mobile.</li>
@ -64,23 +64,23 @@
</ul> </ul>
</div> </div>
<div class="one-third column"> <div class="one-third column">
<h3>Docs &amp; Support</h3> <h3>Docs &amp; 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> <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>
</div><!-- container --> </div><!-- container -->
<!-- JS <!-- JS
================================================== --> ================================================== -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script>window.jQuery || document.write("<script src='javascripts/jquery-1.5.1.min.js'>\x3C/script>")</script> <script>window.jQuery || document.write("<script src='javascripts/jquery-1.5.1.min.js'>\x3C/script>")</script>
<script src="javascripts/app.js"></script> <script src="javascripts/app.js"></script>
<!-- End Document <!-- End Document
================================================== --> ================================================== -->
</body> </body>
</html> </html>

28
javascripts/app.js
View File

@ -1,12 +1,12 @@
/* /*
* Skeleton V1.0.3 * Skeleton V1.0.3
* Copyright 2011, Dave Gamache * Copyright 2011, Dave Gamache
* www.getskeleton.com * www.getskeleton.com
* Free to use under the MIT license. * Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php * http://www.opensource.org/licenses/mit-license.php
* 7/17/2011 * 7/17/2011
*/ */
$(document).ready(function() { $(document).ready(function() {
@ -14,29 +14,29 @@ $(document).ready(function() {
/* Tabs Activiation /* Tabs Activiation
================================================== */ ================================================== */
var tabs = $('ul.tabs'); var tabs = $('ul.tabs');
tabs.each(function(i) { tabs.each(function(i) {
//Get all tabs //Get all tabs
var tab = $(this).find('> li > a'); var tab = $(this).find('> li > a');
tab.click(function(e) { tab.click(function(e) {
//Get Location of tab's content //Get Location of tab's content
var contentLocation = $(this).attr('href') + "Tab"; var contentLocation = $(this).attr('href') + "Tab";
//Let go if not a hashed one //Let go if not a hashed one
if(contentLocation.charAt(0)=="#") { if(contentLocation.charAt(0)=="#") {
e.preventDefault(); e.preventDefault();
//Make Tab Active //Make Tab Active
tab.removeClass('active'); tab.removeClass('active');
$(this).addClass('active'); $(this).addClass('active');
//Show Tab Content & add active class //Show Tab Content & add active class
$(contentLocation).show().addClass('active').siblings().hide().removeClass('active'); $(contentLocation).show().addClass('active').siblings().hide().removeClass('active');
} }
}); });
}); });
}); });

103
stylesheets/base.css
View File

@ -1,4 +1,4 @@
/* /*
* Skeleton V1.0.3 * Skeleton V1.0.3
* Copyright 2011, Dave Gamache * Copyright 2011, Dave Gamache
* www.getskeleton.com * www.getskeleton.com
@ -47,23 +47,23 @@
table { table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; } border-spacing: 0; }
/* #Basic Styles /* #Basic Styles
================================================== */ ================================================== */
body { body {
background: #fff; background: #fff;
font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #444; color: #444;
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
} }
/* #Typography /* #Typography
================================================== */ ================================================== */
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
color: #181818; color: #181818;
font-family: "Georgia", "Times New Roman", Helvetica, Arial, sans-serif; font-family: "Georgia", "Times New Roman", Helvetica, Arial, sans-serif;
font-weight: normal; } font-weight: normal; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
@ -78,18 +78,18 @@
p { margin: 0 0 20px 0; } p { margin: 0 0 20px 0; }
p img { margin: 0; } p img { margin: 0; }
p.lead { font-size: 21px; line-height: 27px; color: #777; } p.lead { font-size: 21px; line-height: 27px; color: #777; }
em { font-style: italic; } em { font-style: italic; }
strong { font-weight: bold; color: #333; } strong { font-weight: bold; color: #333; }
small { font-size: 80%; } small { font-size: 80%; }
/* Blockquotes */ /* Blockquotes */
blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; } blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; }
blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; } 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 { display: block; font-size: 12px; color: #555; }
blockquote cite:before { content: "\2014 \0020"; } blockquote cite:before { content: "\2014 \0020"; }
blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; } 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; } hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; }
@ -98,7 +98,7 @@
a, a:visited { color: #333; text-decoration: underline; outline: 0; } a, a:visited { color: #333; text-decoration: underline; outline: 0; }
a:hover, a:focus { color: #000; } a:hover, a:focus { color: #000; }
p a, p a:visited { line-height: inherit; } p a, p a:visited { line-height: inherit; }
/* #Lists /* #Lists
================================================== */ ================================================== */
@ -116,19 +116,19 @@
li { line-height: 18px; margin-bottom: 12px; } li { line-height: 18px; margin-bottom: 12px; }
ul.large li { line-height: 21px; } ul.large li { line-height: 21px; }
li p { line-height: 21px; } li p { line-height: 21px; }
/* #Images /* #Images
================================================== */ ================================================== */
img.scale-with-grid { img.scale-with-grid {
max-width: 100%; max-width: 100%;
height: auto; } height: auto; }
/* #Buttons /* #Buttons
================================================== */ ================================================== */
a.button, a.button,
button, button,
input[type="submit"], input[type="submit"],
input[type="reset"], input[type="reset"],
@ -157,8 +157,8 @@
margin-bottom: 20px; margin-bottom: 20px;
line-height: 21px; line-height: 21px;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; } font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }
a.button:hover, a.button:hover,
button:hover, button:hover,
input[type="submit"]:hover, input[type="submit"]:hover,
input[type="reset"]:hover, input[type="reset"]:hover,
@ -174,8 +174,8 @@
border: 1px solid #888; border: 1px solid #888;
border-top: 1px solid #aaa; border-top: 1px solid #aaa;
border-left: 1px solid #aaa; } border-left: 1px solid #aaa; }
a.button:active, a.button:active,
button:active, button:active,
input[type="submit"]:active, input[type="submit"]:active,
input[type="reset"]:active, input[type="reset"]:active,
@ -190,46 +190,46 @@
border: 1px solid #888; border: 1px solid #888;
border-bottom: 1px solid #aaa; border-bottom: 1px solid #aaa;
border-right: 1px solid #aaa; } border-right: 1px solid #aaa; }
.button.full-width, .button.full-width,
button.full-width, button.full-width,
input[type="submit"].full-width, input[type="submit"].full-width,
input[type="reset"].full-width, input[type="reset"].full-width,
input[type="button"].full-width { input[type="button"].full-width {
width: 100%; width: 100%;
padding-left: 0 !important; padding-left: 0 !important;
padding-right: 0 !important; padding-right: 0 !important;
text-align: center; } text-align: center; }
/* #Tabs (activate in app.js) /* #Tabs (activate in app.js)
================================================== */ ================================================== */
ul.tabs { ul.tabs {
display: block; display: block;
margin: 0 0 20px 0; margin: 0 0 20px 0;
padding: 0; padding: 0;
border-bottom: solid 1px #ddd; } border-bottom: solid 1px #ddd; }
ul.tabs li { ul.tabs li {
display: block; display: block;
width: auto; width: auto;
height: 30px; height: 30px;
padding: 0; padding: 0;
float: left; float: left;
margin-bottom: 0; } margin-bottom: 0; }
ul.tabs li a { ul.tabs li a {
display: block; display: block;
text-decoration: none; text-decoration: none;
width: auto; width: auto;
height: 29px; height: 29px;
padding: 0px 20px; padding: 0px 20px;
line-height: 30px; line-height: 30px;
border: solid 1px #ddd; border: solid 1px #ddd;
border-width: 1px 0 0 1px; border-width: 1px 0 0 1px;
margin: 0; margin: 0;
background: #f5f5f5; background: #f5f5f5;
font-size: 13px; } font-size: 13px; }
ul.tabs li a.active { ul.tabs li a.active {
background: #fff; background: #fff;
height: 30px; height: 30px;
position: relative; position: relative;
top: -4px; top: -4px;
@ -252,11 +252,11 @@
-moz-border-radius-topright: 2px; -moz-border-radius-topright: 2px;
-webkit-border-top-right-radius: 2px; -webkit-border-top-right-radius: 2px;
border-top-right-radius: 2px; } border-top-right-radius: 2px; }
ul.tabs-content { margin: 0; display: block; } ul.tabs-content { margin: 0; display: block; }
ul.tabs-content > li { display:none; } ul.tabs-content > li { display:none; }
ul.tabs-content > li.active { display: block; } ul.tabs-content > li.active { display: block; }
/* Clearfixing tabs for beautiful stacking */ /* Clearfixing tabs for beautiful stacking */
ul.tabs:before, ul.tabs:before,
ul.tabs:after { ul.tabs:after {
@ -270,19 +270,19 @@
clear: both; } clear: both; }
ul.tabs { ul.tabs {
zoom: 1; } zoom: 1; }
/* #Forms /* #Forms
================================================== */ ================================================== */
form { form {
margin-bottom: 20px; } margin-bottom: 20px; }
fieldset { fieldset {
margin-bottom: 20px; } margin-bottom: 20px; }
input[type="text"], input[type="text"],
input[type="password"], input[type="password"],
input[type="email"], input[type="email"],
textarea, textarea,
select { select {
border: 1px solid #ccc; border: 1px solid #ccc;
padding: 6px 4px; padding: 6px 4px;
@ -298,11 +298,11 @@
display: block; display: block;
margin-bottom: 20px; margin-bottom: 20px;
background: #fff; } background: #fff; }
select { select {
padding: 0; } padding: 0; }
input[type="text"]:focus, input[type="text"]:focus,
input[type="password"]:focus, input[type="password"]:focus,
input[type="email"]:focus, input[type="email"]:focus,
textarea:focus { textarea:focus {
border: 1px solid #aaa; border: 1px solid #aaa;
color: #444; color: #444;
@ -312,11 +312,11 @@
textarea { textarea {
min-height: 60px; } min-height: 60px; }
label, label,
legend { legend {
display: block; display: block;
font-weight: bold; font-weight: bold;
font-size: 13px; } font-size: 13px; }
select { select {
width: 220px; } width: 220px; }
input[type="checkbox"] { input[type="checkbox"] {
display: inline; } display: inline; }
@ -325,12 +325,11 @@
font-weight: normal; font-weight: normal;
font-size: 13px; font-size: 13px;
color: #444; } color: #444; }
/* #Misc /* #Misc
================================================== */ ================================================== */
.remove-bottom { margin-bottom: 0 !important; } .remove-bottom { margin-bottom: 0 !important; }
.half-bottom { margin-bottom: 10px !important; } .half-bottom { margin-bottom: 10px !important; }
.add-bottom { margin-bottom: 20px !important; } .add-bottom { margin-bottom: 20px !important; }

26
stylesheets/layout.css
View File

@ -1,4 +1,4 @@
/* /*
* Skeleton V1.0.3 * Skeleton V1.0.3
* Copyright 2011, Dave Gamache * Copyright 2011, Dave Gamache
* www.getskeleton.com * www.getskeleton.com
@ -13,7 +13,7 @@
#Page Styles #Page Styles
#Media Queries #Media Queries
#Font-Face */ #Font-Face */
/* #Site Styles /* #Site Styles
================================================== */ ================================================== */
@ -22,36 +22,36 @@
/* #Media Queries /* #Media Queries
================================================== */ ================================================== */
/* iPad Portrait/Browser */ /* iPad Portrait/Browser */
@media only screen and (min-width: 768px) and (max-width: 991px) {} @media only screen and (min-width: 768px) and (max-width: 991px) {}
/* Mobile/Browser */ /* Mobile/Browser */
@media only screen and (max-width: 767px) {} @media only screen and (max-width: 767px) {}
/* Mobile Landscape/Browser */ /* Mobile Landscape/Browser */
@media only screen and (min-width: 480px) and (max-width: 767px) {} @media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Anything smaller than standard 960 */ /* Anything smaller than standard 960 */
@media only screen and (max-width: 959px) {} @media only screen and (max-width: 959px) {}
/* iPad Portrait Only */ /* iPad Portrait Only */
@media only screen and (min-width: 768px) and (max-width: 991px) and (max-device-width: 1000px) {} @media only screen and (min-width: 768px) and (max-width: 991px) and (max-device-width: 1000px) {}
/* Mobile Only */ /* Mobile Only */
@media only screen and (max-width: 767px) and (max-device-width: 1000px) {} @media only screen and (max-width: 767px) and (max-device-width: 1000px) {}
/* Mobile Landscape Only */ /* Mobile Landscape Only */
@media only screen and (min-width: 480px) and (max-width: 767px) and (max-device-width: 1000px) {} @media only screen and (min-width: 480px) and (max-width: 767px) and (max-device-width: 1000px) {}
/* #Font-Face /* #Font-Face
================================================== */ ================================================== */
/* This is the proper syntax for an @font-face file /* This is the proper syntax for an @font-face file
Just create a "fonts" folder at the root, Just create a "fonts" folder at the root,
copy your FontName into code below and remove copy your FontName into code below and remove
comment brackets */ comment brackets */
/* @font-face { /* @font-face {
font-family: 'FontName'; font-family: 'FontName';
src: url('../fonts/FontName.eot'); src: url('../fonts/FontName.eot');

165
stylesheets/skeleton.css vendored
View File

@ -1,4 +1,4 @@
/* /*
* Skeleton V1.0.3 * Skeleton V1.0.3
* Copyright 2011, Dave Gamache * Copyright 2011, Dave Gamache
* www.getskeleton.com * www.getskeleton.com
@ -10,25 +10,25 @@
/* Table of Contents /* Table of Contents
================================================== ==================================================
#Base 960 Grid #Base 960 Grid
#Tablet (Portrait) #Tablet (Portrait)
#Mobile (Portrait) #Mobile (Portrait)
#Mobile (Landscape) #Mobile (Landscape)
#Clearing */ #Clearing */
/* #Base 960 Grid
/* #Base 960 Grid
================================================== */ ================================================== */
.container { position: relative; width: 960px; margin: 0 auto; padding: 0; } .container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
.column, .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; } .column, .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
.row { margin-bottom: 20px; } .row { margin-bottom: 20px; }
/* Nested Column Classes */ /* Nested Column Classes */
.column.alpha, .columns.alpha { margin-left: 0; } .column.alpha, .columns.alpha { margin-left: 0; }
.column.omega, .columns.omega { margin-right: 0; } .column.omega, .columns.omega { margin-right: 0; }
/* Base Grid */ /* Base Grid */
.container .one.column { width: 40px; } .container .one.column { width: 40px; }
.container .two.columns { width: 100px; } .container .two.columns { width: 100px; }
@ -46,11 +46,11 @@
.container .fourteen.columns { width: 820px; } .container .fourteen.columns { width: 820px; }
.container .fifteen.columns { width: 880px; } .container .fifteen.columns { width: 880px; }
.container .sixteen.columns { width: 940px; } .container .sixteen.columns { width: 940px; }
.container .one-third.column { width: 300px; } .container .one-third.column { width: 300px; }
.container .two-thirds.column { width: 620px; } .container .two-thirds.column { width: 620px; }
/* Offsets */ /* Offsets */
.container .offset-by-one { padding-left: 60px; } .container .offset-by-one { padding-left: 60px; }
.container .offset-by-two { padding-left: 120px; } .container .offset-by-two { padding-left: 120px; }
.container .offset-by-three { padding-left: 180px; } .container .offset-by-three { padding-left: 180px; }
@ -66,11 +66,11 @@
.container .offset-by-thirteen { padding-left: 780px; } .container .offset-by-thirteen { padding-left: 780px; }
.container .offset-by-fourteen { padding-left: 840px; } .container .offset-by-fourteen { padding-left: 840px; }
.container .offset-by-fifteen { padding-left: 900px; } .container .offset-by-fifteen { padding-left: 900px; }
/* #Tablet (Portrait) /* #Tablet (Portrait)
================================================== */ ================================================== */
/* Note: Design for a width of 768px */ /* Note: Design for a width of 768px */
@ -80,7 +80,7 @@
.container .columns { margin-left: 10px; margin-right: 10px; } .container .columns { margin-left: 10px; margin-right: 10px; }
.column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; } .column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; }
.column.omega, .columns.omega { margin-right: 0; margin-left: 10px; } .column.omega, .columns.omega { margin-right: 0; margin-left: 10px; }
.container .one.column { width: 28px; } .container .one.column { width: 28px; }
.container .two.columns { width: 76px; } .container .two.columns { width: 76px; }
.container .three.columns { width: 124px; } .container .three.columns { width: 124px; }
@ -97,11 +97,11 @@
.container .fourteen.columns { width: 652px; } .container .fourteen.columns { width: 652px; }
.container .fifteen.columns { width: 700px; } .container .fifteen.columns { width: 700px; }
.container .sixteen.columns { width: 748px; } .container .sixteen.columns { width: 748px; }
.container .one-third.column { width: 236px; } .container .one-third.column { width: 236px; }
.container .two-thirds.column { width: 492px; } .container .two-thirds.column { width: 492px; }
/* Offsets */ /* Offsets */
.container .offset-by-one { padding-left: 48px; } .container .offset-by-one { padding-left: 48px; }
.container .offset-by-two { padding-left: 96px; } .container .offset-by-two { padding-left: 96px; }
.container .offset-by-three { padding-left: 144px; } .container .offset-by-three { padding-left: 144px; }
@ -118,65 +118,17 @@
.container .offset-by-fourteen { padding-left: 672px; } .container .offset-by-fourteen { padding-left: 672px; }
.container .offset-by-fifteen { padding-left: 720px; } .container .offset-by-fifteen { padding-left: 720px; }
} }
/* #Mobile (Portrait) /* #Mobile (Portrait)
================================================== */ ================================================== */
/* Note: Design for a width of 320px */ /* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) { @media only screen and (max-width: 767px) {
.container { width: 300px; } .container { width: 300px; }
.columns, .column { margin: 0; } .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,
.container .one-third.column,
.container .two-thirds.column { width: 300px; }
/* Offsets */
.container .offset-by-one,
.container .offset-by-two,
.container .offset-by-three,
.container .offset-by-four,
.container .offset-by-five,
.container .offset-by-six,
.container .offset-by-seven,
.container .offset-by-eight,
.container .offset-by-nine,
.container .offset-by-ten,
.container .offset-by-eleven,
.container .offset-by-twelve,
.container .offset-by-thirteen,
.container .offset-by-fourteen,
.container .offset-by-fifteen { padding-left: 0; }
}
/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.container { width: 420px; }
.columns, .column { margin: 0; }
.container .one.column, .container .one.column,
.container .two.columns, .container .two.columns,
.container .three.columns, .container .three.columns,
@ -193,18 +145,66 @@
.container .fourteen.columns, .container .fourteen.columns,
.container .fifteen.columns, .container .fifteen.columns,
.container .sixteen.columns, .container .sixteen.columns,
.container .one-third.column, .container .one-third.column,
.container .two-thirds.column { width: 300px; }
/* Offsets */
.container .offset-by-one,
.container .offset-by-two,
.container .offset-by-three,
.container .offset-by-four,
.container .offset-by-five,
.container .offset-by-six,
.container .offset-by-seven,
.container .offset-by-eight,
.container .offset-by-nine,
.container .offset-by-ten,
.container .offset-by-eleven,
.container .offset-by-twelve,
.container .offset-by-thirteen,
.container .offset-by-fourteen,
.container .offset-by-fifteen { padding-left: 0; }
}
/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.container { width: 420px; }
.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,
.container .one-third.column,
.container .two-thirds.column { width: 420px; } .container .two-thirds.column { width: 420px; }
} }
/* #Clearing /* #Clearing
================================================== */ ================================================== */
/* Self Clearing Goodness */ /* Self Clearing Goodness */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
/* Use clearfix class on parent to clear nested columns, /* Use clearfix class on parent to clear nested columns,
or wrap each row of columns in a <div class="row"> */ or wrap each row of columns in a <div class="row"> */
.clearfix:before, .clearfix:before,
.clearfix:after, .clearfix:after,
@ -219,10 +219,10 @@
.row:after, .row:after,
.clearfix:after { .clearfix:after {
clear: both; } clear: both; }
.row, .row,
.clearfix { .clearfix {
zoom: 1; } zoom: 1; }
/* You can also use a <br class="clear" /> to clear columns */ /* You can also use a <br class="clear" /> to clear columns */
.clear { .clear {
clear: both; clear: both;
@ -232,6 +232,5 @@
width: 0; width: 0;
height: 0; height: 0;
} }