Commit 952c687f authored by David Haynes's avatar David Haynes 🙆

SASS Maps for the color palettes

- also Sass functions to access values
parent 048eeac8
Pipeline #1594 passed with stages
in 1 minute and 17 seconds
......@@ -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
......@@ -71,6 +71,7 @@ gulp.task('watch', () => {
gulp.task('http', () => {
connect.server({
root: './build/',
port: '8000',
livereload: true
});
});
......
......@@ -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>
......
// 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;
}
......@@ -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';
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment