bootstrap-generators 2.0.1 → 2.0.4

data/README.md

@@ -12,9 +12,9 @@ Or you can install from latest build:
 
     gem 'bootstrap-generators', '~> 2.0', :git => 'git://github.com/decioferreira/bootstrap-generators.git'
 
-By default Bootstrap Generators requires [SimpleForm 2.0.0.rc](https://github.com/plataformatec/simple_form). Add the dependency on your Gemfile:
+By default Bootstrap Generators requires [SimpleForm 2.0](https://github.com/plataformatec/simple_form). Add the dependency on your Gemfile:
 
-    gem 'simple_form', '2.0.0.rc'
+    gem 'simple_form', '~> 2.0'
 
 If you don't want to use SimpleForm, just pass the `--form_builder=form_builder` option:
 
@@ -77,9 +77,9 @@ To select one of these layouts just pass the option `--layout=LAYOUT` to the ins
 
 * SimpleForm
 
-By default Bootstrap Generators requires SimpleForm 2.0.0.rc. Add the dependency on your Gemfile:
+By default Bootstrap Generators requires SimpleForm 2.0. Add the dependency on your Gemfile:
 
-    gem 'simple_form', '2.0.0.rc'
+    gem 'simple_form', '~> 2.0'
 
 And then run:
 
@@ -142,10 +142,11 @@ Now you can [customize](http://decioferreira.github.com/bootstrap-generators/) t
 
 ### Customize and extend Bootstrap
 
-If you select LESS or SCSS as your stylesheet engine, you will get an `app/assets/stylesheets/bootstrap-variables.css.[less|scss]` file with all of the [default variables](http://twitter.github.com/bootstrap/less.html#variables) of Bootstrap. This way you can [customize](http://decioferreira.github.com/bootstrap-generators/) the look and feel of Bootstrap without having to download any extra file:
+If you select LESS or SCSS as your stylesheet engine, you will get an `app/assets/stylesheets/bootstrap-variables.[less|css.scss]` file with all of the [default variables](http://twitter.github.com/bootstrap/less.html#variables) of Bootstrap. This way you can [customize](http://decioferreira.github.com/bootstrap-generators/) the look and feel of Bootstrap without having to download any extra file:
 
 LESS version:
 
+    // Variables.less
     // Variables to customize the look and feel of Bootstrap
     // -----------------------------------------------------
 
@@ -154,11 +155,9 @@ LESS version:
     // GLOBAL VALUES
     // --------------------------------------------------
 
-    // Links
-    @linkColor:             #08c;
-    @linkColorHover:        darken(@linkColor, 15%);
 
     // Grays
+    // -------------------------
     @black:                 #000;
     @grayDarker:            #222;
     @grayDark:              #333;
@@ -167,7 +166,9 @@ LESS version:
     @grayLighter:           #eee;
     @white:                 #fff;
 
+
     // Accent colors
+    // -------------------------
     @blue:                  #049cdb;
     @blueDark:              #0064cd;
     @green:                 #46a546;
@@ -177,14 +178,85 @@ LESS version:
     @pink:                  #c3325f;
     @purple:                #7a43b6;
 
+
+    // Scaffolding
+    // -------------------------
+    @bodyBackground:        @white;
+    @textColor:             @grayDark;
+
+
+    // Links
+    // -------------------------
+    @linkColor:             #08c;
+    @linkColorHover:        darken(@linkColor, 15%);
+
+
     // Typography
+    // -------------------------
+    @sansFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
+    @serifFontFamily:       Georgia, "Times New Roman", Times, serif;
+    @monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;
+
     @baseFontSize:          13px;
-    @baseFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
+    @baseFontFamily:        @sansFontFamily;
     @baseLineHeight:        18px;
-    @textColor:             @grayDark;
+    @altFontFamily:         @serifFontFamily;
+
+    @headingsFontFamily:    inherit; // empty to use BS default, @baseFontFamily
+    @headingsFontWeight:    bold;    // instead of browser default, bold
+    @headingsColor:         inherit; // empty to use BS default, @textColor
+
+
+    // Tables
+    // -------------------------
+    @tableBackground:                   transparent; // overall background-color
+    @tableBackgroundAccent:             #f9f9f9; // for striping
+    @tableBackgroundHover:              #f5f5f5; // for hover
+    @tableBorder:                       #ddd; // table and cell border
+
 
     // Buttons
-    @primaryButtonBackground:    @linkColor;
+    // -------------------------
+    @btnBackground:                     @white;
+    @btnBackgroundHighlight:            darken(@white, 10%);
+    @btnBorder:                         #ccc;
+
+    @btnPrimaryBackground:              @linkColor;
+    @btnPrimaryBackgroundHighlight:     spin(@btnPrimaryBackground, 15%);
+
+    @btnInfoBackground:                 #5bc0de;
+    @btnInfoBackgroundHighlight:        #2f96b4;
+
+    @btnSuccessBackground:              #62c462;
+    @btnSuccessBackgroundHighlight:     #51a351;
+
+    @btnWarningBackground:              lighten(@orange, 15%);
+    @btnWarningBackgroundHighlight:     @orange;
+
+    @btnDangerBackground:               #ee5f5b;
+    @btnDangerBackgroundHighlight:      #bd362f;
+
+    @btnInverseBackground:              @gray;
+    @btnInverseBackgroundHighlight:     @grayDarker;
+
+
+    // Forms
+    // -------------------------
+    @inputBackground:               @white;
+    @inputBorder:                   #ccc;
+    @inputBorderRadius:             3px;
+    @inputDisabledBackground:       @grayLighter;
+    @formActionsBackground:         #f5f5f5;
+
+    // Dropdowns
+    // -------------------------
+    @dropdownBackground:            @white;
+    @dropdownBorder:                rgba(0,0,0,.2);
+    @dropdownLinkColor:             @grayDark;
+    @dropdownLinkColorHover:        @white;
+    @dropdownLinkBackgroundHover:   @linkColor;
+    @dropdownDividerTop:            #e5e5e5;
+    @dropdownDividerBottom:         @white;
 
 
 
@@ -192,19 +264,35 @@ LESS version:
     // --------------------------------------------------
 
     // Z-index master list
+    // -------------------------
     // Used for a bird's eye view of components dependent on the z-axis
     // Try to avoid customizing these :)
-    @zindexDropdown:        1000;
-    @zindexPopover:         1010;
-    @zindexTooltip:         1020;
-    @zindexFixedNavbar:     1030;
-    @zindexModalBackdrop:   1040;
-    @zindexModal:           1050;
+    @zindexDropdown:          1000;
+    @zindexPopover:           1010;
+    @zindexTooltip:           1020;
+    @zindexFixedNavbar:       1030;
+    @zindexModalBackdrop:     1040;
+    @zindexModal:             1050;
+
+
+    // Sprite icons path
+    // -------------------------
+    @iconSpritePath:          "glyphicons-halflings.png";
+    @iconWhiteSpritePath:     "glyphicons-halflings-white.png";
+
 
     // Input placeholder text color
-    @placeholderText:       @grayLight;
+    // -------------------------
+    @placeholderText:         @grayLight;
+
+
+    // Hr border color
+    // -------------------------
+    @hrBorder:                @grayLighter;
+
 
     // Navbar
+    // -------------------------
     @navbarHeight:                    40px;
     @navbarBackground:                @grayDarker;
     @navbarBackgroundHighlight:       @grayDark;
@@ -212,8 +300,26 @@ LESS version:
     @navbarText:                      @grayLight;
     @navbarLinkColor:                 @grayLight;
     @navbarLinkColorHover:            @white;
+    @navbarLinkColorActive:           @navbarLinkColorHover;
+    @navbarLinkBackgroundHover:       transparent;
+    @navbarLinkBackgroundActive:      @navbarBackground;
+
+    @navbarSearchBackground:          lighten(@navbarBackground, 25%);
+    @navbarSearchBackgroundFocus:     @white;
+    @navbarSearchBorder:              darken(@navbarSearchBackground, 30%);
+    @navbarSearchPlaceholderColor:    #ccc;
+    @navbarBrandColor:                @navbarLinkColor;
+
+
+    // Hero unit
+    // -------------------------
+    @heroUnitBackground:              @grayLighter;
+    @heroUnitHeadingColor:            inherit;
+    @heroUnitLeadColor:               inherit;
+
 
     // Form states and alerts
+    // -------------------------
     @warningText:             #c09853;
     @warningBackground:       #fcf8e3;
     @warningBorder:           darken(spin(@warningBackground, -10), 3%);
@@ -236,18 +342,20 @@ LESS version:
     // --------------------------------------------------
 
     // Default 940px grid
+    // -------------------------
     @gridColumns:             12;
     @gridColumnWidth:         60px;
     @gridGutterWidth:         20px;
     @gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
 
     // Fluid grid
+    // -------------------------
     @fluidGridColumnWidth:    6.382978723%;
     @fluidGridGutterWidth:    2.127659574%;
 
 SCSS version:
 
-    // Variables.less
+    // Variables
     // Variables to customize the look and feel of Bootstrap
     // -----------------------------------------------------
 
@@ -256,11 +364,9 @@ SCSS version:
     // GLOBAL VALUES
     // --------------------------------------------------
 
-    // Links
-    $linkColor:             #08c !default;
-    $linkColorHover:        darken($linkColor, 15%) !default;
 
     // Grays
+    // -------------------------
     $black:                 #000 !default;
     $grayDarker:            #222 !default;
     $grayDark:              #333 !default;
@@ -269,7 +375,9 @@ SCSS version:
     $grayLighter:           #eee !default;
     $white:                 #fff !default;
 
+
     // Accent colors
+    // -------------------------
     $blue:                  #049cdb !default;
     $blueDark:              #0064cd !default;
     $green:                 #46a546 !default;
@@ -279,14 +387,83 @@ SCSS version:
     $pink:                  #c3325f !default;
     $purple:                #7a43b6 !default;
 
+
+    // Scaffolding
+    // -------------------------
+    $bodyBackground:        $white !default;
+    $textColor:             $grayDark !default;
+
+
+    // Links
+    // -------------------------
+    $linkColor:             #08c !default;
+    $linkColorHover:        darken($linkColor, 15%) !default;
+
+
     // Typography
+    // -------------------------
+    $sansFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+    $serifFontFamily:       Georgia, "Times New Roman", Times, serif !default;
+    $monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace !default;
+
     $baseFontSize:          13px !default;
-    $baseFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+    $baseFontFamily:        $sansFontFamily !default;
     $baseLineHeight:        18px !default;
-    $textColor:             $grayDark !default;
+    $altFontFamily:         $serifFontFamily !default;
+
+    $headingsFontFamily:    inherit !default; // empty to use BS default, $baseFontFamily
+    $headingsFontWeight:    bold !default;    // instead of browser default, bold
+    $headingsColor:         inherit !default; // empty to use BS default, $textColor
+
+
+    // Tables
+    // -------------------------
+    $tableBackground:                   transparent !default; // overall background-color
+    $tableBackgroundAccent:             #f9f9f9 !default; // for striping
+    $tableBackgroundHover:              #f5f5f5 !default; // for hover
+    $tableBorder:                       #ddd !default; // table and cell border
+
 
     // Buttons
-    $primaryButtonBackground:    $linkColor !default;
+    // -------------------------
+    $btnBackground:                     $white !default;
+    $btnBackgroundHighlight:            darken($white, 10%) !default;
+    $btnBorder:                         #ccc !default;
+
+    $btnPrimaryBackground:              $linkColor !default;
+    $btnPrimaryBackgroundHighlight:     adjust-hue($btnPrimaryBackground, 15%) !default;
+
+    $btnInfoBackground:                 #5bc0de !default;
+    $btnInfoBackgroundHighlight:        #2f96b4 !default;
+
+    $btnSuccessBackground:              #62c462 !default;
+    $btnSuccessBackgroundHighlight:     #51a351 !default;
+
+    $btnWarningBackground:              lighten($orange, 15%) !default;
+    $btnWarningBackgroundHighlight:     $orange !default;
+
+    $btnDangerBackground:               #ee5f5b !default;
+    $btnDangerBackgroundHighlight:      #bd362f !default;
+
+    $btnInverseBackground:              $gray !default;
+    $btnInverseBackgroundHighlight:     $grayDarker !default;
+
+
+    // Forms
+    // -------------------------
+    $inputBackground:               $white !default;
+    $inputBorder:                   #ccc !default;
+    $inputBorderRadius:             3px !default;
+    $inputDisabledBackground:       $grayLighter !default;
+    $formActionsBackground:         #f5f5f5 !default;
+
+    // Dropdowns
+    // -------------------------
+    $dropdownBackground:            $white !default;
+    $dropdownBorder:                rgba(0,0,0,.2) !default;
+    $dropdownLinkColor:             $grayDark !default;
+    $dropdownLinkColorHover:        $white !default;
+    $dropdownLinkBackgroundHover:   $linkColor !default;
 
 
 
@@ -294,19 +471,35 @@ SCSS version:
     // --------------------------------------------------
 
     // Z-index master list
+    // -------------------------
     // Used for a bird's eye view of components dependent on the z-axis
     // Try to avoid customizing these :)
-    $zindexDropdown:        1000;
-    $zindexPopover:         1010;
-    $zindexTooltip:         1020;
-    $zindexFixedNavbar:     1030;
-    $zindexModalBackdrop:   1040;
-    $zindexModal:           1050;
+    $zindexDropdown:          1000 !default;
+    $zindexPopover:           1010 !default;
+    $zindexTooltip:           1020 !default;
+    $zindexFixedNavbar:       1030 !default;
+    $zindexModalBackdrop:     1040 !default;
+    $zindexModal:             1050 !default;
+
+
+    // Sprite icons path
+    // -------------------------
+    $iconSpritePath:          "glyphicons-halflings.png" !default;
+    $iconWhiteSpritePath:     "glyphicons-halflings-white.png" !default;
+
 
     // Input placeholder text color
-    $placeholderText:       $grayLight !default;
+    // -------------------------
+    $placeholderText:         $grayLight !default;
+
+
+    // Hr border color
+    // -------------------------
+    $hrBorder:                $grayLighter !default;
+
 
     // Navbar
+    // -------------------------
     $navbarHeight:                    40px !default;
     $navbarBackground:                $grayDarker !default;
     $navbarBackgroundHighlight:       $grayDark !default;
@@ -314,8 +507,26 @@ SCSS version:
     $navbarText:                      $grayLight !default;
     $navbarLinkColor:                 $grayLight !default;
     $navbarLinkColorHover:            $white !default;
+    $navbarLinkColorActive:           $navbarLinkColorHover !default;
+    $navbarLinkBackgroundHover:       transparent !default;
+    $navbarLinkBackgroundActive:      $navbarBackground !default;
+
+    $navbarSearchBackground:          lighten($navbarBackground, 25%) !default;
+    $navbarSearchBackgroundFocus:     $white !default;
+    $navbarSearchBorder:              darken($navbarSearchBackground, 30%) !default;
+    $navbarSearchPlaceholderColor:    #ccc !default;
+    $navbarBrandColor:                $navbarLinkColor !default;
+
+
+    // Hero unit
+    // -------------------------
+    $heroUnitBackground:              $grayLighter !default;
+    $heroUnitHeadingColor:            inherit !default;
+    $heroUnitLeadColor:               inherit !default;
+
 
     // Form states and alerts
+    // -------------------------
     $warningText:             #c09853 !default;
     $warningBackground:       #fcf8e3 !default;
     $warningBorder:           darken(adjust-hue($warningBackground, -10), 3%) !default;
@@ -338,12 +549,14 @@ SCSS version:
     // --------------------------------------------------
 
     // Default 940px grid
+    // -------------------------
     $gridColumns:             12 !default;
     $gridColumnWidth:         60px !default;
     $gridGutterWidth:         20px !default;
-    $gridRowWidth:            ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));
+    $gridRowWidth:            ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1)) !default;
 
     // Fluid grid
+    // -------------------------
     $fluidGridColumnWidth:    6.382978723% !default;
     $fluidGridGutterWidth:    2.127659574% !default;
 
@@ -368,4 +581,16 @@ Or quickly add only the necessary javascript (Transitions: required for any anim
     //= require bootstrap-carousel
     //= require bootstrap-typeahead
 
+## Customizing Templates
+
+In Rails 3.0 and above, generators don’t just look in the source root for templates, they also search for templates in other paths. And one of them is lib/templates.
+
+Since Bootstrap Generators installs its templates under lib/templates, you can go and customize them.
+
+## Credits
+
+* [Twitter Bootstrap](http://twitter.github.com/bootstrap)
+* [Twitter Bootstrap - Sass Conversion](https://github.com/jlong/sass-twitter-bootstrap)
+* [SimpleForm](https://github.com/plataformatec/simple_form)
+
 [customize]: #customize

data/Rakefile

@@ -8,62 +8,3 @@ Rake::TestTask.new do |t|
 end
 
 task :default => :test
-
-desc "Converts LESS stylesheets to SCSS"
-task :less_to_scss do
-  Dir.glob('vendor/assets/stylesheets/less/*.less') do |less_file|
-    tree = []; level = 0
-    input_file = File.new(less_file, "r")
-
-    scss_file = File.basename(less_file, ".less")
-    output_file = File.new("vendor/assets/stylesheets/scss/#{scss_file}.scss", "w")
-
-    while(line = input_file.gets)
-      # IDs
-      if line.match(/^\s*#(\w+) {/)
-        tree.push(line.match(/^\s*#(\w+) {/)[1])
-      end
-
-      # Less extensions
-      line.gsub!(/\.less/, '')
-
-      # Level
-      if line.match(/{/)
-        level += 1
-      end
-
-      if line.match(/}/)
-        level -= 1
-        tree = tree.first(level)
-      end
-
-      # Variables
-      line.gsub!(/@(\w+)/) do |s|
-        ['@media', '@import', '@keyframes'].include?(s) ? s : s.gsub(/@(\w+)/, '$\1')
-      end
-
-      # Includes
-      line.gsub!(/(#(\w+) > )*\.(\S+\(.*\)\s*;)/) do |s|
-        s.gsub(/ > (#|\.)/, '-').gsub(/(#|\.)(.*;)/, '@include \2')
-      end
-
-      line.gsub!(/(#(\w+) > )+\.(\S+(\(.*\))?\s*;)/) do |s|
-        s.gsub(/ > (#|\.)/, '-').gsub(/(#|\.)(.*;)/, '@include \2')
-      end
-
-      # Mixins
-      line.gsub!(/\s*\.(\S+\(.*\)\s*{)/) do |s|
-        "@mixin #{[tree, s.match(/\.(\S+\(.*\)\s*{)/)[1]].flatten.join('-')}"
-      end
-
-      # Functions
-      line.gsub!(/spin\(/, 'adjust-hue(') # spin to adjust-hue
-      line.gsub!(/[:\( ]e\(([^\)]*)\)/, ' #{\1}')
-
-      output_file.puts line
-    end
-
-    input_file.close
-    output_file.close
-  end
-end