Code References
Dec 24 2020
Table of Contents
My personal list of code references.
Links
- A Complete Guide to Flexbox — the most perfect flexbox reference
- A Guide to Learning CSS Grid — grid reference
- Unicode Code Convertor
- Git Commands Cheatsheet
HTML Skeleton
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Title</title>
<link rel="stylesheet" href="/css/style.css">
<link rel="shortcut icon" type="image/png" href="/img/favicon.png">
<meta name="robots" content="noindex">
</head>
<body>
</body>
</html>
CSS Snippets
I currently don't use any kind of CSS reset. Some common snippets I do use are:
Sass mixin for media queries
/* Viewports smaller than $breakpoint */
@mixin max($breakpoint) {
@media (max-width: $breakpoint) {
@content;
}
}
/* Viewports larger than $breakpoint */
@mixin min($breakpoint) {
@media (min-width: $breakpoint) {
@content;
}
}
/* Example usage:
use CSS Grid if viewport is 800px or larger */
section {
@include min(800px) {
display: grid;
}
}
Starter CSS
Intended to be used to start new projects. I just made this up when writing this page, so not sure whether or not this is actually useful or not!
:root {
--bg: #1d1c2a;
--text: #dbe1e8;
--pink: #ff96d3;
--mint: #90DABE;
--accent: var(--pink);
--complement: var(--mint);
--font-body: sans-serif;
--font-heading: georgia, serif;
--font-mono: monospace;
}
@media screen and (min-width: 700px) {
:root {
--font-size: 22px;
}
}
@media screen and (max-width: 699px) {
:root {
--font-size: 18px;
}
}
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: var(--font-size);
line-height: 1.45;
margin: 0;
}
a {
color: var(--accent);
}