Ionică Bizău

Creating a Twitter Bootstrap theme with Compass

Supposing you already have Compass installed on your machine, you can easily create your own Twitter Bootstrap theme. I'm running Compass 1.0.1 (Polaris) on Ubuntu 14.04.

There is a GitHub repository that contains a guide for how to create a Twitter Bootstrap theme with Compass. Based on that, I will write here how to create and edit such a theme.

Set correct rights for gems and install bootstrap-sass

After running the command below, you will not need root access when installing gems.

sudo chown -R $USER:$USER /var/lib/gems/

Now, install bootstrap-sass:

gem install bootstrap-sass

Create the Compass project

The following command will create a compass project that contains the needed files. Replace my-awesome-bs-theme with your theme name.

compass create my-awesome-bs-theme -r bootstrap-sass --using bootstrap

Edit your theme and compile it

Enter in your theme directory (cd my-awesome-bs-theme). There you have the following structure of folders and files:

$ tree
.
├── config.rb
├── fonts
│   └── bootstrap
│       ├── glyphicons-halflings-regular.eot
│       ├── glyphicons-halflings-regular.svg
│       ├── glyphicons-halflings-regular.ttf
│       └── glyphicons-halflings-regular.woff
├── javascripts
│   ├── bootstrap
│   │   ├── affix.js
│   │   ├── alert.js
│   │   ├── button.js
│   │   ├── carousel.js
│   │   ├── collapse.js
│   │   ├── dropdown.js
│   │   ├── modal.js
│   │   ├── popover.js
│   │   ├── scrollspy.js
│   │   ├── tab.js
│   │   ├── tooltip.js
│   │   └── transition.js
│   ├── bootstrap.js
│   └── bootstrap-sprockets.js
├── sass
│   ├── _bootstrap-variables.scss
│   └── styles.scss
└── stylesheets
    └── styles.css

6 directories, 22 files

In this example, we will remove rounded corners. Open _bootstrap-variables.scss and search for border-radius-base. Set 0px for the three variables that set the border-radius value:

$border-radius-base: 0px;
$border-radius-large: 0px;
$border-radius-small: 0px;

Save the file and run compass watch in your project (my-awesome-bs-theme). This will compile the files (but will keep watching for file changes too), updating stylesheets/styles.css.

Replacing the original Bootstrap file with this CSS file in a project, you should see elements (e.g. buttons) without rounded corners:

Happy Styling!

Have feedback on this article? Let @IonicaBizau know on Twitter.

Have any questions? Feel free to ping me on Twitter.