“Boilerplate” is any text that is frequently reused or repurposed. In web development, it is code that can act as the initial base layer for a project. The foundational code is then built on and modified as the site develops: Paul Irish’s HTML5 Boilerplate is a good example. CSS Boilerplate may incorporate CSS resets, but they are not the same thing.
It is important that boilerplate be built on known best practices, and that it undergo regular auditing and review; otherwise, boilerplate tends to turn into the equivalent of a house plan that always keeps the same assumptions about design and follows building codes that are 30 years out of date.
You will find that my personal boilerplate code, shown below, will evolve and develop over time. The CSS used in the boilerplate is relatively recent, with few concessions to older browsers: it assumes that the majority of users who are still using Internet Explorer are on version 9 or above, or have ChromeFrame installed. If you have any suggestions or additions for the code, please feel free to add them to the comments below.
While visitors are free to use the code, my current students should be aware that “Well, it was on the blog so I just stuck it into my code” is not a valid reason for including this boilerplate in assignments and exercises; the comments aside (which have been linked to entries in the blog, where appropriate) you should know why you are using each line, and the purpose of each declaration. This will likely not be the case until you are very close to graduating.
* {
box-sizing: border-box;
}
html, body {
min-height: 100%;
background: #fff;
color: #000;
}
/* sets the body height of the browser, so that backgrounds and div heights work correctly. Color and background will almost certainly be altered; they are just placeholders */
body {
font-size: 1.4rem;
text-rendering: optimizeLegibility;
}
/* sets the base font size for the document; turns on kerning pairs and ligatures */
body, ul, ol, dl {
margin: 0;
}
article, aside, audio,
footer, header, nav, section, video {
display: block;
}
/* ensures that older browsers will display HTML5 elements correctly */
h1 {
font-size: 1.4rem;
}
/* begins to set up font sizes relative to base rem – h1 has been used as an example */
p {
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-moz-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
/* sets hyphenation by default on paragraphs */
textarea {
resize: vertical;
}
/* changes textarea resizing from "both" (UA default) to vertical only */
table { border-collapse: collapse; }
td {
padding: .5rem;
}
/* causes tables to actually look like tables */
img {
border: none;
max-width: 100%;
}
/* removes outlines from linked images (for older browsers and IE), sets up images for responsive design layout */
input[type="submit"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner {
border : 0px;
}
/* removes the inner border effect from focused buttons for form elements in Firefox */
input[type="search"] {
-webkit-appearance: textfield;
}
input[type="submit"] {
-webkit-appearance:none;
}
/* removes the OS X appearance from HTML5 search inputs and submit buttons when viewed in Safari */
input:required:after {
color: #f00;
content: " *";
}
/* sets up required form fields with the conventional following red asterix */
input[type="email"]:invalid {
background: #f00;
}
/* causes a visual alert in browsers that do client-side checking of HTML5 email field – this may already be the default in some browsers. */
.right {
float: right;
margin-left: 2rem;
clear: right;
}
.left {
float: left;
margin-right: 2rem;
clear: left;
}
/* allows a quick shortcut for floating elements left and right while avoiding the “float quirk” problem */
sub, sup {
line-height: 0;
}
/* sets superscript and subscript text so that it doesn't throw off leading for elements in which they are included */Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
