README.md 2.45 KB
Newer Older
David Haynes's avatar
David Haynes committed
1
# Masonstrap (GMU bootstrap theme) [![build status](https://git.gmu.edu/srct/masonstrap/badges/master/build.svg)](https://git.gmu.edu/srct/masonstrap/commits/master)
Thomas Park's avatar
Thomas Park committed
2

David Haynes's avatar
David Haynes committed
3
A project of [GMU SRCT](http://srct.gmu.edu).
Thomas Park's avatar
Thomas Park committed
4

David Haynes's avatar
David Haynes committed
5 6
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.
Thomas Park's avatar
Thomas Park committed
7

David Haynes's avatar
David Haynes committed
8 9
## Enabling Masonstrap for Your Project
<legend></legend>
Thomas Park's avatar
Thomas Park committed
10

David Haynes's avatar
David Haynes committed
11 12 13 14 15 16 17
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
Thomas Park's avatar
Thomas Park committed
18

David Haynes's avatar
David Haynes committed
19
Masonstrap bundles bootstrap 3.0 and normalize.css for you.
20

21

David Haynes's avatar
David Haynes committed
22
## Building Masonstrap
David Haynes's avatar
David Haynes committed
23
<legend></legend>
24

David Haynes's avatar
David Haynes committed
25 26
If you would like to make changes to values or behaviors in Masonstrap you will 
need to do some quick setup.
27

David Haynes's avatar
David Haynes committed
28
1. Ensure node.js is installed:
29

David Haynes's avatar
David Haynes committed
30 31 32 33 34
    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/).
35

David Haynes's avatar
David Haynes committed
36
2. In the root directory of this project run: 
Thomas Park's avatar
Thomas Park committed
37

David Haynes's avatar
David Haynes committed
38
    `$ npm install`
Thomas Park's avatar
Thomas Park committed
39

David Haynes's avatar
David Haynes committed
40
3. You will also need to have Grunt installed globally on your system: 
Thomas Park's avatar
Thomas Park committed
41

David Haynes's avatar
David Haynes committed
42
    `$ npm install -g grunt-cli`
43

David Haynes's avatar
David Haynes committed
44
4. Finally, run:
45

David Haynes's avatar
David Haynes committed
46 47 48
    `$ grunt swatch:masonstrap` to have masonstrap.css and masonstrap.min.css built.
    
### Stylesheet test webpage
49

David Haynes's avatar
David Haynes committed
50
Run:
Thomas Park's avatar
Thomas Park committed
51

David Haynes's avatar
David Haynes committed
52
`grunt`
53

David Haynes's avatar
David Haynes committed
54 55 56 57 58 59 60 61 62 63
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.
Thomas Park's avatar
Thomas Park committed
64

David Haynes's avatar
David Haynes committed
65 66 67
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.
Thomas Park's avatar
Thomas Park committed
68

David Haynes's avatar
David Haynes committed
69
These files are also available in SASS.
Thomas Park's avatar
Thomas Park committed
70

David Haynes's avatar
David Haynes committed
71 72 73 74

Icon
------
website by Stock Image Folio from the Noun Project