Skip to content

Instantly share code, notes, and snippets.

@richardvenneman
Created September 25, 2011 16:18
Show Gist options
  • Save richardvenneman/1240780 to your computer and use it in GitHub Desktop.
Save richardvenneman/1240780 to your computer and use it in GitHub Desktop.
HTML5 Boilerplate HAML & SASS
/*
* 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
#container
%header
#main{:role => "main"}
%footer
!!! 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"));
// Title: style.css.sass
// Author:
@import "_html5boilerplate.css.sass"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment