better_styles 0.0.0.33

data/assets/stylesheets/better/templates/_scroll_to_fix_aside.scss

@@ -0,0 +1,104 @@
+$aside-width:               220px;
+$aside-bg:                  #222;
+$aside-color:               #999;
+$aside-line-top-color:      rgba(0,0,0,.42);
+$aside-line-bottom-color:   rgba(255,255,255,.13);
+
+body {
+    
+    &.fixed-nav {
+        #main_stage #aside.affix { top: 50px; }
+        #aside_toggle { top: 60px; }
+    }
+    
+    &.with_aside {
+        // #front_banner { transform: translateX( $aside-width ) ; }
+        margin-left: $aside-width;
+        margin-right: -1 * $aside-width;
+        // transform: translateX( $aside-width ) ;
+        
+        // transform: translateX( $aside-width ) ;
+        #main_stage #aside {
+            transform: translateX( 0 ) ;
+            // transform: translateX( -1 * $aside-width ) ;
+        }
+        
+        &.fixed-nav {
+            #main_stage #aside { top: 50px; }
+        }
+        // #main_stage #stage {
+        //     transform: translateX( $aside-width ) ;
+        // }
+        #aside_toggle {
+            position: fixed;
+            left: $aside-width + 20px;
+            z-index: 850;
+        }
+    }
+    
+}
+
+#main_stage, #aside, #stage, #aside_toggle {
+    display: block; position: relative;
+    margin: 0; padding: 0;
+}
+
+#main_stage {
+    
+    // padding-left: $aside-width;
+    
+    #aside {
+        // position: absolute;
+        position: fixed;
+        top: 0; left: 0; bottom: 0;
+        width: $aside-width;
+        background: $aside-bg;
+        color: $aside-color;
+        
+        transform: translateX( -1 * $aside-width );
+        
+        z-index: 500;
+        
+        // &.affix { position: fixed; }
+        @include asideScrollBar;
+        overflow-y: scroll;
+        
+    }
+    #stage {
+        
+    }
+    
+}
+
+#aside_toggle {
+    position: fixed;
+    top: 20px; left: 20px;
+    width: 30px; height: 30px; line-height: 30px;
+    border: solid 1px $main-border-color;
+    border-radius: 3px;
+    background: #fff;
+    font-size: 20px;
+    text-align: center;
+    color: #777;
+    z-index: 500;
+    cursor: pointer;
+    &:hover {
+        background: #ccc;
+    }
+}
+
+// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 
+@include responsiveStep-md {
+  
+  #aside_toggle { display: none; }
+  
+  #main_stage {
+      padding-left: $aside-width;
+      #aside {
+          transform: translateX( 0 ) ;
+          position: absolute;
+          &.affix { position: fixed; }
+      }
+  }
+  
+}

data/assets/stylesheets/better/variables/_color.scss

@@ -0,0 +1,87 @@
+// -------------------------
+// Gray colors
+// -------------------------
+$text-black:              rgba(0,0,0, .80)        !default;
+$text-gray:               rgba(0,0,0, .50)        !default;
+$text-gray-light:         rgba(0,0,0, .30)        !default;
+$text-white:              rgba(255,255,255, .90)  !default;
+$text-white-light:        rgba(255,255,255, .70)  !default;
+
+// remove twbs colors
+
+$gray-dark:               #292b2c                 !default;
+$gray:                    #464a4c                 !default;
+$gray-light:              #636c72                 !default;
+$gray-lighter:            #eceeef                 !default;
+$gray-lightest:           #f7f7f9                 !default;
+
+
+$brand:                   #a0c775                 !default;
+
+$brand1:                  $brand;
+$brand2:                  #e74259                 !default;
+$brand3:                  #fed587                 !default;
+$brand4:                  #cc6699                 !default;
+$brand5:                  #498db0                 !default;
+$brand6:                  #f09033                 !default;
+$brand7:                  #5ab788                 !default;
+$brand8:                  #e74259                 !default;
+$brand9:                  #fed587                 !default;
+
+
+
+
+
+$brand-color:             $brand;
+
+
+// -------------------------
+// Global Background colors.
+// -------------------------
+$main-bg:               darken(#fff, 5%) !default; // result: #f2f2f2
+$body-bg:               $main-bg; //** Background color for `<body>`
+$dark-bg:               #e5e5e5 !default;
+$soft-bg:               #f8f8f8 !default;
+$brand-bg:              $brand-color !default;
+$bright-bg:             $white !default;
+
+// -------------------------
+// Global Border color
+// -------------------------
+$main-border-color:     #ccc !default;
+
+
+// -------------------------
+// App colors
+// -------------------------
+$appColorz: (
+    black:          $text-black,
+    gray:           $text-gray,
+    gray-light:     $text-gray-light,
+    white:          $text-white,
+    white-light:    $text-white-light,
+    
+    brand:          $brand,
+    brand1:         $brand,
+    brand2:         $brand2,
+    brand3:         $brand3,
+    brand4:         $brand4,
+    brand5:         $brand5,
+    brand6:         $brand6,
+    brand7:         $brand7,
+    brand8:         $brand8,
+    brand9:         $brand9
+);
+
+$brandColorz: (
+    brand:          $brand,
+    brand1:         $brand,
+    brand2:         $brand2,
+    brand3:         $brand3,
+    brand4:         $brand4,
+    brand5:         $brand5,
+    brand6:         $brand6,
+    brand7:         $brand7,
+    brand8:         $brand8,
+    brand9:         $brand9
+);

data/assets/stylesheets/better/variables/_typography.scss

@@ -0,0 +1,59 @@
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+// Font-Weights
+$thin:            300      !default;
+$regular:         400      !default;
+$semi:            600      !default;
+$bold:            700      !default;
+$xtra:            800      !default;
+
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+// Font-Sizes
+$display-size:    3.53rem      !default;
+$headline-size:   2.65rem      !default;
+$title-size:      2rem         !default;
+$subheader-size:  1.47rem    !default;
+$body-size:       1rem      !default;
+$caption-size:    0.9rem    !default;
+$small-size:      0.75rem   !default;
+
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+$textSizes: (
+  display:      $display-size,
+  headline:     $headline-size,
+  title:        $title-size,
+  subheader:    $subheader-size,
+  body:         $body-size,
+  caption:      $caption-size,
+  small:        $small-size
+);
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+$textWeights: (
+  display:      $semi,
+  headline:     $regular,
+  title:        $semi,
+  subheader:    $regular,
+  body:         $regular,
+  caption:      $regular,
+  small:        $regular
+);
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+$textBoldWeights: (
+  display:      $xtra,
+  headline:     $bold,
+  title:        $bold,
+  subheader:    $semi,
+  body:         $bold,
+  caption:      $bold,
+  small:        $bold
+);
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+
+$line-height:     1.42      !default;
+
+
+$sansFontFamily:      "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$serifFontFamily:     Georgia, "Times New Roman", Times, serif;
+$monoFontFamily:      Monaco, Menlo, Consolas, "Courier New", monospace;

data/assets/stylesheets/better/variables/_vars.scss

@@ -0,0 +1,57 @@
+$vertical-spacing:                      1.5rem    !default;
+$vertical-spacing-half:                 0.75rem   !default;
+$horizontal-spacing:                    1rem      !default;
+
+$grid-gutter-width:                     30px      !default;
+
+
+//== Divider
+//
+$divider-horizontal-spacing:            1.2rem !default;
+// for .divider and hr elements
+$divider-vertical-spacing:              $vertical-spacing !default;
+$divider-top-color:                     rgba(0,0,0,.23)       !default;
+$divider-bottom-color:                  rgba(255,255,255,.65) !default;
+
+
+//   Sections
+// 
+
+// Padding
+$section-padding:                    50px !default;
+$section-head-padding:               10px !default;
+
+$section-xs-padding:                 10px !default;
+$section-sm-padding:                 30px !default;
+$section-lg-padding:                 80px !default;
+$section-xl-padding:                 120px !default;
+$section-xxl-padding:                200px !default;
+
+
+// Colors
+$section-background:                 $main-bg !default;
+$section-input-bg:                   $white !default;
+
+$section-head-background:            #fff !default;
+$section-head-input-bg:              $main-bg !default;
+$section-head-color:                 $brand-color !default;
+$section-head-small-color:           $gray-light !default;
+
+$section-dark-background:            $dark-bg !default;
+$section-dark-input-bg:              $white !default;
+
+$section-bright-background:          $bright-bg !default;
+$section-bright-input-bg:            $main-bg !default;
+
+$section-soft-background:            $soft-bg !default;
+$section-soft-input-bg:              $white !default;
+
+
+$section-head-line-height:           30px !default;
+$section-head-font-size:             20px !default;
+
+// Reset margin of first and last childs, so section controls spacing
+$section-reset-child-spacing:        true !default;
+$section-reset-row-child-spacing:    true !default;
+$section-reset-table-child-spacing:  true !default;
+

data/assets/stylesheets/better_styles.scss

@@ -0,0 +1,44 @@
+// @import "bootstrap";
+
+
+// import variables:
+@import "better/variables/color";
+@import "better/variables/typography";
+@import "better/variables/vars";
+
+
+// import helpers:
+@import "better/lib/helpers";
+@import "better/lib/media_querries";
+@import "better/lib/nav";
+@import "better/lib/shadows";
+@import "better/lib/text";
+
+
+// import layouts:
+@import "better/layout/section";
+@import "better/layout/corset";
+@import "better/layout/fullpage_table";
+
+
+// import content:
+@import "better/content/box";
+@import "better/content/divider";
+@import "better/content/helpers";
+@import "better/content/pix";
+@import "better/content/typography";
+@import "better/content/buttons";
+@import "better/content/check_switch";
+
+
+// import navigations:
+@import "better/navigations/aside_lnk";
+@import "better/navigations/nav_list";
+
+
+// import icons:
+@import "better/icons/icomoon";
+@import "better/icons/magicons";
+@import "better/icons/orderlifticons";
+@import "better/icons/bettericons";
+

data/assets/stylesheets/better_styles_min.scss

@@ -0,0 +1,43 @@
+// @import "bootstrap";
+
+
+// import variables:
+@import "better/variables/color";
+@import "better/variables/typography";
+@import "better/variables/vars";
+
+
+// import helpers:
+@import "better/lib/helpers";
+@import "better/lib/media_querries";
+@import "better/lib/nav";
+// @import "better/lib/shadows";
+@import "better/lib/text";
+
+
+// import layouts:
+@import "better/layout/section";
+@import "better/layout/corset";
+@import "better/layout/fullpage_table";
+@import "better/layout/positioning";
+
+
+// import content:
+@import "better/content/box";
+@import "better/content/divider";
+@import "better/content/helpers";
+@import "better/content/pix";
+@import "better/content/typography";
+
+
+// import navigations:
+//@import "better/navigations/aside_lnk";
+//@import "better/navigations/nav_list";
+
+
+// import icons:
+// @import "better/icons/icomoon";
+// @import "better/icons/magicons";
+// @import "better/icons/orderlifticons";
+// @import "better/icons/bettericons";
+

data/lib/better_styles.rb

@@ -0,0 +1,64 @@
+require 'better_styles/version'
+module BetterStyles
+  class << self
+    # Inspired by Kaminari
+    def load!
+      if rails?
+        register_rails_engine
+      elsif sprockets?
+        register_sprockets
+      end
+      configure_sass
+    end
+
+    # Paths
+    def gem_path
+      @gem_path ||= File.expand_path '..', File.dirname(__FILE__)
+    end
+
+    def stylesheets_path
+      File.join assets_path, 'stylesheets'
+    end
+
+    def javascripts_path
+      File.join assets_path, 'javascripts'
+    end
+    
+    def fonts_path
+      File.join assets_path, 'fonts'
+    end
+
+    def assets_path
+      @assets_path ||= File.join gem_path, 'assets'
+    end
+
+    # Environment detection helpers
+    def sprockets?
+      defined?(::Sprockets)
+    end
+
+    def rails?
+      defined?(::Rails)
+    end
+
+    private
+    
+      def configure_sass
+        require 'sass'
+        ::Sass.load_paths << stylesheets_path
+      end
+    
+      def register_rails_engine
+        require 'better_styles/engine'
+      end
+    
+      def register_sprockets
+        Sprockets.append_path(stylesheets_path)
+        Sprockets.append_path(javascripts_path)
+        Sprockets.append_path(fonts_path)
+      end
+    
+  end
+end
+
+BetterStyles.load!