vwall / compass-twitter-bootstrap Goto Github PK
View Code? Open in Web Editor NEWThe twitter bootstrap ported to compass
The twitter bootstrap ported to compass
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?
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.
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.
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
Are you going to continue to update this project?
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
_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;
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?
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)
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.
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)
})
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?
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!
New Bootstrap released http://twitter.github.com/bootstrap/
Twitter released v2.0.2 on March 12th -- and I don't believe this new version has been ported yet.
The compass_twitter_bootstrap/_reset.scss breaks Google Maps.
The following line is the culprit:
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.
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 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.
It's in _mixins.scss but not _mixins.sass.
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.
_sprites.scss links to background image like this:
background-image: url(../img/glyphicons-halflings.png);
And image is not accessible from compiled application.css
There are variables:
$gridColumnWidth1200:
$gridGutterWidth1200:
$gridColumnWidth768:
$gridGutterWidth768:
(http://twitter.github.com/bootstrap/customize.html)
Those are not used.
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.
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.
The $headings... and $table... variables no longer has !default set. I think this is a newly introduced bug.
Please push a gem to RubyGems.org. Current gem does not include needed fixes to cooperate with Compass 0.12.1.
I am getting a build error for current 2.0.3 build. It fails to build because it can not find labels partial.
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
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
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?
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'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)
$ 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)
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 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 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.
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>
How does this compare with sass-twitter-bootstrap?
The files look identical:
Is it just that this one can be installed as a Compass bundle?
Wouldn't it then be better to combine the efforts?
// @jlong
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"
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.
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
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>
All variables should be changeable
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)
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:
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%;
}
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"
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.