IMU-Drew / ualib-styles

Styles and styleguide for UA Libraries Website.

UA Libraries Style and Styleguide

Styles

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.

Styleguide

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.

Getting Started

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

Building the CSS

Install the dependencies and packages

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

Overriding Bootstrap Styles

1. Copy the appropriate .less files from the bower_components/bootstrap/less directory (generated from the bower install) to the src/styles/bootstrap directory.
2. 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!

Adding Custom Styles

Edit the src/styles/ualib.less file.

Build the CSS with Grunt

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.

Build the Styleguide

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