boilerplate.css

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Universal
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* Apply styling to all elements (including their `::before` and `::after`
pseudo-elements). One common use of this selector is to apply a custom
`box-sizing`, e.g. as explained here: https://css-tricks.com/?page_id=175473 */
*, *::before, *::after {}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Root
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

:root {}
html {}
body {}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Content sectioning
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

h1, h2, h3, h4, h5, h6 {}
h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}

header {}

nav {}
nav ul, nav ol {}
nav li {}
nav a {}
nav a:visited {}
nav a:hover {}
nav a:active {}

main {}

article {}

section {}

aside {}

footer {}

address {}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Text block content
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* Overall styling, e.g. vertical spacing */
p, ol, ul, pre, blockquote, figure, hr, dl {}

p {}

ol, ul {}
ol {}
ul {}
li {}
ol ol, ol ul, ul ul, ul ol {}
li li {}

pre {}
pre code {}
pre samp {}

blockquote {}

figure {}
figcaption {}

hr {}

dl {}
dt {}
dd {}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Inline text semantics
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

a {}
a:visited {}
a:hover {}
a:active {}

strong {}
b {}

em {}
i {}

q {}
cite {}

s {}

mark {}

/* If you specify a font size, consider using the `em` unit so that it works
universally, e.g. for both `h1 small` and `p small` */
small {}
sub {}
sup {}

code {}

dfn {}
abbr {}
abbr[title] {}

var {}
kbd {}
kbd kbd {}
samp {}

u {}

data {}
time {}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Demarcating edits
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

del {}
ins {}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Embedded content
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

img {}
svg {}
video {}
canvas {}
audio {}
object {}

noscript {}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Table content
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

table {}
caption {}
col:first-child {}
thead {}
tbody {}
tfoot {}
tr {}
th {}
td {}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Forms
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

fieldset {}
fieldset:disabled {}
legend {}

form {}

label {}

::placeholder {}
:focus::placeholder {}

/* Overall styling, e.g. vertical spacing */
input, textarea, select, button {}

/* `textarea` and `input` elements that share a similar look and similar styling
capabilities */
/* - common styling */
textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"] {}
/* - individual styling */
textarea {}
input[type="text"] {}
input[type="password"] {}
input[type="email"] {}
input[type="tel"] {}
input[type="number"] {}
input[type="search"] {}
input[type="url"] {}
input[type="date"] {}
input[type="datetime-local"] {}
input[type="month"] {}
input[type="week"] {}
input[type="time"] {}
/* Tick boxes */
input[type="checkbox"], input[type="radio"] {}
input[type="checkbox"]:checked, input[type="radio"]:checked {}
input[type="checkbox"] {}
input[type="checkbox"]:checked {}
input[type="radio"] {}
input[type="radio"]:checked {}
/* Other input fields, some with limited styling capabilities */
input[type="file"] {}
input[type="color"] {}
input[type="range"] {}

select {}
optgroup {}
option {}
option:checked {}
datalist {}

button,
input[type="submit"] {}
button:disabled,
input[type="submit"]:disabled {}
button.secondary {}
button.secondary:disabled {}

/* This matches forms or form elements that are invalid *and* have been
interacted with. Note that:
1) You may need to add the `interacted` class to forms yourself
2) You may need to add the `touched` class to form fields yourself
3) `:user-invalid` is a working draft and not yet supported by most browsers
4) `:-moz-ui-invalid` is non-standard and only works in Firefox
Form validation error messages will appear (in capable browsers) regardless of
this styling. You can omit 1) and 2) and still have working forms. Perfect
example of progressive enhancement. */
/* Applies to invalid forms */
form.interacted:invalid {}
/* Applies to invalid form fields. You would need to repeat your declarations
for the following three groups of selectors individually. Browsers completely
ignore any rule that contains a selector they do not know. */
form.interacted :invalid, form .touched:invalid {}
:user-invalid {}
:-moz-ui-invalid {}

output {}

progress {}
meter {}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Interactive elements
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

details {}
details[open] {}
summary {}
details[open] summary {}

dialog {}
dialog::backdrop {}

/* Some form fields, `details`, elements with `tabindex`, and possibly other
elements can be focussed. You should use `:focus-visible` instead of `:focus`
whenever possible. As the former is not yet widely supported, you need to do it
as follows:
1) Set styling on focus
2) If browser supports `:focus-visible`, revert/unset the styling from 1)
3) If the element matches `:focus-visible`, apply the styling again */
:focus {}
:focus:not(:focus-visible) {}
:focus-visible {}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Media queries
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

@media (prefers-reduced-motion: reduce) {
}

@media (prefers-color-scheme: dark) {
}

@media (orientation: portrait) {
}

@media (orientation: landscape) {
}

@media print {
}


/*
This file evolved from Natural Selection:
https://github.com/frontaid/natural-selection
*/