Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
masonstrap
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
5
Issues
5
List
Boards
Labels
Service Desk
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Operations
Operations
Incidents
Environments
Packages & Registries
Packages & Registries
Container Registry
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
SRCT
masonstrap
Commits
952c687f
Verified
Commit
952c687f
authored
Sep 22, 2017
by
David Haynes
🙆
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
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
Changes
5
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
91 additions
and
28 deletions
+91
-28
README.md
README.md
+14
-1
gulpfile.js
gulpfile.js
+1
-0
src/html/index.html
src/html/index.html
+2
-1
src/scss/_variables.scss
src/scss/_variables.scss
+70
-22
src/scss/masonstrap.scss
src/scss/masonstrap.scss
+4
-4
No files found.
README.md
View file @
952c687f
...
...
@@ -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/build
s/artifacts/master/download?job=build
)
[
https://git.gmu.edu/srct/masonstrap/
-/jobs/artifacts/master/download?job=build
](
https://git.gmu.edu/srct/masonstrap/-/job
s/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
gulpfile.js
View file @
952c687f
...
...
@@ -71,6 +71,7 @@ gulp.task('watch', () => {
gulp
.
task
(
'
http
'
,
()
=>
{
connect
.
server
({
root
:
'
./build/
'
,
port
:
'
8000
'
,
livereload
:
true
});
});
...
...
src/html/index.html
View file @
952c687f
...
...
@@ -28,7 +28,7 @@
<!--<meta name="twitter:image" content="http://srct.gmu.io/masonstrap/assets/img/masonstrap.png">-->
<!-- Title -->
<title>
Masonstrap
•
Home
</title>
<title>
Masonstrap
4
•
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>
...
...
src/scss/_variables.scss
View file @
952c687f
// 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
;
}
src/scss/masonstrap.scss
View file @
952c687f
...
...
@@ -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'
;
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment