Posted on Tuesday, October 14 2014 by Ionică Bizău
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.
bootstrap-sassAfter 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
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
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.