Skip to content

Instantly share code, notes, and snippets.

@amcgregor
Last active September 14, 2023 06:55
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save amcgregor/71c62ea2984839a9063232ed2c0adf27 to your computer and use it in GitHub Desktop.
Save amcgregor/71c62ea2984839a9063232ed2c0adf27 to your computer and use it in GitHub Desktop.
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://codepen.io/tomhodgins/post/code-that-you-just-never-ever-need-to-write formerly https://tomhodgins.hashnode.dev/code-tha…
<!DOCTYPE html><html lang=en>
<title>Page Not Found</title>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<h1>Page Not Found</h1>
<p>Sorry, but the page you were trying to view does not exist.</p>
/* "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};
}
@media (prefers-color-scheme: dark) {
// Extremely rudimentary "dark mode" support inverts foreground and background.
:root {
--theme-background: #{$theme-foreground};
--theme-foreground: #{$theme-background};
}
}
/* 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 <center>, <big>, <strike>, 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: none;
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 <body>.
cursor: default; // Eliminate all default mouse cursor customization.
}
a, button {
cursor: pointer; // Indicate ability to click as an action.
}
input:read-only, textarea:read-only, [contenteditable]:read-only {
// Above selectors scoped to prevent matching the entire page.
cursor: not-allowed; // Note how we're defining the _exceptional_ case, here.
}
:read-write {
cursor: text; // Indicate ability to manipulate as mutable text.
}
:read-write img, :read-write input, :read-write textarea {
cursor: pointer; // Images and fields aren't text, let's be careful about inline-editable ones.
}
// 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; }
}
<!DOCTYPE html><html lang=en>
<title>Your page title here.</title>
<!-- The HTML element itself is optional if not assigning additional attributes; I tend to offer localization, though. -->
<meta charset=utf-8>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta name=description content="">
<link rel=stylesheet href=base.css>
<script src=//example.com/external.js async>// This won't have DOM ready.</script>
<p>Really.</p>
<script>
// Do things requiring the DOM be ready here.
// No need for onDomReady. It's ready.
</script>
<!DOCTYPE html><html lang=en>
<title>Your page title here.</title>
<meta charset=utf-8>
<meta name=description content="">
<meta name=viewport content="width=device-width, initial-scale=1">
<meta name=theme-color content=#fafafa>
<link rel=stylesheet href=base.css>
<link rel=manifest href=site.webmanifest>
<link rel=apple-touch-icon href=icon.png>
<p>Really.</p>

Copyright © 2019-2022 Alice Bevan-McGregor.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

<!DOCTYPE html><html lang=en>
<title>Sign In — CEGID RITA</title>
<meta charset=utf-8>
<meta name=description content="">
<meta name=viewport content="width=device-width, initial-scale=1">
<meta name=theme-color content=#fafafa>
<link rel=stylesheet href=base.css>
<link rel=stylesheet href=authn.css>
<link rel=apple-touch-icon href=icon.png>
<form action=/account/authenticate method=post id=authn>
<h1>CEGID</h1>
<h2>RITA</h2>
<h3>Sign In</h3>
<dl>
<dt>Identity (User Name or E-Mail Address)</dt>
<dd><input id=identity-field name=identity autofocus placeholder="OTP, User Name, or E-Mail Address" value=""></dd>
<dt>Password</dt>
<dd><input id=password-field type=password name=password placeholder="Your Password" value=""></dd>
<dt id=authn-actions>Actions</dt>
<dd>
<nav>
<menu>
<li><a href=/account/register>Sign Up</a>
<li><a href=/account/lost>Forgot</a>
<li><input type=submit value="Sign In">
</menu>
</nav>
</dd>
</dl>
</form>
<!DOCTYPE html>
<title>Yes, really.</title>
<p>This is everything you need.
# A "template engine" generating an optimized HTML serialization.
# https://github.com/amcgregor/python-samples/blob/main/Metaprogramming/Alternate%20Class%20Instantiation.ipynb
# Based on https://github.com/marrow/tags
from html5 import html, head, title, body, p
page = html [
head [
title [ "I'm really not kidding you." ],
],
body [
p(classList={"best"}) [ "This is a complete and fully-formed HTML document." ],
],
]
print(page)
# <!DOCTYPE html>
# <title>I'm really not kidding you.</title>
# <p class=best>This is a complete and fully-formed HTML document.</p>
<!DOCTYPE html><title>What is needed…</title><p>Is way, way less markup. This is perfectly semantic and valid as a standalone HTML document with clearly defined &lt;head&gt; and &lt;body&gt; parts. Really. HTML5Boilerplate is &gt;200% larger than it needs to be.
/*
Can be seen demonstrated: https://codepen.io/amcgregor/pen/PoZoPYv?editors=1100
Even more dramatically, using a sanitized Facebook landing page: https://codepen.io/amcgregor/full/jOWObBM
*/
body { background-color: #000; color: transparent !important; font: 12px/15px "Open Sans", sans-serif; }
* { color: inherit !important; font: inherit !important; }
body > * { background-color: #111; }
body > * > * { background-color: #222; }
body > * > * > * { background-color: #333; }
body > * > * > * > * { background-color: #444; }
body > * > * > * > * > * { background-color: #555; }
body > * > * > * > * > * > * { background-color: #666; }
body > * > * > * > * > * > * > * { background-color: #777; }
body > * > * > * > * > * > * > * > * { background-color: #888; }
body > * > * > * > * > * > * > * > * > * { background-color: #999; }
body > * > * > * > * > * > * > * > * > * > * { background-color: #aaa; }
body > * > * > * > * > * > * > * > * > * > * > * { background-color: #bbb; }
body > * > * > * > * > * > * > * > * > * > * > * > * { background-color: #ccc; }
body > * > * > * > * > * > * > * > * > * > * > * > * > * { background-color: #ddd; }
body > * > * > * > * > * > * > * > * > * > * > * > * > * > * { background-color: #eee; }
body > * > * > * > * > * > * > * > * > * > * > * > * > * > * > * { background-color: #fff; }
body > * > * > * > * > * > * > * > * > * > * > * > * > * > * > * > * { background-color: #f0f; } /* Out-of-gamut! */
body > * > * > * > * > * > * > * > * > * > *:after { color: black !important; }
/* Block-Level Elements */
address, article, aside, blockquote, details, dialog, dd, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, li, main, nav, ol, p, pre, section, table, ul {
margin: 10px 0;
padding: 10px;
border: 1px solid rgba(127,127,127,0.25);
position: relative;
}
address:after, article:after, aside:after, blockquote:after, details:after, dialog:after, dd:after, div:after, dl:after, dt:after, fieldset:after, figcaption:after, figure:after, footer:after, form:after, h1:after, h2:after, h3:after, h4:after, h5:after, h6:after, header:after, hgroup:after, li:after, main:after, nav:after, ol:after, p:after, pre:after, section:after, table:after, ul:after {
position: absolute;
top: 0;
left: 0;
padding: 2px 5px;
background-color: rgba(127,127,127,0.5);
text-transform: uppercase;
font: bold 6px/1.8 "Open Sans", sans-serif;
}
/* Ones that should have some padding applied to them... */
ul { padding-left: 2em; }
address:after { content: 'address' ' #' attr(id) ' (' attr(class) ')' }
article:after { content: 'article' ' #' attr(id) ' (' attr(class) ')' }
aside:after { content: 'aside' ' #' attr(id) ' (' attr(class) ')' }
blockquote:after { content: 'blockquote' ' #' attr(id) ' (' attr(class) ')' }
details:after { content: 'details' ' #' attr(id) ' (' attr(class) ')' }
dialog:after { content: 'dialog' ' #' attr(id) ' (' attr(class) ')' }
dd:after { content: 'dd' ' #' attr(id) ' (' attr(class) ')' }
div:after { content: 'div' ' #' attr(id) ' (' attr(class) ')' }
dl:after { content: 'dl' ' #' attr(id) ' (' attr(class) ')' }
dt:after { content: 'dt' ' #' attr(id) ' (' attr(class) ')' }
fieldset:after { content: 'fieldset' ' #' attr(id) ' (' attr(class) ')' }
figcaption:after { content: 'figcaption' ' #' attr(id) ' (' attr(class) ')' }
figure:after { content: 'figure' ' #' attr(id) ' (' attr(class) ')' }
footer:after { content: 'footer' ' #' attr(id) ' (' attr(class) ')' }
form:after { content: 'form' ' #' attr(id) ' (' attr(class) ')' }
h1:after { content: 'h1' ' #' attr(id) ' (' attr(class) ')' }
h2:after { content: 'h2' ' #' attr(id) ' (' attr(class) ')' }
h3:after { content: 'h3' ' #' attr(id) ' (' attr(class) ')' }
h4:after { content: 'h4' ' #' attr(id) ' (' attr(class) ')' }
h5:after { content: 'h5' ' #' attr(id) ' (' attr(class) ')' }
h6:after { content: 'h6' ' #' attr(id) ' (' attr(class) ')' }
header:after { content: 'header' ' #' attr(id) ' (' attr(class) ')' }
hgroup:after { content: 'hgroup' ' #' attr(id) ' (' attr(class) ')' }
li:after { content: 'li' ' #' attr(id) ' (' attr(class) ')' }
main:after { content: 'main' ' #' attr(id) ' (' attr(class) ')' }
nav:after { content: 'nav' ' #' attr(id) ' (' attr(class) ')' }
ol:after { content: 'ol' ' #' attr(id) ' (' attr(class) ')' }
p:after { content: 'p' ' #' attr(id) ' (' attr(class) ')' }
pre:after { content: 'pre' ' #' attr(id) ' (' attr(class) ')' }
section:after { content: 'section' ' #' attr(id) ' (' attr(class) ')' }
table:after { content: 'table' ' #' attr(id) ' (' attr(class) ')' }
ul:after { content: 'ul' ' #' attr(id) ' (' attr(class) ')' }
/* Inline Elements
a, abbr, acronym, b, bdi, bdo, big, cite, code, data, datalist, del, dfn, em, i, img, input, ins, kbd, label, mark, meter, output, picture, progress, q, ruby, s, samp, slot, small, span, strong, sub, sup, time, u, tt, var, wbr
*/
a, abbr, acronym, b, bdi, bdo, big, cite, code, data, datalist, del, dfn, em, i, img, input, ins, kbd, label, mark, meter, output, picture, progress, q, ruby, s, samp, slot, small, span, strong, sub, sup, time, u, tt, var, wbr {
display: inline-block;
position: relative;
padding: 5px;
box-decoration-break: clone;
}
a:after, abbr:after, acronym:after, b:after, bdi:after, bdo:after, big:after, cite:after, code:after, data:after, datalist:after, del:after, dfn:after, em:after, i:after, img:after, input:after, ins:after, kbd:after, label:after, mark:after, meter:after, output:after, picture:after, progress:after, q:after, ruby:after, s:after, samp:after, slot:after, small:after, span:after, strong:after, sub:after, sup:after, time:after, u:after, tt:after, var:after, wbr:after {
position: absolute;
top: 0;
left: 0;
padding: 2px 5px;
background-color: rgba(0,0,0,.5);
text-transform: uppercase;
font: bold 6px/1.8 "Open Sans", sans-serif;
}
a:after { content: 'a' }
abbr:after { content: 'abbr' }
acronym:after { content: 'acronym' }
b:after { content: 'b' }
bdi:after { content: 'bdi' }
bdo:after { content: 'bdo' }
big:after { content: 'big' }
cite:after { content: 'cite' }
code:after { content: 'code' }
data:after { content: 'data' }
datalist:after { content: 'datalist' }
del:after { content: 'del' }
dfn:after { content: 'dfn' }
em:after { content: 'em' }
i:after { content: 'i' }
img:after { content: 'img' }
input:after { content: 'input' }
ins:after { content: 'ins' }
kbd:after { content: 'kbd' }
label:after { content: 'label' }
mark:after { content: 'mark' }
meter:after { content: 'meter' }
output:after { content: 'output' }
picture:after { content: 'picture' }
progress:after { content: 'progress' }
q:after { content: 'q' }
ruby:after { content: 'ruby' }
s:after { content: 's' }
samp:after { content: 'samp' }
slot:after { content: 'slot' }
small:after { content: 'small' }
span:after { content: 'span' }
strong:after { content: 'strong' }
sub:after { content: 'sub' }
sup:after { content: 'sup' }
time:after { content: 'time' }
u:after { content: 'u' }
tt:after { content: 'tt' }
var:after { content: 'var' }
wbr:after { content: 'wbr' }
/* Clean Up a Bit */
:first-child {
margin-top: 0 !important;
margin-left: 0 !important;
}
:last-child {
margin-bottom: 0 !important;
margin-right: 0 !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment