Coding style decided

public/styles/settings/colors.scss

@@ -0,0 +1,30 @@
+/*
+ *  Color Settings
+ *    Provides common color settings for use throughout the styles.
+ *
+ *  Version:
+ *    1.0.0 - 2018/05/03
+ */
+
+//Pastel Colors
+$s-color--pastel-pink: #FCE9F1;
+$s-color--pastel-green: #E9FCF4;
+$s-color--pastel-orange: #FEECE8;
+$s-color--pastel-blue: #E8FAFE;
+$s-color--pastel-purple: #ECE8FE;
+
+//Swatch Colors
+$s-color--swatch-red: #FFB3BA;
+$s-color--swatch-orange: #FFDFBA;
+$s-color--swatch-yellow: #FFFFBA;
+$s-color--swatch-green: #BAFFC9;
+$s-color--swatch-blue: #BAE1FF;
+
+//Hyperlink Colors
+$s-color--link: #FC78DE;
+$s-color--link-hover: lighten($s-color--link, 10%);
+
+//Navbar Colors
+$s-color--navbar: rgba(0, 0, 0, 0.7);
+$s-color--navbar__text: white;
+$s-color--navbar__text-hover: #CCC;

public/styles/settings/responsive.scss

@@ -0,0 +1,43 @@
+/*
+ *  Responsive Settings
+ *    Provides settings for responsive tools
+ *
+ *  Dependencies:
+ *
+ *  Version:
+ *    1.0.1 - 2018/01/31
+ */
+
+//Pixel size definitions
+$s-screen-xsmall: 500px;
+$s-screen-small: 750px;
+$s-screen-medium: 1000px;
+$s-screen-large: 1250px;
+$s-screen-xlarge: 1500px;
+
+//Size definitions
+$s-xsmall: 'xsmall';
+$s-small: 'small';
+$s-medium: 'medium';
+$s-large: 'large';
+$s-xlarge: 'xlarge';
+
+//Groups
+$s-xsmall-up: 'xsmall-up';
+$s-small-up: 'small-up';
+$s-medium-up: 'medium-up';
+$s-large-up: 'large-up';
+
+//Breakpoints
+$s-breakpoints: (
+  $s-xsmall     '(max-width: #{$s-screen-small - 1})',
+  $s-small      '(min-width: #{$s-screen-small}) and (max-width: #{$s-screen-medium - 1})',
+  $s-medium     '(min-width: #{$s-screen-medium}) and (max-width: #{$s-screen-large - 1})',
+  $s-large      '(min-width: #{$s-screen-large}) and (max-width: #{$s-screen-xlarge - 1})',
+  $s-xlarge     '(min-width: #{$s-screen-xlarge})',
+
+  $s-xsmall-up  '(min-width: #{$s-screen-xsmall})',
+  $s-small-up   '(min-width: #{$s-screen-small})',
+  $s-medium-up  '(min-width: #{$s-screen-medium})',
+  $s-large-up   '(min-width: #{$s-screen-large})'
+);

public/styles/settings/typography.scss

@@ -0,0 +1,16 @@
+/*
+ *  Typography Settings
+ *    Provides the type variables for use throughout the theme
+ *
+ *  Version:
+ *    1.0.0 - 2018/02/23
+ */
+
+$s-font--stack-default: 'Nanum Gothic', Arial, Helvetica, sans-serif;
+$s-font--stack-headings: 'Bitter', serif;
+$s-font--size--base: 16px;
+
+//Font Styles
+%s-font--style-button {
+  font-family: $s-font--stack-headings;
+}