I think many of us using Yeoman are excited about the recent Bootstrap v2.2.0 update!

Though it would be good to wait until the Carousel bug is fixed here, as that's kinda big if you're using that component: twbs/bootstrap#5688

I have not been able to ascertain what the exact cause is but including both compass_bootstrap_twitter and compass_bootstrap_twitter_responsive seems to have an extraordinarily long compile time. Much longer than pre-2.0. I'm going to run some tests to see if it is just the responsive part or the core part.

_variables.scss#L58-59 defines a wrong path to the icons

// Sprite icons path
$iconSpritePath:          "../img/glyphicons-halflings.png" !default;
$iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png" !default;

I want config $baseFontSize: 15px.

It seemed that I need new a file and import all files which in https://github.com/vwall/compass-twitter-bootstrap/blob/master/stylesheets/_compass_twitter_bootstrap.scss

It's there better idea?

I am getting a build error for current 2.0.3 build. It fails to build because it can not find labels partial.

There are variables:

$gridColumnWidth1200:
$gridGutterWidth1200:
$gridColumnWidth768:
$gridGutterWidth768:

(http://twitter.github.com/bootstrap/customize.html)

Those are not used.

$ gem 'compass_twitter_bootstrap'
ERROR: While executing gem ... (RuntimeError)
Unknown command compass_twitter_bootstrap

This is on an Ubuntu 10.04 server. Any help or alternative
installation ideas appreciated.

$ gem --version
1.8.10

$ gem list

*** LOCAL GEMS ***

chunky_png (1.2.0)
compass (0.11.5)
compass-susy-plugin (0.9)
compass_twitter_bootstrap (0.1.7)
css_parser (1.1.9)
ffi (1.0.9)
fssm (0.2.7)
rake (0.9.2.2)
rb-inotify (0.8.8)
rubygems-update (1.8.10)
sass (3.1.5)

Are you going to continue to update this project?

Here is my application.css.scss

@import "compass_twitter_bootstrap";
@import "compass_twitter_bootstrap_responsive";

@import "partials/base";

and in partials/_base.scss I have the line:

$baseFontSize:          16px;

As far as I understand it this should override the ridiculously small base font size bootstrap comes with by default, but it doesn't seem to have any effect. Any idea what I'm doing wrong?

All variables should be changeable

Currently this project defines/redefines a lot of SCSS mixins that have the same name as Compass' with slightly different behavior. Please refactor all the mixin uses in this project to use prefixed mixins local to this plugin to avoid namespace conflicts.

In some instances, form layouts are not working correctly.

For example - form-inline layouts where an input has an append AND prepend do not work.

Another example - form-inline layouts with a appended button do not work correctly.

Example code follows;

        <form class="form-horizontal">
            <fieldset>
                <legend>Form control states</legend>

                <div class="control-group">
                    <label class="control-label" for="appendedPrependedInput">Append with button</label>
                    <div class="controls">
                        <div class="input-append">
                            <input class="span2" id="appendedPrependedInput" size="16" type="text"><button class="btn" type="button">Go!</button>
                        </div>
                    </div>
                </div>
            </fieldset>
        </form>

As reported on issue #52, bootstrap mixins have names, parameters and behaviors that conflict with Compass'. However, since that ticket was closed and pull requests merged, maybe because I'm the only person unlucky enough to be affected by this issue, or that looking at the giant diff takes too much effort, I keep seeing newer pull requests coming in without the prefix or use a different one.

In my pull request #53, I opted to use "bootstrap-" as the prefix, but maybe that's not a good one. Can we agree on a prefixed please?

@vwall @tijsverkoyen @kristianmandrup?

For example,

$white is defined as #FFF but when used with the Microsoft.gradient property as in .breadcrumb, in IE9 it displays the breadcrumb as blue. I think IE9 treats it as #FFF000.

New Bootstrap released http://twitter.github.com/bootstrap/

I'm trying to load a Twitter Bootstrap .js file, with something like this in my application.js file: //= require bootstrap-alerts and it's blowing up. Is that how you do it?

I did notice that in my compass_twitter_bootstrap-0.1.7 gem directory, the vendor/assets directory is missing.

Using version: 2.0.1.2

I'm getting an error:

Sass::SyntaxError: wrong number of arguments (1 for 0) for `e' (in app/assets/stylesheets/base.css.sass)

/Volumes/Clank/Users/Mike/.rvm/gems/ruby-1.9.2-p290@socialply/gems/compass_twitter_bootstrap-2.0.1.2/stylesheets/compass_twitter_bootstrap/_mixins.scss:540:in `buttonBackground'

Browsing the file, I see 3 or so instances of a mixin: e(). Doing a search reveals that this is a less function for escaping the content. I'm not sure what the correct course of action is, but I commented out each use of e() to get working.

hi everybody,
i'm working on an app based on rails 3.2.6.
for a particular reason i have to install all the gems in a local folder inside the app (vendor/gems/)
i've install compass_twitter_bootstrap successfully but when i try to import the stylesheet (@import 'compass_twitter_bootstrap') i receive this error:

File to import not found or unreadable: compass_twitter_bootstrap.

it seems a path issue. i've tried to add the folder into the config.assets.paths but nothing seems to work.
any tips?

Get an error with the imports:

File to import not found or unreadable: variables.
Load paths:
  Sass::Rails::Importer(/Users/chrisn/dev/pixelpublish/app/assets/stylesheets/application.css.scss)
  /Users/chrisn/.rvm/gems/ruby-1.9.2-p290/gems/compass-0.11.7/frameworks/compass/stylesheets
  /Users/chrisn/.rvm/gems/ruby-1.9.2-p290/bundler/gems/compass-twitter-bootstrap-d6c049504fcb/stylesheets
  (in /Users/chrisn/dev/pixelpublish/app/assets/stylesheets/application.css.scss)

Hi

Is there any way to customize the grid properties without having to replicate the entire package (with edited grid attributes in _variables.scss) and compile a customized gem?

Some of the values can be overriden even after an import of the package (e.g. color variables) by defining them, however, for example the number of columns in the grid has no effect when setting the $gridColumns variable after or before the @import "compass_twitter_bootstrap"; import

The opacity values of 20 and 40 in the .close class of _close.scss has been changed to 0.2 and 0.4. The mixin divides this value by 100, which renders opacity: 0.002 and 0.004 respectively. As a result the X to close a modal is not visible.

Since the name of the project assumes a dependency on compass, why not cut down on some code by using pre-existing mixins for things like box-shadow instead of emulating twitter's less functions?

I did the same in another port, not realizing this one was already so mature ;-) https://github.com/hecbuma/compass-bootstrap

How can I make use of the Bootstrap subnavigation, as seen on the Bootstrap website? You can see another example here: https://github.com/logical42/Bootstrapped-Rails/wiki/Twitter-Bootstrap-Subnavigation

I can't get it to work by just adding the HTML/HAML code.

I don't have a rails project, thus don't have bundler or a Gemfile. But I do use compass, and would like to try the Twitter Bootstrap integration with Compass without having to use bundler. So far, I've successfully installed the gem:

gem install compass_twitter_bootstrap

But I can't seem to install the compass module with this:

webkell@ubuntu:~/Projects/bkell/public$ compass install compass_twitter_bootstrap
No such framework: "compass_twitter_bootstrap"

... or this:

webkell@ubuntu:~/Projects/bkell/public$ compass install compass-twitter-bootstrap
No such framework: "compass-twitter-bootstrap"

Hi guys,

I'm having trouble with FontAwesome icons using
@import "compass_twitter_bootstrap_awesome";

The icons don't appear. (just a square placeholder instead of the icons)

Do I need to change anything else? Or there is some issue with it?

Thanks.

Hi!
I recently found compass and sass because I don't use rails on my workflow but I'm pretty interested in using TB in a semantic way

So, now I have installed compass-twitter-bootstrap and I can use it in my projects (I've try semantic layout more or less and buttons)

My next step is use it with tabs but I can't understand the way to do that

I've tried something like this:

HTML

<nav>
    <ul>
        <li><a href="#">Menu Option 1</a></li>
        <li><a href="#">Menu Option 2</a></li>
        <li><a href="#">Menu Option 3</a></li>
    </ul>
</nav>

SCSS

nav {
    @extend .nav;
    @extend .nav-tabs;
}

but I don't have any tab (I only see the bottom line used in the TB tabs)

What am I missing?

Is this library what I want? (I mean if I could achieve my semantic needs with it or I need to search for a better solution)

Thanks a lot!!
Sorry for the advanced guys in the list pissed of with newbies questions

Just a suggestion, shouldn't it be better if there's also an option to just include a module of the twitter bootstrap instead of the whole thing?

Like if I wanted to just include the fonts and forms, i can just do:

@import "compass_twitter_bootstrap/fonts"
@import "compass_twitter_bootstrap/forms"

The $headings... and $table... variables no longer has !default set. I think this is a newly introduced bug.

i'm using this gem for the first time and i have this error.

wrong number of arguments (1 for 0) for `e'
(in /Users/yestoall/Sites/kosas/app/assets/stylesheets/application.css.scss)

The version in github has the Font Awesome 2.0 fonts. The latest version of the gem, 2.0.3, seems to lack these changes. Please publish a new version of the gem.

Thanks!

When SASS style is set to :compressed, according to the docs, it may make subtitutions in colors, ie, #333333 becomes #333. This break the IE gradient mixin as described in http://stackoverflow.com/questions/9780464/twitter-bootstrap-nav-bar-issues-in-internet-explorer

When only 3 hex digits are specified, such as

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333',endColorstr='#222', GradientType=0)

Is results in a blue gradient, no matter what.

So a solution would be to change the compression to :compact - but I cannot for the life of me get any config settings to be noticed to achieve this. I've tried config.sass.style in the environent files(no change), Sass::Plugin[:style](bombs with and undefined constant), compass.rb config file as found in the demo app.... nothing ever changes the compression format.

So first of all, how can one change the compression format, and does anyone have an idea how to prevent color compression in IE filter rules?

Twitter released v2.0.2 on March 12th -- and I don't believe this new version has been ported yet.

Hello, I'm just really frustrated about that, I'm newbie on ruby/rails and I can't understand how to proceed to install it.

First of all, I'm on a Mac running LION, my 'Ruby 1.8.7' and 'Rails 3.2.9' and I had Xcode 4.5.2 already installed with the 'Command Line Tools'. So I've opened the TERMINAL and I followed this steps:

1- gem install compass_twitter_bootstrap; OK
2- gem 'compass_twitter_bootstrap',
It returns: ERROR: While executing gem ... (RuntimeError)
Unknown command compass_twitter_bootstrap

How I proceed to solve that problem?

I'm also using codekit.

I'm coming from a blueprint background, so maybe my impression of what a compass plugin should be is skewed, but I always thought the point of compass + grid was to do things like this (using bootstrap terminology):

#sidebar
  +span(4)
#content
  +offset(4)
  +span(8)

as opposed to hard-coding it in the HTML like this:

<div id="sidebar" class="span4"></div>
<div id="content" class="offset4 span8"></div>

If I wanted the latter, what advantage does compass provide over a plain scss/sass-based approach?

The previous version of this project had a +columns mixin I was using which I will probably just redefine, but am I crazy? Has the use case for compass changed, or is this an oversight?

Hi, I noticed that there is no mouse-over effect on btn-primary in IE8, but this works if I use the precompiled bootstrap.css. So I started digging...

I compared the css and found that the button's background colour is different in the compass generated css. This is happening because of a small difference between mixins.less and mixins.scss. The less version uses the sass mix() function for gradient-vertical and gradient-vertical-three-colors, while the scss version doesn't.

If I've understood the build process correctly, mixins is the only file that doesn't get auto-magically ported..? So, I've forked and corrected it and will make a pull request shortly...

Cheers.

P.S. thanks for making this gem - it's awesome

How does this compare with sass-twitter-bootstrap?

The files look identical:

1. https://github.com/vwall/compass-twitter-bootstrap/blob/master/stylesheets/compass_twitter_bootstrap/_accordion.scss
2. https://github.com/jlong/sass-twitter-bootstrap/blob/master/lib/_accordion.scss

Is it just that this one can be installed as a Compass bundle?

Wouldn't it then be better to combine the efforts?

// @jlong

Hi,

I think I'm misssing something obvious here. Let's say I add the following two lines to my scss file so I can change a couple bootstrap default variables:

$navbarHeight: 100px;
$navbarBackground: red;

When compass compiles the new .css file, the values I put in are being ignored and the default bootstrap values are being used.

What am I doing wrong?

Thanks,

Scot

How can I import the font awesome with the responsive layout without screwing around in the gem?

@import "compass_twitter_bootstrap_responsive"
@import "compass_twitter_bootstrap/font-awesome"

throws
Invalid CSS after "...rap_responsive"": expected selector or at-rule, was "@import "compas..."

Or: can we get a compass_twitter_bootstrap_responsive_awesome?

Btw: why is the _awesome so long? can't you just do import the normal one and then do an @import font-awesome? (just asking, still new to SASS)

The compass_twitter_bootstrap/_reset.scss breaks Google Maps.

The following line is the culprit:

https://github.com/vwall/compass-twitter-bootstrap/blob/master/stylesheets/compass_twitter_bootstrap/_reset.scss#L78

While it's easily remedied by overriding this for the Google Map map canvas div, I believe that this default is harmful and can affect other 3rd party widgets.

Please push a gem to RubyGems.org. Current gem does not include needed fixes to cooperate with Compass 0.12.1.

navbarCollapseWidth variable doesn't affect default values. All my other variables works fine .

Hi, first of all great extension I've been playing around with it for a couple hours and noticed the modal window wasn't animating right, I looked at the code and noticed an e() mixing in the .fade class here:

https://github.com/vwall/compass-twitter-bootstrap/blob/master/stylesheets/compass_twitter_bootstrap/_patterns.scss#L803

I was wondering what it does since it's not getting compiled right and the css ends up like:

.modal.fade {
  -webkit-transition: e("opacity .3s linear, top .3s ease-out");
  -moz-transition: e("opacity .3s linear, top .3s ease-out");
  -ms-transition: e("opacity .3s linear, top .3s ease-out");
  -o-transition: e("opacity .3s linear, top .3s ease-out");
  transition: e("opacity .3s linear, top .3s ease-out");
  top: -25%;
}

_sprites.scss links to background image like this:
background-image: url(../img/glyphicons-halflings.png);

And image is not accessible from compiled application.css

it seems twitter bootstrap has the class="dropdown-menu"option.

But always when I add this class to an ul Element the whole content get's lost.
The dropdown.js is loaded correctly.

http://rc.getbootstrap.com/javascript.html#dropdowns

Twitter nested dropdown function:

http://rc.getbootstrap.com/components.html#dropdowns

My Demo Code looks like this:

<div class="dropdown">
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <li>test</li>
        <li>test</li>
        <li>test</li>
    </ul>
</div>

Collapse plugin for minimising nav header does not work when you try to resize the browser.

instead of hiding the links with a btn-navbar button it shows all the links cascade.

This may just be some issue with bootstrap, but I have this in my application.js:

//= require jquery_ujs
//= require_tree .
//= require bootstrap-alert
//= require bootstrap-button
//= require bootstrap-tab
//= require bootstrap-tooltip
//= require bootstrap-transition
//= require bootstrap-dropdown
//= require bootstrap-modal
//= require bootstrap-popover

However on page load I get a method messing error from bootstrap-alert

TypeError: Object [object Object] has no method 'on'

which occurs at this line in bootstrap-alert.js

  $(function () {
    $('body').on('click.alert.data-api', dismiss, Alert.prototype.close)
  })

It's in _mixins.scss but not _mixins.sass.