From a853af7018ef678a4459cb49d6c27663884d382f Mon Sep 17 00:00:00 2001 From: Dave Gamache Date: Wed, 17 Aug 2011 18:37:22 -0700 Subject: [PATCH] fixing the app.js to become tabs.js and refactoring based on some awesome input from napcs on github --- index.html | 37 ++++++++-------- javascripts/app.js | 42 ------------------ stylesheets/base.css | 103 +++++++++++++++++++++---------------------- 3 files changed, 69 insertions(+), 113 deletions(-) delete mode 100644 javascripts/app.js diff --git a/index.html b/index.html index d7de9f6..8ec0c1e 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ - + @@ -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,22 +64,21 @@
-

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.

- - - - + + + + - - - - + + + diff --git a/javascripts/app.js b/javascripts/app.js deleted file mode 100644 index 38fb78a..0000000 --- a/javascripts/app.js +++ /dev/null @@ -1,42 +0,0 @@ -/* -* 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() { - - - /* 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 +