Github url

bootswatch

by thomaspark

thomaspark /bootswatch

Themes for Bootstrap

12.3K Stars 3.4K Forks Last release: Not found MIT License 1.8K Commits 71 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Bootswatch

Bootswatch Logo

Bootswatch is a collection of open source themes for Bootstrap. Check it out at bootswatch.com.

Usage

There are a few different ways you can integrate Bootswatch into your project.

Via Pre-compiled Asset

Download the

bootstrap.min.css

file associated with a theme and replace Bootstrap's default stylesheet. You must still include Bootstrap's JavaScript file to have functional dropdowns, modals, etc.

Via CDN

Similar to above, but you can hotlink to the appropriate

bootstrap.min.css

hosted on BootstrapCDN.

Via Sass Imports

If you're using Sass (SCSS) 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.

// Your variable overrides go here, e.g.: // $h1-font-size: 3rem; @import "~bootswatch/dist/[theme]/variables"; @import "~bootstrap/scss/bootstrap"; @import "~bootswatch/dist/[theme]/bootswatch";

Make sure to import Bootstrap's

bootstrap.scss

in between

\_variables.scss

and

\_bootswatch.scss

!

Via NPM

You can install as a package with the command

npm install bootswatch

.

React Users (

create-react-app

, or similar bundler)

Modern JavaScript bundlers (webpack, parcel, rollup) support

import

ing 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() { ...

Via Ruby Gem

In your Ruby project, you can access the latest version of each theme by adding the following to your Gemfile and running

bundle install

:

gem "bootswatch", github: "thomaspark/bootswatch"

Each theme directory is then accessible via the path

"#{Gem.loaded\_specs["bootswatch"].load\_paths.first}/[theme]"

.

Ruby on Rails users can add the following to an initializer (e.g.

config/initializers/bootswatch.rb

):

Rails.application.config.assets.paths += Gem.loaded\_specs["bootswatch"].load\_paths

And thus be able to import themes via Sass like so:

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

Via API

A simple JSON API is available for integrating your platform with Bootswatch. More info can be found on the Help page.

Customization

Bootswatch is open source and you’re welcome to modify the themes.

Each theme consists of two SASS files.

\_variables.scss

, which is included by default in Bootstrap, allows you to customize the settings.

\_bootswatch.scss

introduces more extensive structural changes.

Check out the Help page for more details on building your own theme.

Contributing

It's through your contributions that Bootswatch will continue to improve. You can contribute in several ways.

Issues: Provide a detailed report of any bugs you encounter and open an issue on GitHub.

Documentation: If you'd like to fix a typo or beef up the docs, you can fork the project, make your changes, and submit a pull request.

Code: Make a fix and submit it as a pull request. When making changes, it's important to keep the CSS and SASS versions in sync. To do this, be sure to edit the SASS source files for the particular theme first, then run the tasks

grunt swatch

to build the CSS.

Donation: Donations are gratefully accepted via GitHub and PayPal.

Author

Thomas Park

Thanks

Mark Otto and Jacob Thornton for Bootstrap.

Jenil Gogari for his contributions to the Flatly theme.

James Taylor for cors-lite.

Corey Sewell for SASS conversion.

Copyright and License

Copyright 2014-2019 Thomas Park

Code released under the MIT License.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.