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

fixing the app.js to become tabs.js and refactoring based on some awesome input from napcs on github

Browse Source
This commit is contained in:
Dave Gamache 2011-08-17 18:37:22 -07:00
parent a06ce03310
commit a853af7018
3 changed files with 69 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
index.html
View File

@ -1,4 +1,4 @@
<!doctype html>
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
@ -14,24 +14,24 @@
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- 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
================================================== -->
<link rel="stylesheet" href="stylesheets/base.css" />
<link rel="stylesheet" href="stylesheets/skeleton.css" />
<link rel="stylesheet" href="stylesheets/layout.css" />
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="images/favicon.ico" />
<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="114x114" href="images/apple-touch-icon-114x114.png" />
</head>
<body>
@ -41,21 +41,21 @@
<!-- Primary Page Layout
================================================== -->
<!-- Delete everything in this .container and get started on your own site! -->
<div class="container">
<div class="container">
<div class="sixteen columns">
<h1 class="remove-bottom" style="margin-top: 40px">Skeleton</h1>
<h5>Version 1.0.3</h5>
<hr />
</div>
<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>
</div>
<div class="one-third column">
<h3>Three Core Principles</h3>
<h3>Three Core Principles</h3>
<p>Skeleton is built on three core principles:</p>
<ul class="square">
<li><strong>A Responsive Grid Down To Mobile</strong>: Elegant scaling from a browser to tablets to mobile.</li>
@ -64,22 +64,21 @@
</ul>
</div>
<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>
</div>
</div><!-- container -->
<!-- JS
================================================== -->
<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 src="javascripts/app.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="javascripts/tabs.js" type="text/javascript"></script>
<!-- End Document
================================================== -->
</body>

42
javascripts/app.js
View File

@ -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');
}
});
});
});

103
stylesheets/base.css
View File

@ -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; }