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-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
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.