seancron + boilerplate 2
Initializr - Start an HTML5 Boilerplate project in 15 seconds!
february 2012 by seancron
Generates a custom boilerplate website with a few different frameworks and options to choose from
Bootstrap
Boilerplate
HTML
HTML5
Generator
via:shikakun
february 2012 by seancron
20 Snippets You should be using from Html5 Boilerplate
september 2010 by seancron
I recently, as many web designers and developers will have, became aware of a fantastic resource put together by web developer, Paul Irish, and Divya Manian. Html5 Boilerplate, as they have named it, is a powerful starting off point for any website or web application. As Paul Irish describes it; “It’s essentially a good starting template of html and css and a folder structure that works., but baked into it is years of best practices from front-end development professionals.”
It is absolutely packed full of fantastic snippets of code that are still very much worth using even if you don’t want to start using html5 boilerplate as your base template.
Html
We will start off by checking out some of the html snippets used in the resource. All of these are snippets of code that may not necessarily be only html, but will definitely be placed in your html files if used.
Favicon and Apple icons
The favicon is pretty much normality these day. the interesting bit here is the apple-touch-icon which is used if you save a bookmark to your home screen on an apple touch device such as an iPad or iPhone. Interestingly enough, android also supports its usage. As far as I can tell, the apple-touch-icon size is 60px by 60px. As the comment says, if your icons are in the root of your domain, these links aren’t required.
<!-- Place favicon.ico and apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
Faster page load hack
This empty conditional comment hack is used to basically increase performance of your site. When conditional comments are used on your site, for example, for an ie6 conditional stylesheet, it will block further downloads until the css files are fully downloaded, hence increasing load time. To solve this issue, an empty conditional comment, like below, is used before any css is loaded in the document, and the problem will be solved! For further reading, check out this article.
<!--[if IE]><![endif]-->
X-UA-Compatible
Internet Explorer has many rendering engines ready for use. What this line of code basically does is force IE to use the most up to date rendering engine that it has available, so that your pages will render as well as possible. It then goes on to talk about Chrome Frame. Chrome Frame is a plugin for IE6, 7, and 8 which brings all the rendering, and js power of Google Chrome to IE. If the user has it installed, we render our site using it. For more information on Chrome Frame, and how you can even prompt users without it to install it, check here.
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Conditional body tag
This snippet is a Paul Irish original, and allows you to target IE browsers specifically without having to add in an extra http request with another separate stylesheet. Basically, depending on the IE browser that the user is using, a class is added to the body tag. If the user is not using IE, then a classless body tag is used. This allows you to target specific browsers in your css without having to use css hacks, or further stylesheets. For further reading, check out the original article on this.
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if IE 9 ]> <body class="ie9"> <![endif<]-->
<!--[if (gt IE 9)|!(IE)]><!--> <!--<![endif]-->
jQuery loading fallback
A vast majority of sites these days make use of the jQuery JavaScript library. A vast majority also make use of Google’s hosted version of the library for faster loading speed’s, and better cross site caching. However, what if there is ever a problem and jQuery is not loaded from Google? Well here is your backup. What it basically does is check if jQuery is loaded from Google. If not, then we load it locally from our own version of jQuery.
<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')</script>
Optimised Google Analytics
Google Analytics is a very popular tool for tracking your website’s user behaviour, and visits. This is simply an optimised version of Google’s asynchronous tracking snippet. To learn what has been optimised, and why it is faster than Google’s own version, read the article here.
<!-- asynchronous google analytics
change the 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 = true;
g.src = '//www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g, s);
})(document, 'script');
</script>
Css
Moving on into Css, this is where the vast majority of awesome snippets care to be found. Don’t be put off by some of the one-liners; they are just as useful and awesome as some of the larger snippets to be found.
Html5 ready reset
Plenty of you will have used Eric Meyer’s css reset before now. It is included in many frameworks and so on, like 960.gs. This is a revamped version of that reset, that brings it into the present with full support for html5. It sets all the new structural tags as block level, and resets all their default styling as expected.
/* html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline) v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark html5doctor.com/html-5-reset-stylesheet/*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section, menu,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
article, aside, figure, footer, header,
hgroup, nav, section { display:block; }
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }
/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }
/* END RESET CSS */
Font normalisation
To get rid of rendering inconsistencies that can occur between browsers and OS’s when rendering fonts in pixels, this snippet allows you to size your fonts in such a way that the size and line-height will remain consistent across these platforms for your website. You will basically be setting your font sizes via percentages that can be found here.
/*
fonts.css from the YUI Library: developer.yahoo.com/yui/
Please refer to developer.yahoo.com/yui/fonts/ for font sizing percentages
*/
body { font:13px sans-serif; *font-size:small; *font:x-small; line-height:1.22; }
table { font-size:inherit; font:100%; }
select, input, textarea { font:99% sans-serif; }
Webkit font smoothing
This is anti-aliasing for webkit browsers, sadly only in Mac OSX. It basically makes your text render better, and make it more readable, without all the text thinning hacks that we have seen in the past. For further reading check out Tim Van Damme’s article on this.
/* maxvoltar.com/archive/-webkit-font-smoothing */
html { -webkit-font-smoothing: antialiased; }
Force scrollbar
Sometimes, pages can be shorter than the browser view-port, and when you load a page on the same site that has longer content and uses a scrollbar, content can jump side to side. By forcing a scrollbar no matter the height of our content, we stop this small, but annoying issue.
html { overflow-y: scroll; }
Formatting quoted code
This snippet simply makes the text wrap when it reaches the walls of its container, in this case, the pre tag, whilst still preserving line breaks and white space cross browser. To read up on this, have a look at this article.
pre {
padding: 15px;
white-space: pre; /* CSS2 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
}
Aligning Labels
Alignment of labels with their relevant inputs can be a horrible task to achieve in older browsers. This snippets solves that for us by making it consistent across browsers!
/* align checkboxes, radios, text inputs with their label */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
Clickable inputs
For some reason, most browsers don’t apply a pointer cursor to some clickable input’s by default to let the user now that this item is clickable, so we solve this by doing it ourselves.
/* hand cursor on clickable input elements */
label, input[type=button], input[type=submit], button { cursor: pointer; }
Screenreader access
This snippet basically gives us the best of both worlds, allowing the best usability when it comes to link outlines for both screenreaders tabbing through links, and mouse users. To learn more, read this article.
[…]
Development
boilerplate
html5
Snippets
from google
It is absolutely packed full of fantastic snippets of code that are still very much worth using even if you don’t want to start using html5 boilerplate as your base template.
Html
We will start off by checking out some of the html snippets used in the resource. All of these are snippets of code that may not necessarily be only html, but will definitely be placed in your html files if used.
Favicon and Apple icons
The favicon is pretty much normality these day. the interesting bit here is the apple-touch-icon which is used if you save a bookmark to your home screen on an apple touch device such as an iPad or iPhone. Interestingly enough, android also supports its usage. As far as I can tell, the apple-touch-icon size is 60px by 60px. As the comment says, if your icons are in the root of your domain, these links aren’t required.
<!-- Place favicon.ico and apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
Faster page load hack
This empty conditional comment hack is used to basically increase performance of your site. When conditional comments are used on your site, for example, for an ie6 conditional stylesheet, it will block further downloads until the css files are fully downloaded, hence increasing load time. To solve this issue, an empty conditional comment, like below, is used before any css is loaded in the document, and the problem will be solved! For further reading, check out this article.
<!--[if IE]><![endif]-->
X-UA-Compatible
Internet Explorer has many rendering engines ready for use. What this line of code basically does is force IE to use the most up to date rendering engine that it has available, so that your pages will render as well as possible. It then goes on to talk about Chrome Frame. Chrome Frame is a plugin for IE6, 7, and 8 which brings all the rendering, and js power of Google Chrome to IE. If the user has it installed, we render our site using it. For more information on Chrome Frame, and how you can even prompt users without it to install it, check here.
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Conditional body tag
This snippet is a Paul Irish original, and allows you to target IE browsers specifically without having to add in an extra http request with another separate stylesheet. Basically, depending on the IE browser that the user is using, a class is added to the body tag. If the user is not using IE, then a classless body tag is used. This allows you to target specific browsers in your css without having to use css hacks, or further stylesheets. For further reading, check out the original article on this.
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if IE 9 ]> <body class="ie9"> <![endif<]-->
<!--[if (gt IE 9)|!(IE)]><!--> <!--<![endif]-->
jQuery loading fallback
A vast majority of sites these days make use of the jQuery JavaScript library. A vast majority also make use of Google’s hosted version of the library for faster loading speed’s, and better cross site caching. However, what if there is ever a problem and jQuery is not loaded from Google? Well here is your backup. What it basically does is check if jQuery is loaded from Google. If not, then we load it locally from our own version of jQuery.
<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')</script>
Optimised Google Analytics
Google Analytics is a very popular tool for tracking your website’s user behaviour, and visits. This is simply an optimised version of Google’s asynchronous tracking snippet. To learn what has been optimised, and why it is faster than Google’s own version, read the article here.
<!-- asynchronous google analytics
change the 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 = true;
g.src = '//www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g, s);
})(document, 'script');
</script>
Css
Moving on into Css, this is where the vast majority of awesome snippets care to be found. Don’t be put off by some of the one-liners; they are just as useful and awesome as some of the larger snippets to be found.
Html5 ready reset
Plenty of you will have used Eric Meyer’s css reset before now. It is included in many frameworks and so on, like 960.gs. This is a revamped version of that reset, that brings it into the present with full support for html5. It sets all the new structural tags as block level, and resets all their default styling as expected.
/* html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline) v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark html5doctor.com/html-5-reset-stylesheet/*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section, menu,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
article, aside, figure, footer, header,
hgroup, nav, section { display:block; }
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }
/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }
/* END RESET CSS */
Font normalisation
To get rid of rendering inconsistencies that can occur between browsers and OS’s when rendering fonts in pixels, this snippet allows you to size your fonts in such a way that the size and line-height will remain consistent across these platforms for your website. You will basically be setting your font sizes via percentages that can be found here.
/*
fonts.css from the YUI Library: developer.yahoo.com/yui/
Please refer to developer.yahoo.com/yui/fonts/ for font sizing percentages
*/
body { font:13px sans-serif; *font-size:small; *font:x-small; line-height:1.22; }
table { font-size:inherit; font:100%; }
select, input, textarea { font:99% sans-serif; }
Webkit font smoothing
This is anti-aliasing for webkit browsers, sadly only in Mac OSX. It basically makes your text render better, and make it more readable, without all the text thinning hacks that we have seen in the past. For further reading check out Tim Van Damme’s article on this.
/* maxvoltar.com/archive/-webkit-font-smoothing */
html { -webkit-font-smoothing: antialiased; }
Force scrollbar
Sometimes, pages can be shorter than the browser view-port, and when you load a page on the same site that has longer content and uses a scrollbar, content can jump side to side. By forcing a scrollbar no matter the height of our content, we stop this small, but annoying issue.
html { overflow-y: scroll; }
Formatting quoted code
This snippet simply makes the text wrap when it reaches the walls of its container, in this case, the pre tag, whilst still preserving line breaks and white space cross browser. To read up on this, have a look at this article.
pre {
padding: 15px;
white-space: pre; /* CSS2 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
}
Aligning Labels
Alignment of labels with their relevant inputs can be a horrible task to achieve in older browsers. This snippets solves that for us by making it consistent across browsers!
/* align checkboxes, radios, text inputs with their label */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
Clickable inputs
For some reason, most browsers don’t apply a pointer cursor to some clickable input’s by default to let the user now that this item is clickable, so we solve this by doing it ourselves.
/* hand cursor on clickable input elements */
label, input[type=button], input[type=submit], button { cursor: pointer; }
Screenreader access
This snippet basically gives us the best of both worlds, allowing the best usability when it comes to link outlines for both screenreaders tabbing through links, and mouse users. To learn more, read this article.
[…]
september 2010 by seancron
Copy this bookmark: