References

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