I dove headfirst into twitter bootstrap a few weeks ago, here are some of my notes / findings.
How I use it – as part of a Rails 3.1 app, with SASS and Compass
Setup – pure CSS vs Less vs Sass
Twitter Bootstrap, Less, and Sass: Understanding Your Options for Rails 3.1
In my case we went with the twitter-bootstrap-rails gem – this lets us set variables in the bootstrap.less file and then we call another file that includes all of our sass. I spent a little time getting my custom variables in the bootstrap.less file to show up and then was a little disappointed with the amount of things you can do with the variables. A lot of the colors are hard coded in the source, even really obvious ones I suspect people would want to change, like filler color. In my opinion its almost so little, its a waste of time to get less up and running, might as well just overwrite static styles until better variables are available. Also from reading their response to issues on github improving the variable flexibility isn’t a high priority for them. (if you are already using less in your projects, then using some of the mixins may be helpful – I wanted to keep my project sass though, and found it easier to just create mixins on that side). All a matter of preference, I guess.
Note – if you are transitioning from using blueprint with compass make sure blueprint is really gone, I had some hidden places it was getting included and it does not play nice with Twitter Bootstrap.
Customizing the Look
For the most part this is self explanatory.
I did get tripped up in my attempt to overwrite the header and buttons in ie. The Compass mixin I used in my custom styles didn’t include the ie filter code which caused ie to fall back to the twitter bootstrap colors instead of just the background-color. I added this mixin, sass mixin for ie linear gradient filter, and used it in addition to the compass gradient mixin.
So for exmaple:
.topbar-inner {
@include linear-gradient(color-stops($color_gray2, $color_gray));
@include ie-linear-gradient($color_gray2, $color_gray);
}
another way to handle it is to write a mixin that just kills the filter
@mixin kill-filter() {
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
-ms-filter: none;
}
Modals Baby
Pretty modals were one of the reasons we are making the switch to twitter bootstrap.
Great intro – http://paynedigital.com/2011/11/bootbox-js-alert-confirm-dialogs-for-twitter-bootstrap
I’d stay away from using .fade with the modals as it breaks links and buttons in chrome (discussion of the issue)
You can add the close modal x, just adding <a href=”#” class=”close”>x</a> in the modal header, it styles and just works, magic!
Get the Gist
I pulled together some of the styles and mixins I found helpful getting Twitter Bootstrap and Compass to be a full solution for me. Still a work in progress, add / comment on twitter_bootstrap_addons.scss
