Skip to content

Commit

Permalink
readme: updated to mention watcher.rb
Browse files Browse the repository at this point in the history
  • Loading branch information
thomaspark committed Jun 13, 2012
1 parent a771384 commit 0d32394
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 12 deletions.
12 changes: 7 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
Bootswatch
==========

Bootswatch is a collection of free themes for your [Twitter Bootstrap](http://twitter.github.com/bootstrap/) site. Check it out at [bootswatch.com](http://bootswatch.com).
Bootswatch is a collection of free themes for [Twitter Bootstrap](http://twitter.github.com/bootstrap/). Check it out at [bootswatch.com](http://bootswatch.com).

How do I use Bootswatch?
-----
Head over to [Bootswatch](http://bootswatch.com) and download the `bootswatch.min.css` file associated with a swatch.
Head over to [Bootswatch](http://bootswatch.com) and download the `bootstrap.min.css` file associated with a swatch.

In Bootstrap’s CSS directory, you’ll find a stylesheet in full (`bootstrap.css`) and minified (`bootstrap.min.css`) forms. Rename them or move them to a safe place. Then drop in the new CSS file and check that your HTML points to it. If you ever change your mind, simply drop in another swatch or switch back to the original.
In Bootstrap’s CSS directory, you’ll find a stylesheet in full (`bootstrap.css`) and minified (`bootstrap.min.css`) forms. Rename them or move them to a safe place, and replace with the downloaded file. If you ever change your mind, simply drop in another swatch or switch back to the original.

How do I extend Bootswatch?
------
Bootswatch is an open source project, and you’re welcome to modify the swatches further or create your own. If you’re interested, fork or follow the GitHub repository. The files of interest are in the `gh-pages` branch.

Each raw swatch consists of two LESS files. One is `variables.less`, which is included by default in Bootstrap and allows you to customize [these settings](http://twitter.github.com/bootstrap/less.html#variables). The other is a new file called `bootswatch.less` that introduces more extensive structural changes.
Each raw swatch consists of two LESS files. One is `variables.less`, which is included by default in Bootstrap and allows you to customize [these settings](http://twitter.github.com/bootstrap/less.html#variables). The other is a file called `bootswatch.less` that introduces more extensive structural changes.

Check out the README in the `swatchmaker` directory for step-by-step instructions for building your own swatches.
Check out the README in the `swatchmaker` directory for step-by-step instructions on building your own swatch.

How do I integrate with Bootswatch?
-----
Expand Down Expand Up @@ -46,6 +46,8 @@ Thanks

[James Taylor](http://github.com/jostylr) for [cors-lite](https://github.com/jostylr/cors-lite).

[Zack Maril](http://github.com/zmaril) for [bootswatch/swatchmaker/watcher.rb](https://github.com/thomaspark/bootswatch/blob/master/swatchmaker/watcher.rb]).


Copyright and License
----
Expand Down
17 changes: 10 additions & 7 deletions swatchmaker/README.md
Original file line number Diff line number Diff line change
@@ -1,24 +1,27 @@
Create your own swatch
======================

Step 1
1. Download Bootstrap
------
Download the latest Bootstrap source from https://github.com/twitter/bootstrap/downloads. Unpack it to the `swatchmaker` directory and rename the folder `bootstrap`.

This can be done automatically by running `make bootstrap`.

Step 2
2. Install LESS
------
Make your customizations to the two files found in the `swatch` directory, `variables.less` and `bootswatch.less`.
If you haven't already, install LESS to your machine via NPM. More information on that here: http://lesscss.org/#-server-side-usage

Step 3
3. Customize Bootstrap
------
If you haven't already, install LESS to your machine via NPM. More information on that here: http://lesscss.org/#-server-side-usage
Make your customizations to the two files found in the `swatch` directory, `variables.less` and `bootswatch.less`.


Step 4
4. Build Customized Bootstrap
------
In terminal, navigate to the `swatchmaker` directory and run `make bootswatch`. The compiled CSS files will be created in the `swatch` directory.

Step 5
You can run the watcher to automatically build Bootstrap whenever changes are saved with `ruby watcher.rb`. Requires `gem install directory_watcher`.

5. Reset Bootstrap
------
If you want to reset `variables.less` and `bootswatch.less` to defaults, run `make default`.

0 comments on commit 0d32394

Please sign in to comment.