Quick Start

Using the themes is as easy as downloading a CSS file and replacing the one that comes with Bootstrap.

The themes are also available via CDN at BootstrapCDN.

Customization

To modify a theme or create your own, follow the steps below in your terminal. You'll need to have Git and Node installed.

  1. Download the repository: git clone https://github.com/guru-digital/bootswatch-sass.git

  2. Install dependencies: npm install

  3. Make sure that you have grunt available in the command line. You can install grunt-cli as described on the Grunt Getting Started page.

  4. Modify _variables.scss and _bootswatch.scss in one of the theme directories, or create your own in /custom.

  5. Type grunt swatch:[theme] to build the CSS for a theme, e.g., grunt swatch:amelia for Amelia. Or type grunt swatch to build them all at once.

  6. You can run grunt to start a server, watch for any changes to the SCSS files, and automatically build a theme and reload it on change. Run grunt server for just the server, and grunt watch for just the watcher.

Here are additional tips for customizing Bootstrap.

Additional Grunt tasks

You can update the sass files from the Offical Bootswach less files by running the following Grunt tasks

Pull down the latest official Bootswatch repository grunt update_bootswatch_less

Convert the official Bootswatch LESS files to SASS grunt convert_less


You can run all the update tasks by running the single task grunt sync_with_upstream

LESS to SASS conversion

LESS to SASS conversion is done by a series simple regular expression replacements.

While this works for 90% of the conversions, due to the complexity and differences between LESS and SASS, this process is not always enough to convert LESS to SASS properly.

The convert_less grunt task makes up for this by supporting patch files.

Patch files

Place a unified patch file named myfile.scss.patch in the same directory as myfile.scss and covert_less will automatically apply the patch to myfile.scss after the basic regular expression has taken place.

E.g.

The patch file named paper/_bootswatch.scss.patch will be applied to paper/_bootswatch.scss

Check out paper/_bootswatch.scss.patch for an example

Create a patch

The grunt task create_pach can be used to create a patch file

To create a patch, copy and rename the file to be patched.

E.g.

If you are creating a patch for paper/_bootswatch.scss, copy it to paper/_bootswatch.fixed.scss
Open _bootswatch.fixed.scss and make the changes you require
Run grunt create_patch:paper/_bootswatch.scss:paper/_bootswatch.fixed.scss
This will result in a file named paper/bootswatch.scss.patch being created.
The command grunt convert_less will now apply this patch after converting the less files

API

You can use the API to integrate the themes with your platform. Send your request to:

http://api.bootswatch.com/3/

This returns an object with a version and a themes property. themes is an array with the following properties:

  • name
  • description
  • preview
  • thumbnail
  • css
  • cssMin
  • cssCdn
  • less
  • lessVariables

Here's a demo of the API in action.

Bootswatch API Demo

Bookmarklet

Drag Bootswatchlet into your bookmarks bar, and use it on Bootstrap-based sites to see how they'd look with a theme.

GlyphSearch

Use GlyphSearch to find the icons you need from Glyphicons, Font Awesome, and other popular icon font libraries.

Support

Show your support for Bootswatch by buying official gear.

T-shirts based on several themes including Cyborg, Flatly, and Slate are available at Spreadshirt.

Stickers are available at Sticker Mule.

Donations are also accepted via PayPal.