Commit d5393b8c authored by David Haynes's avatar David Haynes

Merge branch 'master' of git.gmu.edu:srct/masonstrap

parents 695177c6 71e40c52
Pipeline #643 passed with stage
in 54 seconds
......@@ -2,53 +2,72 @@
A project of [GMU SRCT](http://srct.gmu.edu).
Masonstrap is a custom theme for bootstrap customized with GMU brand colors and elements.
It aims to easily provide any web project with Mason branding.
Masonstrap is a custom theme for bootstrap customized with GMU brand colors and
elements. It aims to easily provide any web project with Mason branding.
## Enabling Masonstrap for Your Project
<legend></legend>
All you need to do is to take _bootstrap.min.css_ and add it to the static files for your project.
This repo contains all of the necessary components to build and modify masonstrap
on your local machine. If you'd like just `masonstrap.min.css` head over to our
[pipelines page](https://git.gmu.edu/srct/masonstrap/pipelines) and download the
latest build of the css.
Additionally this link should grab you the latest css build:
https://git.gmu.edu/srct/masonstrap/builds/artifacts/master/download?job=build_css
Masonstrap bundles bootstrap 3.0 and normalize.css for you.
## Making Changes to Masonstrap
## Building Masonstrap
<legend></legend>
If you would like to make changes to values or behaviors in Masonstrap you will need to do some quick setup.
If you would like to make changes to values or behaviors in Masonstrap you will
need to do some quick setup.
Ensure node.js is installed:
1. Ensure node.js is installed:
On Ubuntu: `$ sudo apt-get install npm`
On OS X, make sure you have [Homebrew](http://brew.sh) then `$ brew install node`
On Windows, download it [here](https://nodejs.org/en/download/).
On Ubuntu: `$ sudo apt-get install npm`
On macOS, make sure you have [Homebrew](http://brew.sh) then `$ brew install node`
On Windows, download it [here](https://nodejs.org/en/download/).
and in the root directory of this project (bootswatch/) run:
2. In the root directory of this project run:
`$ npm install`
`$ npm install`
You will also need to have Grunt installed globally on your system:
3. You will also need to have Grunt installed globally on your system:
`$ npm install -g grunt-cli`
`$ npm install -g grunt-cli`
Finally, run:
4. Finally, run:
`$ grunt watch`
`$ grunt swatch:masonstrap` to have masonstrap.css and masonstrap.min.css built.
### Stylesheet test webpage
in order for Grunt to rebuild the bootstrap files.
Run:
After that, you are free to make whatever changes you like to _variables.less_ and _bootswatch.less_ and _bootstrap.min.css_ will be updated accordingly.
`grunt`
Customization
------
Bootswatch is open source and you’re welcome to modify the themes.
to spin up a local server at [http://0.0.0.0:3000](http://0.0.0.0:3000) that
will host a test webpage displaying all of the masonstrap elements styled with
your locally built css files.
## Making changes to Masonstrap
After that, you are free to make whatever changes you like to the css files in masonstrap/
and the css will be updated accordingly when `grunt swatch:masonstrap` is run. Additionally,
`grunt watch` can be run to have grunt watch masonstrap/ for any changes and auto-build
masonstrap.
Each theme consists of two LESS files. `variables.less`, which is included by default in Bootstrap, allows you to customize [these settings](http://getbootstrap.com/customize/#less-variables). `bootswatch.less` introduces more extensive structural changes.
Masonstrap consists of two LESS files. `variables.less`, which is included by default
in Bootstrap, allows you to customize [these settings](http://getbootstrap.com/customize/#less-variables).
`bootswatch.less` introduces more extensive structural changes.
These files are also available in SASS.
Check out the [Help page](http://bootswatch.com/help/) for more details on building your own theme.
Icon
------
......
{
"version": "3.3.7",
"themes": [
{
"name": "Masonstrap",
"description": "Easily provide any web project with Mason branding",
"thumbnail": "https://bootswatch.com/cerulean/thumbnail.png",
"preview": "https://bootswatch.com/cerulean/",
"css": "https://bootswatch.com/cerulean/bootstrap.css",
"cssMin": "https://bootswatch.com/cerulean/bootstrap.min.css",
"cssCdn": "https://maxcdn.bootstrapcdn.com/bootswatch/latest/cerulean/bootstrap.min.css",
"less": "https://bootswatch.com/cerulean/bootswatch.less",
"lessVariables": "https://bootswatch.com/cerulean/variables.less",
"scss": "https://bootswatch.com/cerulean/_bootswatch.scss",
"scssVariables": "https://bootswatch.com/cerulean/_variables.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