Installation and Usage

Getting started quickly

1. Click the download link at topcoat.io or clone the repo
2. Reference the /css

<link rel="stylesheet" type="text/css" href="css/topcoat-mobile-light.min.css">

*Open the [styleguide](http://topcoat.io/topcoat/) for usage examples

3. Holy smokes there is no step three!

Custom builds for web hackers

1. Fork http://github.com/Topcoat/Topcoat
2. Install Node and run npm install -g grunt-cli && npm install .
3. Modify package.json to point to only the controls you need
4. Run grunt to generate your custom build
5. Fork (or write your own) controls and modify package.json point to them

Installing nightly components

So you want to install a component that is not yet in the npm registry or a newer version (nightly) that has not yet landed in the release. Here is how you can do it.

####1. Installing from Github

npm install documentation

You can change the package.json dependencies

"dependencies": {
 	"<component-name>": "git://github.com/topcoat/<component-name>"
 }

####2. Install using npm (link)

If you have the component repository already cloned these are the steps (lets use range-input as an example) :

1. (Make sure the component is up to date)
2. In the component folder $ npm link
3. In the Topcoat folder (or another folder where the component is specified as a dependency) $ npm link <component-name>

More about npm link . What you should know is that is uses the local version of the component in the node_modules folder.

Theming for the web craftsman

1. Fork http://github.com/Topcoat/theme
2. Modify various variables files (we are going to simplify this further!)
3. Modify ./topcoat-X.X.X/package.json to point to your theme and run grunt

      "theme": {
        "YOUR_GITHUB_ACCOUNT/theme": "TAG_VERSION"
      }

- make sure you push a new tag when you make modifications