Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A simpler approach to CSS styling using just one default style plus one alternative.
/* CSS Custom Properties */
:root {
--font-family-default: 'Merriweather', serif;
--font-family-alt: 'Merriweather Sans', sans-serif;
--font-color-default: #b1a18;
--font-color-alt: #f5f5f3;
--font-link-default: #a62339;
--font-link-alt: #a62339;
--font-size-default: 1rem;
--font-size-small: .889rem;
--font-size-medium: 1.424rem;
--font-size-large: 2.027rem;
/* Major-third typographic scale
--font-size-small: .8rem;
--font-size-medium: 1.953rem;
--font-size-large: 3.052rem;
*/
/* Perfect fourth typographic scale
--font-size-small: .75rem;
--font-size-medium: 1.777rem;
--font-size-large: 3.157rem;
*/
/* Perfect fifth typographic scale
--font-size-small: .667rem;
--font-size-medium: 2.25rem;
--font-size-large: 5.063rem;
*/
--font-weight-default: 400;
--font-weight-alt: 700;
--lineheight-text-default: 1.5;
--lineheight-text-alt: 1.3;
--color-brand: #a62339;
--color-accent: #1b7ca6;
--color-background-default: #fff;
--color-background-alt: #100111f;
--color-base-default: #f5f5f3;
--color-base-alt: #1b7ca6;
--color-border-default: #1b1a18;
--color-border-alt: #1b7492;
--border-radius-default: .5rem;
--border-radius-alt: 1rem;
--border-width-default: 1px;
--border-width-alt: 3px;
--duration-default: .25s;
--duration-alt: .5s;
--spacing-default: 1.5rem;
--spacing-small: .75rem;
--spacing-large: 3rem;
}
[data-theme="alt"] {
/* Alterative Custom Properties */
}
@media (prefers-color-scheme: dark) {
/* Dark mode Custom Properties */
}
/* Viewport (Critical: All) */
@-ms-viewport {
width: device-width; }
@-o-viewport {
width: device-width; }
@viewport {
width: device-width; }
/* Selection styles (Critical: All) */
::-moz-selection {
background-color: var(--color-base-default);
text-shadow: none; }
::selection {
background-color: var(--color-base-default);
text-shadow: none; }
/* Style scrollbars for iOS and Mac OS (Critical: All) */
::-webkit-scrollbar {
height: 6px;
width: 6px; }
::-webkit-scrollbar-thumb {
background-color: var(--color-brand);
border-radius: 0; }
::-webkit-scrollbar-track {
margin: var(--spacing-small) 0;
background-color: var(--color-base);
border-radius: 12px; }
/* Add space above :target elements (Critical: All) */
[id] {
scroll-margin-top: var(--spacing-large); }
/* Hide elements visually (Critical: All) */
.sr-only {
position: absolute;
margin: -1px;
padding: 0;
height: 1px;
width: 1px;
overflow: hidden;
border: 0;
-webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
white-space: nowrap; }
/* HTML and body (Critical: All) */
html {
-webkit-text-size-adjust: 100%;
overflow-x: hidden;
scroll-behavior: smooth; }
@media screen and (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
body {
margin: 0;
padding: 5px;
min-height: 100vh;
background-color: var(--color-background);
color: var(--color-text-default);
font-family: var(--font-family-default);
font-feature-settings: liga 1;
font-weight: var(--font-weight-default);
line-height: var(--lineheight-text-default); }
/* Import webfonts (Critical: All) */
@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@400;700&family=Merriweather:wght@400;700&display=swap');
/* @font-face {
font-display: fallback;
font-family: var(--font-family-default);
font-style: normal;
font-weight: var(--font-weight-default);
src:url(FONT-FILE_URL) format("woff2"),
url(FONT-FILE_URL) format("woff"); }
*/
/* Anchors (Critical: All) */
a, a:visited {
color: var(--font-link-default);
text-decoration-color: var(--font-link-default);
text-decoration-thickness: .075em;
text-underline-offset: .09em;
transition: all var(--duration-default) ease; }
a:focus {
color: var(--font-link-alt);
outline: thin dotted; }
a:visited {
color: var(--font-link-default); }
a:hover {
color: var(--font-link-alt); }
a:hover,a:active {
outline: 0; }
a:link {
transition: color var(--duration-default) ease; }
a:not([class]) {
-webkit-text-decoration-skip: ink;
text-decoration-skip: ink; }
/* Headlines (Critical: All) */
h1, h2, h3, h4, h5, h6 {
margin: 0 0 var(--spacing-default);
font-family: var(--font-family-default);
font-style: normal;
font-weight: var(--font-weight-alt);
letter-spacing: .025em;
line-height: var(--lineheight-text-alt); }
h1 {
font-size: var(--font-size-large); }
h2, h3 {
font-size: var(--font-size-medium); }
h4, h5, h6 {
font-size: var(--font-size-default); }
/* Paragraphs (Critical: All) */
p {
margin: 0;
font-size: var(--font-size-default);
line-height: var(--lineheight-text-default);
orphans: 3; }
p + p:not([class]) {
text-indent: 2ch; }
p:last-child:only-child {
margin-bottom: 0; }
/* Dropcap paragraph (Critical: All) */
@supports not (initial-letter:1) {
.dropcap::first-letter {
float: left;
padding-top: 6px;
padding-right: 8px;
padding-left: 0;
font-family: var(--font-family-default);
font-size: 5rem;
line-height: 4.25rem;
color: var(--color-brand); }
}
@supports (initial-letter:2) {
.dropcap::first-letter {
initial-letter: 2; }
}
@media screen and (min-width:70em) {
@supports (initial-letter:3) {
.dropcap::first-letter {
initial-letter: 3; }
}
}
/* Large paragraphs (Critical: All) */
.standfirst {
font-size: var(--font-size-medium);
text-transform: uppercase; }
.lede {
font-size: var(--font-size-medium); }
/* Small paragraphs (Critical: All) */
.secondary {
font-size: var(--font-size-small); }
.tertiary {
font-size: var(--font-size-small); }
/* Block quotes (Critical: All) */
blockquote {
margin: var(--spacing-default) 0;
padding: 0; }
blockquote p {
font-family: var(--font-family-alt);
font-style: normal; }
blockquote cite {
display: block;
padding-top: var(--spacing-default);
font-size: var(--font-size-small); }
blockquote.alt p {
/* Text styles */
}
blockquote.alt cite {
text-align: right;
/* Text styles */
}
/* Lists (Critical: All) */
ol, ul {
list-style-type: none;
margin-top: var(--spacing-default);
margin-bottom: var(--spacing-default);
margin-left: 0;
padding-left: 0;
font-size: var(--font-size-default); }
ol li {
margin-bottom: var(--spacing-default);
margin-left: -1rem;
line-height: var(--lineheight-text-default); }
ol li:before {
margin-right: var(--spacing-default);
color: var(--font-color-default); }
ul li:before {
content: "• ";
color: var(--color-brand); }
ul[class*="alt-"] li:before {
content: "";
display: none; }
/* Inline list items (Critical: All) */
.alt--inline li {
display: inline-block;
margin-bottom: var(--spacing-default); }
.alt--inline li:not(:last-child) {
margin-right: var(--spacing-default); }
/* Unstyled list items (Critical: All) */
.alt--unstyled { }
/* Text styles (Critical: All) */
abbr[title] {
border-bottom: var(--border-width-default) dotted var(--color-border-default);
cursor: help; }
[contenteditable] {
cursor: pointer;
cursor: text; }
dfn {
font-style : italic; }
b, strong {
font-weight: var(--font-weight-alt); }
i, em {
font-style: italic; }
pre {
white-space : pre;
white-space : pre-wrap;
word-wrap : break-word;
font-family: inherit; }
small {
font-size: var(--font-size-small);
font-style: normal; }
.display {
font-size: var(--font-size-large); }
.small {
font-size: var(--font-size-small); }
/* Figures (Critical: All) */
figure {
margin: var(--spacing-default) 0; }
figure img {
margin-bottom: var(--spacing-default); }
figcaption {
font-size: var(--font-size-small); }
figure.alt figcaption {
padding-right: var(--spacing-large);
/* Text styles */
}
/* Images (Critical: All) */
img {
border-width: 0;
content-visibility: auto;
max-width: 100%;
vertical-align: middle;
width: 100%; }
img[width], img[height] {
max-width: none; }
img.alt {
border: var(--border-width-default) solid var(--color-border-default);
/* Radius styles */
/* Shadow styles */
}
/* Forms (Critical: All) */
form {
margin: 0 0 var(--spacing-default) 0;
padding: 0; }
fieldset {
margin: 0 0 var(--spacing-default) 0;
padding: 0;
border-width: 0; }
label {
margin: 0;
font-weight: var(--font-weight-alt);
color: var(--font-color-default); }
[type="email"],
[type="number"],
[type="password"],
[type="text"],
textarea {
-webkit-appearance: none;
appearance: none;
display: block;
margin-bottom: var(--spacing-default);
width: 100%;
background-color: var(--color-base-default);
border: var(--border-width-default) solid var(--color-border-default);
border-radius: var(--border-radius-default);
font-size: var(--font-size-default);
font-family: var(--font-family-default);
color: var(--font-color-default); }
textarea {
min-height: 12vh;
resize: vertical; }
/* Rules (Critical: All) */
hr {
border: 0;
border-bottom: var(--border-width-default) solid var(--color-border-default);
clear: both;
display: block;
height: 1px;
margin: var(--spacing-default) 0;
padding: 0; }
hr.alt {
border-bottom-width: var(--border-width-alt); }
hr.alt--spacer {
border-bottom-width: 0; }
/* Tables (Critical: All) */
table {
display: inline-block;
margin: 0 0 var(--spacing-default);
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
background-color: transparent;
border-collapse: collapse;
border-spacing: 0;
font-family: inherit; }
th, td {
padding: var(--spacing-small) var(--spacing-default) var(--spacing-small) 0;
font-size: var(--font-size-default);
text-align: left;
vertical-align: middle; }
th {
font-family: var(--font-family-default);
font-weight: var(--font-weight-alt);
white-space: nowrap; }
td:first-of-type {
padding-left: var(--spacing-small); }
thead th, thead td {
border-bottom: var(--border-width-alt) solid var(--color-border-default); }
tbody th, tbody td {
border-bottom: var(--border-width-default) solid var(--color-border-default); }
/* Alt tables (Condensed) (Critical: All) */
table.alt th, table.alt td {
padding-top: var(--spacing-small);
padding-bottom: var(--spacing-small);
/* Text styles */
}
/* Buttons (Critical: All) */
.btn {
-webkit-appearance: none;
appearance: none;
display: inline-block;
margin: 0;
padding: var(--spacing-small);
background-color: var(--color-brand);
border-width: 0;
border-radius: var(--border-radius-default);
color: var(--color-text-default);
cursor: pointer;
font-family: var(--font-family-default);
font-size: var(--font-size-default);
font-weight: var(--font-weight-alt);
line-height: 1;
text-decoration: none;
transition: all var(--duration-default) ease; }
.btn.alt {
background-color: var(--color-base-default);
color: var(--color-text-default); }
.btn:hover {
/* Button styles */
}
.btn.alt:hover {
/* Button styles */
}
.btn.alt--block {
display: block;
width: 100%;
text-align: center; }
/* Cards (Critical: All) */
.card {
margin: var(--spacing-default) 0;
padding: var(--spacing-default);
border: var(--border-width-default) solid var(--color-border-default); }
/* Columns (Critical: All) */
@media (min-width:60em) {
.columns {
column-count: 2;
column-gap: var(--spacing-large);
column-rule: var(--border-width-default) solid var(--color-border-default); }
.columns div {
break-inside: avoid;
page-break-inside: avoid; }
.columns p {
font-size: var(--font-size-small); }
.columns.alt {
column-count: auto;
column-width: 12em; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment