“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.

As such, 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.

1. * { outline: none; }
2. /* removes outlines from linked elements (for older browsers and IE) */
3. html { font-size: 62.5%; }
4. /* sets the base size of the fonts, allowing for setting
5. font size through rem units, below */
6. html, body { min-height: 100%; background: #fff; color: #000; }
7. /* sets the body height of the browser, so that
8. backgrounds and div heights work correctly.
9. color and background will almost certainly be altered;
10. they are just placeholders */
11. body { font-size: 1.4rem; }
12. /* sets the base font size for the document,
13. equivalent to 14 pixels in height */
14. body, ul, ol, dl { margin: 0; }
15. article, aside, audio, footer, header, nav, section, video, hgroup
16. { display: block; }
17. /* ensures that older browsers will display HTML5 elements correctly */
18. h1 { font-size: 1.4rem; }
19. /* begins to set up font sizes relative to base rem –
20. h1 has been used as an example */
21. p { -ms-word-break: break-all; word-break: break-all; word-break: break-word;
22. -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto;
23. hyphenate: auto; }
24. /* sets hyphenation by default on paragraphs; paragraphs
25. (and everything else) will inherit 1.4rem size from body) declaration */
26. textarea { resize: vertical; }
27. /* changes textarea resizing from "both" (UA default)
28. to vertical only */
29. table { border-collapse: collapse; }
30. td { padding: .5rem; }
31. /* causes tables (used for the right purpose) to
32. actually look like tables */
33. img { border: none; max-width: 100%; }
34. /* removes outlines from linked images (for older
35. browsers and IE), sets up images for responsive design layout */
36. input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner
37. {border : 0px; }
38. /* removes the inner border effect from
39. focused buttons for form elements in Firefox */
40. input[type="search"] { -webkit-appearance: textfield; }
41. input[type="submit"] { -webkit-appearance:none; }
42. /* removes the OS X appearance from HTML5 search inputs and
43. submit buttons when viewed in Safari or Mobile Safari */
44. input:required:after { color: #f00; content: " *"; }
45. /* sets up required form fields with the conventional
46. following red asterix */
47. input[type="email"]:invalid { background: #f00; }
48. /* causes a visual alert in browsers that do
49. client-side checking of HTML5 email field
50. – this may already be the default in some browsers. */
51. .right { float: right; margin-left: 2rem; clear: right; }
52. .left { float: left; margin-right: 2rem; clear: left; }
53. /* allows a quick shortcut for floating elements left
54. and right while avoiding the “float quirk” problem */