Bootswatch

The Bootstrap download includes compiled and minified assets, organized into the following directory structure:

• css/: Contains bootstrap.css and bootstrap.min.css. It also includes bootstrap-theme.css (optional) and .map files for CSS source maps.
• js/: Contains bootstrap.js and bootstrap.min.js.
• fonts/: Contains Glyphicons font files (.eot, .svg, .ttf, .woff, .woff2).

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── ...
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    └── glyphicons-halflings-regular.*

Bootswatch themes are built using two primary Sass files that allow for extensive customization:

1. _variables.scss: This file contains variables that are compatible with Bootstrap's variable system. Overriding these allows you to change colors, fonts, and other standard Bootstrap settings.
2. _bootswatch.scss: This file introduces more extensive structural changes and theme-specific styling beyond standard Bootstrap variables.

To build your own theme, you should modify the SASS source files first. If you are contributing to the repository, use the grunt swatch task to rebuild the CSS from the SASS sources to keep them in sync.

Bootstrap allows you to use all plugins purely through HTML markup without writing JavaScript. This is achieved using data- attributes on your elements.

To disable the data-attribute API globally, unbind all events on the body namespaced with .data-api:

$('body').off('.data-api')

To disable the data-attribute API for a specific plugin, include the plugin's name as a namespace:

$('body').off('.alert.data-api')

Bootstrap events follow a naming convention using infinitive and past participle forms.

• The infinitive form is fired before an action takes place.
• The past participle form is fired after the action is completed.

Common patterns:

• show | shown
• hide | hidden

You can customize Bootstrap by overriding variables before importing the library.

Full Import

To get all styles, mixins, and variables:

@import "bootstrap";

Partial Import (Customization)

To include only specific components, copy the _bootstrap.scss file from the assets folder to your project as _bootstrap-custom.scss. Comment out the components you don't want, then import your custom file:

@import "bootstrap-custom";

Overriding Variables

Redefine variables before the @import directive:

$navbar-default-bg: #312312;
$light-orange: #ff8c00;
$navbar-default-color: $light-orange;

@import "bootstrap";

You can integrate a theme into your styles using LESS by importing the Bootstrap LESS files followed by the theme's variables and main theme files.

@import "bootstrap/less/bootstrap.less";
@import "bootswatch/theme/variables.less";
@import "bootswatch/theme/bootswatch.less";

If you need to discard your changes and revert variables.less and bootswatch.less to their original default states, run the make default command from the /bootswatch/swatchmaker/ directory.

cd bootswatch/swatchmaker
make default

To include Font Awesome in your project using the component package manager, run the following command in your terminal:

$ component install FortAwesome/Font-Awesome

Alternatively, you can manually add the dependency to your component.json file:

"FortAwesome/Font-Awesome": "*"

# component install FortAwesome/Font-Awesome

You can create a custom Bootswatch theme by modifying Bootstrap's LESS files. This process involves downloading the Bootswatch repository, installing Bootstrap and its dependencies, customizing specific LESS files, and then compiling the result. The Swatchmaker toolset uses make commands to automate the downloading and building processes.

# High-level workflow
make bootstrap
npm install
# Edit /swatch/variables.less and /swatch/bootswatch.less
make bootswatch

You can integrate a theme into your styles using SASS by importing the theme variables, the official Bootstrap SASS files, and the Bootswatch theme files.

@import "bootswatch/theme/variables";
@import "bootstrap-sass-official/assets/stylesheets/bootstrap";
@import "bootswatch/theme/bootswatch";

To prepare the environment for theme creation, follow these steps in order:

1. Download Bootswatch: Clone or download the Bootswatch repository.
2. Install Bootstrap: Navigate to /bootswatch/swatchmaker/ and run make bootstrap to fetch the latest Bootstrap version.
3. Install Dependencies: Navigate to /bootswatch/swatchmaker/bootstrap/ and run npm install. This installs required dependencies including uglify-js, jshint, recess, connect, and hogan.js.

cd bootswatch/swatchmaker
make bootstrap
cd bootstrap
npm install

For Ruby projects, add the Bootswatch gem directly from GitHub in your Gemfile:

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

Then run bundle install.

Ruby on Rails Setup

To make themes accessible via Sass in a Rails application, add the Bootswatch load paths to your asset paths in an initializer (e.g., config/initializers/bootswatch.rb):

Rails.application.config.assets.paths += Gem.loaded_specs["bootswatch"].load_paths

Once configured, you can import themes in your Sass files using the theme name directly:

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