Created
September 25, 2011 16:18
Revisions
-
richardvenneman revised this gist
Sep 26, 2011 . 1 changed file with 37 additions and 45 deletions.There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,51 +1,43 @@ !!! 5 -# paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ <!--[if lt IE 7]> <html lang="en" class="no-js ie6"> <![endif]--> <!--[if IE 7]> <html lang="en" class="no-js ie7"> <![endif]--> <!--[if IE 8]> <html lang="en" class="no-js ie8"> <![endif]--> <!--[if gt IE 8]><!--> %html.no-js{ :lang => "en" } <!--<![endif]--> %head %meta{ :charset => "utf-8" }/ -# Always force latest IE rendering engine (even in intranet) & Chrome Frame -# Remove this if you use the .htaccess %meta{ "http-equiv" => "X-UA-Compatible", :content => "IE=edge,chrome=1" }/ %title %meta{ :name => "", :content => "" }/ %meta{ :name => "", :content => "" }/ %meta{ :name => "viewport", :content => "width=device-width, initial-scale=1.0" }/ %link{ :href => "css/style.css?v=1", :media => "all", :rel => "stylesheet" }/ %script{ :src => "js/libs/modernizr-2.0.6.min.js" } %body =yield -# Javascript at the bottom for fast page loading Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary %script{ :src => "//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js" } :javascript window.jQuery || document.write("<script src='js/jquery.min.js'>\x3C/script>") %script{ :src => "js/plugins.js?v=1" } %script{ :src => "js/script.js?v=1" } -# asynchronous google analytics: mathiasbynens.be/notes/async-analytics-snippet -# change the UA-XXXXX-X to be your site's ID :javascript var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"],["_trackPageLoadTime"]]; (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")); -
Sep 25, 2011 .There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,431 @@ /* * HTML5 ✰ Boilerplate * * What follows is the result of much research on cross-browser styling. * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, * Kroc Camen, and the H5BP dev community and team. * * Detailed information about this CSS: h5bp.com/css * * ==|== normalize ========================================================== */ /* ============================================================================= * HTML5 display definitions * ========================================================================== */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section display: block audio, canvas, video display: inline-block *display: inline *zoom: 1 audio:not([controls]), [hidden] display: none /* ============================================================================= * Base * ========================================================================== */ /* * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units * 2. Force vertical scrollbar in non-IE * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g */ html font-size: 100% overflow-y: scroll -webkit-text-size-adjust: 100% -ms-text-size-adjust: 100% body margin: 0 font-size: 13px line-height: 1.231 font-family: sans-serif color: #222 button, input, select, textarea font-family: sans-serif color: #222 /* * Remove text-shadow in selection highlight: h5bp.com/i * These selection declarations have to be separate * Also: hot pink! (or customize the background color to match your design) */ ::-moz-selection background: #fe57a1 color: #fff text-shadow: none ::selection background: #fe57a1 color: #fff text-shadow: none /* ============================================================================= * Links * ========================================================================== */ a color: #00e &:visited color: #551a8b &:hover color: #06e &:focus outline: thin dotted &:hover, &:active outline: 0 // Improve readability when focused and hovered in all browsers: h5bp.com/h /* ============================================================================= * Typography * ========================================================================== */ abbr[title] border-bottom: 1px dotted b, strong font-weight: bold blockquote margin: 1em 40px dfn font-style: italic hr display: block height: 1px border: 0 border-top: 1px solid #ccc margin: 1em 0 padding: 0 ins background: #ff9 color: #000 text-decoration: none mark background: #ff0 color: #000 font-style: italic font-weight: bold // Redeclare monospace font family: h5bp.com/j pre, code, kbd, samp font-family: monospace, serif _font-family: 'courier new', monospace font-size: 1em // Improve readability of pre-formatted text in all browsers pre white-space: pre white-space: pre-wrap word-wrap: break-word q quotes: none &:before, &:after content: "" content: none small font-size: 85% // Position subscript and superscript content without affecting line-height: h5bp.com/k sub font-size: 75% line-height: 0 position: relative vertical-align: baseline sup font-size: 75% line-height: 0 position: relative vertical-align: baseline top: -0.5em sub bottom: -0.25em /* ============================================================================= * Lists * ========================================================================== */ ul, ol margin: 1em 0 padding: 0 0 0 40px dd margin: 0 0 0 40px nav ul, ol list-style: none list-style-image: none margin: 0 padding: 0 /* ============================================================================= * Embedded content * ========================================================================== */ /* * 1. Improve image quality when scaled in IE7: h5bp.com/d * 2. Remove the gap between images and borders on image containers: h5bp.com/e */ img border: 0 -ms-interpolation-mode: bicubic vertical-align: middle /* * Correct overflow not hidden in IE9 */ svg:not(:root) overflow: hidden /* ============================================================================= * Figures * ========================================================================== */ figure margin: 0 /* ============================================================================= * Forms * ========================================================================== */ form margin: 0 fieldset border: 0 margin: 0 padding: 0 // Indicate that 'label' will shift focus to the associated form element label cursor: pointer /* * 1. Correct color not inheriting in IE6/7/8/9 * 2. Correct alignment displayed oddly in IE6/7 */ legend border: 0 *margin-left: -7px padding: 0 /* * 1. Correct font-size not inheriting in all browsers * 2. Remove margins in FF3/4 S5 Chrome * 3. Define consistent vertical alignment display in all browsers */ button, input, select, textarea font-size: 100% margin: 0 vertical-align: baseline *vertical-align: middle /* * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet) */ button, input line-height: normal /* * 1. Display hand cursor for clickable form elements * 2. Allow styling of clickable form elements in iOS * 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6) * 4. Consistent box sizing and appearance */ button cursor: pointer -webkit-appearance: button *overflow: visible input &[type="button"], &[type="reset"], &[type="submit"] cursor: pointer -webkit-appearance: button *overflow: visible &[type="checkbox"], &[type="radio"] box-sizing: border-box padding: 0 &[type="search"] -webkit-appearance: textfield -moz-box-sizing: content-box -webkit-box-sizing: content-box box-sizing: content-box &::-webkit-search-decoration -webkit-appearance: none /* * Remove inner padding and border in FF3/4: h5bp.com/l */ button::-moz-focus-inner, input::-moz-focus-inner border: 0 padding: 0 /* * 1. Remove default vertical scrollbar in IE6/7/8/9 * 2. Allow only vertical resizing */ textarea overflow: auto vertical-align: top resize: vertical // Colors for form validity input:valid, textarea:valid input:invalid, textarea:invalid background-color: #f0dddd /* ============================================================================= * Tables * ========================================================================== */ table border-collapse: collapse border-spacing: 0 td vertical-align: top /* ==|== primary styles ===================================================== * Author: * ========================================================================== */ /* ==|== media queries ====================================================== * PLACEHOLDER Media Queries for Responsive Design. * These override the primary ('mobile first') styles * Modify as content requires. * ========================================================================== */ @media only screen and (min-width: 480px) // Style adjustments for viewports 480px and over go here @media only screen and (min-width: 768px) // Style adjustments for viewports 768px and over go here /* ==|== non-semantic helper classes ======================================== * Please define your styles before this section. * ========================================================================== */ // For image replacement .ir display: block border: 0 text-indent: -999em overflow: hidden background-color: transparent background-repeat: no-repeat text-align: left direction: ltr br display: none // Hide from both screenreaders and browsers: h5bp.com/u .hidden display: none !important visibility: hidden // Hide only visually, but have it available for screenreaders: h5bp.com/v // Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p .visuallyhidden border: 0 clip: rect(0 0 0 0) height: 1px margin: -1px overflow: hidden padding: 0 position: absolute width: 1px &.focusable &:active, &:focus clip: auto height: auto margin: 0 overflow: visible position: static width: auto // Hide visually and from screenreaders, but maintain layout .invisible visibility: hidden // Contain floats: h5bp.com/q .clearfix &:before content: "" display: table &:after content: "" display: table clear: both *zoom: 1 /* ==|== print styles ======================================================= * Print styles. * Inlined to avoid required HTTP connection: h5bp.com/r * ========================================================================== */ @media print // Black prints faster: h5bp.com/s * background: transparent !important color: black !important box-shadow: none !important text-shadow: none !important filter: none !important -ms-filter: none !important a text-decoration: underline &:visited text-decoration: underline &[href]:after content: " (" attr(href) ")" abbr[title]:after content: " (" attr(title) ")" // Don't show links for images, or javascript/internal links .ir a:after content: "" a &[href^="javascript:"]:after, &[href^="#"]:after content: "" pre, blockquote border: 1px solid #999 page-break-inside: avoid // h5bp.com/t thead display: table-header-group tr page-break-inside: avoid img page-break-inside: avoid max-width: 100% !important @page margin: 0.5cm p, h2, h3 orphans: 3 widows: 3 h2, h3 page-break-after: avoid This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,4 @@ #container %header #main{:role => "main"} %footer This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,51 @@ <!doctype html> / paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ /[if lt IE 7 ] <html class="no-js ie6" lang="en"> /[if IE 7 ] <html class="no-js ie7" lang="en"> /[if IE 8 ] <html class="no-js ie8" lang="en"> / [if (gte IE 9)|!(IE)]><! %html.no-js{:lang => "en"} / <![endif] %head %meta{:charset => "utf-8"}/ / Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess %meta{:content => "IE=edge,chrome=1", "http-equiv" => "X-UA-Compatible"}/ %title %meta{:content => "", :name => "description"}/ %meta{:content => "", :name => "author"}/ / Mobile viewport optimized: j.mp/bplateviewport %meta{:content => "width=device-width, initial-scale=1.0", :name => "viewport"}/ / Place favicon.ico & apple-touch-icon.png in the root of your domain and delete these references %link{:href => "/favicon.ico", :rel => "shortcut icon"}/ %link{:href => "/apple-touch-icon.png", :rel => "apple-touch-icon"}/ / CSS: implied media="all" %link{:href => "css/style.css?v=2", :rel => "stylesheet"}/ / Uncomment if you are specifically targeting less enabled mobile browsers <link rel="stylesheet" media="handheld" href="css/handheld.css?v=2"> / All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects %script{:src => "js/libs/modernizr-1.7.min.js"} %body = yield / ! end of #container / JavaScript at the bottom for fast page loading / Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary %script{:src => "//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"} :javascript window.jQuery || document.write("<script src='js/libs/jquery-1.5.1.min.js'>\x3C/script>") / scripts concatenated and minified via ant build script %script{:src => "js/plugins.js"} %script{:src => "js/script.js"} / end scripts /[if lt IE 7 ] <script src="js/libs/dd_belatedpng.js"></script> <script>DD_belatedPNG.fix("img, .png_bg"); // Fix any <img> or .png_bg bg-images. Also, please read goo.gl/mZiyb </script> / mathiasbynens.be/notes/async-analytics-snippet Change UA-XXXXX-X to be your site's ID :javascript 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")); This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,4 @@ // Title: style.css.sass // Author: @import "_html5boilerplate.css.sass"