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

removing jquery (only using Google CDN now); refactoring layout.css media queries to be more straightforward and better commented; Fixed tabs for CSS to use first-child so it would have all the borders even in IE

Browse Source
This commit is contained in:
Dave Gamache 2011-08-17 21:05:28 -07:00
parent 5e668f243b
commit f53e666531
5 changed files with 118 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
index.html
View File

@ -7,7 +7,7 @@
<!-- Basic Page Needs <!-- Basic Page Needs
================================================== --> ================================================== -->
<meta charset="utf-8" /> <meta charset="utf-8">
<title>Your Page Title Here :)</title> <title>Your Page Title Here :)</title>
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
@ -17,28 +17,26 @@
<!-- 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>
<!-- Primary Page Layout <!-- Primary Page Layout
================================================== --> ================================================== -->
@ -72,8 +70,6 @@
<!-- JS <!-- JS
================================================== --> ================================================== -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

16
javascripts/jquery-1.5.1.min.js vendored
View File

File diff suppressed because one or more lines are too long

12
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
@ -224,7 +224,7 @@
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 1px 0 0;
margin: 0; margin: 0;
background: #f5f5f5; background: #f5f5f5;
font-size: 13px; } font-size: 13px; }
@ -234,8 +234,8 @@
position: relative; position: relative;
top: -4px; top: -4px;
padding-top: 4px; padding-top: 4px;
border-right-width: 1px; border-left-width: 1px;
margin: 0 -1px 0 0; margin: 0 0 0 -1px;
color: #111; color: #111;
-moz-border-radius-topleft: 2px; -moz-border-radius-topleft: 2px;
-webkit-border-top-left-radius: 2px; -webkit-border-top-left-radius: 2px;
@ -243,12 +243,14 @@
-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 li:first-child a.active {
margin-left: 0; }
ul.tabs li:first-child a { ul.tabs li:first-child a {
border-width: 1px 1px 0 1px;
-moz-border-radius-topleft: 2px; -moz-border-radius-topleft: 2px;
-webkit-border-top-left-radius: 2px; -webkit-border-top-left-radius: 2px;
border-top-left-radius: 2px; } border-top-left-radius: 2px; }
ul.tabs li:last-child a { ul.tabs li:last-child a {
border-width: 1px 1px 0 1px;
-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; }

46
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,30 @@
/* #Media Queries /* #Media Queries
================================================== */ ================================================== */
/* iPad Portrait/Browser */ /* Smaller than standard 960 (devices and browsers) */
@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) {} @media only screen and (max-width: 959px) {}
/* iPad Portrait Only */ /* Tablet Portrait size to standard 960 (devices and browsers) */
@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: 959px) {}
/* Mobile Only */ /* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) and (max-device-width: 1000px) {} @media only screen and (max-width: 767px) {}
/* Mobile Landscape Only */ /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@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) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}
/* #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;
} }