My own HTML5 boilerplate sans most of the code. Because there's too much Romulus-be-damned boilerplate, and people fail to realize almost none of it is in any way needed. For more details than you probably wanted, ref: https://tomhodgins.hashnode.dev/code-that-you-just-never-ever-need-to-write-cjpblnfff00km0ys149kbttbg

Xiao-Hu Tai
2019-09-26T14:00:45Z

404.html

|
|
|
| Page Not Found
|
|
|
| Page Not Found
| Sorry, but the page you were trying to view does not exist.

base.scss

| /* "Theme" Variable Declarations */
|
| $theme-font: 12px/15px Verdana, sans-serif !default;
| $theme-background: #fff !default;
| $theme-foreground: #444 !default;
| $theme-space: 10px !default;
|
|
| :root {
| // Expose our SASS variables out to CSS, and allow for overloading through inheritance.
| --theme-font: #{$theme-font};
| --theme-background: #{$theme-background};
| --theme-foreground: #{$theme-foreground};
| --theme-space: #{$theme-space};
| }
|
|
| /* Meyers Reset / "Public Domain" / v2.0 / 20110126 / https://meyerweb.com/eric/tools/css/reset/ */
| // Modified to apply "theme"-appropriate defaults, where appropriate, and incorporate menu lists.
| // Additionally modified to omit obsolete and eliminated elements such as , , , etc.
|
| html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
| margin: 0;
| padding: 0;
| border: 0;
| font-size: 100%;
| font: inherit;
| vertical-align: baseline;
| }
|
| article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
| // HTML5 display-role reset for older browsers.
| display: block;
| }
|
| html, body {
| height: 100%;
| }
|
| body {
| font: var(--theme-font);
| color: var(--theme-foreground);
| background: var(--theme-background);
| }
|
| ol, ul, menu {
| list-style: none;
| }
|
| blockquote, q {
| quotes: none;
| cursor: text; // Indicate ability to interact with as text, e.g select.
| }
|
| blockquote:before, blockquote:after, q:before, q:after {
| content: '';
| content: none;
| }
|
| table {
| // Sensible default border rules for tables.
| border-collapse: collapse;
| border-spacing: 0;
| }
|
| * {
| font: inherit; // By default, inherit font properties all the way up to .
| cursor: default; // Eliminate all default mouse cursor customization.
| }
|
| a, button {
| cursor: pointer; // Indicate ability to click as an action.
| }
|
| input, textarea {
| cursor: text; // Indicate ability to manipulate as mutable text.
| }
|
| // Automatically eliminate conflicting margins.
| // Specifically, margins on leading and final elements which would extend "beyond" the container.
| // Correct implementation would require the margin to be applied to the container, if intentional.
| // Alternatively, applied as padding to the container instead.
|
| :first-child {
| margin-top: 0 !important;
| margin-left: 0 !important;
| }
|
| :last-child {
| margin-bottom: 0 !important;
| margin-right: 0 !important;
| }
|
| // Add back spacing between structural elements.
|
| header + *, // Content immediately following a header should be separated from that header.
| footer, // All footers should be spaced away from the section they represent.
| section + section, // Separate sections from each-other.
| * + p // Paragraphs deserve a little space from any preceeding content.
| { margin-top: var(--theme-space); }
|
|
| /* Language-Dependent Styles */
|
| :lang(en) {
| // Apply English-style quoting.
| q { quotes: '“' '”' '‘' '’'; }
|
| // Highlight other languages by not underlining the current one in navigation.
| a.lang-en { text-decoration: none; }
| }
|
| :lang(fr) {
| // Apply French-style quoting.
| q { quotes: '« ' ' »'; }
|
| // Highlight other languages by not underlining the current one in navigation.
| a.lang-fr { text-decoration: none; }
| }

basic.html

|
|
|
|
| Your page title here.
|
|
|
|
|
|
|
|
| Really.
|
|
|
| window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
| ga('create', 'UA-XXXXX-Y', 'auto'); ga('set','transport','beacon'); ga('send', 'pageview')
|
|

html5boilerplate.html

|
|
|
| Your page title here.
|
|
|
|
|
|
|
|
|
|
| Really.
|
|
|
| window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
| ga('create', 'UA-XXXXX-Y', 'auto'); ga('set','transport','beacon'); ga('send', 'pageview')
|
|

minimal.html

|
| Yes, really.
| This is everything you need.

tweet-example-corrected.html

| What is needed… Is way, way less markup. This is perfectly semantic and valid as a standalone HTML document with clearly defined and parts. Really. HTML5Boilerplate is >200% larger than it needs to be.
| <!-- From https://twitter.com/GothAlice/status/1177030060559216641