Bootstrap 3 #329

thomas-mcdonald · 2013-04-13T15:08:20Z

Bootstrap 3 has RC'ed, so we need to get ready-(ish) to push an update.

gem 'bootstrap-sass', github: 'thomas-mcdonald/bootstrap-sass', branch: '3'

Please comment on issues here rather than in new issues. +1's will be deleted with vengeance. I make no guarantees about the frequency of updates or responses here.

Stuff we have to work on for release:

Icon font compatibility with Rails (√) & Compass (?) - modify functions as appropriate
Update Compass manifest need to check
Update patch script (fixed with new converter)
Split docs up
Sass compatibility & documentation - manual installation as copy and paste from download as zip
move to @twbs

thomas-mcdonald · 2013-04-13T15:14:28Z

I imagine that the icon fonts don't work given I've not actually tried to load this in an application yet, this is just a straight Sass conversion that will compile (rake debug/rake test)

archonic · 2013-04-18T18:41:00Z

Glad to see a 3.0 branch! Where did _reset.scss go? I'm looking for to get this fix asap:
twbs/bootstrap@86bb3b8

archonic · 2013-04-18T20:18:00Z

Got it. It looks like twbs/bootstrap@86bb3b8 isn't a part of this branch yet. I'd like to submit a pull request for taking out width: auto\9; from /vendor/assets/stylesheets/bootstrap/_reset.scss but I still don't see _reset.css in that folder despite that being in the traced style:

/* line 79, /usr/local/rvm/gems/ruby-1.9.2-p180/gems/bootstrap-sass-2.3.1.0/vendor/assets/stylesheets/bootstrap/_reset.scss */
img {
  /* Responsive images (ensure images don't scale beyond their parents) */
  max-width: 100%;
  /* Part 1: Set a maxium relative to the parent */
  width: auto\9;
  /* IE7-8 need help adjusting responsive images */
  height: auto;
  /* Part 2: Scale the height according to the width, otherwise you get stretching */
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

glebm · 2013-04-18T21:20:46Z

Had to do this to make sass helpers work with master sprockets/rails: glebm@25399d4

cockroachbill · 2013-04-22T23:03:48Z

vendor/assets/stylesheets/bootstrap/_variables.scss

+$font-family-monospace:   Monaco, Menlo, Consolas, "Courier New", monospace !default;
+$font-family-base:        $font-family-sans-serif !default;
+
+$font-size-base:          14 !default;


Looks like px got left out here

m5o · 2013-05-26T14:06:03Z

Hey! Just to know. In jlong/sass-bootstrap-defunct#73 we now started the work on 3.0.0-wip for SASS

glebm · 2013-05-28T16:53:28Z

I've updated the script (incl. patch) and pulled from 3.0.0-wip here #368

glebm · 2013-05-28T16:56:00Z

@m5o That's great, I've updated this repo's script to pull from 3.0.0-wip branch and account for structural changes in that branch!

thomas-mcdonald · 2013-05-31T22:33:01Z

Things to do/think about:

version needs to be defined in code and thus accessible to people (for conditionals, see next)
Upgrade from 2.3 -> 3 is massive (whole grid is changed, padding etc). Are we going to package 2.3 inside of the 3 gem to allow engines etc to be backwards compatible? Means the engine could update to 3 and apps could stay on 2.3 or vice versa, version detection will need to be used since the location of 2.3 will be different depending on the gem version installed.

glebm · 2013-06-01T12:27:10Z

Interesting, I wonder if we can provide multiple BS versions. One way to do this would be to set sass/javascript load paths in runtime, based on a setting e.g. config.bootstrap_version.

thomas-mcdonald · 2013-07-27T08:45:08Z

Thought of another thing with the converter (which seems to be failing at the moment) to look into.

I was originally against the idea of #393 but it would make configuring components much easier than at the moment, copying the bootstrap.scss file across always seemed a little hacky.

GantMan · 2013-07-30T15:50:19Z

Sorry to sound terribly ignorant, but I'm trying to move from Bootstrap 2 to Bootstrap 3, the docs aren't very clear and rake -T doesn't show the conversion rake task mentioned, nor does the upstream converter command on the readme work. I'm at a loss on how to move my project to Bootstrap 3 from this gem.

glebm · 2013-07-30T16:17:21Z

@GantMan The conversion task is for the gem's internal use -- it converts bootstrap LESS to SASS.

You can try it out with:

gem 'bootstrap-sass', git: 'https://github.com/thomas-mcdonald/bootstrap-sass', branch: '3'

and manually convert all your markup and customizations; note that bootstrap-sass support for this is still very alpha -- no stable release yet.

glebm · 2013-07-30T19:28:45Z

@sporkd, I see, could you please push a fix -- I am not sure what the $parent hack refers to
Could you also review my converter: commits? Thanks!

glebm · 2013-07-30T20:30:16Z

At the moment there is a lot of manual patching that needs to happen after each convert[].
How can we automate the converter further?
It'd be great if it is 100% like before, but it looks we will need some kind of patches. Formatting-insensitive search & replace patcher sounds good enough. What do you guys think?

AJ-Acevedo · 2013-07-31T18:47:22Z

@m5o Just updated sass-twitter-bootstrap to Bootstrap 3.0 RC1

sporkd · 2013-07-31T19:27:21Z

@AJ-Acevedo We're actually ahead of sass-twitter-bootstrap conversion.

AJ-Acevedo · 2013-07-31T21:26:31Z

Awesome! Thanks for the heads up! I'll be rolling it into my project tonight!

pongstr · 2013-07-31T22:40:43Z

👍 thanks for this!

glebm · 2013-07-31T23:34:42Z

Getting close with the converter

rake convert[3.0.0-wip] && git diff --numstat

m5o · 2013-08-01T12:40:38Z

found a minor converter bug in _forms.scss: Line 79-L80

spin should here not be converted to adjust-hue

glebm · 2013-08-01T15:50:24Z

@m5o Thanks, fixed!

glebm · 2013-08-03T00:07:35Z

Converter does everything at this point (i.e. rake convert[3.0.0-wip] gives empty diff)
Doing structural transformations with regexes sucks but it kind of works with just a few StringScanner kludges (only when it's this simple)

sporkd · 2013-08-03T00:23:57Z

Dude, that's awesome. Nice work! Wasn't sure if we could ever get to 100%. Of course things could still change, but hopefully as 3.0 stabilizes, the converter shouldn't require too much tweaking.

I was also thinking it would be nice if we had a test to compare the output css for equality with the official bootstrap.css. However this might be very difficult considering the various ways css can be output and still be equal in result. Perhaps something like Nokogiri could be useful.

glebm · 2013-08-03T00:34:15Z

Yeah, hopefully it doesn't have too many different new things (some potential for bleeding edge).
Parsing CSS unfortunately can't be done with nokogiri (which only parses XML). There are some css parsing gems though. A simple test we could add too is a bootstrap docs page in a headless browser and asserting equality of every DOM style property of every element VS the original bootstrap...

glebm · 2013-08-05T00:45:44Z

Converter output now contains all the non-generic transformations (the new patches) applied, makes it really easy to see what it does now.
I also discovered convert_less_ampersand doesn't affect the output. What does it do? Is it redundant?

m5o · 2013-08-08T10:42:47Z

improvement idea
I would suggest to use Variable Arguments in SASS for the box-shadow and transition mixins.
You could also refactor the string interpolation for these two mixins, like we did in our fork month ago.

thomas-mcdonald · 2013-08-20T19:53:44Z

I was thinking of versioning issues today. If we have 2.3 archived in a bootstrap/2.3 folder, we can solve issues with engines like rails_admin, which can conditionally include a Bootstrap version based off our defined version number - if the application has b-s 3 installed then rails_admin would include bootstrap/2.3/bootstrap, else it would use the previously defined bootstrap/bootstrap.

Of course, if rails_admin upgrades to b-s 3 then anyone wanting to stop on < 3 is kinda SOL, unless they choose to use static files.

edit: just found this - railsadminteam/rails_admin#1716

glebm · 2013-08-21T14:33:08Z

New Glyphicons are confirmed working on Rails

This still needs a custom helper for non-rails (PR welcome!).

thomas-mcdonald · 2013-08-21T16:33:22Z

This still needs a custom helper for non-rails (PR welcome!).

I was thinking we could just instruct people not on the asset pipeline to override the font variable? It's probably the easiest way, given the various environments people manage to shoehorn this into.

glebm · 2013-08-21T16:39:39Z

Do you mean something like this?

in variables

// inject bootstrap-sass var
$twbs-font-url-helper: font-url !default

in glyphicons

src: #{$twbs-font-url-helper}('#{$icon-font-path}#{$icon-font-name}.eot');

glebm · 2013-08-21T16:47:25Z

I just tried the above in 2b717ee but it doesn't work Invalid CSS after "... format('woff')": expected ";", was ","
The branch is 3-font-helper if anyone knows a way to make it work.

thomas-mcdonald · 2013-08-21T16:54:48Z

ah. I was thinking of something much simpler, but I just remembered that the webfont has multiple different extensions.

glebm · 2013-08-21T16:58:45Z

Turns out it is possible via call in sass 3.3 but not 3.2 like this.
Perhaps patching call in for older sass would be a good solution

frabrunelle · 2013-08-22T02:38:01Z

Glyphicons work fine in development but not in production. I get errors that look like:
ActionController::RoutingError (No route matches [GET] "/assets/bootstrap/glyphicons-halflings-regular-24dfb40c91db789b8b8faba6886ac1ef.svg")

travisdahl · 2013-08-22T05:59:42Z

after that last update, I can no longer set $grid-gutter-width to a percentage.

Syntax error: Incompatible units: '%' and 'px'.

glebm · 2013-08-22T08:40:12Z

@frabrunelle should be fixed with 0e8d41d

@travisdahl you can try overriding these variables, but I don't think percentage gutter is generally supported by twbs

frabrunelle · 2013-08-22T09:52:24Z

Thanks @glebm, it works!

travisdahl · 2013-08-22T13:52:57Z

Thanks @glebm , that's exactly what I had in my SASS file... $grid-gutter-width:1%; which did in fact work as of last week. Looks like until your last commit. I added a comment to the commit. Thanks for all your hard work!

glebm · 2013-08-22T16:56:48Z

See my comment above, if you want this changed you can raise issue with twbs/bootstrap.

travisdahl · 2013-08-22T17:21:36Z

@glebm , ah I see. I'll report it over there! Sorry about that!

wesleycho · 2013-08-23T22:46:03Z

It looks like the .navbar-collapse class stylings are missing from this branch.

Edit: Nevermind, looks like another gem was conflicting with my attempt to use 3 and was causing all my problems

umhan35 · 2013-08-26T19:40:03Z

With "this is 3.0.1" commit, does it mean the "3" branch is ready for production use and will be merge to master branch soon? @thomas-mcdonald @glebm If not, what's the schedule?

glebm · 2013-08-26T21:53:23Z

@umhan35 It just means the commit corresponds to twbs/bootstrap 3.0.1 in progress (unreleased). Whether it's ready for production is in the eye of the beholder: while it does appear to work just fine, we do not have any tests yet. See the checkboxes in the OP: once they are all √ then we are close.

kwerle · 2013-08-26T21:57:46Z

A rough notion of schedule would be nice. One of:

days
weeks
months

would be lovely.

glebm · 2013-08-26T22:05:55Z

On 571ba86 : this commit incorporates some changes and deprecations from BS3.0.1 ship list, it's not actually 3.0.1.

thomas-mcdonald · 2013-08-28T17:45:36Z

@glebm I'm gonna push the Sass as it was at the v3.0.0 tag, can we leave it at that for this PR, and then I'll spend some time working through the remaining issues as far as I can tell wrt testing, Compass etc.

glebm · 2013-08-28T18:30:45Z

@thomas-mcdonald OK, great. I can push further updates to a bleeding-edge branch (latest?). Then merge from that branch into master for releases.

If you have been using this on the bleeding edge before the revert commit, the latest commit ref is:

gem 'bootstrap-sass', 
  git: 'https://github.com/thomas-mcdonald/bootstrap-sass', 
  ref: 'e21b64bb2791f8f564b5ae33c77ecc4e4447c0d0'

bobbbie · 2013-08-30T21:06:43Z

Hi,

Hope someone can help.. I am using bootstrap-sass but want to upgrade to bootstrap 3 before I continue on mainly doing work on the views. Rather than wait for this to be released, I was hoping I could switch to this branch.

I have changed my Gemfile to point at branch 3 by doing:

gem 'bootstrap-sass', github: 'thomas-mcdonald/bootstrap-sass', branch: '3'

And then ran bundle update and the gem has been updated, however nothing in the repo has changed. And running:

bundle exec rake convert

Produces an error:

Don't know how to build task 'convert'

Can someone let me know what I am missing, please.

thomas-mcdonald · 2013-08-30T21:08:37Z

You want the Rails install guide

bobbbie · 2013-08-30T21:48:45Z

Sorry, my fault. When I was first trying it, I only did 'bundle' and not update. Then later I didn't restart the server!

Very sorry, thanks for the reply and the hard work!

Fix typo with loading individual Javascript files.

balaji-chronus · 2013-09-09T18:13:08Z

I wanted to use bootstrap 3 with bootstrap-sass, couldn't get it even if update my gemfile with the following,
gem 'bootstrap-sass', github: 'thomas-mcdonald/bootstrap-sass', branch: '3'

i want to start fresh and i only get 2.3.2. Please help me on the steps to get bootstrap 3 working with bootstrap-sass.

jonathanmcw · 2013-09-13T16:52:31Z

Hi there. I've tried following the hints from bobbbie and still getting the "Don't know how to build task 'convert'" message. I do recon there's this script here and wonder do I have to do something with it in order to get it work? Sorry I'm pretty new in Rails in general. Thanks! :)

thomas-mcdonald · 2013-09-13T18:15:55Z

Hi Jonathan. You don't need to run the convert task unless you're developing on the gem itself. You probably want the Rails install guide

This was referenced Apr 13, 2013

- #328

Closed

Bootstrap 3.0 beta #327

Closed

cockroachbill reviewed Apr 22, 2013
View reviewed changes

glebm mentioned this pull request Jul 31, 2013

converter: unwrap #gradient, @mixin $parent, .close button& #401

Merged

Merge pull request #422 from tjohn/patch-1

1344c58

Fix typo with loading individual Javascript files.

thomas-mcdonald merged commit 1344c58 into master Sep 9, 2013

AlJohri mentioned this pull request Dec 31, 2013

Bootstrap Sass Upgrade to twbs/bootstrap-sass yeoman/generator-bootstrap#23

Closed

Bootstrap 3 #329

Bootstrap 3 #329

Conversation

thomas-mcdonald commented Apr 13, 2013

thomas-mcdonald commented Apr 13, 2013

archonic commented Apr 18, 2013

archonic commented Apr 18, 2013

glebm commented Apr 18, 2013

cockroachbill Apr 22, 2013

Choose a reason for hiding this comment

m5o commented May 26, 2013

glebm commented May 28, 2013

glebm commented May 28, 2013

thomas-mcdonald commented May 31, 2013

glebm commented Jun 1, 2013

thomas-mcdonald commented Jul 27, 2013

GantMan commented Jul 30, 2013

glebm commented Jul 30, 2013

glebm commented Jul 30, 2013

glebm commented Jul 30, 2013

AJ-Acevedo commented Jul 31, 2013

sporkd commented Jul 31, 2013

AJ-Acevedo commented Jul 31, 2013

pongstr commented Jul 31, 2013

glebm commented Jul 31, 2013

m5o commented Aug 1, 2013

glebm commented Aug 1, 2013

glebm commented Aug 3, 2013

sporkd commented Aug 3, 2013

glebm commented Aug 3, 2013

glebm commented Aug 5, 2013

m5o commented Aug 8, 2013

thomas-mcdonald commented Aug 20, 2013

glebm commented Aug 21, 2013

thomas-mcdonald commented Aug 21, 2013

glebm commented Aug 21, 2013

glebm commented Aug 21, 2013

thomas-mcdonald commented Aug 21, 2013

glebm commented Aug 21, 2013

frabrunelle commented Aug 22, 2013

travisdahl commented Aug 22, 2013

glebm commented Aug 22, 2013

frabrunelle commented Aug 22, 2013

travisdahl commented Aug 22, 2013

glebm commented Aug 22, 2013

travisdahl commented Aug 22, 2013

wesleycho commented Aug 23, 2013

umhan35 commented Aug 26, 2013

glebm commented Aug 26, 2013

kwerle commented Aug 26, 2013

glebm commented Aug 26, 2013

thomas-mcdonald commented Aug 28, 2013

glebm commented Aug 28, 2013

bobbbie commented Aug 30, 2013

thomas-mcdonald commented Aug 30, 2013

bobbbie commented Aug 30, 2013

balaji-chronus commented Sep 9, 2013

jonathanmcw commented Sep 13, 2013

thomas-mcdonald commented Sep 13, 2013