compass-bootstrap 0.1.2 → 0.1.3

data/.gitignore

@@ -2,3 +2,7 @@
 .bundle
 Gemfile.lock
 pkg/*
+original/*
+*.swp
+*.un~
+.DS_Store

data/README.mkdn

@@ -4,57 +4,148 @@ Twitter Bootstrap- Compass Plugin
 Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.
 It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.: <http://twitter.github.com/bootstrap/>
 
-* This plugin is consistent with 1.2.0 version of Bootstrap  
+* This plugin is consistent with 1.3.0 version of Bootstrap  
 ------------------------------------------------------------
 
 This plugin adds the Bootstrap to [Compass](http://compass-style.org/).
 
-Install
-=======
+Install on Rails 3.0
+====================
 
     gem install compass-bootstrap
 
+Install on Rails 3.1
+====================
+Add compass and compass-bootstrap to the assets group in you Gemfile
 
+    gem 'compass'
+    gem 'compass-bootstrap'
 
-Adding the Bootstrap plugin to an existing project
-============================================
 
-Add the following to your compass.rb config file:
+Adding the Bootstrap plugin to an existing Rails 3.0 project 
+============================================
+Add the following to your compass.rb
 
     # Require any additional compass plugins here.
     require 'compass-bootstrap'
+
+Run the following on your project's directory
+
+    compass install compass-bootstrap/compass-bootstrap 
     
+this will add the following files to your stylesheets dir:
+
+    create sass/compass_bootstrap.scss 
+    create sass/_reset.scss 
+    create sass/_variables.scss 
+    create sass/_mixins.scss 
+    create sass/_scaffolding.scss 
+    create sass/_type.scss 
+    create sass/_tables.scss 
+    create sass/_forms.scss 
+    create sass/_patterns.scss 
+    create javascripts/bootstrap-alerts.js 
+    create javascripts/bootstrap-dropdown.js 
+    create javascripts/bootstrap-modal.js 
+    create javascripts/bootstrap-popover.js 
+    create javascripts/bootstrap-scrollspy.js 
+    create javascripts/bootstrap-tabs.js 
+    create javascripts/bootstrap-twipsy.js 
+    create stylesheets/compass_bootstrap.css 
+
 Now you can add the bootstrap style to your .scss/.sass files:
 
     @import 'compass_bootstrap';
     
 this will make available all the classes and styles from bootstrap 
 
-If you only want to add some bootstrap styles to your files, add:
+### If you only want to add some bootstrap styles to your files, add:
 
-    @import 'compass_bootstrap_mixins';
+    @import 'preboot.scss';
 
 And now you can use the mixins on your own classes:
 
-Using bt-column instead of .spanX
-============================
 
-this plugin includes a mixin called bt-column, that you can use instead of add the spanX class just add in your styles:
-   
-    @include bt-column(4);
+## Changing the theme color:
+-----------------------------
+
+Open _preboot.sccs and you will see the entire list of colors, you can change those in order to apply your own color scheme
+
+    // VARIABLES
+    // ---------
+
+    // / Links
+    $linkColor:         #0069d6;
+    $linkColorHover:    darken($linkColor, 10);
+
+    // Grays
+    $black:             #000;
+    $grayDark:          lighten($black, 25%);
+    $gray:              lighten($black, 50%);
+    $grayLight:         lighten($black, 75%);
+    $grayLighter:       lighten($black, 90%);
+    $white:             #fff;
+
+    // Accent Colors
+    $blue:              #049CDB;
+    $blueDark:          #0064CD;
+    $green:             #46a546;
+    $red:               #9d261d;
+    $yellow:            #ffc40d;
+    $orange:            #f89406;
+    $pink:              #c3325f;
+    $purple:            #7a43b6;
+
+    // Baseline grid
+    $basefont:          13px;
+    $baseline:          18px;
+
+    // Griditude
+    $gridColumns:       16;
+    $gridColumnWidth:   40px;
+    $gridGutterWidth:   20px;
+    $extraSpace:        ($gridGutterWidth * 2); // For our grid calculations
+    $siteWidth:         ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));
+
+    // Color Scheme
+    $baseColor:         $blue;                  // Set a base color
+    $complement:        spin($baseColor, 180);  // Determine a complementary color
+    $split1:            spin($baseColor, 158);  // Split complements
+    $split2:            spin($baseColor, -158);
+    $triad1:            spin($baseColor, 135);  // Triads colors
+    $triad2:            spin($baseColor, -135);
+    $tetra1:            spin($baseColor, 90);   // Tetra colors
+    $tetra2:            spin($baseColor, -90);
+    $analog1:           spin($baseColor, 22);   // Analogs colors
+    $analog2:           spin($baseColor, -22);
+
+Adding the Bootstrap plugin to an existing Rails 3.1 project 
+============================================
+Open config/application.rb and add the following line after config.assets.enabled = true
+
+    config.sass.load_paths << Compass::Frameworks['compass-bootstrap'].stylesheets_directory
+
+After adding this line rename application.css from app/assets/stylesheets to
+end with scss extension.
+
+Open application.css.scss and remove the **require_tree .** directive, in order
+to have access to bootstrap mixins we need to import all our scss files with
+@import sass command like:
+
+    @import 'compass-bootstrap/compass_bootstrap';
 
-Using btn mixin to your styles
-==============================
+If we have more scss files in our project import them as well to access mixis.
 
-    bt-btn($from-color,$to-color,[$txt-color(optional)]);
-   
-this mixin will add the styles from btn bootstrap class, this had 3 params
+### Bootstrap javascripts
+Version 1.3.0 includes javascript files, they are not necessary but if we want
+to use them, we can rely on Rails 3.1 asset pipeline. Just require them in the
+javascript manifest - ex: in the app/assets/javascript/application.js - like
+this:
 
-    $from-color: defines the color where background starts.
-    $to-color: defines the color where background ends.
-    $txt-color: default white, this define the text color
+    //= require bootstrap-alerts
 
 ## TODO
 
+* make the documentation file for mixins and a example site
 * port more classes to mixins
 

data/lib/compass-bootstrap.rb

@@ -1,4 +1,9 @@
 require 'compass'
+require "compass-bootstrap/rails"
 require "compass-bootstrap/version"
 
-Compass::Frameworks.register("compass-bootstrap", :path => "#{File.dirname(__FILE__)}/..")
+plugin_root = File.join(File.dirname(__FILE__), "..")
+
+Compass::Frameworks.register("compass-bootstrap", 
+                            :stylesheets_directory => File.join(plugin_root, "stylesheets"),
+                            :templates_directory => File.join(plugin_root, "vendor/assets/stylesheets"))

data/lib/compass-bootstrap/rails.rb

@@ -0,0 +1,7 @@
+module CompassBootstrap
+    module Rails
+        if defined? ::Rails and ::Rails.version >= '3.1'
+            require 'compass-bootstrap/rails/engine'
+        end
+    end
+end

data/lib/compass-bootstrap/rails/engine.rb

@@ -0,0 +1,7 @@
+module CompassBootstrap
+    module Rails
+        class Engine < ::Rails::Engine
+        end
+    end
+end
+

data/lib/compass-bootstrap/version.rb

@@ -1,5 +1,5 @@
 module Compass
   module Bootstrap
-    VERSION = "0.1.2"
+    VERSION = "0.1.3"
   end
 end

data/stylesheets/compass-bootstrap/_compass_bootstrap.scss

@@ -16,11 +16,14 @@
 @import "reset.scss";
 
 // Core
-@import "preboot.scss";
+@import "variables.scss";  // Modify this for custom colors, font-sizes, etc
+@import "mixins.scss";
+
+// Grid system and page structure
 @import "scaffolding.scss";
 
 // Styled patterns and elements
 @import "type.scss";
 @import "forms.scss";
 @import "tables.scss";
-@import "patterns.scss";
+@import "patterns.scss";

data/stylesheets/compass-bootstrap/_forms.scss

@@ -16,18 +16,19 @@ fieldset {
   padding-top: $baseline;
   legend {
     display: block;
-    margin-left: 150px;
-    font-size: 20px;
+    padding-left: 150px;
+    font-size: $basefont * 1.5;
     line-height: 1;
-    *margin: 0 0 5px 145px; /* IE6-7 */
-    *line-height: 1.5; /* IE6-7 */
     color: $grayDark;
+    *padding: 0 0 5px 145px; /* IE6-7 */
+    *line-height: 1.5; /* IE6-7 */
   }
 }
 
 // Parent element that clears floats and wraps labels and fields together
 form .clearfix {
   margin-bottom: $baseline;
+  @include clearfix();
 }
 
 // Set font for forms
@@ -35,14 +36,14 @@ label,
 input,
 select,
 textarea {
-  @include sans-serif(normal,13px,normal);
+  @include font-sans-serif(normal,13px,normal);
 }
 
 // Float labels left
 label {
   padding-top: 6px;
-  font-size: 13px;
-  line-height: 18px;
+  font-size: $basefont;
+  line-height: $baseline;
   float: left;
   width: 130px;
   text-align: right;
@@ -50,7 +51,7 @@ label {
 }
 
 // Shift over the inside div to align all label's relevant content
-div.input {
+form .input {
   margin-left: 150px;
 }
 
@@ -69,7 +70,7 @@ select,
   width: 210px;
   height: $baseline;
   padding: 4px;
-  font-size: 13px;
+  font-size: $basefont;
   line-height: $baseline;
   color: $gray;
   border: 1px solid #ccc;
@@ -89,11 +90,11 @@ input[type=radio] {
 }
 
 input[type=file] {
-  background-color: #fff;
+  background-color: $white;
   padding: initial;
   border: initial;
   line-height: initial;
-  @include bt-box-shadow(none);
+  @include box-shadow(none);
 }
 
 input[type=button],
@@ -105,19 +106,27 @@ input[type=submit] {
 
 select,
 input[type=file] {
-  height: $baseline * 1.5;
+  height: $baseline * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size
   line-height: $baseline * 1.5;
+  *margin-top: 4px; /* For IE7, add top margin to align select with labels */
+}
+
+// Make multiple select elements height not fixed
+select[multiple] {
+  height: inherit;
 }
 
 textarea {
   height: auto;
 }
 
+// For text that needs to appear as an input but should not be an input
 .uneditable-input {
-  background-color: #eee;
+  background-color: $white;
   display: block;
-  border-color: #ccc;
-  @include bt-box-shadow(inset 0 1px 2px rgba(0,0,0,.075));
+  border-color: #eee;
+  @include box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
+  cursor: not-allowed;
 }
 
 // Placeholder text gets special styles; can't be bundled together though for some reason
@@ -130,21 +139,27 @@ textarea {
 
 // Focus states
 input,
-select, textarea {
+textarea {
   $transition: border linear .2s, box-shadow linear .2s;
   @include transition($transition);
-  @include bt-box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
+  @include box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
 }
 input:focus,
 textarea:focus {
-  outline: none;
+  outline: 0;
   border-color: rgba(82,168,236,.8);
   $shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
-  @include bt-box-shadow($shadow);
+  @include box-shadow($shadow);
+}
+input[type=file]:focus,
+input[type=checkbox]:focus,
+select:focus {
+  @include box-shadow(none); // override for file inputs
+  outline: 1px dotted #666; // Selet elements don't get box-shadow styles, so instead we do outline
 }
 
 // Error styles
-form div.error {
+form div.clearfix.error {
   background: lighten($red, 57%);
   padding: 10px 0;
   margin: -10px 0 10px;
@@ -158,10 +173,10 @@ form div.error {
   input,
   textarea {
     border-color: $error-text;
-    @include bt-box-shadow(0 0 3px rgba(171,41,32,.25));
+    @include box-shadow(0 0 3px rgba(171,41,32,.25));
     &:focus {
       border-color: darken($error-text, 10%);
-      @include bt-box-shadow(0 0 6px rgba(171,41,32,.5));
+      @include box-shadow(0 0 6px rgba(171,41,32,.5));
     }
   }
   .input-prepend,
@@ -175,35 +190,87 @@ form div.error {
 }
 
 // Form element sizes
-.input-mini, input.mini, textarea.mini, select.mini {
+// TODO v2: remove duplication here and just stick to .input-[size] in light of adding .spanN sizes
+.input-mini,
+input.mini,
+textarea.mini,
+select.mini {
   width: 60px;
 }
-.input-small, input.small, textarea.small, select.small {
+.input-small,
+input.small,
+textarea.small,
+select.small {
   width: 90px;
 }
-.input-medium, input.medium, textarea.medium, select.medium {
+.input-medium,
+input.medium,
+textarea.medium,
+select.medium {
   width: 150px;
 }
-.input-large, input.large, textarea.large, select.large {
+.input-large,
+input.large,
+textarea.large,
+select.large {
   width: 210px;
 }
-.input-xlarge, input.xlarge, textarea.xlarge, select.xlarge {
+.input-xlarge,
+input.xlarge,
+textarea.xlarge,
+select.xlarge {
   width: 270px;
 }
-.input-xxlarge, input.xxlarge, textarea.xxlarge, select.xxlarge {
+.input-xxlarge,
+input.xxlarge,
+textarea.xxlarge,
+select.xxlarge {
   width: 530px;
 }
 textarea.xxlarge {
-  overflow-y: scroll;
+  overflow-y: auto;
 }
 
-// Turn off focus for disabled (read-only) form elements
-input[readonly]:focus,
-textarea[readonly]:focus,
-input.disabled {
-  background: #f5f5f5;
+// Grid style input sizes
+// This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border
+@mixin formColumns($columnSpan: 1) {
+  display: inline-block;
+  float: none;
+  width: (($gridColumnWidth - 10) * $columnSpan) + (($gridColumnWidth - 10) * ($columnSpan - 1));
+  margin-left: 0;
+}
+input,
+textarea,
+select {
+  // Default columns
+  &.span1     { @include formColumns(1); }
+  &.span2     { @include formColumns(2); }
+  &.span3     { @include formColumns(3); }
+  &.span4     { @include formColumns(4); }
+  &.span5     { @include formColumns(5); }
+  &.span6     { @include formColumns(6); }
+  &.span7     { @include formColumns(7); }
+  &.span8     { @include formColumns(8); }
+  &.span9     { @include formColumns(9); }
+  &.span10    { @include formColumns(10); }
+  &.span11    { @include formColumns(11); }
+  &.span12    { @include formColumns(12); }
+  &.span13    { @include formColumns(13); }
+  &.span14    { @include formColumns(14); }
+  &.span15    { @include formColumns(15); }
+  &.span16    { @include formColumns(16); }
+}
+
+// Disabled and read-only inputs
+input[disabled],
+select[disabled],
+textarea[disabled],
+input[readonly],
+select[readonly],
+textarea[readonly] {
+  background-color: #f5f5f5;
   border-color: #ddd;
-  @include bt-box-shadow(none);
+  cursor: not-allowed;
 }
 
 // Actions (the buttons)
@@ -228,7 +295,7 @@ input.disabled {
 // Help Text
 .help-inline,
 .help-block {
-  font-size: 12px;
+  font-size: $basefont - 2;
   line-height: $baseline;
   color: $grayLight;
 }
@@ -268,20 +335,22 @@ input.disabled {
     @include border-radius(0 3px 3px 0);
   }
   .add-on {
+    position: relative;
     background: #f5f5f5;
+    border: 1px solid #ccc;
+    z-index: 2;
     float: left;
     display: block;
     width: auto;
     min-width: 16px;
+    height: 18px;
     padding: 4px 4px 4px 5px;
-    color: $grayLight;
+    margin-right: -1px;
     font-weight: normal;
     line-height: 18px;
-    height: 18px;
+    color: $grayLight;
     text-align: center;
-    text-shadow: 0 1px 0 #fff;
-    border: 1px solid #ccc;
-    border-right-width: 0;
+    text-shadow: 0 1px 0 $white;
     @include border-radius(3px 0 0 3px);
   }
   .active {
@@ -301,8 +370,8 @@ input.disabled {
   }
   .add-on {
     @include border-radius(0 3px 3px 0);
-    border-right-width: 1px;
-    border-left-width: 0;
+    margin-right: 0;
+    margin-left: -1px;
   }
 }
 
@@ -314,31 +383,34 @@ input.disabled {
     display: block;
     padding: 0;
     width: 100%;
-    label {
-      display: block;
-      float: none;
-      width: auto;
-      padding: 0;
-      line-height: $baseline;
-      text-align: left;
-      white-space: normal;
-      strong {
-        color: $gray;
-      }
-      small {
-        font-size: 12px;
-        font-weight: normal;
-      }
-    }
-    ul.inputs-list {
-      margin-left: 25px;
-      margin-bottom: 10px;
-      padding-top: 0;
+  }
+  label {
+    display: block;
+    float: none;
+    width: auto;
+    padding: 0;
+    line-height: $baseline;
+    text-align: left;
+    white-space: normal;
+    strong {
+      color: $gray;
     }
-    &:first-child {
-      padding-top: 5px;
+    small {
+      font-size: $basefont - 2;
+      font-weight: normal;
     }
   }
+  .inputs-list {
+    margin-left: 25px;
+    margin-bottom: 10px;
+    padding-top: 0;
+  }
+  &:first-child {
+    padding-top: 6px;
+  }
+  li + li {
+    padding-top: 2px;
+  }
   input[type=radio],
   input[type=checkbox] {
     margin-bottom: 0;
@@ -352,7 +424,7 @@ input.disabled {
     padding-top: $baseline / 2;
   }
   legend {
-    margin-left: 0;
+    padding-left: 0;
   }
   label {
     display: block;
@@ -379,7 +451,7 @@ input.disabled {
       }
     }
   }
-  div.error {
+  div.clearfix.error {
     padding-top: 10px;
     padding-bottom: 10px;
     padding-left: 10px;