From 626687a878358bd3e58a94fa7623f0dd7dce7c73 Mon Sep 17 00:00:00 2001 From: Mauvis Ledford Date: Sun, 31 Jul 2011 12:03:09 -0700 Subject: [PATCH] delete trailing whitespace :/ --- 404.html | 16 ++-- index.html | 32 ++++---- javascripts/app.js | 28 +++---- stylesheets/base.css | 103 ++++++++++++------------ stylesheets/layout.css | 26 +++--- stylesheets/skeleton.css | 165 +++++++++++++++++++-------------------- 6 files changed, 184 insertions(+), 186 deletions(-) diff --git a/404.html b/404.html index 95a0d1e..d8b7662 100644 --- a/404.html +++ b/404.html @@ -14,17 +14,17 @@ - + - - + + - + @@ -37,19 +37,19 @@ + ================================================== -->

Sorry. Couldn't Find That Page!

- + - + - \ No newline at end of file + diff --git a/index.html b/index.html index ac85f1d..1790df7 100644 --- a/index.html +++ b/index.html @@ -14,24 +14,24 @@ - + - - + + - + - + @@ -41,21 +41,21 @@ - + -
+

Skeleton

Version 1.0.3
-

About Skeleton?

+

About Skeleton?

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.

-

Three Core Principles

+

Three Core Principles

Skeleton is built on three core principles:

  • A Responsive Grid Down To Mobile: Elegant scaling from a browser to tablets to mobile.
    • @@ -64,23 +64,23 @@
-

Docs & Support

+

Docs & Support

The easiest way to really get started with Skeleton is to check out the full docs and info at www.getskeleton.com.. Skeleton is also open-source and has a project on git, 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 hi@getskeleton.com.

- - - - + + + + - + - \ No newline at end of file + diff --git a/javascripts/app.js b/javascripts/app.js index 38fb78a..9a6a087 100644 --- a/javascripts/app.js +++ b/javascripts/app.js @@ -1,12 +1,12 @@ -/* +/* * 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 -*/ - +*/ + $(document).ready(function() { @@ -14,29 +14,29 @@ $(document).ready(function() { /* Tabs Activiation ================================================== */ var tabs = $('ul.tabs'); - + tabs.each(function(i) { //Get all tabs var tab = $(this).find('> li > a'); tab.click(function(e) { - + //Get Location of tab's content var contentLocation = $(this).attr('href') + "Tab"; - + //Let go if not a hashed one if(contentLocation.charAt(0)=="#") { - + e.preventDefault(); - + //Make Tab Active tab.removeClass('active'); $(this).addClass('active'); - + //Show Tab Content & add active class $(contentLocation).show().addClass('active').siblings().hide().removeClass('active'); - - } + + } }); - }); - -}); \ No newline at end of file + }); + +}); diff --git a/stylesheets/base.css b/stylesheets/base.css index 0496b54..d213378 100644 --- a/stylesheets/base.css +++ b/stylesheets/base.css @@ -1,4 +1,4 @@ -/* +/* * Skeleton V1.0.3 * Copyright 2011, Dave Gamache * www.getskeleton.com @@ -47,23 +47,23 @@ table { border-collapse: collapse; border-spacing: 0; } - - + + /* #Basic Styles ================================================== */ - body { + body { background: #fff; font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #444; + color: #444; -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ -webkit-text-size-adjust: 100%; } - + /* #Typography ================================================== */ - h1, h2, h3, h4, h5, h6 { - color: #181818; + h1, h2, h3, h4, h5, h6 { + color: #181818; font-family: "Georgia", "Times New Roman", Helvetica, Arial, sans-serif; font-weight: normal; } 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 img { margin: 0; } p.lead { font-size: 21px; line-height: 27px; color: #777; } - + em { font-style: italic; } strong { font-weight: bold; color: #333; } small { font-size: 80%; } - + /* Blockquotes */ 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 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; } @@ -98,7 +98,7 @@ a, a:visited { color: #333; text-decoration: underline; outline: 0; } a:hover, a:focus { color: #000; } p a, p a:visited { line-height: inherit; } - + /* #Lists ================================================== */ @@ -116,19 +116,19 @@ li { line-height: 18px; margin-bottom: 12px; } ul.large li { line-height: 21px; } li p { line-height: 21px; } - + /* #Images ================================================== */ - img.scale-with-grid { + img.scale-with-grid { max-width: 100%; height: auto; } /* #Buttons ================================================== */ - - a.button, + + a.button, button, input[type="submit"], input[type="reset"], @@ -157,8 +157,8 @@ margin-bottom: 20px; line-height: 21px; font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; } - - a.button:hover, + + a.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, @@ -174,8 +174,8 @@ border: 1px solid #888; border-top: 1px solid #aaa; border-left: 1px solid #aaa; } - - a.button:active, + + a.button:active, button:active, input[type="submit"]:active, input[type="reset"]:active, @@ -190,46 +190,46 @@ border: 1px solid #888; border-bottom: 1px solid #aaa; border-right: 1px solid #aaa; } - - .button.full-width, + + .button.full-width, button.full-width, input[type="submit"].full-width, input[type="reset"].full-width, - input[type="button"].full-width { + input[type="button"].full-width { width: 100%; padding-left: 0 !important; padding-right: 0 !important; text-align: center; } - - + + /* #Tabs (activate in app.js) ================================================== */ - ul.tabs { + ul.tabs { display: block; margin: 0 0 20px 0; padding: 0; border-bottom: solid 1px #ddd; } - ul.tabs li { + ul.tabs li { display: block; width: auto; height: 30px; padding: 0; float: left; margin-bottom: 0; } - ul.tabs li a { - display: block; + ul.tabs li a { + display: block; text-decoration: none; - width: auto; - height: 29px; - padding: 0px 20px; - line-height: 30px; + width: auto; + height: 29px; + padding: 0px 20px; + line-height: 30px; border: solid 1px #ddd; - border-width: 1px 0 0 1px; - margin: 0; + border-width: 1px 0 0 1px; + margin: 0; background: #f5f5f5; font-size: 13px; } - ul.tabs li a.active { - background: #fff; + ul.tabs li a.active { + background: #fff; height: 30px; position: relative; top: -4px; @@ -252,11 +252,11 @@ -moz-border-radius-topright: 2px; -webkit-border-top-right-radius: 2px; border-top-right-radius: 2px; } - + ul.tabs-content { margin: 0; display: block; } ul.tabs-content > li { display:none; } ul.tabs-content > li.active { display: block; } - + /* Clearfixing tabs for beautiful stacking */ ul.tabs:before, ul.tabs:after { @@ -270,19 +270,19 @@ clear: both; } ul.tabs { zoom: 1; } - - + + /* #Forms ================================================== */ - form { + form { margin-bottom: 20px; } - fieldset { + fieldset { margin-bottom: 20px; } - input[type="text"], + input[type="text"], input[type="password"], input[type="email"], - textarea, + textarea, select { border: 1px solid #ccc; padding: 6px 4px; @@ -298,11 +298,11 @@ display: block; margin-bottom: 20px; background: #fff; } - select { + select { padding: 0; } input[type="text"]:focus, input[type="password"]:focus, - input[type="email"]:focus, + input[type="email"]:focus, textarea:focus { border: 1px solid #aaa; color: #444; @@ -312,11 +312,11 @@ textarea { min-height: 60px; } label, - legend { + legend { display: block; font-weight: bold; font-size: 13px; } - select { + select { width: 220px; } input[type="checkbox"] { display: inline; } @@ -325,12 +325,11 @@ font-weight: normal; font-size: 13px; color: #444; } - + /* #Misc ================================================== */ .remove-bottom { margin-bottom: 0 !important; } .half-bottom { margin-bottom: 10px !important; } .add-bottom { margin-bottom: 20px !important; } - - \ No newline at end of file + diff --git a/stylesheets/layout.css b/stylesheets/layout.css index c22f0b0..9b5ecdd 100644 --- a/stylesheets/layout.css +++ b/stylesheets/layout.css @@ -1,4 +1,4 @@ -/* +/* * Skeleton V1.0.3 * Copyright 2011, Dave Gamache * www.getskeleton.com @@ -13,7 +13,7 @@ #Page Styles #Media Queries #Font-Face */ - + /* #Site Styles ================================================== */ @@ -22,36 +22,36 @@ /* #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) {} - + /* #Font-Face ================================================== */ -/* This is the proper syntax for an @font-face file - Just create a "fonts" folder at the root, +/* This is the proper syntax for an @font-face file + Just create a "fonts" folder at the root, copy your FontName into code below and remove comment brackets */ - + /* @font-face { font-family: 'FontName'; src: url('../fonts/FontName.eot'); diff --git a/stylesheets/skeleton.css b/stylesheets/skeleton.css index 8d959e9..eb6d1ec 100644 --- a/stylesheets/skeleton.css +++ b/stylesheets/skeleton.css @@ -1,4 +1,4 @@ -/* +/* * Skeleton V1.0.3 * Copyright 2011, Dave Gamache * www.getskeleton.com @@ -10,25 +10,25 @@ /* Table of Contents ================================================== - #Base 960 Grid + #Base 960 Grid #Tablet (Portrait) - #Mobile (Portrait) + #Mobile (Portrait) #Mobile (Landscape) #Clearing */ - - -/* #Base 960 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; } .row { margin-bottom: 20px; } - + /* 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; } @@ -46,11 +46,11 @@ .container .fourteen.columns { width: 820px; } .container .fifteen.columns { width: 880px; } .container .sixteen.columns { width: 940px; } - + .container .one-third.column { width: 300px; } .container .two-thirds.column { width: 620px; } - - /* Offsets */ + + /* Offsets */ .container .offset-by-one { padding-left: 60px; } .container .offset-by-two { padding-left: 120px; } .container .offset-by-three { padding-left: 180px; } @@ -66,11 +66,11 @@ .container .offset-by-thirteen { padding-left: 780px; } .container .offset-by-fourteen { padding-left: 840px; } .container .offset-by-fifteen { padding-left: 900px; } - - - + + + /* #Tablet (Portrait) -================================================== */ +================================================== */ /* Note: Design for a width of 768px */ @@ -80,7 +80,7 @@ .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; } @@ -97,11 +97,11 @@ .container .fourteen.columns { width: 652px; } .container .fifteen.columns { width: 700px; } .container .sixteen.columns { width: 748px; } - + .container .one-third.column { width: 236px; } .container .two-thirds.column { width: 492px; } - - /* Offsets */ + + /* Offsets */ .container .offset-by-one { padding-left: 48px; } .container .offset-by-two { padding-left: 96px; } .container .offset-by-three { padding-left: 144px; } @@ -118,65 +118,17 @@ .container .offset-by-fourteen { padding-left: 672px; } .container .offset-by-fifteen { padding-left: 720px; } } - - -/* #Mobile (Portrait) + + +/* #Mobile (Portrait) ================================================== */ - + /* Note: Design for a width of 320px */ - + @media only screen and (max-width: 767px) { .container { width: 300px; } .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 .two.columns, .container .three.columns, @@ -193,18 +145,66 @@ .container .fourteen.columns, .container .fifteen.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; } } - - + + /* #Clearing ================================================== */ /* Self Clearing Goodness */ - .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } - - /* Use clearfix class on parent to clear nested columns, + .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } + + /* Use clearfix class on parent to clear nested columns, or wrap each row of columns in a
*/ .clearfix:before, .clearfix:after, @@ -219,10 +219,10 @@ .row:after, .clearfix:after { clear: both; } - .row, + .row, .clearfix { zoom: 1; } - + /* You can also use a
to clear columns */ .clear { clear: both; @@ -232,6 +232,5 @@ width: 0; height: 0; } - - - \ No newline at end of file + +