Skip to content

Commit

Permalink
updated readme to explain swatchmaker
Browse files Browse the repository at this point in the history
  • Loading branch information
thomaspark committed Feb 18, 2012
1 parent d36f89d commit 9294097
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 14 deletions.
7 changes: 2 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,10 @@ What if I want to 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.

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. The other is a new file called bootswatch.less that introduces more extensive 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. The other is a new file called `bootswatch.less` that introduces more extensive changes.

First, add these two files to Bootstrap’s own LESS files. You’ll be overwriting the default variables.less.
Check out the README in the `swatchmaker` directory for step-by-step instructions for building your own swatches.

Next, open up bootstrap.less and just before the line “Utility classes” at the end, add @import "bootswatch.less";. This command includes bootswatch.less when compiling the LESS files to CSS, and placing it near the end overrides earlier styles with the same CSS selector specificity.

Now you can start customizing variables.less and bootswatch.less. You are also free to modify the other LESS files, which in some cases will be easier, but your swatch may become brittle to future changes in Bootstrap itself. When you’re ready to test your code, compile to CSS and enjoy!

Feedback
------
Expand Down
18 changes: 18 additions & 0 deletions swatchmaker/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
Create your own swatch
======================

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

Step 2
------
Make your customizations to the two files found in the `swatch` directory, `variables.less` and `bootswatch.less`.

Step 3a
------
If you haven't already, install LESS to your machine via NPM. More information on that here: http://lesscss.org/#-server-side-usage

Step 3b
------
In terminal, navigate to the `swatchmaker` directory and run `make bootswatch`. The compiled CSS files will be created in the `swatch` directory.
9 changes: 0 additions & 9 deletions swatchmaker/README.txt

This file was deleted.

0 comments on commit 9294097

Please sign in to comment.