twbs / bootstrap-sass Goto Github PK

This was a Bootstrap issue which is now checked in. Hoping it makes it into the gem

See: twbs/bootstrap#2023 and twbs/bootstrap@3d58b46

The README said to "import 'bootstrap' in your SCSS file of choice, so I created bootstrap.css.scss and added the @import statement. I kept getting the Action Controller error "An @import loop has been found: ../app/assets/stylesheets/bootstrap.css.scss imports itself". Finally realized that it was importing the local file by name rather than going to the gem directory. Renamed my file to bootstrap_loader.css.scss and all is well.

May I suggest:

Import "bootstrap" in any SCSS file in your /app/assets/stylesheets directory to get all of Bootstrap's styles, mixins and variables! Don't use Sprocket's //= require directives for SASS files, because they're horrible and will kill your cat. You can add the @import statement to a new file, e,g. bootstrap_loader.css.scss. Don't import bootstrap in application.css; that's not an SCSS file. And don't use a file named bootstrap.css.scss or it will try to import itself.

I updated my Gemfile and ran 'bundle update'. I cleared my browser cache just to be safe. And I restarted my app. For some reason I'm still seeing Bootstrap v 1.4.0 in my CSS files and not v 2.0. Any ideas?

The css and js files are properly rendered through the web server using @import "bootstrap"; in application.css, but when I try to run a rake assets:precompile I get the following error:

rake aborted!
File to import not found or unreadable: bootstrap.
Load path: /path/to/myapp
  (in /path/to/myapp/app/assets/stylesheets/application.css)

I'm using rails 3.1.3 and sass-rails 3.1.0

Am I missing something in my config?

Invalid CSS after "...er-radius:0 \0/": expected expression (e.g. 1px, bold), was "}input[type="fi..."

on line https://github.com/thomas-mcdonald/bootstrap-sass/blob/2.0/vendor/assets/stylesheets/bootstrap/_forms.scss#L78

Whilst bootstrap is great, it uses classes instead of mixins, forcing loads of styling classes into our markup.

I'd like to maintain a version of bootstrap that converts all of these classes into mixins. However, this will have two disadvantages:

• Harder to maintain gem as changes to twitter bootstrap will need to be manually converted over
• Not backwards compatible as anyone using the gem will have to switch their class markup over to including the mixins

I'd like to fork this project to base these alterations on but the question is whether to push them back into this gem or release them in an entirely new one. What do you think?

Not sure exactly what change it is, but the version of the CSS included in this version of the gem is causing inactive tab content to be shown instead of hidden.

Without !important, IE8 reset filter isn't overriding.
It works on IE9.

When i use this directive i get the error below
different prefix: "D:/" and "F:/xxx/app/assets/stylesheets"
(in F:/xxx/app/assets/stylesheets/style.css.scss)

seems @import can't load the scss file in different path on windows?

Running compass unpack bootstrap should unpack all files into ./extensions/bootstrap under the compass project root.

Steps to Reproduce

1. gem install bootstrap-sass
2. Add: require 'bootstrap-sass' to top of config.rb
3. mkdir extensions
4. Run compass frameworks to ensure bootstrap is listed
5. Attempt to unpack: compass unpack bootstrap

Expected Result

All bootstrap files extracted into ./extensions/bootstrap.

Actual Result

$ compass unpack bootstrap --trace

NoMethodError on line ["47"] of c: undefined method 'size' for nil:NilClass
  c:/Ruby192/lib/ruby/gems/1.9.1/gems/compass-0.11.7/lib/compass/commands/unpack_extension.rb:45:in 'each'
  c:/Ruby192/lib/ruby/gems/1.9.1/gems/compass-0.11.7/lib/compass/commands/unpack_extension.rb:45:in 'perform'
  c:/Ruby192/lib/ruby/gems/1.9.1/gems/compass-0.11.7/lib/compass/commands/base.rb:18:in 'execute'
  c:/Ruby192/lib/ruby/gems/1.9.1/gems/compass-0.11.7/lib/compass/commands/project_base.rb:19:in 'execute'
  c:/Ruby192/lib/ruby/gems/1.9.1/gems/compass-0.11.7/lib/compass/exec/sub_command_ui.rb:43:in 'perform!'
  c:/Ruby192/lib/ruby/gems/1.9.1/gems/compass-0.11.7/lib/compass/exec/sub_command_ui.rb:15:in 'run!'
  c:/Ruby192/lib/ruby/gems/1.9.1/gems/compass-0.11.7/bin/compass:25:in 'block in <top (required)>'
  c:/Ruby192/lib/ruby/gems/1.9.1/gems/compass-0.11.7/bin/compass:39:in 'call'
  c:/Ruby192/lib/ruby/gems/1.9.1/gems/compass-0.11.7/bin/compass:39:in '<top (required)>'
  c:/Ruby192/bin/compass:19:in 'load'
  c:/Ruby192/bin/compass:19:in '<main>'

Environment

• Msys Git on Windows 7
• ruby 1.9.2p180 (2011-02-18) [i386-mingw32]
• sass 3.1.15
• compass 0.11.7

From Readme:

We try to stick to Bootstrap versioning wherever possible. The major and minor version numbers will always represent the Twitter Bootstrap version, but no guarantees are made for the tiny version number, since waiting for Bootstrap to update so I can push out a fix sucks.

Why not go to a 4 part version, allowing you to use the 4th part independently of the bootstrap version. It'd be confusing to get into a situation where bootstrap uses the tiny version number and it doesn't match the bootstrap-sass version.

hey, is it possible to include only certain elements? e.g. if i don't want to use bootstrap's grid, for example?

In the variables section i noticed $gridRowWidth does not have a !default at the end. Is that intentional? (I can't overwrite it in my styles)

From SASS's website:
@import
Stylesheets can get pretty big. CSS has an @import directive that allows you to break your styles up into multiple stylesheets, but each stylesheet takes a separate (slow) HTTP request. That’s why Sass’s @import directive pulls in the stylesheets directly. Not only that, but any variables or mixins defined in @imported files are available to the files that import them.

Sass has a naming convention for files that are meant to be imported (called “partials”): they begin with an underscore. Let’s create a partial called _rounded.scss to hold our rounded mixin.

In order to support both .scss and .sass files, Sass allows files to be imported without specifying a file extension. That means we can just import "rounded", rather than "rounded.scss".

I checked the gem, and it looks like it does not use the underscore convention to import the files. Do you have a trick behind this or do you use the normal css slow import like they mention? If it's the case, maybe converting the imports using the sass convention would be good?

Thanks

Thanks for the update to 2.0! I have a strange issue: after I updated to 2.0, responsive was working fine for about 20 minutes, then very suddenly I got an ugly sass import error:

File to import not found or unreadable: bootstrap/responsive.
Load path: Sass::Rails::Importer(/Users/ian/work/homestars-www/app/assets/stylesheets/application.css.scss)
(in /Users/ian/work/homestars-www/app/assets/stylesheets/application.css.scss)

Has this happened to anyone else?

The only thing I can think of that might be a problem is I installed the new beta of live reload, but I've since turned it off and I'm still getting the import error.

Any help on this issue would be appreciated muchly

Thanks so much for this gem BTW!!!!

because I hear that there's some people not using Rails, it would be cool if they can join in the fun.

Consider this a ticket to track progress and such.

Thanks for porting the bootstrap less code to sass, Thomas.

I had some initial trouble getting setup and finding the right css classes to use. I was reading the Bootstrap docs and assuming the same classes applied to bootstrap-sass.

For example in Bootstrap the correct way to use a primary large button is:

<button class="btn btn-primary btn-large">

But in bootstrap-sass I need to do:

<button class="btn primary large">

Even though the bootstrap-sass way is slightly cleaner, that's beside the point, am I doing something wrong or have you changed the selectors, or is this some magical less thing I'm not understanding.

Is this a design choice to change the selector names?

Bootstrap-sass is being pulled in by RailsAdmin, I'm using Rails 3.1.3 and RailsAdmin master, running the rake assets:precompile task produces the following error:

stylesheets: rake assets:precompile
(in /Users/billlazar/Sites/j3)
/Users/billlazar/.rvm/rubies/ruby-1.9.2-p180-patched/bin/ruby /Users/billlazar/.rvm/gems/[email protected]/bin/rake assets:precompile:all RAILS_ENV=development RAILS_GROUPS=assets
rake aborted!
Undefined variable: "$baseline".
  (in /Users/billlazar/.rvm/gems/[email protected]/gems/bootstrap-sass-1.4.3/vendor/assets/stylesheets/bootstrap/forms.css.scss)

http://twitter.github.com/bootstrap/upgrading.html

looks like they added some prefixes to most of the elements, but it was only 20 hours ago so no big deal :) If you don't have time I could fork and try to do it!

First off, thanks for updating to bootstrap 2.0! Now, I've noticed in the _bootstrap-responsive.scss vendor file, you hard coded the number of grid columns to 12 for the @media (min-width: 768px) and (max-width: 980px) and @media (min-width: 1200px) sections.

Any way you can allow the sass variable of $gridColumns to be used for those two media queries? I'm trying to squeeze a 4 column side bar next to my 9 column content area and right now it only works at the one resolution in responsive mode...

So I was working on something just like this for Bootstrap 2 and then found yours :) I've got a repository here (I've mostly focused on 2.0) setup which works both with and without rails (so you could use it with compass in non-rails projects).

Would you be interested in just merging them for bootstrap 2 development? Having 100 forks of bootstrap for sass just seems silly since it would be better maintained together.

I was planning on possibly extracting out some of the patterns a little better (so you could load bootstrap/patterns for all, or bootstrap/patterns/pattern for specific ones) as well as possibly setup a few additional variables so its easier to configure (instead of just changing blue/black etc since maybe you don't want blue or black buttons :) ). I also sub-moduled twitter's repository to track their updates easier with a quick rake task that updates the submodule and copies over the javascripts etc.

If you'd like to do so just let me know and I can take a sec and fork your 2.0 branch and marge in some updates.

https://github.com/twitter/bootstrap/blob/master/less/buttons.less

look for .btn-large, .btn-primary, etc.

current bootstrap-sass 2.0 branch only use .primary, .large, etc. Same for many other Bootstrap elements (tables, nav, etc.). These prefixes commits were done yesterday so that's possible you didnt see them yet, here is one: twbs/bootstrap@3191165

Sorry for re-opening an issue, I don't know if you get notified when I comment on a closed issue, so I didn't take any chances.

I'm currently at work, I could probably do this tonight if you don't have time...

We are not updated to the 1.4 release.

I'm not sure if this is a sass compilation error or a bug in the twitter bootstrap.css for version 2.0. I received this error after applying a hack as shown in this issue:

#40

I'm posting it here in case its related to the above issue. Below is the output from my terminal:

1.9.2-p290 > rake assets:precompile
/Users/manish/.rbenv/versions/1.9.2-p290/bin/ruby /Users/manish/.rbenv/versions/1.9.2-p290/bin/rake assets:precompile:all RAILS_ENV=production RAILS_GROUPS=assets
rake aborted!
Expected a color. Got: transparent
(in /Users/manish/projects/trouper/vendor/assets/stylesheets/bootstrap.css)

Tasks: TOP => assets:precompile:primary
(See full trace by running task with --trace)
rake aborted!
Command failed with status (1): [/Users/manish/.rbenv/versions/1.9.2-p290/b...]

Tasks: TOP => assets:precompile

Hi, I know it just came out. I'd just like to know whether you will be making a sass version of bootstrap 2.0, so I know whether to move my rails project to less or not.

Thanks for doing this.

Twitter bootstrap has a file named preboot.less to set variable like gridColumns, but how can I do the same thing with bootstrap-sass. It seems that the imported file included in the file bootstrap.scss doesn't include preboot.scss.

Hello,

it works find locally in development but when I deploy to heroku I get the following error.

File to import not found or unreadable: bootstrap.
Load path: /app
(in /app/app/assets/stylesheets/main.css.scss)

The code I have is this

@import "bootstrap";

Thanks, Ross

I know 2.0 has been converted in the 2.0 branch (I'm using it and it's good btw) but will it get an official tag and release?

Defining each class by hand feels like a major violation of DRY.

I need to look into SASS iterators.

After bundle installing this gem, where should the SCSS and JS files be? I figured in the vendor folder, but, I don't see them anywhere.

Hey,

I assumed that I just needed to include the gem in my Gemfile and run Bundle update.

Am I missing something?

The bootstrap-sass file are not in my assets folder ...

Hope you can help,

Joel

When creating a new Project the integration of the bootstrap-sass gem works fine.

But now I wanted to integrate it in an existing project. But there the gem is not include into the assetpath. I checked with:

Rails.application.config.assets.paths The gem paths are not included.

Any ideas what went wrong?

On the Server I get the error:

couldn't find file 'bootstrap-dropdown' or every other file I try

Hey,

I am trying to use jquery plugins from bootstrap ... without success.

Do I need to add jquery-rails to my gemfile?

Also how can I verify that my bootstrap-sass is correctly installed?

Sorry for the newbie questions...

And by the way, is this the right place to post questions about this gem?

Joel

Attempting to define a CSS causing the the above error

Attaching the Stack Trace

bootstrap-sass (2.0.0) vendor/assets/stylesheets/bootstrap/_reset.scss:38:in tab-focus' bootstrap-sass (2.0.0) vendor/assets/stylesheets/bootstrap/_reset.scss:38 app/assets/stylesheets/application.css.scss:1 sass (3.1.14) lib/sass/tree/visitors/perform.rb:170:invisit_mixin'
sass (3.1.14) lib/sass/tree/visitors/base.rb:37:in visit' sass (3.1.14) lib/sass/tree/visitors/perform.rb:18:invisit'
sass (3.1.14) lib/sass/tree/visitors/base.rb:53:in block in visit_children' sass (3.1.14) lib/sass/tree/visitors/base.rb:53:inmap'
sass (3.1.14) lib/sass/tree/visitors/base.rb:53:in visit_children' sass (3.1.14) lib/sass/tree/visitors/perform.rb:27:inblock in visit_children'
sass (3.1.14) lib/sass/tree/visitors/perform.rb:39:in with_environment' sass (3.1.14) lib/sass/tree/visitors/perform.rb:26:invisit_children'
sass (3.1.14) lib/sass/tree/visitors/base.rb:37:in block in visit' sass (3.1.14) lib/sass/tree/visitors/perform.rb:238:invisit_rule'
sass (3.1.14) lib/sass/tree/visitors/base.rb:37:in visit' sass (3.1.14) lib/sass/tree/visitors/perform.rb:18:invisit'
sass (3.1.14) lib/sass/tree/visitors/perform.rb:146:in block in visit_import' sass (3.1.14) lib/sass/tree/visitors/perform.rb:146:inmap'
sass (3.1.14) lib/sass/tree/visitors/perform.rb:146:in visit_import' sass (3.1.14) lib/sass/tree/visitors/base.rb:37:invisit'
sass (3.1.14) lib/sass/tree/visitors/perform.rb:18:in visit' sass (3.1.14) lib/sass/tree/visitors/base.rb:53:inblock in visit_children'
sass (3.1.14) lib/sass/tree/visitors/base.rb:53:in map' sass (3.1.14) lib/sass/tree/visitors/base.rb:53:invisit_children'
sass (3.1.14) lib/sass/tree/visitors/perform.rb:27:in block in visit_children' sass (3.1.14) lib/sass/tree/visitors/perform.rb:39:inwith_environment'
sass (3.1.14) lib/sass/tree/visitors/perform.rb:26:in visit_children' sass (3.1.14) lib/sass/tree/visitors/base.rb:37:inblock in visit'
sass (3.1.14) lib/sass/tree/visitors/perform.rb:47:in visit_root' sass (3.1.14) lib/sass/tree/visitors/base.rb:37:invisit'
sass (3.1.14) lib/sass/tree/visitors/perform.rb:18:in visit' sass (3.1.14) lib/sass/tree/visitors/perform.rb:7:invisit'
sass (3.1.14) lib/sass/tree/root_node.rb:20:in render' sass (3.1.14) lib/sass/engine.rb:299:in_render'
sass (3.1.14) lib/sass/engine.rb:246:in render' sass-rails (3.2.4) lib/sass/rails/template_handlers.rb:106:inevaluate'

Using

bootstrap-sass (2.0.0)

Step to reproduce:

• Got to http://ipinfo.info/netrenderer/index.php
• Select Internet Explorer 8 (or 9) but not 7 or lower
• Fill in http://rails-admin-tb.herokuapp.com/admin/comments/new
• look at header and buttons color
• use http://twitter.github.com/bootstrap/ as a decoy

Diffing the CSS output manually, I found out:

less:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0)

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

Probably what's causing it.

I'm using the Bootstrap 2.0 branch in my Rails app, but I've found that the javascript components (specifically the dropdown) aren't working. If I include the js directly from the Twitter lib (http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js), then dropdowns work fine.

Has anybody else encountered this problem?

Issue

The way the original twitter bootstrap distribution is organized, it's expected one can customize various aspects of it. In this case, the files would normally be copied into a project and could be readily edited if necessary. However, with the packaging of the SCSS files in a gem, they are not available for modification.

Modification of Variables

The settings in bootstrap/_variables.scss are expected to be modified. An easy way to expose the variables would be to use the compass templating to copy the contents of _variables.scss into the generated styles.scss before the @import "bootstrap" while possibly removing the !default notation. Any change to a variable made by a user would override the same variable in _variables.scss when imported.

Modification to Imported Mixin's

For applications that won't use various bootstrap mixin's it would be ideal if _bootstrap.scss was locally editable so such mixin's could be commented out.

I'm building an nav-list and the .active:hover state is currently broken. Some investigation pointed out that the original less stylesheet has more / newer styling then the current .scss file has.

navs.less:49-61

.nav-list > li + .nav-header {
  margin-top: 9px;
}
.nav-list .active > a,
.nav-list .active > a:hover {
  color: @white;
  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
  background-color: @linkColor;
}
.nav-list [class^="icon-"] {
  margin-right: 2px;
}

navs.scss:48-58

.nav-list > li + .nav-header {
  margin-top: 9px;
}
.nav-list .active > a {
  color: $white;
  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
  background-color: $linkColor;
}
.nav-list .icon {
  margin-right: 2px;
}

Should I include it under the :assets group or for all groups in my Gemfile?

I added gem 'bootstrap-sass', '1.4.0' to my Gemfile and did a bundle install. It picked up the gem and installed it.

I added *= require bootstrap to my application.css....

When I hit my page I see:

couldn't find file 'bootstrap'
(in /home/jim/Sites/isr-update/app/assets/stylesheets/application.css:6)

I don't see the files in lib or vendor, should they be there?

Hi,

Precompiling assets takes ~3mins when I import bootstrap.

I have no idea why. Maybe somebody can shade some light.

This is my layout:

> tree app/assets/
app/assets/
├── images
│   └── icons
│       ├── apple-touch-icon.png
│       └── favicon.ico
├── javascripts
│   ├── application.js
│   └── frameworks.js.coffee
└── stylesheets
    ├── application.css
    ├── frameworks.css.sass
    └── layout.css.sass

> cat app/assets/stylesheets/application.css app/assets/stylesheets/frameworks.css.sass 
/*
 *= require_self
 *= require_tree . 
*/


@import "bootstrap"
@import "bootstrap-responsive"

> cat app/assets/javascripts/application.js app/assets/javascripts/frameworks.js.coffee 
//= require jquery
//= require jquery_ujs
//= require_tree .
jQuery(function(){ $("body").addClass('dom-loaded'); });


#= require bootstrap

# Gemfile
group :assets do
  gem 'sass-rails', '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'
  gem 'bootstrap-sass', '~> 2.0'
  gem 'compass', " >= 0.12.alpha.0"
  gem 'uglifier', '>= 1.0.3'
  gem 'therubyracer' # To compile CoffeeScript
  gem 'jquery-rails'
end

So there's really not much going on. Pretty standard stuff.
When I remove the @import bootstrap from sass file then the compilation is pretty "snappy" (~15 secs including Rails startup).

Any thought what could be causing this?

Cheers.

I have everything working for the 2.0 version, but tooltips and popovers.

Maybe this is just something I've messed up, so just wondering if anyone else isn't seeing alert div's appear since upgrading to 1.4.1 or 1.4.2 ? I rolled back to 1.4.0 and they appear again..

Can't seem to @import boostrap and bootstrap-responsive in my bootstraploader.css.scss file.

Have tried bootstrap first and responsive first. just get error

Invalid CSS after "": expected selector or at-rule, was "<!DOCTYPE html>"
(in c:/black blah blah /bootstraploader.css.scss)

File looks like this

@import 'bootstrap-responsive';
@import 'bootstrap';

body {
  padding-top: 10px;
}

Is it a case of either having responsive or bootstrap which is not clear or am I missing something obvious?

It would be nice if bootstrap-sass had a series of Rails helpers that would make common tasks with bootstrap easier.

On the provisional list are:

• Form helpers (no 1 priority really, cause bootstrap forms are a pain to markup)
• Headings
• Common structural blocks

firstly, i changed the application.css to .css.scss
then add @import "bootstrap"; line.

but the page show an error:

File to import not found or unreadable: bootstrap.

but i works when i change the import line to another .scss file and require it in application.css.scss.

and another question is the file which import bootstrap can't end with .css.scss but only .scss. i don't know what's the different between the two type files?

I have updated the current gem:

bundle update

Now it's version 2.0.0. Also, I have restarted my server.

Now I'm getting:

 couldn't find file 'bootstrap'
  (in /projects/testing/app/assets/stylesheets/application_en.css:5)

I do have the needed require statement in my manifest file, which is used to work for me:

/*
 *= require bootstrap
*/

Not sure what's missing here. Any help?

Using v2.0 I noticed the modal overlay blacks out the screen because opacity is set to 80, not 0.8;

Compass defines the opacity mixin to take a value between 0 and 1.
Twitter bootstrap's LESS opacity mixin takes a value from 0 to 100.

I'm adding a few bootstrap components to an existing compass styled site using Rails 3.2 with asset pipeline. I worked around this conflict by having two separate top level stylesheets, having a bootstrap only one that does not include compass.

I guess this is a good use case for namespacing?

Hey there,

Having an issue where the sass extension ie_hex_str is not working when generating stylesheets via the rake assets:precompile task. The extension works in the development environment.

Here's the gradient generated for the navbar class in my production environment:

progid:DXImageTransform.Microsoft.gradient(startColorstr='ie-hex-str(#333)', endColorstr='ie-hex-str(#222)', GradientType=0)

whereas here is the same CSS line from my development environment:

progid:DXImageTransform.Microsoft.gradient(startColorstr='#F3333', endColorstr='#F2222', GradientType=0)

I noted that raising an error on the first line of the ie_hex_str method causes my development server to throw an exception when a page is loaded, but running the rake assets:precompile task completes successfully.

Any advice?