modularis 0.0.2 → 0.0.3

checksums.yaml

@@ -1,15 +1,15 @@
 ---
 !binary "U0hBMQ==":
   metadata.gz: !binary |-
-    Zjc3OWUwN2MxYjE4NWY1NDE5ZDA1ZTBhYjljM2RmMDM1NTIwOTQyOQ==
+    ZGRiNzc0YWVhODc1ZmQyOTZmNTA5MDExZTAxYzY2N2EzMjYzN2EzYg==
   data.tar.gz: !binary |-
-    N2I3YjNhYWMwN2EwYmMzNjBkMmMyZGJjYWRjOWE3NWM0NjIzMmRiMw==
+    MGU4ZjcwZjFkNTBjYjQwYjU4MjhiYjUxNjIwNTRiNzBlNzA2NDQ0ZA==
 !binary "U0hBNTEy":
   metadata.gz: !binary |-
-    M2JhYjY5MmEwMTk2OWE1OGJhYzM4ODFmNjBmMmVmODE5YWM1MDdiYzE4YzE3
-    YWUyZWYzYWRkNDgxNGFkZDExZTUxYjIwZTFlYmYzZDJlZmNiYmQyNjQ2ZmRi
-    ZWJhMjhhNGJkNzFjZTRmNDI4YmI5ZDU4YmNkOWIzYzJlMmI1MWU=
+    YzVkOGNjMjY2OTk5ZTg3M2RkOGNlZjQwNzVmNDdkMzE0NmRmMzEyMmI3OWMw
+    MDQyN2ExMjllNGQzMDg2YTRjMDA5OGRkZjlkMWVkODZlNmMxNTc3OTY5MTA5
+    NDQ4M2ZmYjkzZTYwNTZkNDllMTU0ZmE3ZGRmOGM0MDRkOTVjNmY=
   data.tar.gz: !binary |-
-    YzA5MzQ2MGIyYmM1OTZmN2VhMjhjYzVmNTgyYmY3NjUxZWFlODEzZDU3YWRm
-    NTRiZTU3ZTBmMWQ0OTExMTUwYTExNTgwZjZhNGVlYTkyZWJhNzdjZTdhYjQ0
-    MjcyMTJmY2FhODE1ZjIxZTAwY2MzMWU3MGNkOTRmM2I1ZmI2NDA=
+    YmJlYzFkY2JiYWUyOWFjYmNjZjQyN2I0ZDRkYjFkY2RlNDU5YWI5MjdjZGQw
+    Y2VkNTMxZTU0ZmY1NTYyNjIxYzEwZTE3YzUxY2QwODFlOGU4ZGFmZWM2Nzg1
+    YTFiYzkxOGE3NjA3OGViMWNmMzdkNDE3OGFjMTRhNTllNGE5Mjg=

data/demo/test/config.rb

@@ -0,0 +1,26 @@
+require 'modularis'
+# Require any additional compass plugins here.
+
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "stylesheets"
+sass_dir = "sass"
+images_dir = "images"
+javascripts_dir = "javascripts"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

data/lib/modularis/generators/install_generator.rb

@@ -14,7 +14,7 @@ module Modularis
         # gsub_file "app/assets/javascripts/application#{detect_js_format[0]}", /\/\/= require jquery\n/, ""
         insert_into_file "app/assets/javascripts/application#{detect_js_format[0]}", "#{detect_js_format[1]} require modularis\n", :after => "jquery_ujs\n"
         append_to_file "app/assets/javascripts/application#{detect_js_format[0]}", "\n$(function(){ $(document).modularis(); });\n"
-        settings_file = File.join(File.dirname(__FILE__),"..","..","..","scss","modularis","_variables.scss")
+        settings_file = File.join(File.dirname(__FILE__),"..","..","..","scss","modularis","_settings.scss")
         create_file "app/assets/stylesheets/modularis_and_overrides.scss", File.read(settings_file)
         append_to_file "app/assets/stylesheets/modularis_and_overrides.scss", "\n@import 'modularis';\n"
         insert_into_file "app/assets/stylesheets/application#{detect_css_format[0]}", "#{detect_css_format[1]} require modularis_and_overrides\n", :after => "require_self\n"

data/lib/modularis/version.rb

@@ -1,3 +1,3 @@
 module Modularis
-  VERSION = "0.0.2"
+  VERSION = "0.0.3"
 end

data/templates/project/config.rb

@@ -1,26 +1,49 @@
-require 'themepile-modularis'
 # Require any additional compass plugins here.
 
-
 # Set this to the root of your project when deployed:
 http_path = "/"
-css_dir = "stylesheets"
-sass_dir = "sass"
+css_dir = "css"
+sass_dir = "scss"
 images_dir = "images"
-javascripts_dir = "javascripts"
+javascripts_dir = "js"
 
 # You can select your preferred output style here (can be overridden via the command line):
 # output_style = :expanded or :nested or :compact or :compressed
-
+output_style  = :expanded
 # To enable relative paths to assets via compass helper functions. Uncomment:
-# relative_assets = true
+relative_assets = true
 
 # To disable debugging comments that display the original location of your selectors. Uncomment:
-# line_comments = false
+line_comments = false
 
 
 # If you prefer the indented syntax, you might want to regenerate this
 # project again passing --syntax sass, or you can uncomment this:
 # preferred_syntax = :sass
 # and then run:
-# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
+# sass-convert -R --from scss --to sass scss scss && rm -rf sass && mv scss sass
+
+# Make a copy of sprites with a name that has no uniqueness of the hash.
+on_sprite_saved do |filename|
+  if File.exists?(filename)
+    FileUtils.cp filename, filename.gsub(%r{-s[a-z0-9]{10}\.png$}, '.png')
+  end
+end
+
+# Replace in stylesheets generated references to sprites
+# by their counterparts without the hash uniqueness.
+on_stylesheet_saved do |filename|
+  if File.exists?(filename)
+    css = File.read filename
+    File.open(filename, 'w+') do |f|
+      f << css.gsub(%r{-s[a-z0-9]{10}\.png}, '.png')
+    end
+  end
+end
+
+def decimal(value)
+  unless value.is_a?(Sass::Script::Number) && value.unit_str == "%"
+    raise ArgumentError.new("#{value.inspect} is not a percent")
+  end
+  Sass::Script::Number.new(value.value / 100.0)
+end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: modularis
 version: !ruby/object:Gem::Version
-  version: 0.0.2
+  version: 0.0.3
 platform: ruby
 authors:
 - ThemePile
@@ -55,6 +55,7 @@ files:
 - LICENSE
 - README.md
 - Rakefile
+- demo/test/config.rb
 - js/modularis/index.js
 - js/vendor/custom.modernizr.js
 - js/vendor/jquery.js
@@ -69,45 +70,7 @@ files:
 - lib/modularis/version.rb
 - modularis.gemspec
 - package.json
-- scss/compagecss/_variables.scss
-- scss/compagecss/components/_alert-boxes.scss
-- scss/compagecss/components/_block-grid.scss
-- scss/compagecss/components/_breadcrumbs.scss
-- scss/compagecss/components/_button-groups.scss
-- scss/compagecss/components/_buttons.scss
-- scss/compagecss/components/_clearing.scss
-- scss/compagecss/components/_custom-forms.scss
-- scss/compagecss/components/_dropdown-buttons.scss
-- scss/compagecss/components/_dropdown.scss
-- scss/compagecss/components/_flex-video.scss
-- scss/compagecss/components/_flexbox-grid.scss
-- scss/compagecss/components/_flip.scss
-- scss/compagecss/components/_forms.scss
-- scss/compagecss/components/_global.scss
-- scss/compagecss/components/_grid.scss
-- scss/compagecss/components/_inline-lists.scss
-- scss/compagecss/components/_joyride.scss
-- scss/compagecss/components/_keystrokes.scss
-- scss/compagecss/components/_labels.scss
-- scss/compagecss/components/_magellan.scss
-- scss/compagecss/components/_off-canvas.scss
-- scss/compagecss/components/_orbit.scss
-- scss/compagecss/components/_pagination.scss
-- scss/compagecss/components/_panels.scss
-- scss/compagecss/components/_pricing-tables.scss
-- scss/compagecss/components/_progress-bars.scss
-- scss/compagecss/components/_reveal.scss
-- scss/compagecss/components/_section.scss
-- scss/compagecss/components/_side-nav.scss
-- scss/compagecss/components/_split-buttons.scss
-- scss/compagecss/components/_sub-nav.scss
-- scss/compagecss/components/_switch.scss
-- scss/compagecss/components/_tables.scss
-- scss/compagecss/components/_thumbs.scss
-- scss/compagecss/components/_tooltips.scss
-- scss/compagecss/components/_top-bar.scss
-- scss/compagecss/components/_type.scss
-- scss/compagecss/components/_visibility.scss
+- scss/compagecss/_settings.scss
 - scss/modularis.scss
 - scss/normalize.scss
 - templates/project/.gitignore

data/scss/compagecss/components/_alert-boxes.scss

@@ -1,106 +0,0 @@
-//
-// Alert Variables
-//
-
-// We use this to control alert padding.
-$alert-padding-top:         emCalc(11px)                                   !default;
-$alert-padding-default-float:        $alert-padding-top                             !default;
-$alert-padding-opposite-direction:       $alert-padding-top + emCalc(10px)              !default;
-$alert-padding-bottom:      $alert-padding-top + emCalc(1px)               !default;
-
-// We use these to control text style.
-$alert-font-weight:         bold                                           !default;
-$alert-font-size:           emCalc(14px)                                   !default;
-$alert-font-color:          #fff                                           !default;
-$alert-font-color-alt:      darken($secondary-color, 60%)                  !default;
-
-// We use this for close hover effect.
-$alert-function-factor:     10%                                            !default;
-
-// We use these to control border styles.
-$alert-border-style:        solid                                          !default;
-$alert-border-width:        1px                                            !default;
-$alert-border-color:        darken($primary-color, $alert-function-factor) !default;
-$alert-bottom-margin:       emCalc(20px)                                   !default;
-
-// We use these to style the close buttons
-$alert-close-color:         #333                                           !default;
-$alert-close-position:      emCalc(5px)                                    !default;
-$alert-close-font-size:     emCalc(22px)                                   !default;
-$alert-close-opacity:       0.3                                            !default;
-$alert-close-opacity-hover: 0.5                                            !default;
-$alert-close-padding:       5px 4px 4px                                    !default;
-
-// We use this to control border radius
-$alert-radius:              $global-radius                                 !default;
-
-//
-// Alert Mixins
-//
-
-// We use this mixin to create a default alert base.
-@mixin alert-base {
-  border-style: $alert-border-style;
-  border-width: $alert-border-width;
-  display: block;
-  font-weight: $alert-font-weight;
-  margin-bottom: $alert-bottom-margin;
-  position: relative;
-  padding: $alert-padding-top $alert-padding-opposite-direction $alert-padding-bottom $alert-padding-default-float;
-  font-size: $alert-font-size;
-}
-
-// We use this mixin to add alert styles
-@mixin alert-style($bg:$primary-color) {
-
-  // This find the lightness percentage of the background color.
-  $bg-lightness: lightness($bg);
-
-  // We control which background color and border come through.
-  background-color: $bg;
-  border-color: darken($bg, $alert-function-factor);
-
-  // We control the text color for you based on the background color.
-  @if $bg-lightness > 70% { color: $alert-font-color-alt; }
-  @else                   { color: $alert-font-color; }
-
-}
-
-// We use this to create the close button.
-@mixin alert-close {
-  font-size: $alert-close-font-size;
-  padding: $alert-close-padding;
-  line-height: 0;
-  position: absolute;
-  top: $alert-close-position + emCalc(2px);
-  #{$opposite-direction}: $alert-close-position;
-  color: $alert-close-color;
-  opacity: $alert-close-opacity;
-  &:hover,
-  &:focus { opacity: $alert-close-opacity-hover; }
-}
-
-// We use this to quickly create alerts with a single mixin.
-@mixin alert($bg:$primary-color, $radius:false) {
-  @include alert-base;
-  @include alert-style($bg);
-  @include radius($radius);
-}
-
-@if $include-html-alert-classes != false {
-
-  /* Modularis Alerts */
-  .alert-box {
-    @include alert;
-
-    .close { @include alert-close; }
-
-    &.radius { @include radius($alert-radius); }
-    &.round { @include radius($global-rounded); }
-
-    &.success { @include alert-style($success-color); }
-    &.alert { @include alert-style($alert-color); }
-    &.secondary { @include alert-style($secondary-color); }
-  }
-
-}

data/scss/compagecss/components/_block-grid.scss

@@ -1,70 +0,0 @@
-//
-// Block Grid Variables
-//
-
-// We use this to control the maximum number of block grid elements per row
-$block-grid-elements: 12 !default;
-$block-grid-default-spacing: 10px !default;
-
-// Enables media queries for block-grid classes. Set to false if writing semantic HTML.
-$block-grid-media-queries: true !default;
-
-//
-// Block Grid Mixins
-//
-
-// We use this mixin to create different block-grids. You can apply per-row and spacing options.
-// Setting $base-style to false will ommit default styles.
-@mixin block-grid($per-row:false, $spacing:$block-grid-default-spacing, $base-style:true) {
-
-  @if $base-style {
-    display: block;
-    padding: 0;
-    margin: 0 (-$spacing);
-    @include clearfix;
-
-    &>li {
-      display: inline;
-      height: auto;
-      float: $default-float;
-      padding: 0 $spacing $spacing;
-    }
-  }
-
-  @if $per-row {
-    &>li {
-      width: 100%/$per-row;
-      padding: 0 $spacing $spacing;
-
-      &:nth-of-type(n) { clear: none; }
-      &:nth-of-type(#{$per-row}n+1) { clear: both; }
-    }
-  }
-
-}
-
-@if $block-grid-media-queries {
-  /* Modularis Block Grids for below small breakpoint */
-  @media only screen {
-    [class*="block-grid-"] { @include block-grid; }
-
-    @for $i from 1 through $block-grid-elements {
-      .small-block-grid-#{($i)} {
-        @include block-grid($i,$block-grid-default-spacing,false);
-      }
-    }
-  }
-
-  /* Modularis Block Grids for above small breakpoint */
-  @media #{$small} {
-    /* Remove small grid clearing */
-    @for $i from 1 through $block-grid-elements {
-      .small-block-grid-#{($i)} > li:nth-of-type(#{$i}n+1) { clear: none; }
-    }
-    @for $i from 1 through $block-grid-elements {
-      .large-block-grid-#{($i)} {
-        @include block-grid($i,$block-grid-default-spacing,false);
-      }
-    }
-  }
-}

data/scss/compagecss/components/_breadcrumbs.scss

@@ -1,124 +0,0 @@
-//
-// Breadcrumb Variables
-//
-
-// We use this to set the background color for the breadcrumb container.
-$crumb-bg: lighten($secondary-color, 5%)                       !default;
-
-// We use these to set the padding around the breadcrumbs.
-$crumb-padding: emCalc(9px) emCalc(14px) emCalc(9px)           !default;
-$crumb-side-padding: emCalc(12px)                              !default;
-
-// We use these to control border styles.
-$crumb-function-factor: 10%                                    !default;
-$crumb-border-size: 1px                                        !default;
-$crumb-border-style: solid                                     !default;
-$crumb-border-color: darken($crumb-bg, $crumb-function-factor) !default;
-$crumb-radius: $global-radius                                  !default;
-
-// We use these to set various text styles for breadcrumbs.
-$crumb-font-size: emCalc(11px)                                 !default;
-$crumb-font-color: $primary-color                              !default;
-$crumb-font-color-current: #333                                !default;
-$crumb-font-color-unavailable: #999                            !default;
-$crumb-font-transform: uppercase                               !default;
-$crumb-link-decor: underline                                   !default;
-
-// We use these to control the slash between breadcrumbs
-$crumb-slash-color: #aaa                                       !default;
-$crumb-slash: "/"                                              !default;
-
-//
-// Breakcrumb Mixins
-//
-
-// We use this mixin to create a container around our breadcrumbs
-@mixin crumb-container {
-  display: block;
-  padding: $crumb-padding;
-  overflow: hidden;
-  margin-#{$default-float}: 0;
-  list-style: none;
-  border-style: $crumb-border-style;
-  border-width: $crumb-border-size;
-
-  // We control which background color and border come through.
-  background-color: $crumb-bg;
-  border-color: $crumb-border-color;
-}
-
-// We use this mixin to create breadcrumb styles from list items.
-@mixin crumbs {
-
-  // A normal state will make the links look and act like clickable breadcrumbs.
-  margin: 0;
-  float: $default-float;
-  font-size: $crumb-font-size;
-  text-transform: $crumb-font-transform;
-  color: $crumb-font-color;
-
-  &:hover a, &:focus a { text-decoration: $crumb-link-decor; }
-
-  a,
-  span {
-    text-transform: $crumb-font-transform;
-    color: $crumb-font-color;
-  }
-
-  // Current is for the link of the current page
-  &.current {
-  	cursor: default;
-  	color: $crumb-font-color-current;
-    a {
-      cursor: default;
-      color: $crumb-font-color-current;
-    }
-
-    &:hover, &:hover a,
-    &:focus, &:focus a { text-decoration: none; }
-  }
-
-  // Unavailable removed color and link styles so it looks inactive.
-  &.unavailable {
-  	color: $crumb-font-color-unavailable;
-    a { color: $crumb-font-color-unavailable; }
-
-    &:hover,
-    &:hover a,
-    &:focus,
-    a:focus {
-      text-decoration: none;
-      color: $crumb-font-color-unavailable;
-      cursor: default;
-    }
-  }
-
-  &:before {
-    content: "#{$crumb-slash}";
-    color: $crumb-slash-color;
-    margin: 0 $crumb-side-padding;
-    position: relative;
-    top: 1px;
-  }
-
-  &:first-child:before {
-	  content: " ";
-	  margin: 0;
-  }
-
-}
-
-
-@if $include-html-nav-classes != false {
-
-  /* Breadcrumbs */
-  .breadcrumbs {
-    @include crumb-container;
-    @include radius($crumb-radius);
-
-    &>* {
-      @include crumbs;
-    }
-  }
-
-}

data/scss/compagecss/components/_button-groups.scss

@@ -1,88 +0,0 @@
-//
-// Button Group Variables
-//
-
-// Sets the margin for the right side by default, and the left margin if right-to-left direction is used
-$button-bar-margin-opposite: emCalc(10px) !default;
-
-//
-// Button Group Mixins
-//
-
-// We use this to add styles for a button group container
-@mixin button-group-container($styles:true, $float:false) {
-  @if $styles {
-    list-style: none;
-    margin: 0;
-    @include clearfix();
-  }
-  @if $float {
-    float: #{$default-float};
-    margin-#{$opposite-direction}: $button-bar-margin-opposite;
-    & div { overflow: hidden; }
-  }
-}
-
-// We use this to control styles for button groups
-@mixin button-group-style($radius:false, $even:false, $float:$default-float) {
-
-  // We use this to control the flow, or remove those styles completely.
-  @if $float {
-    margin: 0 0 0 -1px;
-    float: $float;
-    // Make sure the first child doesn't get the negative margin.
-    &:first-child { margin-#{$default-float}: 0; }
-  }
-
-  // We use these to control left and right radius on first/last buttons in the group.
-  @if $radius == true {
-    &:first-child,
-    &:first-child > a,
-    &:first-child > button,
-    &:first-child > .button { @include side-radius($default-float, $button-radius); }
-    &:last-child,
-    &:last-child > a,
-    &:last-child > button,
-    &:last-child > .button { @include side-radius($opposite-direction, $button-radius); }
-  }
-  @else if $radius {
-    &:first-child,
-    &:first-child > a,
-    &:first-child > button,
-    &:first-child > .button { @include side-radius($default-float, $radius); }
-    &:last-child,
-    &:last-child > a,
-    &:last-child > button,
-    &:last-child > .button { @include side-radius($opposite-direction, $radius); }
-  }
-
-  // We use this to make the buttons even width across their container
-  @if $even {
-    width: percentage((100/$even) / 100);
-    button, .button { width: 100%; }
-  }
-
-}
-
-// Only include these CSS classes if $include-html-classes: true
-@if $include-html-button-classes != false {
-
-  /* Button Groups */
-  .button-group { @include button-group-container;
-
-    &> * { @include button-group-style(); }
-
-    &.radius > * { @include button-group-style($radius:$button-radius, $float:null); }
-    &.round > * { @include button-group-style($radius:$button-round, $float:null); }
-
-    @for $i from 2 through 8 {
-      &.even#{-$i} li { @include button-group-style($even:$i, $float:null); }
-    }
-  }
-
-  .button-bar {
-    @include clearfix;
-    .button-group { @include button-group-container($styles:false,$float:true); }
-  }
-
-}