Responsive Website Boilerplate

About

Been doing this quite a while now, and I think I know what works best …for me. And I hope it works just as well for you.

Well, to be honest, this serves as BOTH a Boilerplate & Playground. No Libraries. No Frameworks, No Dependencies. Period. Just the basics with some common (and some not so common) layout styles. This does have a dependency for the code examples.

Yes, some of these colors may not be WCAG compliant. Fortunately, themes exist and can be used to ensure it does, in fact, provide the same experience for everyone by having a high-contrast theme, aka theme-dark, theme-light, theme-bazooka-joe.

CSS Standards & Best Practices

Just a few of the newest updates to CSS. No Sass or any other CSS pre/post-processor, library, etc., just good ol' CSS using what CSS currently provides!

With the latest, official CSS updates that have been released, modern browsers now support

variables, nesting
shorthand responsive options, excellent layout options with 
flex and grid
min(), max(), clamp()
and more!

p { color: red }

HTML5 requires a simple document type declaration like below for code and pre html tags to work.

<!DOCTYPE html>

CSS3/Sass & beyond!


/* Examples Of Some Of The Latest Additions To CSS */
:root {
  --primary-color: slateblue;
  --color1: #FAFAFA;
  --color2: #0E0E0E;
  --color3: hotpink;
  --bg1: yellow;
  --bg2: light magenta;
  --border: --primary-color;
}

body {
  color: var(--primary-color); /* CSS has variables by default?! Neato-Burrito! "Mmm, Burrito's" */
  background-color: var(--color2);
  margin: 0 auto;
}

.wrapper {
  width: clamp(768px, calc(100vw - 2rem), 1200px) /* Math functions: clamp(min-width, preferred-width, max-width) */

  section {
    background-color: var(--bg2);
    border-radius: 0.5rem;
    border: 1px solid var(--border);
    margin: 2rem 2rem 0;
    padding: 1rem;

    a {
      display: inline-block;
      color: var(--color3);
    }
  }
}

p {
  font-size: 1rem;
  color: var(--color2);

  &:before {
    content: 'foo';
    display: block;
  }
}

JavaScript Standards & Best Practices

Same goes for JavaScript. There's no React or any other JS library, framework, etc. Just good ol' Vanilla JavaScript following the latest ECMAScript syntax and standards!


use strict;

let name  = "Jebidiah";
const x   = 3;

// Arrow function w/three parameters.
mutilate-by-pi = (param1, param2, param3) = {
  return (param1 * param2 * (3 * param3));
}

// Clearer examples
const hello = ["Hello", "how", "are", "you", "doing", "today?"];
combineArray = (a1, a2) => {
  return ();
}

Portfolio

Just a few of the newest updates to CSS. No Sass or any other pre/post-processor, just good ol' CSS!

With the latest, official CSS updates that have been released, modern browsers now support 

variables, nesting
, shorthand responsive options, excellent layout options with 
flex and grid
, 
min(), max(), clamp()
, and more!

Contact (eventually)