README.md 2.4 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

3 4 5 6 7 8 9 10 11 12 13
V4 INSTRUCTIONS

- `npm install`
- `bower install`
- `sudo apt install ruby`
- `sudu gem install sass`
- `grunt swatch`
- `grunt` - opens live preview site



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

16
Masonstrap is a custom theme for bootstrap customized with GMU brand colors and
David Haynes's avatar
David Haynes committed
17
elements. It aims to easily provide any web project with Mason branding.
Thomas Park's avatar
Thomas Park committed
18

David Haynes's avatar
David Haynes committed
19 20
## Enabling Masonstrap for Your Project
<legend></legend>
Thomas Park's avatar
Thomas Park committed
21

David Haynes's avatar
David Haynes committed
22 23
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
24
[pipelines page](https://git.gmu.edu/srct/masonstrap/pipelines) and download the
David Haynes's avatar
David Haynes committed
25 26 27 28
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
29

30
Masonstrap bundles bootstrap 3.7 and normalize.css for you.
31

32

David Haynes's avatar
David Haynes committed
33
## Building Masonstrap
David Haynes's avatar
David Haynes committed
34
<legend></legend>
35

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

David Haynes's avatar
David Haynes committed
39
1. Ensure node.js is installed:
40

David Haynes's avatar
David Haynes committed
41
    On Ubuntu: `$ sudo apt-get install npm`
42

David Haynes's avatar
David Haynes committed
43
    On macOS, make sure you have [Homebrew](http://brew.sh) then `$ brew install node`
44

David Haynes's avatar
David Haynes committed
45
    On Windows, download it [here](https://nodejs.org/en/download/).
46

47
2. In the root directory of this project run:
Thomas Park's avatar
Thomas Park committed
48

David Haynes's avatar
David Haynes committed
49
    `$ npm install`
Thomas Park's avatar
Thomas Park committed
50

51
3. You will also need to have Grunt installed globally on your system:
Thomas Park's avatar
Thomas Park committed
52

David Haynes's avatar
David Haynes committed
53
    `$ npm install -g grunt-cli`
54

David Haynes's avatar
David Haynes committed
55
4. Finally, run:
56

57 58
    `$ grunt swatch:masonstrap` to build masonstrap.css and masonstrap.min.css.

David Haynes's avatar
David Haynes committed
59
### Stylesheet test webpage
60

David Haynes's avatar
David Haynes committed
61
Run:
Thomas Park's avatar
Thomas Park committed
62

David Haynes's avatar
David Haynes committed
63
`grunt`
64

65 66 67 68
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. It will also rebuild masonstrap when it detects
that changes have been made and livereload the page for you.
David Haynes's avatar
David Haynes committed
69 70

## Making changes to Masonstrap
71 72 73

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).
David Haynes's avatar
David Haynes committed
74
`bootswatch.less` introduces more extensive structural changes.
Thomas Park's avatar
Thomas Park committed
75

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

David Haynes's avatar
David Haynes committed
78 79 80 81

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