less-rails-bootstrap 2.3.3 → 3.0.0.rc1

data/.gitignore

@@ -5,3 +5,4 @@ pkg/*
 test/dummy_app/log/*
 tmp/*
 .DS_Store
+twitter/

data/CHANGELOG.md

@@ -1,6 +1,10 @@
 CHANGELOG
 =========
 
+3.0.0 - TBA
+
+* Update boostrap to 3.0.0
+
 2.3.3 - 03/06/2013
 
 * Update boostrap to 2.3.2.

data/README.md

@@ -1,6 +1,9 @@
-# Less Rails Bootstrap
+# Less Rails Bootstrap 3.0.0-rc1 [![Build Status](https://travis-ci.org/metaskills/less-rails-bootstrap.png?branch=3.0.0-rc1)](https://travis-ci.org/metaskills/less-rails-bootstrap)
 
-Bootstrap is Twitter's toolkit for kickstarting your site or app's CSS. It includes base styles for typography, forms, buttons, tables, grid layout, navigation, alerts, and more. To get started -- check out the [Bootstrap docs](http://twitter.github.com/bootstrap).
+This fork is using
+[3.0.0-wip](https://github.com/twbs/bootstrap/tree/3.0.0-wip) [Twitter Bootstrap](https://github.com/twbs/bootstrap) branch. You can read about new bootstrap version [here](https://github.com/twitter/bootstrap/pull/6342).
+
+Bootstrap is Twitter's toolkit for kickstarting your site or app's CSS. It includes base styles for typography, forms, buttons, tables, grid layout, navigation, alerts, and more. To get started -- check out the [Bootstrap docs](http://getbootstrap.com/).
 
 The less-rails-bootstrap project hooks into [less-rails](http://github.com/metaskills/less-rails) and [less.rb](http://github.com/cowboyd/less.rb), making Bootstrap's source LESS files, compiled CSS, and JavaScript files available in the Rails 3.1+ asset pipeline. 
 
@@ -21,7 +24,7 @@ LESS requires a JavaScript runtime to work. Which one you use depends on your Ru
 gem 'therubyracer'  # If using Ruby
 gem 'therubyrhino'  # If using JRuby
 gem 'jquery-rails'  # If using Bootstrap's JS plugins.
-gem 'less-rails-bootstrap'
+gem 'less-rails-bootstrap', '3.0.0.rc1', github: 'metaskills/less-rails-bootstrap', branch: '3.0.0-rc1'
 ```
 
 ## Basic CSS Use
@@ -32,11 +35,6 @@ Get the full Bootstrap stylesheet with a single line in your `application.css`.
       *= require twitter/bootstrap
     */
     
-If you wish to make use of Bootstraps' responsive features, like the collapsing of your navigation bar on window resize, make sure to include bootstrap-responsive as well.
-
-    /*
-      *= require twitter/bootstrap-responsive
-    */
 
 Please see the [less-rails-bootstrap-test](http://github.com/metaskills/less-rails-bootstrap-test) repo for examples that customize the CSS output by using LESS. The "CSS Tests Suites" section of the README and code is what you want to focus on. Also, check out the [LESS syntax](http://lesscss.org/). 
 
@@ -69,8 +67,6 @@ This gem will directly track the semantic versioning of the Twitter Bootstrap pr
 
 Simple! Just clone the repo, then run `bundle install` and `bundle exec rake`. The tests will begin to run. We also use Travis CI to run our tests. The current build status is:
 
-[![Build Status](https://secure.travis-ci.org/metaskills/less-rails-bootstrap.png)](http://travis-ci.org/metaskills/less-rails-bootstrap)
-
 We also have a test rails project setup using all the examples documented above. If you make a github issue and complain about something, I will likely forward you to this project.
 
 [https://github.com/metaskills/less-rails-bootstrap-test](https://github.com/metaskills/less-rails-bootstrap-test)
@@ -82,7 +78,7 @@ Here are the steps to update the version of twitter bootstrap used.
 
 * Clone this repository.
 * Clone the [bootstrap repo](https://github.com/twitter/bootstrap) in a twitter/bootstrap directory next to the clone of less-rails-bootstrap done above.
-* Change directories into the twitter/bootstrap clone and do a git checkout on the version you are targeting. For example `git checkout v2.3.0`. This will setup the proper version to copy over.
+* Change directories into the twitter/bootstrap clone and do a git checkout on the version you are targeting. For example `git checkout 3.0.0-wip`. This will setup the proper version to copy over.
 * Back in the less-rails-bootstrap project. Run the `./scripts/update_bootstrap.sh` script.
 * RUN THE TESTS!
 

data/lib/less/rails/bootstrap/version.rb

@@ -1,7 +1,7 @@
 module Less
   module Rails
     module Bootstrap
-      VERSION = "2.3.3"
+      VERSION = "3.0.0.rc1"
     end
   end
 end

data/scripts/update_bootstrap.sh

@@ -1,33 +1,62 @@
 #!/bin/bash
 
-bs_dir='../twitter/bootstrap'
+bs_dir='./twitter/bootstrap'
 lrb_dir='.'
-lrb_img_dir="$lrb_dir/vendor/assets/images/twitter/bootstrap"
+lrb_font_dir="$lrb_dir/vendor/assets/fonts/twitter/bootstrap"
 lrb_js_dir="$lrb_dir/vendor/assets/javascripts/twitter/bootstrap"
 lrb_styles_dir="$lrb_dir/vendor/assets/stylesheets/twitter"
 lrb_fw_dir="$lrb_dir/vendor/frameworks/twitter/bootstrap"
 
+error() {
+echo -e "\e[1;31m"$1"\e[0m"
+}
+
+success() {
+echo -e "\e[1;32m"$1"\e[0m"
+}
+
+info() {
+echo -e "\e[1;34m"$1"\e[0m"
+}
+
+if [ $# -ne 1 ] 
+then
+error "USAGE: $0 <bootstrap version>"
+exit 1
+fi
+
 if [ ! -d $bs_dir ]; then
-    echo "Bootstrap not found. You might want to clone the bootstrap repo from http://twitter.github.com/bootstrap/ into $bs_dir"
-    exit 1
+    info "Bootstrap not found. Cloning to twitter/bootstrap..."
+    git clone --quiet git://github.com/twbs/bootstrap.git twitter/bootstrap
 fi
 
-# images
-for f in $bs_dir/img/*; do
+cd twitter/bootstrap
+info "Using $1..."
+git checkout --quiet $1
+cd ../../
+
+info "Copying fonts..."
+# fonts
+mkdir -p $lrb_font_dir/
+for f in $bs_dir/fonts/*; do
     bn=$(basename $f)
-    cp $f $lrb_img_dir/$bn
+    cp $f $lrb_font_dir/$bn
 done
 
+info "Copying scripts..."
 # scripts
 for f in $bs_dir/js/*.js; do
     bn=$(basename $f)
     cp $f $lrb_js_dir/${bn/bootstrap-/}
 done
 
+info "Copying styles..."
 # styles
 for f in $bs_dir/less/*.less; do
     bn=$(basename $f)
-    sed -e 's#"\.\./img/\([^"]*\)"#"twitter/bootstrap/\1"#g' \
+    sed -e "s/url('@{glyphicons-font-path}/asset-url('twitter\/bootstrap/g" \
         -e 's#background-image: url(#background-image: asset-url(#g' \
         $f > $lrb_fw_dir/$bn
 done
+
+success "Done"

data/test/cases/usage_css_spec.rb

@@ -7,16 +7,21 @@ class UsageCssSpec < Less::Rails::Bootstrap::Spec
     let(:app_css) { dummy_asset('application.css') }
 
     it 'will render main bootstrap.less file and all included modules' do
-      app_css.must_include 'Bootstrap v2'
+      app_css.must_include 'Bootstrap v3'
     end
 
     it 'must include basic css afterward' do
       app_css.must_include '#other-css { color: red; }',  'From our code afterward.'
     end
 
-    it 'uses less-rails asset-url helper for images' do
-      app_css.must_include 'url(/assets/twitter/bootstrap/glyphicons-halflings.png)'
-      app_css.must_include 'url(/assets/twitter/bootstrap/glyphicons-halflings-white.png)'
+  end
+
+  describe 'fonts.css.less' do
+
+    let(:app_css) { dummy_asset('fonts.css.less') }
+
+    it 'uses less-rails asset-url helper for fonts' do
+      app_css.must_include 'url(/assets/twitter/bootstrap/glyphiconshalflings-regular.eot)'
     end
 
   end
@@ -28,15 +33,14 @@ class UsageCssSpec < Less::Rails::Bootstrap::Spec
     let(:framework_css) { dummy_asset('framework.css') }
 
     it 'will render bootstrap functions' do
-      border_radius_line = line_for_framework_css('framework-border-radius')
-      border_radius_line.must_include '-webkit-border-radius:4px'
-      border_radius_line.must_include '-moz-border-radius:4px'
-      border_radius_line.must_include 'border-radius:4px'
+      border_radius_line = line_for_framework_css('framework-box-shadow')
+      border_radius_line.must_include '-webkit-box-shadow:4px'
+      border_radius_line.must_include 'box-shadow:4px'
     end
 
     it 'will render bootstrap variables' do
       link_color_line = line_for_framework_css('framework-linkColor')
-      link_color_line.must_include 'color:#0088cc;'
+      link_color_line.must_include 'color:#428bca;'
     end
 
   end
@@ -49,9 +53,8 @@ class UsageCssSpec < Less::Rails::Bootstrap::Spec
 
     it 'will render bootstrap variables and mixins' do
       my_button_line = line_for_individual_css('individual-my-button')
-      my_button_line.must_include '-webkit-border-radius:10px'
-      my_button_line.must_include '-moz-border-radius:10px'
-      my_button_line.must_include 'border-radius:10px'
+      my_button_line.must_include '-webkit-box-shadow:10px'
+      my_button_line.must_include 'box-shadow:10px'
     end
 
   end

data/test/cases/usage_js_spec.rb

@@ -7,10 +7,10 @@ class UsageJsSpec < Less::Rails::Bootstrap::Spec
     let(:app_js) { dummy_asset('application.js') }
     
     it 'will render main bootstrap.js file and all included modules' do
-      files = ['alert', 'button', 'carousel', 'collapse', 'dropdown', 'modal',
-               'popover', 'scrollspy', 'tab', 'tooltip', 'transition', 'typeahead']
+      files = ['affix', 'alert', 'button', 'carousel', 'collapse', 'dropdown', 'modal',
+               'popover', 'scrollspy', 'tab', 'tooltip', 'transition']
       files.each do |file|
-        app_js.must_include "bootstrap-#{file}.js"
+        app_js.must_include "#{file}.js"
       end
     end
     
@@ -25,7 +25,7 @@ class UsageJsSpec < Less::Rails::Bootstrap::Spec
     let(:individual_js) { dummy_asset('individual.js') }
     
     it 'will render bootstrap variables and mixins' do
-      individual_js.must_include 'bootstrap-modal.js'
+      individual_js.must_include 'modal.js'
     end
     
   end

data/test/dummy_app/app/assets/stylesheets/fonts.css.less

@@ -0,0 +1,2 @@
+@import "twitter/bootstrap";
+@import "twitter/bootstrap/glyphicons";

data/test/dummy_app/app/assets/stylesheets/framework.css.less

@@ -1,6 +1,8 @@
 @import "twitter/bootstrap";
+@import "twitter/bootstrap/mixins";
+@import "twitter/bootstrap/variables";
 
 #framework-start{color:red;}
 
-#framework-border-radius { .border-radius(4px); }
-#framework-linkColor { color: @linkColor; }
+#framework-box-shadow { .box-shadow(4px); }
+#framework-linkColor { color: @link-color; }

data/test/dummy_app/app/assets/stylesheets/individual.css.less

@@ -2,9 +2,9 @@
 @import "twitter/bootstrap/mixins";
 
 .myButton(@radius: 5px) {
-  .border-radius(@radius);
+  .box-shadow(@radius);
 }
 
 #individual-my-button {
   .myButton(10px);
-}
+}

data/test/spec_helper.rb

@@ -1,9 +1,8 @@
 require 'rubygems'
 require 'bundler'
 Bundler.require
-require 'less-rails-bootstrap'
-require 'minitest/spec'
 require 'minitest/autorun'
+require 'less-rails-bootstrap'
 require 'dummy_app/init'
 
 module Less

data/vendor/assets/javascripts/twitter/bootstrap.js

@@ -10,4 +10,3 @@
 //= require twitter/bootstrap/scrollspy.js
 //= require twitter/bootstrap/tab.js
 //= require twitter/bootstrap/transition.js
-//= require twitter/bootstrap/typeahead.js

data/vendor/assets/javascripts/twitter/bootstrap/affix.js

@@ -1,7 +1,7 @@
-/* ==========================================================
- * bootstrap-affix.js v2.3.2
- * http://twitter.github.com/bootstrap/javascript.html#affix
- * ==========================================================
+/* ========================================================================
+ * Bootstrap: affix.js v3.0.0
+ * http://twbs.github.com/bootstrap/javascript.html#affix
+ * ========================================================================
  * Copyright 2012 Twitter, Inc.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -15,80 +15,90 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- * ========================================================== */
+ * ======================================================================== */
 
 
-!function ($) {
++function ($) { "use strict";
 
-  "use strict"; // jshint ;_;
-
-
- /* AFFIX CLASS DEFINITION
-  * ====================== */
+  // AFFIX CLASS DEFINITION
+  // ======================
 
   var Affix = function (element, options) {
-    this.options = $.extend({}, $.fn.affix.defaults, options)
+    this.options = $.extend({}, Affix.DEFAULTS, options)
     this.$window = $(window)
-      .on('scroll.affix.data-api', $.proxy(this.checkPosition, this))
-      .on('click.affix.data-api',  $.proxy(function () { setTimeout($.proxy(this.checkPosition, this), 1) }, this))
+      .on('scroll.bs.affix.data-api', $.proxy(this.checkPosition, this))
+      .on('click.bs.affix.data-api',  $.proxy(this.checkPositionWithEventLoop, this))
+
     this.$element = $(element)
+    this.affixed  =
+    this.unpin    = null
+
     this.checkPosition()
   }
 
+  Affix.RESET = 'affix affix-top affix-bottom'
+
+  Affix.DEFAULTS = {
+    offset: 0
+  }
+
+  Affix.prototype.checkPositionWithEventLoop = function () {
+    setTimeout($.proxy(this.checkPosition, this), 1)
+  }
+
   Affix.prototype.checkPosition = function () {
     if (!this.$element.is(':visible')) return
 
     var scrollHeight = $(document).height()
-      , scrollTop = this.$window.scrollTop()
-      , position = this.$element.offset()
-      , offset = this.options.offset
-      , offsetBottom = offset.bottom
-      , offsetTop = offset.top
-      , reset = 'affix affix-top affix-bottom'
-      , affix
-
-    if (typeof offset != 'object') offsetBottom = offsetTop = offset
-    if (typeof offsetTop == 'function') offsetTop = offset.top()
+    var scrollTop    = this.$window.scrollTop()
+    var position     = this.$element.offset()
+    var offset       = this.options.offset
+    var offsetTop    = offset.top
+    var offsetBottom = offset.bottom
+
+    if (typeof offset != 'object')         offsetBottom = offsetTop = offset
+    if (typeof offsetTop == 'function')    offsetTop    = offset.top()
     if (typeof offsetBottom == 'function') offsetBottom = offset.bottom()
 
-    affix = this.unpin != null && (scrollTop + this.unpin <= position.top) ?
-      false    : offsetBottom != null && (position.top + this.$element.height() >= scrollHeight - offsetBottom) ?
-      'bottom' : offsetTop != null && scrollTop <= offsetTop ?
-      'top'    : false
+    var affix = this.unpin   != null && (scrollTop + this.unpin <= position.top) ? false :
+                offsetBottom != null && (position.top + this.$element.height() >= scrollHeight - offsetBottom) ? 'bottom' :
+                offsetTop    != null && (scrollTop <= offsetTop) ? 'top' : false
 
     if (this.affixed === affix) return
+    if (this.unpin) this.$element.css('top', '')
 
     this.affixed = affix
-    this.unpin = affix == 'bottom' ? position.top - scrollTop : null
+    this.unpin   = affix == 'bottom' ? position.top - scrollTop : null
 
-    this.$element.removeClass(reset).addClass('affix' + (affix ? '-' + affix : ''))
+    this.$element.removeClass(Affix.RESET).addClass('affix' + (affix ? '-' + affix : ''))
+
+    if (affix == 'bottom') {
+      this.$element.offset({ top: document.body.offsetHeight - offsetBottom - this.$element.height() })
+    }
   }
 
 
- /* AFFIX PLUGIN DEFINITION
-  * ======================= */
+  // AFFIX PLUGIN DEFINITION
+  // =======================
 
   var old = $.fn.affix
 
   $.fn.affix = function (option) {
     return this.each(function () {
-      var $this = $(this)
-        , data = $this.data('affix')
-        , options = typeof option == 'object' && option
-      if (!data) $this.data('affix', (data = new Affix(this, options)))
+      var $this   = $(this)
+      var data    = $this.data('bs.affix')
+      var options = typeof option == 'object' && option
+
+      if (!data) $this.data('bs.affix', (data = new Affix(this, options)))
       if (typeof option == 'string') data[option]()
     })
   }
 
   $.fn.affix.Constructor = Affix
 
-  $.fn.affix.defaults = {
-    offset: 0
-  }
 
-
- /* AFFIX NO CONFLICT
-  * ================= */
+  // AFFIX NO CONFLICT
+  // =================
 
   $.fn.affix.noConflict = function () {
     $.fn.affix = old
@@ -96,22 +106,21 @@
   }
 
 
- /* AFFIX DATA-API
-  * ============== */
+  // AFFIX DATA-API
+  // ==============
 
   $(window).on('load', function () {
     $('[data-spy="affix"]').each(function () {
       var $spy = $(this)
-        , data = $spy.data()
+      var data = $spy.data()
 
       data.offset = data.offset || {}
 
-      data.offsetBottom && (data.offset.bottom = data.offsetBottom)
-      data.offsetTop && (data.offset.top = data.offsetTop)
+      if (data.offsetBottom) data.offset.bottom = data.offsetBottom
+      if (data.offsetTop)    data.offset.top    = data.offsetTop
 
       $spy.affix(data)
     })
   })
 
-
-}(window.jQuery);
+}(window.jQuery);