bootstrap-sass 1.4.4 → 2.0.0

data/README.md

@@ -1,45 +1,78 @@
-# Bootstrap for Rails
+# Bootstrap for SASS
 
-`bootstrap-sass` is an SASS-powered version of [Twitter's Bootstrap](http://github.com/twitter/bootstrap), ready to drop right into your asset-pipeline powered Rails applications.
+`bootstrap-sass` is an SASS-powered version of [Twitter's Bootstrap](http://github.com/twitter/bootstrap), ready to drop right into your SASS powered applications.
 
 Enjoy.
 
 ## Usage
 
-In your gemfile:
+### Rails
 
-    gem 'bootstrap-sass', '~> 1.4.4'
+In your Gemfile:
 
-### CSS
+    gem 'sass-rails', '~> 3.1'
+    gem 'bootstrap-sass', '~> 2.0.0'
 
-In your SCSS file of choice:
+**Note**: previous versions of bootstrap-sass automatically required sass-rails. This is no longer the case, and you will *need* to require it in your Gemfile.
 
-    @import "bootstrap"; /* Use this to get all of Bootstrap's @mixins and $variables */
+#### CSS
 
-Want to configure a variable? Thanks to bernado, this is now awesome *and* easy! Just define the variables you want to change *before* importing Bootstrap. SASS will respect your existing definition and won't overwrite it with the Bootstrap defaults.
+Import "bootstrap" in your SCSS file of choice to get all of Bootstrap's styles, mixins and variables! Don't use Sproket's `//= require` directives for SASS files, because they're horrible and will kill your cat.
 
-    $gridColumns: 12;
-    $gridColumnWidth: 60px;
-    $gridGutterWidth: 20px;
     @import "bootstrap";
 
-### Javascript
+Need to configure a variable or two? Simple define the value of the variable you want to change *before* importing Bootstrap. SASS will be awesome and respect your existing definition rather than overwriting it with the Bootstrap defaults. A list of customisable variables can be found in the [Bootstrap documentation](http://twitter.github.com/bootstrap/less.html#variables).
 
-In your Javascript manifest:
+    $primaryButtonBackground: #f00;
+    @import "bootstrap";
+
+#### Javascripts
+
+You can include the Bootstrap javascripts through two methods. In this case, Sproket's `//= require` directives are useful and will not cause feline death.
+
+We have a helper that includes all available javascripts:
 
     // Loads all Bootstrap javascripts
     //= require bootstrap
-    
-    // Alternatively, you can load individual modules
+
+You can also load individual modules, provided you sort out any related dependencies.
+
     //= require bootstrap-scrollspy
     //= require bootstrap-modal
     //= require bootstrap-dropdown
 
 Simples.
 
-## Versioning
-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.
+### Compass
+
+`bootstrap-sass` 2.0 now comes with support for Compass, meaning projects that don't use Rails can get in on the fun Bootstrap web.
+
+#### New project
+
+Install the gem and create a new project using the gem.
+
+    gem install bootstrap-sass
+    compass create compass-test -r bootstrap-sass --using bootstrap
+
+This will sort a few things out:
+
+* You'll get a starting `styles.scss` ready for your alterations
+* You'll get a compiled stylesheet compiled & ready to drop into your application
+* We'll also copy the Bootstrap javascripts & images into their respective folders for you, absolutely free of charge! How cool is that?
+
+#### Existing project
+
+Install the gem, add the require statement to the top of your configuration file, and install the extension.
+
+    gem install bootstrap-sass
+
+    # In config.rb
+    require 'bootstrap-sass'
+
+    compass install bootstrap
+
+You'll get the same benefits as those starting from scratch. Radical.
 
-## Branches
-Master will usually represent the latest release of `bootstrap-sass`. Other branches contain experimental code, or are a relatively close mirror of other Bootstrap branches.
+----
 
+As per the Bootstrap project we don't include the responsive styles by default. `@import "bootstrap-responsive";` to get them.

data/lib/bootstrap-sass.rb

@@ -1,12 +1,30 @@
-require 'sass-rails'
-
 module Bootstrap
-  module Rails
-    class Engine < ::Rails::Engine
-      # Rails, will you please look in our vendor? kthx
+  class FrameworkNotFound < StandardError; end
 
-      paths["config/initializers"] << 'lib/bootstrap-sass/config'
+  # Inspired by Kaminari
+  def self.load!
+    if rails?
+      require 'sass-rails' # See: https://github.com/thomas-mcdonald/bootstrap-sass/pull/4
+      require 'bootstrap-sass/engine'
+    elsif compass?
+      require 'bootstrap-sass/compass_extensions'
+      base = File.join(File.dirname(__FILE__), '..')
+      styles = File.join(base, 'vendor', 'assets', 'stylesheets')
+      templates = File.join(base, 'templates')
+      ::Compass::Frameworks.register('bootstrap', :stylesheets_directory => styles, :templates_directory => templates)
+    else
+      raise Bootstrap::FrameworkNotFound, "bootstrap-sass requires either Rails or Compass, neither of which are loaded"
     end
   end
+
+  private
+  def self.rails?
+    defined?(::Rails)
+  end
+
+  def self.compass?
+    defined?(::Compass)
+  end
 end
 
+Bootstrap.load!

data/lib/bootstrap-sass/compass_extensions.rb

@@ -0,0 +1,10 @@
+# This contains functions for use with a project *only* using Compass.
+
+module Sass::Script::Functions
+  # Define asset_url for Compass to allow use of sprites.
+  def asset_url(asset, type)
+    asset_sans_quotes = asset.value.gsub('"', '')
+    path = Sass::Script::String.new("/#{type}s/#{asset_sans_quotes}", :string)
+    Sass::Script::String.new("url(#{path})")
+  end
+end

data/lib/bootstrap-sass/config/sass_extentions.rb

@@ -0,0 +1,14 @@
+require 'sass'
+
+module Sass::Script::Functions
+  # LARS: Snatched from compass - 2011-11-29 - used for gradients in IE6-9
+  # returns an IE hex string for a color with an alpha channel
+  # suitable for passing to IE filters.
+  def ie_hex_str(color)
+    assert_type color, :Color
+    alpha = (color.alpha * 255).round
+    alphastr = alpha.to_s(16).rjust(2, '0')
+    Sass::Script::String.new("##{alphastr}#{color.send(:hex_str)[1..-1]}".upcase)
+  end
+  declare :ie_hex_str, [:color]
+end

data/lib/bootstrap-sass/engine.rb

@@ -0,0 +1,9 @@
+module Bootstrap
+  module Rails
+    class Engine < ::Rails::Engine
+      # Rails, will you please look in our vendor? kthx
+      # also add our initializer.
+      paths["config/initializers"] << 'lib/bootstrap-sass/config'
+    end
+  end
+end

data/templates/project/manifest.rb

@@ -0,0 +1,18 @@
+description "Bootstrap for SASS"
+
+# Stylesheet importing bootstrap
+stylesheet 'styles.scss'
+
+#
+# Other Bootstrap assets
+basedir = '../../vendor/assets'
+
+# Glyphicons sprites
+%w(glyphicons-halflings glyphicons-halflings-white).each do |file|
+  image "#{basedir}/images/#{file}.png", :to => "#{file}.png"
+end
+
+# Javascripts
+%w(alert button carousel collapse dropdown modal popover scrollspy tab tooltip transition typeahead).each do |file|
+  javascript "#{basedir}/javascripts/bootstrap-#{file}.js", :to => "bootstrap-#{file}.js"
+end

data/templates/project/styles.scss

@@ -0,0 +1,5 @@
+// I gather this file is a starting point for the project.
+@import "bootstrap";
+
+// Include responsive Bootstrap styles
+// @import "bootstrap-responsive";

data/vendor/assets/javascripts/bootstrap-alert.js

@@ -0,0 +1,91 @@
+/* ==========================================================
+ * bootstrap-alert.js v2.0.0
+ * http://twitter.github.com/bootstrap/javascript.html#alerts
+ * ==========================================================
+ * Copyright 2012 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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( $ ){
+
+  "use strict"
+
+ /* ALERT CLASS DEFINITION
+  * ====================== */
+
+  var dismiss = '[data-dismiss="alert"]'
+    , Alert = function ( el ) {
+        $(el).on('click', dismiss, this.close)
+      }
+
+  Alert.prototype = {
+
+    constructor: Alert
+
+  , close: function ( e ) {
+      var $this = $(this)
+        , selector = $this.attr('data-target')
+        , $parent
+
+      if (!selector) {
+        selector = $this.attr('href')
+        selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
+      }
+
+      $parent = $(selector)
+      $parent.trigger('close')
+
+      e && e.preventDefault()
+
+      $parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent())
+
+      $parent.removeClass('in')
+
+      function removeElement() {
+        $parent.remove()
+        $parent.trigger('closed')
+      }
+
+      $.support.transition && $parent.hasClass('fade') ?
+        $parent.on($.support.transition.end, removeElement) :
+        removeElement()
+    }
+
+  }
+
+
+ /* ALERT PLUGIN DEFINITION
+  * ======================= */
+
+  $.fn.alert = function ( option ) {
+    return this.each(function () {
+      var $this = $(this)
+        , data = $this.data('alert')
+      if (!data) $this.data('alert', (data = new Alert(this)))
+      if (typeof option == 'string') data[option].call($this)
+    })
+  }
+
+  $.fn.alert.Constructor = Alert
+
+
+ /* ALERT DATA-API
+  * ============== */
+
+  $(function () {
+    $('body').on('click.alert.data-api', dismiss, Alert.prototype.close)
+  })
+
+}( window.jQuery )

data/vendor/assets/javascripts/bootstrap-button.js

@@ -0,0 +1,98 @@
+/* ============================================================
+ * bootstrap-button.js v2.0.0
+ * http://twitter.github.com/bootstrap/javascript.html#buttons
+ * ============================================================
+ * Copyright 2012 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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( $ ){
+
+  "use strict"
+
+ /* BUTTON PUBLIC CLASS DEFINITION
+  * ============================== */
+
+  var Button = function ( element, options ) {
+    this.$element = $(element)
+    this.options = $.extend({}, $.fn.button.defaults, options)
+  }
+
+  Button.prototype = {
+
+      constructor: Button
+
+    , setState: function ( state ) {
+        var d = 'disabled'
+          , $el = this.$element
+          , data = $el.data()
+          , val = $el.is('input') ? 'val' : 'html'
+
+        state = state + 'Text'
+        data.resetText || $el.data('resetText', $el[val]())
+
+        $el[val](data[state] || this.options[state])
+
+        // push to event loop to allow forms to submit
+        setTimeout(function () {
+          state == 'loadingText' ?
+            $el.addClass(d).attr(d, d) :
+            $el.removeClass(d).removeAttr(d)
+        }, 0)
+      }
+
+    , toggle: function () {
+        var $parent = this.$element.parent('[data-toggle="buttons-radio"]')
+
+        $parent && $parent
+          .find('.active')
+          .removeClass('active')
+
+        this.$element.toggleClass('active')
+      }
+
+  }
+
+
+ /* BUTTON PLUGIN DEFINITION
+  * ======================== */
+
+  $.fn.button = function ( option ) {
+    return this.each(function () {
+      var $this = $(this)
+        , data = $this.data('button')
+        , options = typeof option == 'object' && option
+      if (!data) $this.data('button', (data = new Button(this, options)))
+      if (option == 'toggle') data.toggle()
+      else if (option) data.setState(option)
+    })
+  }
+
+  $.fn.button.defaults = {
+    loadingText: 'loading...'
+  }
+
+  $.fn.button.Constructor = Button
+
+
+ /* BUTTON DATA-API
+  * =============== */
+
+  $(function () {
+    $('body').on('click.button.data-api', '[data-toggle^=button]', function ( e ) {
+      $(e.target).button('toggle')
+    })
+  })
+
+}( window.jQuery )

data/vendor/assets/javascripts/bootstrap-carousel.js

@@ -0,0 +1,154 @@
+/* ==========================================================
+ * bootstrap-carousel.js v2.0.0
+ * http://twitter.github.com/bootstrap/javascript.html#carousel
+ * ==========================================================
+ * Copyright 2012 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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( $ ){
+
+  "use strict"
+
+ /* CAROUSEL CLASS DEFINITION
+  * ========================= */
+
+  var Carousel = function (element, options) {
+    this.$element = $(element)
+    this.options = $.extend({}, $.fn.carousel.defaults, options)
+    this.options.slide && this.slide(this.options.slide)
+  }
+
+  Carousel.prototype = {
+
+    cycle: function () {
+      this.interval = setInterval($.proxy(this.next, this), this.options.interval)
+      return this
+    }
+
+  , to: function (pos) {
+      var $active = this.$element.find('.active')
+        , children = $active.parent().children()
+        , activePos = children.index($active)
+        , that = this
+
+      if (pos > (children.length - 1) || pos < 0) return
+
+      if (this.sliding) {
+        return this.$element.one('slid', function () {
+          that.to(pos)
+        })
+      }
+
+      if (activePos == pos) {
+        return this.pause().cycle()
+      }
+
+      return this.slide(pos > activePos ? 'next' : 'prev', $(children[pos]))
+    }
+
+  , pause: function () {
+      clearInterval(this.interval)
+      return this
+    }
+
+  , next: function () {
+      if (this.sliding) return
+      return this.slide('next')
+    }
+
+  , prev: function () {
+      if (this.sliding) return
+      return this.slide('prev')
+    }
+
+  , slide: function (type, next) {
+      var $active = this.$element.find('.active')
+        , $next = next || $active[type]()
+        , isCycling = this.interval
+        , direction = type == 'next' ? 'left' : 'right'
+        , fallback  = type == 'next' ? 'first' : 'last'
+        , that = this
+
+      this.sliding = true
+
+      isCycling && this.pause()
+
+      $next = $next.length ? $next : this.$element.find('.item')[fallback]()
+
+      if (!$.support.transition && this.$element.hasClass('slide')) {
+        this.$element.trigger('slide')
+        $active.removeClass('active')
+        $next.addClass('active')
+        this.sliding = false
+        this.$element.trigger('slid')
+      } else {
+        $next.addClass(type)
+        $next[0].offsetWidth // force reflow
+        $active.addClass(direction)
+        $next.addClass(direction)
+        this.$element.trigger('slide')
+        this.$element.one($.support.transition.end, function () {
+          $next.removeClass([type, direction].join(' ')).addClass('active')
+          $active.removeClass(['active', direction].join(' '))
+          that.sliding = false
+          setTimeout(function () { that.$element.trigger('slid') }, 0)
+        })
+      }
+
+      isCycling && this.cycle()
+
+      return this
+    }
+
+  }
+
+
+ /* CAROUSEL PLUGIN DEFINITION
+  * ========================== */
+
+  $.fn.carousel = function ( option ) {
+    return this.each(function () {
+      var $this = $(this)
+        , data = $this.data('carousel')
+        , options = typeof option == 'object' && option
+      if (!data) $this.data('carousel', (data = new Carousel(this, options)))
+      if (typeof option == 'number') data.to(option)
+      else if (typeof option == 'string' || (option = options.slide)) data[option]()
+      else data.cycle()
+    })
+  }
+
+  $.fn.carousel.defaults = {
+    interval: 5000
+  }
+
+  $.fn.carousel.Constructor = Carousel
+
+
+ /* CAROUSEL DATA-API
+  * ================= */
+
+  $(function () {
+    $('body').on('click.carousel.data-api', '[data-slide]', function ( e ) {
+      var $this = $(this), href
+        , $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
+        , options = !$target.data('modal') && $.extend({}, $target.data(), $this.data())
+      $target.carousel(options)
+      e.preventDefault()
+    })
+  })
+
+}( window.jQuery )