removing jquery (only using Google CDN now); refactoring layout.css m…

…edia 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
repos-html5 · Aug 18, 2011 · f53e666 · f53e666
1 parent 5e668f2
commit f53e666
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 120 deletions.
diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
 
 	<!-- Basic Page Needs
   ================================================== -->
-	<meta charset="utf-8" />
+	<meta charset="utf-8">
 	<title>Your Page Title Here :)</title>
 	<meta name="description" content="">
 	<meta name="author" content="">
@@ -17,28 +17,26 @@
 
 	<!-- 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" />
+	<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" />
+	<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>
 
 
 
-
-
 	<!-- Primary Page Layout
 	================================================== -->
 
@@ -72,8 +70,6 @@ <h3>Docs &amp; Support</h3>
 
 
 
-
-
 	<!-- JS
 	================================================== -->
 	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

diff --git a/javascripts/jquery-1.5.1.min.js b/javascripts/jquery-1.5.1.min.js
diff --git a/stylesheets/base.css b/stylesheets/base.css
@@ -1,4 +1,4 @@
-/*
+`/*
 * Skeleton V1.0.3
 * Copyright 2011, Dave Gamache
 * www.getskeleton.com
@@ -224,7 +224,7 @@
 		padding: 0px 20px;
 		line-height: 30px;
 		border: solid 1px #ddd;
-		border-width: 1px 0 0 1px;
+		border-width: 1px 1px 0 0;
 		margin: 0;
 		background: #f5f5f5;
 		font-size: 13px; }
@@ -234,21 +234,23 @@
 		position: relative;
 		top: -4px;
 		padding-top: 4px;
-		border-right-width: 1px;
-		margin: 0 -1px 0 0;
+		border-left-width: 1px;
+		margin: 0 0 0 -1px;
 		color: #111;
 		-moz-border-radius-topleft: 2px;
 		-webkit-border-top-left-radius: 2px;
 		border-top-left-radius: 2px;
 		-moz-border-radius-topright: 2px;
 		-webkit-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 {
+		border-width: 1px 1px 0 1px;
 		-moz-border-radius-topleft: 2px;
 		-webkit-border-top-left-radius: 2px;
 		border-top-left-radius: 2px; }
 	ul.tabs li:last-child a {
-		border-width: 1px 1px 0 1px;
 		-moz-border-radius-topright: 2px;
 		-webkit-border-top-right-radius: 2px;
 		border-top-right-radius: 2px; }

diff --git 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,30 @@
 
 /* #Media Queries
 ================================================== */
-
-	/* iPad Portrait/Browser */
-	@media only screen and (min-width: 768px) and (max-width: 991px) {}
-
-	/* Mobile/Browser */
+
+	/* Smaller than standard 960 (devices and browsers) */
+	@media only screen and (max-width: 959px) {}
+
+	/* Tablet Portrait size to standard 960 (devices and browsers) */
+	@media only screen and (min-width: 768px) and (max-width: 959px) {}
+
+	/* All Mobile Sizes (devices and browser) */
 	@media only screen and (max-width: 767px) {}
-	
-	/* Mobile Landscape/Browser */
+
+	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
 	@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) {}
-
+
+	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
+	@media only screen and (max-width: 479px) {}
+
 
 /* #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
@@ -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,17 +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,
@@ -144,39 +144,39 @@
         .container .thirteen.columns,
         .container .fourteen.columns,
         .container .fifteen.columns,
-        .container .sixteen.columns, 
-        .container .one-third.column, 
+        .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; }          
-                
-    }    
-    
-    
+
+        /* 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 +193,18 @@
         .container .fourteen.columns,
         .container .fifteen.columns,
         .container .sixteen.columns,
-        .container .one-third.column, 
+        .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 <div class="row"> */
     .clearfix:before,
     .clearfix:after,
@@ -219,10 +219,10 @@
     .row:after,
     .clearfix:after {
       clear: both; }
-    .row, 
+    .row,
     .clearfix {
       zoom: 1; }
-      
+
     /* You can also use a <br class="clear" /> to clear columns */
     .clear {
       clear: both;
@@ -232,6 +232,5 @@
       width: 0;
       height: 0;
     }
-
-
-
+
+