twbs / bootstrap-sass Goto Github PK
View Code? Open in Web Editor NEWOfficial Sass port of Bootstrap 2 and 3.
Home Page: http://getbootstrap.com/css/#sass
License: MIT License
Official Sass port of Bootstrap 2 and 3.
Home Page: http://getbootstrap.com/css/#sass
License: MIT License
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.
I have everything working for the 2.0 version, but tooltips and popovers.
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:
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.
Running compass unpack bootstrap should unpack all files into ./extensions/bootstrap under the compass project root.
All bootstrap files extracted into ./extensions/bootstrap.
$ 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>'
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
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!
Attempting to define a CSS causing the the above error
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:in
visit_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:in
visit'
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:in
map'
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:in
block 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:in
visit_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:in
visit_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:in
visit'
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:in
map'
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:in
visit'
sass (3.1.14) lib/sass/tree/visitors/perform.rb:18:in visit' 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:in map' 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:in block 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:in visit_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:47:in visit_root' sass (3.1.14) lib/sass/tree/visitors/base.rb:37:in
visit'
sass (3.1.14) lib/sass/tree/visitors/perform.rb:18:in visit' sass (3.1.14) lib/sass/tree/visitors/perform.rb:7:in
visit'
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:in
evaluate'
Using
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?
Thanks so much for this gem BTW!!!!
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.
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.
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.
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...
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:
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?
Should I include it under the :assets
group or for all groups in my Gemfile
?
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?
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)
hey, is it possible to include only certain elements? e.g. if i don't want to use bootstrap's grid, for example?
Without !important, IE8 reset filter isn't overriding.
It works on IE9.
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..
Invalid CSS after "...er-radius:0 \0/": expected expression (e.g. 1px, bold), was "}input[type="fi..."
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?
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.
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.
This was a Bootstrap issue which is now checked in. Hoping it makes it into the gem
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?
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?
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:
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
Step to reproduce:
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.
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 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.
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
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
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.
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?
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.
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?
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?
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
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;
}
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.
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?
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
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.
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.
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)
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...
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
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.