- added more helpful comments to index.html and 320andup.less

- better nesting of rules inside buttons.less
koycarraway · Apr 21, 2012 · a018d5e · malarkey · Apr 21, 2012 · a018d5e
1 parent edb15f5
commit a018d5e
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 54 deletions.
diff --git a/index.html b/index.html
@@ -110,17 +110,22 @@ <h2 class="h3">&#8216;320 and Up&#8217; contains:</h2>
 <small>&#8216;320 and Up&#8217; wouldn&#8217;t be possible without <a href="http://html5boilerplate.com/">HTML5 Boilerplate</a>, <a href="http://framelessgrid.com/">Frameless grid</a> and <a href="http://twitter.github.com/bootstrap/">Bootstrap</a>. Licensed under the <a href="http://creativecommons.org/licenses/MIT/">Creative Commons MIT</a> license.</small>
 </footer>
 
+<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.7.2.min.js"><\/script>')</script>
 
+<!-- Scripts concatenated and minified via build script -->
 <script src="js/plugins.js"></script>
 <script src="js/main.js"></script>
 <script src="js/helper.js"></script>
+
+<!-- Asynchronous Google Analytics snippet. Change UA-XXXXX-X to be your site's ID. -->
 <script>
 var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"]];
 (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
 g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
 s.parentNode.insertBefore(g,s)}(document,"script"));
 </script>
+
 </body>
 </html>
diff --git a/less/320andup.less b/less/320andup.less
@@ -64,36 +64,37 @@ Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
 //  9. TEMPLATE SPECIFICS 	==============================
 //  10. MEDIA QUERIES 		==============================
 
+// Print
 @media print {
 @import "print";
 }
 
-// 480px
+// 480px - iPhones (Landscape)
 @media only screen and (min-width: 480px) {
 @import "480";
 }
 
-// 600px
+// 600px - Other Smartphones
 @media only screen and (min-width: 600px) {
 @import "600";
 }
 
-// 768px
+// 768px - iPads (Portrait)
 @media only screen and (min-width: 768px) {
 @import "768";
 }
 
-// 992px
+// 992px - iPads (Landscape)
 @media only screen and (min-width: 992px) {
 @import "992";
 }
 
-// 1382px
+// 1382px - Large Desktop Screens
 @media only screen and (min-width: 1382px) {
 @import "1382";
 }
 
-// 2x
+// 2x - Retina Media - iPhone 4, 4S, & iPad 3
 @media
 only screen and (-webkit-min-device-pixel-ratio: 1.5), 
 only screen and (min--moz-device-pixel-ratio: 1.5),

diff --git a/less/buttons.less b/less/buttons.less
@@ -38,10 +38,12 @@ cursor : pointer;
 &:hover {
 color : @darkgrey;
 text-decoration : none; }
+
+&:first-child {
+*margin-left : 0;
 }
 
-.btn:first-child {
-*margin-left : 0; }
+}
 
 // danger
 
@@ -175,52 +177,58 @@ padding : 3px 5px;
 line-height : 14px; }
 
 .btn-group {
-position : relative;
-*zoom : 1;
-*margin-left : .3em;
-margin-bottom : @baseline; }
-
-.btn-group .btn {
-position : relative;
-float : left;
-margin-left : -1px;
--webkit-border-radius : 0;
--moz-border-radius : 0;
-border-radius : 0; }
-
-.btn-group .btn:first-child {
-margin-left: 0;
--webkit-border-top-left-radius : 2px;
--moz-border-radius-topleft : 2px;
-border-top-left-radius : 2px;
--webkit-border-bottom-left-radius : 2px;
--moz-border-radius-bottomleft : 2px;
-border-bottom-left-radius : 2px; } 
-
-.btn-group .btn:last-child {
--webkit-border-top-right-radius : 2px;
--moz-border-radius-topright : 2px;
-border-top-right-radius : 2px;
--webkit-border-bottom-right-radius : 2px;
--moz-border-radius-bottomright : 2px;
-border-bottom-right-radius : 2px; }
-
-.btn-group .btn.large:first-child {
-margin-left : 0;
--webkit-border-top-left-radius : 4px;
--moz-border-radius-topleft : 4px;
-border-top-left-radius : 4px;
--webkit-border-bottom-left-radius : 4px;
--moz-border-radius-bottomleft : 4px;
-border-bottom-left-radius : 4px; }
-
-.btn-group .btn.large:last-child {
--webkit-border-top-right-radius : 4px;
--moz-border-radius-topright : 4px;
-border-top-right-radius : 4px;
--webkit-border-bottom-right-radius : 4px;
--moz-border-radius-bottomright : 4px;
-border-bottom-right-radius : 4px; }
+	position: relative;
+	*zoom: 1;
+	*margin-left: .3em;
+	margin-bottom: @baseline;
+
+	.btn {
+		position: relative;
+		float: left;
+		margin-left: -1px;
+		-webkit-border-radius: 0;
+		-moz-border-radius: 0;
+		border-radius: 0;
+
+		&:first-child {
+			margin-left: 0;
+			-webkit-border-top-left-radius: 2px;
+			-moz-border-radius-topleft: 2px;
+			border-top-left-radius: 2px;
+			-webkit-border-bottom-left-radius: 2px;
+			-moz-border-radius-bottomleft: 2px;
+			border-bottom-left-radius: 2px;
+		}
+		&:last-child {
+			-webkit-border-top-right-radius: 2px;
+			-moz-border-radius-topright: 2px;
+			border-top-right-radius: 2px;
+			-webkit-border-bottom-right-radius: 2px;
+			-moz-border-radius-bottomright: 2px;
+			border-bottom-right-radius: 2px;
+		}
+	}
+
+	.btn.large {
+		&:first-child {
+			margin-left: 0;
+			-webkit-border-top-left-radius: 4px;
+			-moz-border-radius-topleft: 4px;
+			border-top-left-radius: 4px;
+			-webkit-border-bottom-left-radius: 4px;
+			-moz-border-radius-bottomleft: 4px;
+			border-bottom-left-radius: 4px;
+		}
+		&:last-child {
+			-webkit-border-top-right-radius: 4px;
+			-moz-border-radius-topright: 4px;
+			border-top-right-radius: 4px;
+			-webkit-border-bottom-right-radius: 4px;
+			-moz-border-radius-bottomright: 4px;
+			border-bottom-right-radius: 4px;
+		}
+	}
+}
 
 .btn-toolbar {
 clear : both;