compass_twitter_bootstrap 0.1.8 → 2.0.0

data/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Overview
 
+## 2.0.0
+* Updated twitter bootstrap to 2.0
+* Updated import script
+* Changed version number to match twitter boot
+* Added link to demo app
+
 ## 0.1.8
 * Upgraded to twitter bootstrap version 1.4
 * Add Javascript files to vendors directory (thanks to tmaier)

data/README.md

@@ -1,7 +1,9 @@
-# TWITTER BOOTSTRAP - For Compass
+# Twitter Bootstrap - For Compass
 
 Compass Twitter Bootstrap is Twitter's toolkit converted for Compass.
 
+Demo App at https://github.com/vwall/Compass-Twitter-Bootstrap-Demo-App
+
 ## Usage
 
 **Install the gem**
@@ -24,12 +26,16 @@ Compass Twitter Bootstrap is Twitter's toolkit converted for Compass.
 
     @import "compass_twitter_bootstrap";
 
-## Usage with asset pipeline(Rails 3.1)
+## Usage with asset pipeline(Rails 3.2)
 
 **Add it to your Gemfile**
 
     gem 'compass_twitter_bootstrap'
 
+**Use the new compass-rails gem.  See https://github.com/Compass/compass-rails for more info.**
+
+    gem 'compass-rails'
+
 **Bundle install**
 
     bundle install
@@ -39,16 +45,16 @@ Compass Twitter Bootstrap is Twitter's toolkit converted for Compass.
     # Enable the asset pipeline
     config.assets.enabled = true
 
-    # Compass integration
-    config.sass.load_paths << Compass::Frameworks['compass'].stylesheets_directory
-    config.sass.load_paths << Compass::Frameworks['twitter_bootstrap'].stylesheets_directory
-
 **Import it into your SCSS file**
 
     @import "compass_twitter_bootstrap"
 
+**Import twitter bootstrap responsive if you're looking for that**
+
+    @import "compass_twitter_bootstrap_responsive"
+
 
-## Usage with Rails 3.1.1 (via plugin)
+## Usage with Rails 3.1 (via plugin)
 
 **Install plugin**
 
@@ -63,7 +69,7 @@ Compass Twitter Bootstrap is Twitter's toolkit converted for Compass.
     config.load_paths << Compass::Frameworks['twitter_bootstrap'].stylesheets_directory
 
     ...
-  end
+    end
 
 **Import it into your SCSS file**
 

data/build/convert.rb

@@ -1,27 +1,28 @@
 require 'open-uri'
+require 'json'
 
 class Convert
+
   def process
-    less_files.each do |name, file|
-      file = open_git_file(file)
-      file = convert(file)
-      save_file(name, file)
-    end
+    get_less_files.each do |name|
+      unless ['bootstrap.less', 'responsive.less'].include?(name)
+        file = open_git_file("https://raw.github.com/twitter/bootstrap/master/less/#{name}")
+        file = convert(file) 
 
-    self.fix_opacity
+        if name == 'progress-bars.less'
+          file = fix_progress_bar(file)
+        end
 
-    self.create_sass_files
-  end
+        save_file(name, file) unless name == 'mixins.less'
+      end
+    end
 
-  def process_mixins
-    file = 'https://raw.github.com/twitter/bootstrap/master/lib/mixins.less'
-    file = open_git_file(file)
-    file = replace_mixins(file)
-    save_file('_mixins', file)
+    self.create_sass_files
   end
-
   
   def create_sass_files
+    puts 'Creating sass files for testing'
+
     scss_files = 'stylesheets'
 
     Dir.glob(scss_files+'/*').each do |dir|
@@ -39,34 +40,43 @@ class Convert
     end
   end
 
-  def fix_opacity
-    loc = "stylesheets/compass_twitter_bootstrap/_patterns.scss"
-    scss = File.open(loc, "r").read
-    scss = replace_opacity(scss)
-    save_file('_patterns', scss)
+private
+
+  # Get the sha of less branch
+  def get_tree_sha
+    sha = nil
+    trees = open('https://api.github.com/repos/twitter/bootstrap/git/trees/master').read
+    trees = JSON.parse trees
+
+    trees['tree'].select do |t|
+      if t['path'] == 'less'
+        sha = t['sha']
+      end
+    end
+
+    sha
   end
 
-private
+  def get_less_files
+    file_list = []
+    files = open("https://api.github.com/repos/twitter/bootstrap/git/trees/#{get_tree_sha}").read
+    files = JSON.parse files
+    files['tree'].each{|f| file_list << f['path']}
 
-  def less_files
-    {
-      '_reset'       => 'https://raw.github.com/twitter/bootstrap/master/lib/reset.less',
-      '_variables'   => 'https://raw.github.com/twitter/bootstrap/master/lib/variables.less',
-      '_scaffolding' => 'https://raw.github.com/twitter/bootstrap/master/lib/scaffolding.less',
-      '_type'        => 'https://raw.github.com/twitter/bootstrap/master/lib/type.less',
-      '_forms'       => 'https://raw.github.com/twitter/bootstrap/master/lib/forms.less',
-      '_tables'      => 'https://raw.github.com/twitter/bootstrap/master/lib/tables.less',
-      '_patterns'    => 'https://raw.github.com/twitter/bootstrap/master/lib/patterns.less'
-    }
+    file_list
   end
 
+
   def convert(file)
     file = replace_vars(file)
     file = replace_fonts(file)
+    file = replace_font_family(file)
     file = replace_grads(file)
     file = replace_mixins(file)
+    file = replace_less_extend(file)
     file = replace_includes(file)
     file = replace_spin(file)
+    file = replace_opacity(file)
 
     file
   end
@@ -76,18 +86,29 @@ private
   end
 
   def save_file(name, content)
-    f = File.open("stylesheets/compass_twitter_bootstrap/#{name}.scss", "w+")
+    name = name.gsub(/\.less/, '')
+    f = File.open("stylesheets/compass_twitter_bootstrap/_#{name}.scss", "w+")
     f.write(content)
     f.close
-    puts "Converted#{name}\n"
+    puts "Converted #{name}\n"
   end
 
   def replace_vars(less)
     less.gsub(/@/, '$')
   end
 
+  def fix_progress_bar(less)
+    less = less.gsub(/(\$)(-webkit-keyframes progress-bar-stripes)/, '@\2')
+    less = less.gsub(/(\$)(-moz-keyframes)/, '@\2')
+    less = less.gsub(/(\$)(keyframes progress-bar-stripes)/, '@\2')
+  end
+
   def replace_fonts(less)
-    less.gsub(/#font \> \.([\w-]+)/, '@include \1')
+    less.gsub(/#font \> \.([\w-]+)/, '@include font-\1')
+  end
+
+  def replace_font_family(less)
+    less.gsub(/#font \> #family \> \.([\w-]+)/, '@include font-family-\1')
   end
 
   def replace_grads(less)
@@ -102,6 +123,10 @@ private
     less.gsub(/\.([\w-]*)(\(.*\));?/, '@include \1\2;')
   end
 
+  def replace_less_extend(less)
+    less.gsub(/\#(\w+) \> \.([\w-]*)(\(.*\));?/, '@include \1-\2\3;')
+  end
+
   def replace_spin(less)
     less.gsub(/spin/, 'adjust-hue')
   end

data/lib/compass_twitter_bootstrap.rb

@@ -1,6 +1,6 @@
 require "compass_twitter_bootstrap/version"
 
-if ::Rails.version >= "3.1"
+if defined?(::Rails) && ::Rails.version >= "3.1"
   require 'compass_twitter_bootstrap/engine'
 end
 

data/lib/compass_twitter_bootstrap/version.rb

@@ -1,3 +1,3 @@
 module CompassTwitterBootstrap
-  VERSION = "0.1.8"
+  VERSION = "2.0.0"
 end

data/stylesheets/_compass_twitter_bootstrap.scss

@@ -1,28 +1,66 @@
 /*!
- * Bootstrap v1.3.0
+ * Bootstrap v2.0.0
  *
- * Copyright 2011 Twitter, Inc
+ * Copyright 2012 Twitter, Inc
  * Licensed under the Apache License v2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: @DATE
  */
 
 @import "compass";
 
+@import "compass_twitter_bootstrap/mixins";
+
 // CSS Reset
 @import "compass_twitter_bootstrap/reset";
 
 // Core variables and mixins
-@import "compass_twitter_bootstrap/variables";
-@import "compass_twitter_bootstrap/mixins";
+@import "compass_twitter_bootstrap/variables"; // Modify this for custom colors, font-sizes, etc
+
 
 // Grid system and page structure
 @import "compass_twitter_bootstrap/scaffolding";
+@import "compass_twitter_bootstrap/grid";
+@import "compass_twitter_bootstrap/layouts";
 
-// Styled patterns and elements
+// Base CSS
 @import "compass_twitter_bootstrap/type";
+@import "compass_twitter_bootstrap/code";
 @import "compass_twitter_bootstrap/forms";
 @import "compass_twitter_bootstrap/tables";
-@import "compass_twitter_bootstrap/patterns";
+
+// Components: common
+@import "compass_twitter_bootstrap/sprites";
+@import "compass_twitter_bootstrap/dropdowns";
+@import "compass_twitter_bootstrap/wells";
+@import "compass_twitter_bootstrap/component-animations";
+@import "compass_twitter_bootstrap/close";
+
+// Components: Buttons & Alerts
+@import "compass_twitter_bootstrap/buttons";
+@import "compass_twitter_bootstrap/button-groups";
+@import "compass_twitter_bootstrap/alerts"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less
+
+// Components: Nav
+@import "compass_twitter_bootstrap/navs";
+@import "compass_twitter_bootstrap/navbar";
+@import "compass_twitter_bootstrap/breadcrumbs";
+@import "compass_twitter_bootstrap/pagination";
+@import "compass_twitter_bootstrap/pager";
+
+// Components: Popovers
+@import "compass_twitter_bootstrap/modals";
+@import "compass_twitter_bootstrap/tooltip";
+@import "compass_twitter_bootstrap/popovers";
+
+// Components: Misc
+@import "compass_twitter_bootstrap/thumbnails";
+@import "compass_twitter_bootstrap/labels";
+@import "compass_twitter_bootstrap/progress-bars";
+@import "compass_twitter_bootstrap/accordion";
+@import "compass_twitter_bootstrap/carousel";
+@import "compass_twitter_bootstrap/hero-unit";
+
+// Utility classes
+@import "compass_twitter_bootstrap/utilities"; // Has to be last to override when necessary

data/stylesheets/_compass_twitter_bootstrap_responsive.scss

@@ -0,0 +1,322 @@
+/*!
+ * Bootstrap Responsive v2.0.0
+ *
+ * Copyright 2012 Twitter, Inc
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Designed and built with all the love in the world @twitter by @mdo and @fat.
+ */
+
+// RESPONSIVE
+// For phone and tablet devices
+// -------------------------------------------------------------
+
+
+// REPEAT VARIABLES & MIXINS
+// -------------------------
+// Required since we compile the responsive stuff separately
+
+@import "compass_twitter_bootstrap/variables"; // Modify this for custom colors, font-sizes, etc
+@import "compass_twitter_bootstrap/mixins";
+
+
+// RESPONSIVE CLASSES
+// ------------------
+
+// Hide from screenreaders and browsers
+// Credit: HTML5 Boilerplate
+.hidden {
+  display: none;
+  visibility: hidden;
+}
+
+
+
+// UP TO LANDSCAPE PHONE
+// ---------------------
+
+@media (max-width: 480px) {
+
+  // Smooth out the collapsing/expanding nav
+  .nav-collapse {
+    -webkit-transform: translate3d(0, 0, 0); // activate the GPU
+  }
+
+  // Block level the page header small tag for readability
+  .page-header h1 small {
+    display: block;
+    line-height: $baseLineHeight;
+  }
+
+  // Make span* classes full width
+  input[class*="span"],
+  select[class*="span"],
+  textarea[class*="span"],
+  .uneditable-input {
+    display: block;
+    width: 100%;
+    height: 28px; /* Make inputs at least the height of their button counterpart */
+    /* Makes inputs behave like true block-level elements */
+    -webkit-box-sizing: border-box; /* Older Webkit */
+       -moz-box-sizing: border-box; /* Older FF */
+        -ms-box-sizing: border-box; /* IE8 */
+            box-sizing: border-box; /* CSS3 spec*/
+  }
+  // But don't let it screw up prepend/append inputs
+  .input-prepend input[class*="span"],
+  .input-append input[class*="span"] {
+    width: auto;
+  }
+
+  // Update checkboxes for iOS
+  input[type="checkbox"],
+  input[type="radio"] {
+    border: 1px solid #ccc;
+  }
+
+  // Remove the horizontal form styles
+  .form-horizontal .control-group > label {
+    float: none;
+    width: auto;
+    padding-top: 0;
+    text-align: left;
+  }
+  // Move over all input controls and content
+  .form-horizontal .controls {
+    margin-left: 0;
+  }
+  // Move the options list down to align with labels
+  .form-horizontal .control-list {
+    padding-top: 0; // has to be padding because margin collaspes
+  }
+  // Move over buttons in .form-actions to align with .controls
+  .form-horizontal .form-actions {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+
+  // Modals
+  .modal {
+    position: absolute;
+    top:   10px;
+    left:  10px;
+    right: 10px;
+    width: auto;
+    margin: 0;
+    &.fade.in { top: auto; }
+  }
+  .modal-header .close {
+    padding: 10px;
+    margin: -10px;
+  }
+
+  // Carousel
+  .carousel-caption {
+    position: static;
+  }
+
+}
+
+
+
+// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
+// --------------------------------------------------
+
+@media (max-width: 768px) {
+  // GRID & CONTAINERS
+  // -----------------
+  // Remove width from containers
+  .container {
+    width: auto;
+    padding: 0 20px;
+  }
+  // Fluid rows
+  .row-fluid {
+    width: 100%;
+  }
+  // Undo negative margin on rows
+  .row {
+    margin-left: 0;
+  }
+  // Make all columns even
+  .row > [class*="span"],
+  .row-fluid > [class*="span"] {
+    float: none;
+    display: block;
+    width: auto;
+    margin: 0;
+  }
+}
+
+
+
+// PORTRAIT TABLET TO DEFAULT DESKTOP
+// ----------------------------------
+
+@media (min-width: 768px) and (max-width: 980px) {
+
+  // Fixed grid
+  @include gridSystem-generate(12, 42px, 20px);
+
+  // Fluid grid
+  @include fluidGridSystem-generate(12, 5.801104972%, 2.762430939%);
+
+  // Input grid
+  @include inputGridSystem-generate(12, 42px, 20px);
+
+}
+
+
+
+// TABLETS AND BELOW
+// -----------------
+@media (max-width: 980px) {
+
+  // UNFIX THE TOPBAR
+  // ----------------
+  // Remove any padding from the body
+  body {
+    padding-top: 0;
+  }
+  // Unfix the navbar
+  .navbar-fixed-top {
+    position: static;
+    margin-bottom: $baseLineHeight;
+  }
+  .navbar-fixed-top .navbar-inner {
+    padding: 5px;
+  }
+  .navbar .container {
+    width: auto;
+    padding: 0;
+  }
+  // Account for brand name
+  .navbar .brand {
+    padding-left: 10px;
+    padding-right: 10px;
+    margin: 0 0 0 -5px;
+  }
+  // Nav collapse clears brand
+  .navbar .nav-collapse {
+    clear: left;
+  }
+  // Block-level the nav
+  .navbar .nav {
+    float: none;
+    margin: 0 0 ($baseLineHeight / 2);
+  }
+  .navbar .nav > li {
+    float: none;
+  }
+  .navbar .nav > li > a {
+    margin-bottom: 2px;
+  }
+  .navbar .nav > .divider-vertical {
+    display: none;
+  }
+  // Nav and dropdown links in navbar
+  .navbar .nav > li > a,
+  .navbar .dropdown-menu a {
+    padding: 6px 15px;
+    font-weight: bold;
+    color: $navbarLinkColor;
+    @include border-radius(3px);
+  }
+  .navbar .dropdown-menu li + li a {
+    margin-bottom: 2px;
+  }
+  .navbar .nav > li > a:hover,
+  .navbar .dropdown-menu a:hover {
+    background-color: $navbarBackground;
+  }
+  // Dropdowns in the navbar
+  .navbar .dropdown-menu {
+    position: static;
+    top: auto;
+    left: auto;
+    float: none;
+    display: block;
+    max-width: none;
+    margin: 0 15px;
+    padding: 0;
+    background-color: transparent;
+    border: none;
+    @include border-radius(0);
+    @include box-shadow(none);
+  }
+  .navbar .dropdown-menu:before,
+  .navbar .dropdown-menu:after {
+    display: none;
+  }
+  .navbar .dropdown-menu .divider {
+    display: none;
+  }
+  // Forms in navbar
+  .navbar-form,
+  .navbar-search {
+    float: none;
+    padding: ($baseLineHeight / 2) 15px;
+    margin: ($baseLineHeight / 2) 0;
+    border-top: 1px solid $navbarBackground;
+    border-bottom: 1px solid $navbarBackground;
+    $shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
+    @include box-shadow($shadow);
+  }
+  // Pull right (secondary) nav content
+  .navbar .nav.pull-right {
+    float: none;
+    margin-left: 0;
+  }
+  // Static navbar
+  .navbar-static .navbar-inner {
+    padding-left:  10px;
+    padding-right: 10px;
+  }
+  // Navbar button
+  .btn-navbar {
+    display: block;
+  }
+
+  // Hide everything in the navbar save .brand and toggle button */
+  .nav-collapse {
+    overflow: hidden;
+    height: 0;
+  }
+}
+
+
+
+// DEFAULT DESKTOP
+// ---------------
+
+@media (min-width: 980px) {
+  .nav-collapse.collapse {
+    height: auto !important;
+  }
+}
+
+
+
+// LARGE DESKTOP & UP
+// ------------------
+
+@media (min-width: 1200px) {
+
+  // Fixed grid
+  @include gridSystem-generate(12, 70px, 30px);
+
+  // Fluid grid
+  @include fluidGridSystem-generate(12, 5.982905983%, 2.564102564%);
+
+  // Input grid
+  @include inputGridSystem-generate(12, 70px, 30px);
+
+  // Thumbnails
+  .thumbnails {
+    margin-left: -30px;
+  }
+  .thumbnails > li {
+    margin-left: 30px;
+  }
+}