scaffolds folder structure, writes out scss framework

src/client/components/App.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { Switch, withRouter, Route } from 'react-router-dom';
+import Sidebar from 'payload/client/components/layout/Sidebar';
 
 import '../scss/app.css';
 
@@ -7,6 +8,7 @@ class App extends Component {
   render() {
     return (
       <div>
+        <Sidebar />
         <h1>Here's the main h1</h1>
       </div>
     )

src/client/components/Sidebar/index.scss

@@ -1,5 +0,0 @@
-@import '_vars';
-
-.sidebar {
-	background: $black;
-}

src/client/components/graphics/Emblem/emblem.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:#333;}.cls-2{fill:#666;}</style></defs><title>emblem</title><path class="cls-1" d="M49.12.26l-43,26.92a1.64,1.64,0,0,0-.79,1.52V71.41a1.7,1.7,0,0,0,.79,1.43l43,26.9a1.62,1.62,0,0,0,1.77,0l43-26.9a1.69,1.69,0,0,0,.78-1.43V28.7a1.61,1.61,0,0,0-.78-1.41l-43-27A1.62,1.62,0,0,0,49.12.26ZM85.64,68.9,51.05,90.66a1.94,1.94,0,0,1-2.07,0L14.23,68.9a1.92,1.92,0,0,1-.91-1.64V32.74a1.92,1.92,0,0,1,.91-1.64L49,9.34a1.94,1.94,0,0,1,2.07,0L85.77,31.1a1.9,1.9,0,0,1,.92,1.64V67.26a1.9,1.9,0,0,1-.92,1.64Z"/><path class="cls-1" d="M50,53.56v25.6a1.52,1.52,0,0,0,2.32,1.28l24.9-15.66a2.44,2.44,0,0,0,1.12-2V37.15A2.2,2.2,0,0,0,78,36Z"/><path class="cls-2" d="M77.22,35.14l-.34-.21-25.6-16a2.46,2.46,0,0,0-2.61,0L28.5,31.59,24,34.38a1.73,1.73,0,0,0-.55,2.38,1.8,1.8,0,0,0,.55.55L33,42.92,50,53.59,78,36A2.32,2.32,0,0,0,77.22,35.14Z"/></svg>

src/client/components/graphics/Emblem/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import './index.css';
+
+export default () => {
+    return (
+        <svg className="emblem" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+          <title>Payload Emblem</title>
+          <path className="cls-1" d="M49.12.26l-43,26.92a1.64,1.64,0,0,0-.79,1.52V71.41a1.7,1.7,0,0,0,.79,1.43l43,26.9a1.62,1.62,0,0,0,1.77,0l43-26.9a1.69,1.69,0,0,0,.78-1.43V28.7a1.61,1.61,0,0,0-.78-1.41l-43-27A1.62,1.62,0,0,0,49.12.26ZM85.64,68.9,51.05,90.66a1.94,1.94,0,0,1-2.07,0L14.23,68.9a1.92,1.92,0,0,1-.91-1.64V32.74a1.92,1.92,0,0,1,.91-1.64L49,9.34a1.94,1.94,0,0,1,2.07,0L85.77,31.1a1.9,1.9,0,0,1,.92,1.64V67.26a1.9,1.9,0,0,1-.92,1.64Z"/>
+          <path className="cls-1" d="M50,53.56v25.6a1.52,1.52,0,0,0,2.32,1.28l24.9-15.66a2.44,2.44,0,0,0,1.12-2V37.15A2.2,2.2,0,0,0,78,36Z"/>
+          <path className="cls-2" d="M77.22,35.14l-.34-.21-25.6-16a2.46,2.46,0,0,0-2.61,0L28.5,31.59,24,34.38a1.73,1.73,0,0,0-.55,2.38,1.8,1.8,0,0,0,.55.55L33,42.92,50,53.59,78,36A2.32,2.32,0,0,0,77.22,35.14Z"/>
+        </svg>
+    )
+}

src/client/components/graphics/Emblem/index.scss

@@ -0,0 +1,6 @@
+.cls-1 {
+  fill:#333;
+}
+.cls-2 {
+  fill:#666;
+}

src/client/components/layout/Sidebar/index.js

@@ -1,11 +1,13 @@
 import React from 'react';
+import Emblem from 'payload/client/components/graphics/Emblem';
 
 import './index.css';
 
 export default () => {
 	return (
 		<aside className="sidebar">
+      <Emblem />
 			Testing 123
 		</aside>
 	)
-};
+};

src/client/components/layout/Sidebar/index.scss

@@ -0,0 +1,8 @@
+@import '_vars';
+
+.sidebar {
+
+  .emblem {
+    width: 100px;
+  }
+}

src/client/scss/_fonts.scss

@@ -0,0 +1,81 @@
+/////////////////////////////
+// CALIBRE
+/////////////////////////////
+
+@font-face {
+    font-family: 'calibre-web';
+    src: url('../assets/fonts/cal-regular-webfont.eot');
+    src: url('../assets/fonts/cal-regular-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../assets/fonts/cal-regular-webfont.woff2') format('woff2'),
+         url('../assets/fonts/cal-regular-webfont.woff') format('woff'),
+         url('../assets/fonts/cal-regular-webfont.ttf') format('truetype'),
+         url('../assets/fonts/cal-regular-webfont.svg#calibre_regularregular') format('svg');
+    font-weight: 400;
+    font-style: normal;
+}
+
+/////////////////////////////
+// NOE DISPLAY
+/////////////////////////////
+
+@font-face {
+    font-family: 'noe-display-web';
+    src: url('../assets/fonts/NoeDisplay-Bold.eot') format('embedded-opentype');
+    font-weight: bold;
+    font-style: normal;
+ }
+
+ @font-face {
+    font-family: 'noe-display-web';
+    src:  url('../assets/fonts/NoeDisplay-Bold.woff') format('woff'), url('../assets/fonts/NoeDisplay-Bold.ttf')  format('truetype'), url('../assets/fonts/NoeDisplay-Bold.svg#NoeDisplay-Bold') format('svg');
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'noe-display-web';
+    src: url('../assets/fonts/NoeDisplay-Bold.eot') format('embedded-opentype');
+    font-weight: normal;
+    font-style: normal;
+ }
+
+ @font-face {
+    font-family: 'noe-display-web';
+    src:  url('../assets/fonts/NoeDisplay-Bold.woff') format('woff'), url('../assets/fonts/NoeDisplay-Bold.ttf')  format('truetype'), url('../assets/fonts/NoeDisplay-Bold.svg#NoeDisplay-Bold') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+/////////////////////////////
+// GT PRESSURA MONO
+/////////////////////////////
+
+
+@font-face {
+    font-family: 'gt-pressura-web';
+    src: url('../assets/fonts/GTPressuraMono.eot') format('embedded-opentype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'gt-pressura-web';
+    src:  url('../assets/fonts/GTPressuraMono.otf')  format('opentype'),
+    url('../assets/fonts/GTPressuraMono.woff') format('woff'), url('../assets/fonts/GTPressuraMono.ttf')  format('truetype'), url('../assets/fonts/GTPressuraMono.svg#GTPressuraMono') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'gt-pressura-web';
+    src: url('../assets/fonts/GTPressura-Light.eot') format('embedded-opentype');
+    font-weight: 100;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'gt-pressura-web';
+    src:  url('../assets/fonts/GTPressura-Light.woff') format('woff'), url('../assets/fonts/GTPressura-Light.ttf')  format('truetype'), url('../assets/fonts/GTPressura-Light.svg#GTPressura-Light') format('svg');
+    font-weight: 100;
+    font-style: normal;
+}

src/client/scss/_grid.scss

@@ -0,0 +1,39 @@
+@import '_structure';
+
+/////////////////////////////
+// GRID
+/////////////////////////////
+
+// Gutter
+$gutter : rem(.5);
+$cols   : 12;
+
+/////////////////////////////
+// ROWS
+/////////////////////////////
+
+@mixin row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -#{$gutter};
+  margin-left: -#{$gutter};
+}
+
+/////////////////////////////
+// COLUMN SETUP
+/////////////////////////////
+
+@mixin gutter {
+  margin-left: $gutter;
+  margin-right: $gutter;
+}
+
+@mixin col($col) {
+  @include gutter;
+  width: calc(#{$col / $cols * 100 + %} - #{rem(1.01)});
+}
+
+@mixin push($col) {
+  margin-right: $gutter;
+  margin-left: calc(#{$col / $cols * 100 + %} + #{$gutter});
+}

src/client/scss/_queries.scss

@@ -0,0 +1,21 @@
+/////////////////////////////
+// MEDIA QUERIES
+/////////////////////////////
+
+@mixin small-break {
+  @media (max-width: #{$mobile-width}) {
+    @content;
+  }
+}
+
+@mixin mid-break {
+  @media (max-height: #{$desktop-height}), (max-width: #{$tablet-width}) {
+    @content;
+  }
+}
+
+@mixin large-break {
+  @media (max-width: #{$content-width}) {
+    @content;
+  }
+}

src/client/scss/_structure.scss

@@ -0,0 +1,116 @@
+@import '_queries';
+@import '_vars';
+
+/////////////////////////////
+// PADDING
+/////////////////////////////
+
+@mixin pad {
+  padding: $base;
+
+  @include mid-break {
+    padding: rem(.75);
+  }
+
+  @include small-break {
+    padding: rem(.5);
+  }
+}
+
+@mixin pad-x2 {
+  padding: rem(2) rem(2) rem(1);
+
+  @include mid-break {
+    padding: rem(1) rem(1) 0;
+  }
+}
+
+/////////////////////////////
+// VERTICAL PADDING
+/////////////////////////////
+
+@mixin pad-vert {
+  padding-top: $base;
+
+  @include mid-break {
+    padding-top: rem(.5);
+  }
+}
+
+@mixin pad-vert-x2 {
+  padding-top: rem(2);
+  padding-bottom: $base;
+
+  @include mid-break {
+    padding-top: $base;
+    padding-bottom: 0;
+  }
+}
+
+@mixin pad-vert-x3 {
+  padding-top: rem(3);
+  padding-bottom: rem(2);
+
+  @include mid-break {
+    padding-top: rem(2);
+    padding-bottom: $base;
+  }
+}
+
+@mixin pad-vert-x4 {
+  padding-top: rem(4);
+  padding-bottom: rem(3);
+
+  @include mid-break {
+    padding-top: rem(2);
+    padding-bottom: $base;
+  }
+}
+
+/////////////////////////////
+// MARGIN
+/////////////////////////////
+
+@mixin m {
+  margin-bottom: $base;
+
+  @include small-break {
+    margin-bottom: rem(.75);
+  }
+}
+
+@mixin m-x2 {
+  margin-bottom: rem(2);
+
+  @include mid-break {
+    margin-bottom: $base;
+  }
+
+  @include small-break {
+    margin-bottom: rem(.75);
+  }
+}
+
+@mixin m-x3 {
+  margin-bottom: rem(3);
+
+  @include mid-break {
+    margin-bottom: rem(2);
+  }
+
+  @include small-break {
+    margin-bottom: rem(1);
+  }
+}
+
+@mixin m-x4 {
+  margin-bottom: rem(4);
+
+  @include mid-break {
+    margin-bottom: rem(3);
+  }
+
+  @include small-break {
+    margin-bottom: rem(2);
+  }
+}

src/client/scss/_type.scss

@@ -0,0 +1,115 @@
+@import '_vars';
+@import '_structure';
+
+/////////////////////////////
+// HEADINGS
+/////////////////////////////
+
+%h1, %h2, %h3, %h4, %h5 {
+    font-family: $font-brand;
+    font-weight: 700;
+    color: lighten($black, 4%);
+}
+
+%jumbo {
+    font-size: rem(2.5);
+    line-height: 1;
+    margin: 0 0 rem(2);
+}
+
+%h1 {
+  margin: 0 0 rem(1.5);
+    font-size: rem(2);
+    line-height: rem(2);
+    letter-spacing: rem(.025);
+
+    @include small-break {
+        font-size: rem(1.25);
+        line-height: rem(1.25);
+    }
+}
+
+%h2 {
+    margin: 0 0 rem(1);
+    font-size: rem(1.5);
+    line-height: rem(1.75);
+    letter-spacing: rem(.02);
+
+    @include small-break {
+        font-size: rem(.85);
+        line-height: rem(.85);
+    }
+}
+
+%h3 {
+    margin: 0 0 rem(1);
+    font-size: rem(1);
+    line-height: 1.25;
+    font-weight: 500;
+
+    @include small-break {
+        font-size: rem(.65);
+        line-height: rem(.75);
+    }
+}
+
+%h4 {
+    margin: 0 0 $base;
+    font-size: rem(.75);
+    line-height: 1.5;
+}
+
+%h5 {
+    margin: 0;
+    font-size: rem(.5);
+    line-height: 1.5;
+    font-weight: 700;
+}
+
+%small {
+    margin: 0;
+    font-size: rem(.4);
+    line-height: 1.5;
+}
+
+/////////////////////////////
+// TYPE STYLES
+/////////////////////////////
+
+%label {
+    text-transform: uppercase;
+    letter-spacing: rem(.05);
+    font-size: rem(.3);
+    font-family: $font-label;
+    -webkit-font-smoothing: auto;
+
+    @include mid-break {
+        font-size: rem(.375);
+        letter-spacing: rem(.05);
+    }
+}
+
+%large-body {
+    font-size: rem(.6);
+    line-height: rem(1);
+    letter-spacing: rem(.02);
+
+    @include mid-break {
+        font-size: rem(.7);
+        line-height: rem(1);
+    }
+
+    @include small-break {
+        font-size: rem(.55);
+        line-height: rem(.75);
+    }
+}
+
+%code {
+    font-size: rem(.4);
+    color: $gray;
+
+    span {
+        color: $black;
+    }
+}

src/client/scss/app.scss

@@ -1,10 +1,97 @@
+@import '_fonts';
 @import '_vars';
+@import '_type';
+@import '_grid';
+
+/////////////////////////////
+// GLOBAL STYLES
+/////////////////////////////
+
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  height: 100%;
+}
 
 body {
-	background: purple;
-	color: white;
-
-	h1 {
-		color: black;
-	}
+  font-family: $font-body;
+  font-weight: 400;
+  color: $black;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  margin: 0;
+}
+
+html {
+  font-size: $body;
+    line-height: rem(1);
+    font-size: 20px;
+
+  @include mid-break {
+    font-size: 18px;
+    line-height: rem(1);
+  }
+
+  @include small-break {
+    font-size: 16px;
+    line-height: rem(.8)
+  }
+}
+
+::selection {
+  background: $green;
+  color: $black;
+}
+
+::-moz-selection {
+  background: $green;
+  color: $black;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+h1 {
+  @extend %h1;
+}
+
+h2 {
+    @extend %h2;
+}
+
+h3 {
+    @extend %h3;
+}
+
+h4 {
+    @extend %h4;
+}
+
+h5 {
+    @extend %h5;
+}
+
+p {
+    margin: 0 0 rem(.5);
+}
+
+ul {
+  padding-left: $base;
+    margin: 0 0 $base;
+}
+
+a {
+  text-decoration: none;
+  color: $black;
+  border-bottom: 1px solid $black;
+
+  &:hover {
+    color: $dark-green;
+    border-bottom: 1px solid $dark-green;
+  }
 }