Bootswatch: Help

# Quick Start

#### Pre-Compiled CSS

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

#### Package

You can install as a package via npm with the command `npm install bootswatch`.

##### React Users (create-react-app, or similar bundler)

Modern JavaScript bundlers (webpack, parcel, rollup) support importing CSS from JS files. This can make it easier to deploy various 1st- and 3rd-party assets predictably.

Note: There are tradeoffs to the following method, research your tooling before deploying to production.

Before continuing, ensure you've run npm install bootswatch in your local project folder. (Use either npm or yarn.)

Add the following import to your top-level `index.js` (or `App.js`) file. Add it before any other .css imports.

    import "bootswatch/dist/[theme]/bootstrap.min.css";
    // TODO: Note: Replace ^[theme]^ (examples: darkly, slate, cosmo, spacelab, and superhero. See https://bootswatch.com for current theme names.)

Here's an example of updated imports in `App.js` to use "slate" theme (using a create-react-app fresh project.)

    import React from 'react';
    import logo from './logo.svg';
    import 'bootswatch/dist/slate/bootstrap.min.css'; // Added this :boom:
    import './App.css';

    function App() {
    ...

#### CDN

You can also hotlink the themes via CDN at BootstrapCDN.

#### Sass

If you're using Sass in your project, you can import the `_variables.scss` and `_bootswatch.scss` files for a given theme. This method allows you to override theme variables. Make sure to import Bootstrap's `bootstrap.scss` in between `_variables.scss` and `_bootswatch.scss`!

    // Your variable overrides can go here, e.g.:
    // $h1-font-size: 3rem;

    @import "~bootswatch/dist/[theme]/variables";
    @import "~bootstrap/scss/bootstrap";
    @import "~bootswatch/dist/[theme]/bootswatch";

# 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/thomaspark/bootswatch.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. In `/dist`, modify `_variables.scss` and `_bootswatch.scss` in one of the theme directories, or duplicate a theme directory to create a new one.

5. Type `grunt swatch:[theme]` to build the CSS for a theme, e.g., `grunt swatch:flatly` for Flatly. 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 SASS 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.

If you prefer a web interface for customizing themes, check out Bootstrap.build. From within the builder, you can click the Import button to load the Bootswatch theme of your choice as a starting point.

# API

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

https://bootswatch.com/api/4.json

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`
- `scss`
- `scssVariables`

Here's a demo of the API in action.

# Tools

GlyphSearch is a tool for searching icons from Glyphicons, Font Awesome, and other popular icon font libraries.

FontCDN is a tool for searching web fonts from Google Fonts.

Codepip has coding games for learning HTML, CSS, and JavaScript.

# Donate

Donations are gratefully accepted via GitHub and PayPal.