02 styleguide option1

Option 1. Using sass within your project. (Recommended)

In order to make use of the assets in styleguide, the repository needs to be brought into the project your working on, to do this we use a tool called Bower.

Once the assets have been pulled down locally, we use another tool called Grunt, which can perform various tasks on all assets in the project, including those pulled down via bower.

You will also need npm installed on your machine, which is used to install the required tools.

1. Install node (includes grunt task runner)

2. Install bower (includes USW style resources)

3. Add grunt tasks (rails version)

4. Add grunt tasks (django version)

The differences between rails and django is the location of assets.

Rails - /public/css Django - /static/media/css

Building resources.

Inside the Gruntfile.js you just created, check the paths are suitable for your project.

Create public/sass/main.scss file in your local project, and add the following:

@import “prototype.scss”;

Using terminal run the grunt task manager:

grunt

Running the above grunt command will have just created:

• public/css/main.css
• public/css/main.min.css