Code References

Dec 24 2020
Table of Contents

    My personal list of code references.

    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);
}