SASS Maps for the color palettes

- also Sass functions to access values

SASS Maps for the color palettes
- also Sass functions to access values
952c687f · David Haynes · 048eeac8 · 952c687f · 952c687f · 952c687f
Verified Commit 952c687f authored Sep 22, 2017 by David Haynes 🙆
5 changed files
--- a/README.md
+++ b/README.md
@@ -17,7 +17,7 @@ You can find information about how to use bootstrap in their official documentat

 You can download the latest version of Masonstrap at the following URL:

-[https://git.gmu.edu/srct/masonstrap/builds/artifacts/master/download?job=build](https://git.gmu.edu/srct/masonstrap/builds/artifacts/master/download?job=build)
+[https://git.gmu.edu/srct/masonstrap/-/jobs/artifacts/master/download?job=build](https://git.gmu.edu/srct/masonstrap/-/jobs/artifacts/master/download?job=build)

 Included is the minified CSS for masonstrap, as well as other required static
 files such as JS dependencies and fonts.
@@ -37,4 +37,17 @@ files such as JS dependencies and fonts.

        sudo npm install -g gulp-cli

+4. Build Masonstrap
+
+        gulp build
+
 ## Local development
+
+You can spin up a development server with:
+
+        gulp
+
+Head to [127.0.0.1:8080](127.0.0.1:8080) to view!
+
+Any changes made in `src/` are automatically applied to the dev server. DO NOT
+EDIT IN `build/`, changes WILL NOT be committed.
\ No newline at end of file
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -71,6 +71,7 @@ gulp.task('watch', () => {
 gulp.task('http', () => {
  connect.server({
    root: './build/',
+    port: '8000',
    livereload: true
  });
 });

--- a/src/html/index.html
+++ b/src/html/index.html
@@ -28,7 +28,7 @@
    <!--<meta name="twitter:image" content="http://srct.gmu.io/masonstrap/assets/img/masonstrap.png">-->

    <!-- Title -->
-    <title>Masonstrap &bull; Home</title>
+    <title>Masonstrap 4 &bull; Home</title>

    <!-- Load in static content -->
    <link rel="icon" href="/img/favicon.ico" sizes="16x16">
@@ -36,6 +36,7 @@
  </head>

  <body>
+    <button type="button" class="btn btn-primary">Primary</button>
  </body>

  <footer>

--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
 // Masonstrap 4.0 Variables

-// PRIMARY PALETTE -- SIGNATURE COLORS
+// Global Bootstrap Options Overrides ------------------------------------------
+$enable-shadows: true;
+$enable-gradients: true;

-/*
-    Mason Green is a cool color that can represent nature, prosperity, renewal,
-    growth, calm, and strength. Many of these attributes tie in with the themes
-    and tone of the wording in the Message Map. The color may be used for either
-    large areas of color or as an accent color.
-*/
-$mason_green: #006633;
+// Mason Branding Colors -------------------------------------------------------
+
+$primary-palette: ( 
+  // The color may be used for either large areas of color or as an accent
+  // color.
+  mason-green: #006633,
+  // It should be used primarily as an accent color and, with very rare
+  // exception, never as a type color.
+  mason-gold: #FFCC33  
+);
+
+// Get a key from the primary-palette map
+@function get-primary-palette($key) {
+  @if map-has-key($primary-palette, $key) {
+    @return map-get($primary-palette, $key);
+  }
+
+  @warn "Unknown `#{$key}` in $primary-palette.";
+  @return null;
+}

 /*
-    Mason Gold is a very bold warm color that can represent optimism,
-    enthusiasm, fun, clarity, and confidence — again many of the attributes
-    described in the message map. Because it is such a dominant color, with few
-    exceptions, a little Mason Gold goes a long way. The color is very effective
-    used solely or with Mason green on publications and merchandise targeted at
-    enhancing school spirit. Otherwise, it should be used primarily as an accent
-    color and, with very rare exception, never as a type color.
+  The universal palette colors work well as accent colors or as subtle
+  backgrounds behind typography or graphics. Darker colors may be used behind
+  light-colored typography. Screens or tints of the supporting colors may be
+  used to achieve the desired effect but should be used cautiously, as
+  screening certain colors may result in undesirable pastels.
 */
-$mason_gold: #FFCC33;
+$universal-palette: (
+  dark-turqiose: #00909E,
+  medium-slate-blue: #425195,
+  cardinal-red: #AC1D37,
+  bright-green: #81902B,
+  dark-goldenrod: #9D7F00,
+  tangerine: #F7941E
+);
+
+// Get a key from the universal-palette map
+@function get-universal-palette($key) {
+  @if map-has-key($universal-palette, $key) {
+    @return map-get($universal-palette, $key);
+  }

-// DEFAULT => PRIMARY + UNIVERSAL SUPPORTING COLORS
+  @warn "Unknown `#{$key}` in $universal-palette.";
+  @return null;
+}

 /*
-    The secondary palette colors work well as accent colors or as subtle
-    backgrounds behind typography or graphics. Darker colors may be used behind
-    light-colored typography. Screens or tints of the supporting colors may be
-    used to achieve the desired effect but should be used cautiously, as
-    screening certain colors may result in undesirable pastels.
+  The neutral palette can stand alone or be used to complement any of
+  the other color palettes. A neutral tone is also a great bridge to drop between two colors from one of
+  the other palettes. Using two strong colors from one of the other palettes
+  with a neutral gives you flexibility without color overload.
 */
+$neutral-palette: (
+  light-gray: #D1D3D5,
+  exploratory-gray: #A9A0AD,
+  observatory-gray: #87908F,
+  light-taupe-tile: #CCC288,
+  foundation-stone: #A39382,
+  statue-bronze: #A39382,
+  mason-tan: #E4E6D7,
+  southside-glass: #a0c9c1,
+  school-of-art-stone: #D8D8C1
+);
+
+// Get a key from the neutral-palette map
+@function get-neutral-palette($key) {
+  @if map-has-key($neutral-palette, $key) {
+    @return map-get($neutral-palette, $key);
+  }
+
+  @warn "Unknown `#{$key}` in $neutral-palette.";
+  @return null;
+}
--- a/src/scss/masonstrap.scss
+++ b/src/scss/masonstrap.scss
@@ -6,11 +6,11 @@
 * license: MIT (https://git.gmu.edu/srct/masonstrap/raw/master/LICENSE)
 */

-// Load in FA 4
-@import '../../node_modules/font-awesome/scss/font-awesome.scss';
-// Load in bootstrap 4
-@import '../../node_modules/bootstrap/scss/bootstrap.scss';
 // Load in variable overwrites
 @import '_variables.scss';
 // Load in component overwrites
 @import '_components.scss';
+// Load in FA 4
+@import '../../node_modules/font-awesome/scss/font-awesome.scss';
+// Load in bootstrap 4
+@import '../../node_modules/bootstrap/scss/bootstrap.scss';