The CSS is generated from Bootstrap's source. Customized Bootstrap features have their Less files copied to the
src/styles/bootstrap
folder. After changes to the .less
files are made, a Grunt task is run to build the new .css
file (builds to dist/css/
folder).
Non-Bootstrap styles are in the src/styles/ualib.less
file. This file is build to CSS and concatenated with the Bootstrap .less
files.
The styleguide is generated from comments in the .less
files using kss-node.
Comments added the overridden Bootstrap .less
files, using the kss style doc format generate the styleguide pages.
You need Node.js to use the tools that build the CSS and the Styleguide. Download the proper Node.js package from their download page.
After Node.js is installed, then you need to install Grunt.js and Bower. To do so, run the following commands:
npm install -g grunt-cli
npm install -g bower
If you haven't used [grunt][] before, be sure to check out the [Getting Started][] guide.
From the same directory the repository's [Gruntfile][Getting Started] and [package.json][], run the following command:
npm install
Then, from the same directory as the bower.json file, run the following commands to install Bootstrap:
bower install
- Copy the appropriate
.less
files from thebower_components/bootstrap/less
directory (generated from thebower install
) to thesrc/styles/bootstrap
directory. - Edit the
.less
file you just copied.
If copying a less
file that already exists in src/styles/bootstrap
, be sure to preserve any style comment blocks that end with Styleguide x.x.x
. Otherwise, that documentation will be erased from the styelgudie!
Edit the src/styles/ualib.less
file.
Once the dependencies are installed, you can build the CSS by running the following command:
grunt css
The build css file(s) will be placed in the dist/css
folder.
First, you'll need to install kss-node by running the following command:
npm install kss
Now you can build the styleguide (and CSS) running the default
grunt command:
grunt
or
grunt default