add boostrap-twipsy and bootstrap-alerts

11721f37 · Jacob Thornton · b68b53dc · 11721f37 · 11721f37 · 11721f37
Commit 11721f37 authored 13 years ago by Jacob Thornton
Hide whitespace changes
Inline Side-by-side

Showing

with 534 additions and 307 deletions
+534 -307
--- a/bootstrap-1.1.1.css
+++ b/bootstrap-1.1.1.css
@@ -6,7 +6,7 @@
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Sat Aug 27 00:28:54 PDT 2011
+ * Date: Sat Aug 27 13:02:54 PDT 2011
 */
 /* Reset.less
 * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here	that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
@@ -421,6 +421,12 @@ body {
  max-width: 1180px;
  margin-left: 240px;
 }
+.hide {
+  display: none;
+}
+.show {
+  display: block;
+}
 a {
  color: #0069d6;
  text-decoration: none;
@@ -431,115 +437,6 @@ a:hover {
  color: #0050a3;
  text-decoration: underline;
 }
-.btn {
-  display: inline-block;
-  background-color: #e6e6e6;
-  background-repeat: no-repeat;
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(0.25, #ffffff), to(#e6e6e6));
-  background-image: -webkit-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);
-  background-image: -moz-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);
-  background-image: -ms-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);
-  background-image: -o-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);
-  background-image: linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);
-  padding: 4px 14px;
-  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
-  color: #333;
-  font-size: 13px;
-  line-height: 18px;
-  border: 1px solid #ccc;
-  border-bottom-color: #bbb;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-}
-.btn:hover {
-  background-position: 0 -15px;
-  color: #333;
-  text-decoration: none;
-}
-.primary {
-  background-color: #0064cd;
-  background-repeat: repeat-x;
-  background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
-  background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
-  background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
-  background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
-  background-image: -o-linear-gradient(top, #049cdb, #0064cd);
-  background-image: linear-gradient(top, #049cdb, #0064cd);
-  color: #fff;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-  border: 1px solid #004b9a;
-  border-bottom-color: #003f81;
-}
-.primary:hover {
-  color: #fff;
-}
-.btn {
-  -webkit-transition: 0.1s linear all;
-  -moz-transition: 0.1s linear all;
-  -ms-transition: 0.1s linear all;
-  -o-transition: 0.1s linear all;
-  transition: 0.1s linear all;
-}
-.btn.primary {
-  color: #fff;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-  border-color: #0064cd #0064cd #003f81;
-  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-}
-.btn.primary:hover {
-  color: #fff;
-}
-.btn.large {
-  font-size: 16px;
-  line-height: 28px;
-  -webkit-border-radius: 6px;
-  -moz-border-radius: 6px;
-  border-radius: 6px;
-}
-.btn.small {
-  padding-right: 9px;
-  padding-left: 9px;
-  font-size: 11px;
-}
-.btn.disabled {
-  background-image: none;
-  filter: alpha(opacity=65);
-  -khtml-opacity: 0.65;
-  -moz-opacity: 0.65;
-  opacity: 0.65;
-  cursor: default;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
-.btn:disabled {
-  background-image: none;
-  filter: alpha(opacity=65);
-  -khtml-opacity: 0.65;
-  -moz-opacity: 0.65;
-  opacity: 0.65;
-  cursor: default;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
-.btn:disabled.primary {
-  color: #fff;
-}
-.btn:active {
-  -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-  -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-  box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-}
-button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-  padding: 0;
-  border: 0;
-}
 /* Typography.less
 * Headings, body text, lists, code, and more for a versatile and durable typography system
 * ---------------------------------------------------------------------------------------- */
@@ -1781,17 +1678,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
 }
-.modal-backdrop, .modal {
-  -webkit-transition: opacity 0.15s linear;
-  -moz-transition: opacity 0.15s linear;
-  -ms-transition: opacity 0.15s linear;
-  -o-transition: opacity 0.15s linear;
-  transition: opacity 0.15s linear;
-  opacity: 0;
-}
-.modal-backdrop.open, .modal.open {
-  opacity: 1;
-}
 .modal-backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
@@ -2007,3 +1893,20 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
 .popover .content p, .popover .content ul, .popover .content ol {
  margin-bottom: 0;
 }
+.modal-backdrop,
+.modal,
+.twipsy,
+.alert-message {
+  -webkit-transition: opacity 0.15s linear;
+  -moz-transition: opacity 0.15s linear;
+  -ms-transition: opacity 0.15s linear;
+  -o-transition: opacity 0.15s linear;
+  transition: opacity 0.15s linear;
+  opacity: 0;
+}
+.modal-backdrop.show,
+.modal.show,
+.twipsy.show,
+.alert-message.show {
+  opacity: 1;
+}
--- a/bootstrap-1.1.1.min.css
+++ b/bootstrap-1.1.1.min.css
@@ -67,16 +67,9 @@ body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:
 .container-fluid:after{clear:both;}
 .container-fluid .sidebar{float:left;width:220px;}
 .container-fluid .content{min-width:700px;max-width:1180px;margin-left:240px;}
+.hide{display:none;}
+.show{display:block;}
 a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:hover{color:#0050a3;text-decoration:underline;}
-.btn{display:inline-block;background-color:#e6e6e6;background-repeat:no-repeat;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(0.25, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);background-image:-moz-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);padding:4px 14px;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);color:#333;font-size:13px;line-height:18px;border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);}.btn:hover{background-position:0 -15px;color:#333;text-decoration:none;}
-.primary{background-color:#0064cd;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border:1px solid #004b9a;border-bottom-color:#003f81;}.primary:hover{color:#fff;}
-.btn{-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn.primary{color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}.btn.primary:hover{color:#fff;}
-.btn.large{font-size:16px;line-height:28px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
-.btn.small{padding-right:9px;padding-left:9px;font-size:11px;}
-.btn.disabled{background-image:none;filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;cursor:default;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
-.btn:disabled{background-image:none;filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;cursor:default;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.btn:disabled.primary{color:#fff;}
-.btn:active{-webkit-box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);}
-button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;}
 p{font-size:13px;font-weight:normal;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;}
 h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;}
 h1{margin-bottom:18px;font-size:30px;line-height:36px;}h1 small{font-size:18px;}
@@ -233,7 +226,6 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
 .pagination ul li.disabled a,.pagination ul li.disabled a:hover{background-color:transparent;color:#bfbfbf;}
 .pagination ul li.next a{border:0;}
 .well{background-color:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}
-.modal-backdrop,.modal{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.modal-backdrop.open,.modal.open{opacity:1;}
 .modal-backdrop{background-color:rgba(0, 0, 0, 0.5);position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;}
 .modal{position:fixed;top:50%;left:50%;z-index:2000;width:560px;margin:-280px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .modal-header{border-bottom:1px solid #eee;padding:5px 20px;}.modal .modal-header .close{position:absolute;right:10px;top:10px;color:#999;line-height:10px;font-size:18px;}
 .modal .modal-body{padding:20px;}
@@ -254,3 +246,4 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
 .popover .inner{background-color:#333;background-color:rgba(0, 0, 0, 0.8);*background-color:#333;padding:3px;overflow:hidden;width:280px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);}
 .popover .title{background-color:#f5f5f5;padding:9px 15px;line-height:1;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;border-bottom:1px solid #eee;}
 .popover .content{background-color:#ffffff;padding:14px;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;}
+.modal-backdrop,.modal,.twipsy,.alert-message{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.modal-backdrop.show,.modal.show,.twipsy.show,.alert-message.show{opacity:1;}
--- a/examples/assets/js/bootstrap-alerts.js
+++ b/examples/assets/js/bootstrap-alerts.js
+(function( $ ){
+
+  /* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
+   * ======================================================= */
+
+  $.support.transition = (function () {
+    var thisBody = document.body || document.documentElement
+      , thisStyle = thisBody.style
+      , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined
+    return support
+  })()
+
+
+ /* SHARED VARS
+  * =========== */
+
+   var transitionEnd
+
+  // set CSS transition event type
+  if ( $.support.transition ) {
+    transitionEnd = "TransitionEnd"
+    if ( $.browser.webkit ) {
+    	transitionEnd = "webkitTransitionEnd"
+    } else if ( $.browser.mozilla ) {
+    	transitionEnd = "transitionend"
+    } else if ( $.browser.opera ) {
+    	transitionEnd = "oTransitionEnd"
+    }
+  }
+
+
+ /* ALERT CLASS DEFINITION
+  * ====================== */
+
+  var Alert = function ( content ) {
+    var that = this
+    this.$element = $(content)
+    this.$element.delegate('.close', 'click', function (e) {
+      e.preventDefault()
+      that.close()
+    })
+  }
+
+  Alert.prototype = {
+
+    close: function () {
+      var that = this
+
+      function removeElement () {
+        that.$element.remove()
+        that.$element = null
+      }
+
+      $.support.transition ?
+        this.$element.bind(transitionEnd, removeElement) :
+        removeElement()
+
+      this.$element.removeClass('show')
+    }
+
+  }
+
+
+ /* ALERT PLUGIN DEFINITION
+  * ======================= */
+
+  $.fn.alert = function ( options ) {
+    return this.each(function () {
+      new Alert(this)
+    })
+  }
+
+})( jQuery || ender )
\ No newline at end of file
--- a/examples/assets/js/bootstrap-modals.js
+++ b/examples/assets/js/bootstrap-modals.js
@@ -34,11 +34,7 @@
  * ============================= */

  var Modal = function ( options ) {
-    this.settings = {
-      backdrop: false
-    , closeOnEscape: false
-    , content: false
-    }
+    this.settings = $.extend({}, $.fn.modal.defaults)

    if ( typeof options == 'string' ) {
      this.settings.content = options
@@ -59,8 +55,8 @@
      var that = this
      this.isOpen = true

-      _private.escape.call(this)
-      _private.backdrop.call(this)
+      _.escape.call(this)
+      _.backdrop.call(this)

      this.$element = $(this.settings.content)
        .delegate('.close', 'click', function (e) { e.preventDefault(); that.close() })
@@ -68,8 +64,8 @@
        .show()

      setTimeout(function () {
-        that.$element.addClass('open')
-        that.$backdrop && that.$backdrop.addClass('open')
+        that.$element.addClass('show')
+        that.$backdrop && that.$backdrop.addClass('show')
      }, 1)

      return this
@@ -80,10 +76,10 @@

      this.isOpen = false

-      _private.escape.call(this)
-      _private.backdrop.call(this)
+      _.escape.call(this)
+      _.backdrop.call(this)

-      this.$element.removeClass('open')
+      this.$element.removeClass('show')

      function removeElement () {
        that.$element.remove()
@@ -103,7 +99,7 @@
 /* MODAL PRIVATE METHODS
  * ===================== */

-  var _private = {
+  var _ = {

    backdrop: function () {
      var that = this
@@ -112,7 +108,7 @@
          .click(function () { that.close() })
          .appendTo(document.body)
      } else if ( !this.isOpen && this.$backdrop ) {
-        this.$backdrop.removeClass('open')
+        this.$backdrop.removeClass('show')

        function removeElement() {
          that.$backdrop.remove()
@@ -144,14 +140,16 @@
 /* MODAL PLUGIN DEFINITION
  * ======================= */

-  $.modal = function ( options ) {
-    return new Modal(options)
-  }
-
  $.fn.modal = function ( options ) {
    options = options || {}
    options.content = this
    return new Modal(options)
  }

+  $.fn.modal.defaults = {
+    backdrop: false
+  , closeOnEscape: false
+  , content: false
+  }
+
 })( jQuery || ender )
\ No newline at end of file
--- a/examples/assets/js/bootstrap-twipsy.js
+++ b/examples/assets/js/bootstrap-twipsy.js
+/* Based on the original tipsy by Jason Frame */
+
+(function( $ ) {
+
+  /* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
+   * ======================================================= */
+
+  $.support.transition = (function () {
+    var thisBody = document.body || document.documentElement
+      , thisStyle = thisBody.style
+      , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined
+    return support
+  })()
+
+
+ /* SHARED VARS
+  * =========== */
+
+  var transitionEnd
+
+  // set CSS transition event type
+  if ( $.support.transition ) {
+    transitionEnd = "TransitionEnd"
+    if ( $.browser.webkit ) {
+    	transitionEnd = "webkitTransitionEnd"
+    } else if ( $.browser.mozilla ) {
+    	transitionEnd = "transitionend"
+    } else if ( $.browser.opera ) {
+    	transitionEnd = "oTransitionEnd"
+    }
+  }
+
+
+ /* TWIPSY PUBLIC CLASS DEFINITION
+  * ============================== */
+
+  var Twipsy = function ( element, options ) {
+    this.$element = $(element)
+    this.options = options
+    this.enabled = true
+    this.fixTitle()
+  }
+
+  Twipsy.prototype = {
+
+    show: function() {
+      var title = this.getTitle()
+        , pos
+        , actualWidth
+        , actualHeight
+        , placement
+        , $tip
+        , tp
+
+      if (title && this.enabled) {
+        $tip = this.tip()
+        $tip.find('.twipsy-inner')[this.options.html ? 'html' : 'text'](title)
+        $tip[0].className = 'twipsy'
+        $tip
+          .remove()
+          .css({ top: 0, left: 0, display: 'block' })
+          .prependTo(document.body)
+
+        pos = $.extend({}, this.$element.offset(), {
+          width: this.$element[0].offsetWidth
+        , height: this.$element[0].offsetHeight
+        })
+
+        actualWidth = $tip[0].offsetWidth
+        actualHeight = $tip[0].offsetHeight
+        placement = _.maybeCall(this.options.placement, this.$element[0])
+
+        switch (placement) {
+          case 'below':
+            tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2}
+            break
+          case 'above':
+            tp = {top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2}
+            break
+          case 'left':
+            tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth - this.options.offset}
+            break
+          case 'right':
+            tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width + this.options.offset}
+            break
+        }
+
+        $tip
+          .css(tp)
+          .addClass(placement)
+          .addClass('show')
+      }
+    }
+
+  , hide: function() {
+      var that = this
+        , $tip = this.tip()
+
+      $tip.removeClass('show')
+
+      function removeElement () {
+        $tip.remove()
+      }
+
+      $.support.transition ?
+        $tip.bind(transitionEnd, removeElement) :
+        removeElement()
+    }
+
+  , fixTitle: function() {
+      var $e = this.$element
+      if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') {
+        $e.attr('data-original-title', $e.attr('title') || '').removeAttr('title')
+      }
+    }
+
+  , getTitle: function() {
+      var title
+        , $e = this.$element
+        , o = this.options
+
+        this.fixTitle()
+
+        if (typeof o.title == 'string') {
+          title = $e.attr(o.title == 'title' ? 'data-original-title' : o.title)
+        } else if (typeof o.title == 'function') {
+          title = o.title.call($e[0])
+        }
+
+        title = ('' + title).replace(/(^\s*|\s*$)/, "")
+
+        return title || o.fallback
+    }
+
+  , tip: function() {
+      if (!this.$tip) {
+        this.$tip = $('<div class="twipsy" />').html('<div class="twipsy-arrow"></div><div class="twipsy-inner"></div>')
+      }
+      return this.$tip
+    }
+
+  , validate: function() {
+      if (!this.$element[0].parentNode) {
+        this.hide()
+        this.$element = null
+        this.options = null
+      }
+    }
+
+  , enable: function() {
+      this.enabled = true
+    }
+
+  , disable: function() {
+      this.enabled = false
+    }
+
+  , toggleEnabled: function() {
+      this.enabled = !this.enabled
+    }
+
+  }
+
+
+ /* TWIPSY PRIVATE METHODS
+  * ====================== */
+
+   var _ = {
+
+     maybeCall: function ( thing, ctx ) {
+       return (typeof thing == 'function') ? (thing.call(ctx)) : thing
+     }
+
+   }
+
+
+ /* MODAL PLUGIN DEFINITION
+  * ======================= */
+
+  $.fn.twipsy = function(options) {
+
+    var twipsy
+      , binder
+      , eventIn
+      , eventOut
+
+    if (options === true) {
+      return this.data('twipsy')
+    } else if (typeof options == 'string') {
+      twipsy = this.data('twipsy')
+      if (twipsy) {
+        twipsy[options]()
+      }
+      return this
+    }
+
+    options = $.extend({}, $.fn.twipsy.defaults, options)
+
+    function get(ele) {
+      var twipsy = $.data(ele, 'twipsy')
+
+      if (!twipsy) {
+        twipsy = new Twipsy(ele, $.fn.twipsy.elementOptions(ele, options))
+        $.data(ele, 'twipsy', twipsy)
+      }
+
+      return twipsy
+    }
+
+    function enter() {
+      var twipsy = get(this)
+      twipsy.hoverState = 'in'
+
+      if (options.delayIn == 0) {
+        twipsy.show()
+      } else {
+        twipsy.fixTitle()
+        setTimeout(function() {
+          if (twipsy.hoverState == 'in') {
+            twipsy.show()
+          }
+        }, options.delayIn)
+      }
+    }
+
+    function leave() {
+      var twipsy = get(this)
+      twipsy.hoverState = 'out'
+      if (options.delayOut == 0) {
+        twipsy.hide()
+      } else {
+        setTimeout(function() {
+          if (twipsy.hoverState == 'out') {
+            twipsy.hide()
+          }
+        }, options.delayOut)
+      }
+    }
+
+    if (!options.live) {
+      this.each(function() {
+        get(this)
+      })
+    }
+
+    if (options.trigger != 'manual') {
+      binder   = options.live ? 'live' : 'bind'
+      eventIn  = options.trigger == 'hover' ? 'mouseenter' : 'focus'
+      eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur'
+      this[binder](eventIn, enter)[binder](eventOut, leave)
+    }
+
+    return this
+  }
+
+  $.fn.twipsy.defaults = {
+    delayIn: 0
+  , delayOut: 0
+  , fallback: ''
+  , placement: 'above'
+  , html: false
+  , live: false
+  , offset: 0
+  , title: 'title'
+  , trigger: 'hover'
+  }
+
+  $.fn.twipsy.elementOptions = function(ele, options) {
+    return $.metadata ? $.extend({}, options, $(ele).metadata()) : options
+  }
+
+})( jQuery || ender )
\ No newline at end of file
--- a/examples/bootstrap-js.html
+++ b/examples/bootstrap-js.html
@@ -13,9 +13,9 @@

    <!-- Le javascript -->
    <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
-    <script src="assets/js/bootstrap-modals.js"></script>
-    <!-- <script src="assets/js/bootstrap-alerts.js"></script> -->
-    <!-- <script src="assets/js/bootstrap-tips.js"></script> -->
+    <script src="assets/js/bootstrap-modal.js"></script>
+    <script src="assets/js/bootstrap-alerts.js"></script>
+    <script src="assets/js/bootstrap-twipsy.js"></script>
    <!-- <script src="assets/js/bootstrap-popovers.js"></script> -->

    <!-- Le styles -->
@@ -28,7 +28,7 @@
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
  </head>

-  <body style="padding-top: 60px">
+  <body style="padding: 60px 0">

    <!-- Topbar
    ================================================== -->
@@ -37,8 +37,10 @@
        <div class="container">
          <h3><a href="#">Bootstrap JS</a></h3>
          <ul>
-            <li class="active"><a href="#modal">Getting Started</a></li>
+            <li class="active"><a href="#javascript">Getting Started</a></li>
            <li><a href="#modal">Modals</a></li>
+            <li><a href="#alerts">Alerts</a></li>
+            <li><a href="#twipsy">Twipsy</a></li>
          </ul>
        </div>
      </div>
@@ -71,17 +73,18 @@
    <!-- Modal
    ================================================== -->

-    <section id="javascript">
+    <section id="modal">
      <div class="page-header">
-        <h1>Modals <small>bootstrap-modals.js</small></h1>
+        <h1>Modals <small>bootstrap-modal.js</small></h1>
      </div>
      <div class="row">
        <div class="span4 columns">
          <p>Our Modal plugin is <strong>super</strong> slim! We took special care to only include the bare functionality that we require at twitter, however we look forward to seeing all the cool stuff you do with it!</p>
+          <a href="assets/js/bootstrap-modal.js" class="btn primary">Download</a>
        </div>
        <div class="span12 columns">
          <h2>Using bootstrap-modal</h2>
-          <pre class="prettyprint linenums">$('#modal-content').modal();</pre>
+          <pre class="prettyprint linenums">$('#modal-content').modal(options)</pre>
          <h3>Options</h3>
          <ul>
            <li><strong>backdrop</strong> (<code>boolean</code>) - if true, it will include a modal-backdrop element.</li>
@@ -89,23 +92,12 @@
            <li><strong>content</strong> (<code>string</code>) - alternative way of supplying modal class with HTML content.</li>
          </ul>
          <h3>Methods</h3>
-          <h4>$.modal</h4>
-          <p>Returns an instance of the modal class. It accepts either a <code>string</code> or an options <code>object</code>.</p>
-<pre class="prettyprint linenums">
-// Accepts HTML string
-$.modal(modalHTML)
-
-// Accepts Options
-$.modal({
-  backdrop: true
-, content: modalHTML
-})</pre>
          <h4>$().modal</h4>
          <p>Returns an instance of the modal class. Accepts an optional options <code>object</code>.</p>
 <pre class="prettyprint linenums">
 $('#modal-content').modal({
  closeOnEscape: true
-});</pre>
+})</pre>
          <h4>.toggle</h4>
          <p>Returns an instance of the modal class. Toggle the modal open state.</p>
          <pre class="prettyprint linenums">$('#modal-content').modal().toggle()</pre>
@@ -118,7 +110,7 @@ $('#modal-content').modal({
          <h3>Demo</h3>

          <!-- sample modal content -->
-          <div id="modal-from-dom" style="display: none" class="modal">
+          <div id="modal-from-dom" class="modal hide">
            <div class="modal-header">
              <h3>Modal Heading</h3>
              <a href="#" class="close">&times;</a>
@@ -132,50 +124,17 @@ $('#modal-content').modal({
            </div>
          </div>

-          <button id="modal-basic" class="btn">Basic Modal</button>
-          <button id="modal-options" class="btn">Modal Options</button>
-          <button id="modal-from-element" class="btn">Modal From Element</button>
+          <button id="modal-from-element" class="btn">Launch Modal</button>

          <script>
            $(function () {
-
-              var modalHTML =
-                  '<div class="modal">'
-                + '<div class="modal-header">'
-                + '<h3>Modal Heading</h3>'
-                + '<a href="#" class="close">&times;</a>'
-                + '</div>'
-                + '<div class="modal-body">'
-                + '<p>One fine body…</p>'
-                + '</div>'
-                + '<div class="modal-footer">'
-                + '<a href="#" class="btn primary">Primary</a>'
-                + '<a href="#" class="btn secondary">Secondary</a>'
-                + '</div>'
-                + '</div>'
-
-              var simpleModal = $.modal(modalHTML)
-                , optionModal = $.modal({
-                    backdrop: true
-                  , content: modalHTML
-                  , closeOnEscape: true
-                })
-                , domModal = $("#modal-from-dom").modal({
-                    backdrop: true
-                  , content: modalHTML
-                  , closeOnEscape: true
-                })
-
-              $('#modal-basic').click(function () {
-                simpleModal.toggle()
-              });
-
-              $('#modal-options').click(function () {
-                optionModal.toggle();
-              });
+              var domModal = $("#modal-from-dom").modal({
+                backdrop: true
+              , closeOnEscape: true
+              })

              $('#modal-from-element').click(function () {
-                domModal.toggle();
+                domModal.toggle()
              })

            })
@@ -184,6 +143,110 @@ $('#modal-content').modal({
        </div>
      </div>
    </section>
+
+    <!-- Alerts
+    ================================================== -->
+
+    <section id="alerts">
+      <div class="page-header">
+        <h1>Alerts <small>bootstrap-alerts.js</small></h1>
+      </div>
+      <div class="row">
+        <div class="span4 columns">
+          <p>The alert plugin is a super tiny class for adding close functionality to alerts.</p>
+          <a href="assets/js/bootstrap-alerts.js" class="btn primary">Download</a>
+        </div>
+        <div class="span12 columns">
+          <h2>Using bootstrap-alert</h2>
+          <pre class="prettyprint linenums">$(".alert-message").alert()</pre>
+          <h3>Methods</h3>
+          <h4>$().alert</h4>
+          <p>Wraps all alerts with close functionality.</p>
+          <h3>Demo</h3>
+          <div class="alert-message show warning">
+            <a class="close" href="#">&times;</a>
+            <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
+          </div>
+          <div class="alert-message show block-message error">
+            <a class="close" href="#">&times;</a>
+            <p><strong>Oh snap! You got an error!</strong> Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
+            <div class="alert-actions">
+              <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
+            </div>
+          </div>
+          <script>
+            $(function () {
+              $(".alert-message").alert()
+            })
+          </script>
+        </div>
+      </div>
+    </section>
+
+    <!-- Tips
+    ================================================== -->
+
+    <section id="twipsy">
+      <div class="page-header">
+        <h1>Twipsy <small>bootstrap-twipsy.js</small></h1>
+      </div>
+      <div class="row">
+        <div class="span4 columns">
+          <p>Based on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for title storage!</p>
+          <a href="assets/js/bootstrap-twipsy.js" class="btn primary">Download</a>
+        </div>
+        <div class="span12 columns">
+          <h2>Using bootstrap-twipsy.js</h2>
+          <pre class="prettyprint linenums">$('#example').twipsy(options)</pre>
+          <h3>Options</h3>
+          <ul>
+            <li><strong>delayIn</strong> (<code>number</code>) - delay before showing tooltip (ms).</li>
+            <li><strong>delayOut</strong> (<code>number</code>) - delay before hiding tooltip (ms).</li>
+            <li><strong>fallback</strong> (<code>string</code>) - fallback text to use when no tooltip text.</li>
+            <li><strong>placement</strong> (<code>string</code>) - position of tooltip - above | below | left | right.</li>
+            <li><strong>html</strong> (<code>boolean</code>) - is tooltip content HTML?</li>
+            <li><strong>live</strong> (<code>boolean</code>) - use live event support?</li>
+            <li><strong>offset</strong> (<code>number</code>) - pixel offset of tooltip from element.</li>
+            <li><strong>title</strong> (<code>string|function</code>) - attribute/callback containing tooltip text.</li>
+            <li><strong>trigger</strong> (<code>string</code>) - how tooltip is triggered - hover | focus | manual.</li>
+          </ul>
+          <h3>Methods</h3>
+          <h4>$().twipsy</h4>
+          <p>Attaches a twipsy handler to an element collection.</p>
+          <h3>Demo</h3>
+          <p>Mustache next level keffiyeh you <a href="#" rel='twipsy' title='Some title text'>probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown you probably haven't heard of them before they sold out. Farm-to-table <a href="#" rel='twipsy' title='i <3 cardigans'>cardigans</a> seitan tofu, mcsweeney's fixie sustainable quinoa 8-bit american apparel terry richardson vinyl chambray. Fap beard stumptown, <a href="#" rel='twipsy' title='Another twipsy'>williamsburg</a> banh mi lomo thundercats. DIY tofu biodiesel marfa, four loko mcsweeney's master cleanse vegan chambray. Etsy fap ethical, wes anderson farm-to-table +1 whatever bicycle rights mixtape portland readymade letterpress artisan. Four loko artisan whatever keytar, scenester farm-to-table <a href="#" rel='twipsy' title='The last tip!'>PBR</a> banksy Austin freegan cred raw denim single-origin coffee viral.
+          </p>
+          <script>
+            $(function () {
+              $("a[rel=twipsy]").twipsy({
+                live: true
+              })
+            })
+          </script>
+        </div>
+      </div>
+    </section>
+
+
+    <!-- Section
+    ================================================== -->
+
+    <!--
+    <section id="section">
+      <div class="page-header">
+        <h1></h1>
+      </div>
+      <div class="row">
+        <div class="span4 columns">
+          <p></p>
+        </div>
+        <div class="span12 columns">
+          <h3></h3>
+          <p></p>
+        </div>
+      </div>
+    </section>
+    -->
    </div>
  </body>
 </html>
\ No newline at end of file
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -291,7 +291,6 @@ footer {
 // BUTTON STYLES
 // -------------

-
 // Base .btn styles
 .btn {
  // Button Base
@@ -422,7 +421,6 @@ input[type=submit].btn {
    padding: 14px;
    border-color: #fceec1;
    .box-shadow(none);
-
    p {
      margin-right: 30px;
    }
@@ -579,15 +577,6 @@ input[type=submit].btn {
 // MODALS
 // ------

-.modal-backdrop,
-.modal {
-  .transition(opacity .15s linear);
-  opacity: 0;
-  &.open {
-    opacity: 1;
-  }
-}
-
 .modal-backdrop {
  background-color: rgba(0,0,0,.5);
  position: fixed;
@@ -758,3 +747,18 @@ input[type=submit].btn {
    }
  }
 }
+
+
+// Pattern Animations
+// ------------------
+
+.modal-backdrop,
+.modal,
+.twipsy,
+.alert-message {
+  .transition(opacity .15s linear);
+  opacity: 0;
+  &.show {
+    opacity: 1;
+  }
+}
\ No newline at end of file
--- a/lib/scaffolding.less
+++ b/lib/scaffolding.less
@@ -101,6 +101,13 @@ body {
  }
 }

+.hide {
+  display: none;
+}
+
+.show {
+  display: block;
+}

 // BASE STYLES
 // -----------
@@ -115,90 +122,4 @@ a {
    color: @linkColorHover;
    text-decoration: underline;
  }
-}
-
-// Buttons
-.btn {
-  display: inline-block;
-  #gradient > .vertical-three-colors(#fff, #fff, 0.25, darken(#fff, 10%));
-  padding: 4px 14px;
-  text-shadow: 0 1px 1px rgba(255,255,255,.75);
-  color: #333;
-  font-size: 13px;
-  line-height: @baseline;
-  border: 1px solid #ccc;
-  border-bottom-color: #bbb;
-  .border-radius(4px);
-  @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
-  .box-shadow(@shadow);
-  &:hover {
-    background-position: 0 -15px;
-    color: #333;
-    text-decoration: none;
-  }
-}
-.primary {
-  #gradient > .vertical(#049CDB, #0064CD);
-  color: #fff;
-  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
-  border: 1px solid darken(#0064CD, 10%);
-  border-bottom-color: darken(#0064CD, 15%);
-  &:hover {
-    color: #fff;
-  }
-}
-
-.btn {
-  //.button(#1174C6);
-  .transition(.1s linear all);
-  &.primary {
-    //#gradient > .vertical(@blue, @blueDark);
-    color: #fff;
-    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
-    border-color: @blueDark @blueDark darken(@blueDark, 15%);
-    border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
-    &:hover {
-      color: #fff;
-    }
-  }
-  &.large {
-    font-size: 16px;
-    line-height: 28px;
-    .border-radius(6px);
-  }
-  &.small {
-    padding-right: 9px;
-    padding-left: 9px;
-    font-size: 11px;
-  }
-  &.disabled {
-    background-image: none;
-    .opacity(65);
-    cursor: default;
-    .box-shadow(none);
-  }
-
-  // this can't be included with the .disabled def because IE8 and below will drop it ;_;
-  &:disabled {
-    background-image: none;
-    .opacity(65);
-    cursor: default;
-    .box-shadow(none);
-    &.primary {
-      color: #fff;
-    }
-  }
-  &:active {
-    @shadow: inset 0 3px 7px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
-    .box-shadow(@shadow);
-  }
-}
-
-// Help Firefox not be a jerk about adding extra padding to buttons
-button.btn,
-input[type=submit].btn {
-  &::-moz-focus-inner {
-  	padding: 0;
-  	border: 0;
-  }
-}
+}
\ No newline at end of file