rapido-css 0.1.2 → 0.1.3

data/stylesheets/utilities/_icon-fonts.scss

@@ -18,10 +18,14 @@ Icon Fonts
         url('http://weloveiconfonts.com/api/fonts/brandico/brandico.ttf') format('truetype'),
         url('http://weloveiconfonts.com/api/fonts/brandico/brandico.svg#brandico') format('svg');
     }
+
+    .branico {
+      display: inline-block;
+      font-family: 'branico';
+    }
 }
 
 // Entypo
-//
 
 @if $use-entypo {
     @font-face {
@@ -34,10 +38,14 @@ Icon Fonts
         url('http://weloveiconfonts.com/api/fonts/entypo/entypo.ttf') format('truetype'),
         url('http://weloveiconfonts.com/api/fonts/entypo/entypo.svg#entypo') format('svg');
     }
+
+    .entypo {
+      display: inline-block;
+      font-family: 'entypo';
+    }
 }
 
 // Fontawesome
-//
 
 @if $use-fontawesome {
     @font-face {
@@ -50,10 +58,14 @@ Icon Fonts
         url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.ttf') format('truetype'),
         url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.svg#FontAwesomeRegular') format('svg');
     }
+
+    .fontawesome {
+      display: inline-block;
+      font-family: 'FontAwesome';
+    }
 }
 
 // Fontelico
-//
 
 @if $use-fontelico {
     @font-face {
@@ -66,10 +78,14 @@ Icon Fonts
         url('http://weloveiconfonts.com/api/fonts/fontelico/fontelico.ttf') format('truetype'),
         url('http://weloveiconfonts.com/api/fonts/fontelico/fontelico.svg#fontelico') format('svg');
     }
+
+    .fontelico {
+      display: inline-block;
+      font-family: 'fontelico';
+    }
 }
 
 // Maki
-//
 
 @if $use-maki {
     @font-face {
@@ -82,10 +98,14 @@ Icon Fonts
         url('http://weloveiconfonts.com/api/fonts/maki/maki.ttf') format('truetype'),
         url('http://weloveiconfonts.com/api/fonts/maki/maki.svg#maki') format('svg');
     }
+
+    .maki {
+      display: inline-block;
+      font-family: 'maki';
+    }
 }
 
 // Openweb Icons
-//
 
 @if $use-openweb-icons {
     @font-face {
@@ -98,10 +118,14 @@ Icon Fonts
         url('http://weloveiconfonts.com/api/fonts/openwebicons/openwebicons.ttf') format('truetype'),
         url('http://weloveiconfonts.com/api/fonts/openwebicons/openwebicons.svg#openweb_iconsregular') format('svg');
     }
+
+    .openwebicons {
+      display: inline-block;
+      font-family: 'OpenWeb Icons';
+    }
 }
 
 // Typicons
-//
 
 @if $use-typicons {
     @font-face {
@@ -114,10 +138,14 @@ Icon Fonts
         url('http://weloveiconfonts.com/api/fonts/typicons/typicons-regular-webfont.ttf') format('truetype'),
         url('http://weloveiconfonts.com/api/fonts/typicons/typicons-regular-webfont.svg#TypiconsRegular') format('svg');
     }
+
+    .typicons {
+      display: inline-block;
+      font-family: 'Typicons';
+    }
 }
 
 // Zocial
-//
 
 @if $use-zocial {
     @font-face {
@@ -130,4 +158,10 @@ Icon Fonts
         url('http://weloveiconfonts.com/api/fonts/zocial/zocial-regular-webfont.ttf') format('truetype'),
         url('http://weloveiconfonts.com/api/fonts/zocial/zocial-regular-webfont.svg#zocialregular') format('svg');
     }
-}
+
+    .zocial {
+      display: inline-block;
+      font-family: 'zocial';
+    }
+}
+

data/stylesheets/utilities/_mixins.scss

@@ -112,6 +112,8 @@ Styleguide 23.3
 
 Center-block
 
+Horizzontally center an element.
+
     @include center-block();
 
 Become:
@@ -134,7 +136,7 @@ Styleguide 23.4
 
 Center
 
-Vertical and horizontal centering with absolute positioning, using the posiztion absolute and negative translate.
+Vertical and horizontal centering with absolute positioning, using the position absolute and negative translate.
 
     @include center();
 
@@ -386,14 +388,9 @@ Styleguide 23.12
 
 */
 
-@mixin alpha-color($color: #fff, $alpha: .5, $attribute: background) {
-    @if $attribute == color {
-        color: $color;
-        color: rgba($color, $alpha);
-    } @else {
-        #{$attribute}: $color;
-        #{$attribute}: rgba($color, $alpha);
-    }
+@mixin alpha-color($color: #fff, $alpha: .5, $attribute: color) {
+    #{$attribute}: $color;
+    #{$attribute}: rgba($color, $alpha);
 }
 
 /*
@@ -402,7 +399,9 @@ Keyframes support
 
 Used for creating custom animations.
 
-    @include keyframes($name);
+    @include keyframes($name) {
+      ...keyframes...
+    }
 
 * `$name`: Name of the keyframe
 
@@ -668,20 +667,20 @@ Rapido use the compass' [Sprites Mixin](http://compass-style.org/help/tutorials/
 for more info see the full documentation from the link.
 
 First you need to add to your scss file an import to import all of the seperate icons that will be compiled in a single image.
-For example if you have a folder named `icons` inside the main `images` folder add this line:
+For example if you have a folder named `s` inside the main `images` folder add this line:
 
-    @import 'icons/ *.png';
+    @import 's/ *.png';
 
 Then add you have two options:
 
 Add the sprite in the html with (where `icon_name` is the filename of the icon). .s` is the standard class the must be used with all sprites images.
 
-    <a href="#"><i class="s icons-icon_name"></i> Link</a>
+    <a href="#"><i class="s s-icon_name"></i> Link</a>
 
 Or via `@include` from the scss:
 
     a:before {
-        @include sprite(icon_name)
+        @include s(icon_name)
     }
 
 The result is the same.

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rapido-css
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.1.3
   prerelease: 
 platform: ruby
 authors:
@@ -9,16 +9,16 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-12-28 00:00:00.000000000 Z
+date: 2014-01-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
-  name: compass
+  name: susy
   requirement: !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
       - !ruby/object:Gem::Version
-        version: '0.11'
+        version: 1.0.8
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
@@ -26,7 +26,7 @@ dependencies:
     requirements:
     - - ! '>='
       - !ruby/object:Gem::Version
-        version: '0.11'
+        version: 1.0.8
 description: An easy and quick sass+compass+susy prototyping framework based on Bootstrap
   without all the default styles.
 email: raffaele.rasini@gmail.com
@@ -39,7 +39,6 @@ files:
 - stylesheets/_default-styles.scss
 - stylesheets/_functions.scss
 - stylesheets/_normalize.scss
-- stylesheets/_susy.scss
 - stylesheets/components/_alerts.scss
 - stylesheets/components/_breadcrumbs.scss
 - stylesheets/components/_button-groups.scss
@@ -66,16 +65,6 @@ files:
 - stylesheets/settings/_dimensions.scss
 - stylesheets/settings/_effects.scss
 - stylesheets/styleguide.md
-- stylesheets/susy/_background.scss
-- stylesheets/susy/_functions.scss
-- stylesheets/susy/_grid.scss
-- stylesheets/susy/_isolation.scss
-- stylesheets/susy/_margin.scss
-- stylesheets/susy/_media.scss
-- stylesheets/susy/_padding.scss
-- stylesheets/susy/_settings.scss
-- stylesheets/susy/_support.scss
-- stylesheets/susy/_units.scss
 - stylesheets/utilities/_animations.scss
 - stylesheets/utilities/_debug.scss
 - stylesheets/utilities/_helper-classes.scss

data/stylesheets/_susy.scss

@@ -1,16 +0,0 @@
-// ---------------------------------------------------------------------------
-// Partials
-
-// temporary
-@import "susy/support";
-@import "susy/units";
-
-// permanent
-@import "susy/settings";
-@import "susy/functions";
-@import "susy/grid";
-@import "susy/isolation";
-@import "susy/padding";
-@import "susy/margin";
-@import "susy/media";
-@import "susy/background";

data/stylesheets/susy/_background.scss

@@ -1,18 +0,0 @@
-// ---------------------------------------------------------------------------
-// Imports
-
-@import "compass/layout/grid-background";
-@import "compass/css3/background-origin";
-@import "compass/css3/background-clip";
-
-// ---------------------------------------------------------------------------
-// Susy Grid Background
-//
-// A wrapper for the compass "column-grid-background" mixin
-// Uses all your settings to create a grid background for a container element.
-// Note: Sub-pixel rounding can lead to several pixels of variation between browsers.
-@mixin susy-grid-background(){
-  @include column-grid-background($total-columns, column(), gutter(), 0);
-  @include background-origin(content-box);
-  @include background-clip(content-box);
-}

data/stylesheets/susy/_functions.scss

@@ -1,376 +0,0 @@
-// ---------------------------------------------------------------------------
-// Imports
-
-// We need access to some basic font settings for handling media-queries.
-@import "compass/typography/vertical_rhythm";
-
-// For now, we also need this...
-$browser-default-font-size-px       : 16px;
-$browser-default-font-size-percent  : 100%;
-$browser-default-font-size-pt       : 12pt;
-
-$rem-with-px-fallback               : true !default;
-
-// ---------------------------------------------------------------------------
-// Sass list Functions
-
-// Return a list with specific items removed
-//
-// filter($list, $target)
-// - $list    : The list to filter.
-// - $target  : An item to be removed from the list.
-@function filter($list, $target) {
-  $clean: compact();
-  @if index($list, $target) {
-    @each $item in $list {
-      $clean: if($item == $target, $clean, append($clean, $item));
-    }
-  } @else { $clean: $list; }
-  @return $clean;
-}
-
-// ---------------------------------------------------------------------------
-// Don't use static output when it will break things
-
-// Switch element-level output to fluid, when container-width is wrong for static
-//
-// fix-static-misalignment([$style, $width])
-// - $style: $container-style.
-// - $width: $container-width.
-@function fix-static-misalignment(
-  $style: $container-style,
-  $width: $container-width
-) {
-  @if $container-width and $container-width != container-outer-width($width: false) {
-    $style: fluid;
-  }
-  @return $style;
-}
-
-// ---------------------------------------------------------------------------
-// Grid Functions
-
-// Returns the full width of a grid based on your grid settings.
-//
-//  $columns  : The number of columns to get width for.
-@function columns-width(
-  $columns  : $total-columns
-) {
-  @if round($columns) != $columns {
-    @warn "Susy works best with integer column-spans.
-    For partial-columns, you may need to finesse the math by hand using functions directly.";
-  }
-  @return ($columns * $column-width) + (if($columns >= 1, ceil($columns - 1), 0) * $gutter-width);
-}
-
-// Return the grid width after adding or subtracting grid padding
-//
-// $width     : the width of the grid without padding;
-// $operation : ( add | subtract ) if padding should be added or subtracted;
-@function handle-grid-padding(
-  $width,
-  $operation : subtract
-) {
-  $pad: $grid-padding*2;
-
-  @if comparable($width, $grid-padding) {
-    $width: if($operation == subtract, $width - $pad, $width + $pad);
-  } @else {
-    @warn "$grid-padding must be set in units comparable to the container width.";
-  }
-
-  @return $width;
-}
-
-// Return the full outer width of a Container element.
-//
-//  $columns  : The number of columns in the Grid Layout.
-@function container-outer-width(
-  $columns  : $total-columns,
-  $width    : $container-width
-) {
-  $outerwidth: if($width, $width, columns-width($columns));
-
-  @if $width {
-    @if not $border-box-sizing { $outerwidth: handle-grid-padding($outerwidth, subtract); }
-  } @else {
-    @if $border-box-sizing { $outerwidth: handle-grid-padding($outerwidth, add); }
-  }
-
-  @return $outerwidth;
-}
-
-// Return the percentage width of a single column in a given 'context'.
-//
-//  $context  : The grid context in columns, if nested.
-//  $style    : The container style to use.
-@function column(
-  $context  : $total-columns,
-  $style    : fix-static-misalignment()
-) {
-  @return if($style == static, $column-width, relative-width($column-width, $context));
-}
-
-// Return the percentage width of multiple 'columns' in a given 'context'.
-//
-//  $columns  : The number of columns to get relative width for.
-//  $context  : The grid context in columns, if nested.
-//  $style    : The container style to use.
-@function columns(
-  $columns,
-  $context  : $total-columns,
-  $style    : fix-static-misalignment()
-) {
-  @return if($style == static, columns-width($columns), relative-width(columns-width($columns), $context));
-}
-
-// Return the percentage width of a single gutter in a given 'context'.
-//
-//  $context  : The grid context in columns, if nested.
-//  $style    : The container style to use.
-@function gutter(
-  $context  : $total-columns,
-  $style    : fix-static-misalignment()
-) {
-  @return if($style == static, $gutter-width, relative-width($gutter-width, $context));
-}
-
-// Return the percentage width of a given value in a given 'context'.
-//
-//  $width    : Any given width value.
-//  $context  : The grid context in columns, if nested.
-@function relative-width(
-  $width,
-  $context : $total-columns
-) {
-  @return percentage($width / columns-width($context));
-}
-
-// Return the total space occupied by multiple columns and associated gutters.
-// Useful for adding padding or margins (prefix, suffix, push, pull, etc.)
-//
-//  $columns  : The number of columns to get relative space for.
-//  $context  : The grid context in columns, if nested.
-//  $style    : The container style to use.
-@function space(
-  $columns,
-  $context  : $total-columns,
-  $style    : fix-static-misalignment()
-) {
-  @return columns($columns, $context, $style) + if($columns >= 1, gutter($context, $style), 0);
-}
-
-// Accept a list including column-count and (optional) position.
-// Return either the column count or the position alone.
-//
-//  $columns  : the list to split and interprate.
-//  $request  : The value to return, either 'columns' or 'position'.
-@function split-columns-value(
-  $columns,
-  $request : columns
-) {
-  $pos  : false;
-  $cols : false;
-
-  @each $var in $columns {
-    @if (type-of($var) == 'string') {
-      $pos: $var;
-    } @else {
-      @if (type-of($var) == 'number') and (unitless($var)) {
-        $cols: $var;
-      } @else {
-        @warn '"#{$var}" is not a valid part of "$columns: #{$columns}" in the columns() mixin.';
-      }
-    }
-  }
-
-  @if $request == 'columns' {
-    @return $cols;
-  } @else {
-    @if $request == 'position' {
-      @return $pos;
-    } @else {
-      @warn '"#{$request}"" is not a valid value for $request';
-    }
-  }
-}
-
-// Accept nth-selector variables, and format them as a valid CSS3 selector.
-//
-// $n         : [first | only | last | <equation>]
-// $selector  : [child | last-child | of-type | last-of-type ]
-@function format-nth(
-  $n        : last,
-  $selector : child
-) {
-  @if ($n == 'last') or ($n =='first') or ($n =='only') {
-    $selector: '#{$n}-#{$selector}';
-  } @else {
-    $selector: 'nth-#{$selector}(#{$n})';
-  }
-  @return $selector;
-}
-
-// ---------------------------------------------------------------------------
-// Media Functions
-
-// Return an em value adjusted to match the browser default font size.
-// Note: This only works if actual sizes are set relative to browser defaults.
-//
-// $ems         : The initial value to be converted.
-// $font-size   : The current font-size in.
-@function base-ems(
-  $ems,
-  $font-size: $base-font-size
-){
-  $font-size  : if(unit($ems) == 'rem', $base-font-size, $font-size);
-  $unit       : unit($font-size);
-  $mult       : $ems / ($ems * 0 + 1);
-
-  @if $unit == 'px' {
-    @return $font-size / $browser-default-font-size-px * $mult * 1em;
-  }
-  @else if $unit == '%' {
-    @return $font-size / $browser-default-font-size-percent * $mult * 1em;
-  }
-  @else if $unit == 'em' {
-    @return $font-size / 1em * $mult * 1em;
-  }
-  @else if $unit == 'pt' {
-    @return $font-size / $browser-default-font-size-pt * $mult * 1em;
-  }
-  @else {
-    @warn 'Variable $base-font-size does not have a valid font unit. Valid units for fonts in CSS are px, pt, em, and %.';
-  }
-}
-
-// This name will be deprecated...
-@function absolute-ems($ems, $font-size: $base-font-size){ @return base-ems($ems, $font-size); }
-
-// Return a length, after any em-values have been sent through absolute-ems().
-//
-// $length      : The length value to be checked and adjusted if necessary.
-// $font-size   : The current font-size in px.
-@function fix-ems(
-  $length,
-  $font-size: $base-font-size
-){
-  @if $length {
-    @if (unit($length) == 'em') or (unit($length) == 'rem') {
-      $length: absolute-ems($length,$font-size);
-    }
-  }
-  @return $length;
-}
-
-// Sort a list of arguments into "$min $layout $max $ie" order, and return the list.
-//
-// $media-layout  : a list of values [$min $layout $max $ie] including...
-//                : - one unitless number (columns in a layout)
-//                : - two optional lengths (min and max-width media-query breakpoints).
-//                : - one optional boolean or string to trigger fallback support for IE.
-// $font-size     : [optional] The base font-size of your layout, if you are using ems.
-//                : - defaults to $base-font-size
-@function medialayout(
-  $media-layout,
-  $font-size: $base-font-size
-) {
-  $media        : false;
-  $min          : false;
-  $layout       : false;
-  $max          : false;
-  $ie           : false;
-  $has-layout   : false;
-
-  @each $val in $media-layout {
-    @if (type-of($val) == "number") {
-      @if unitless($val) {
-        $layout     : $val;
-        $has-layout : true;
-      } @else {
-        @if ($has-layout) and (not $media) {
-          $max: $val;
-        } @else {
-          @if $media {
-            $media: join($media,$val);
-          } @else {
-            $media: $val;
-          }
-        }
-      }
-    } @else {
-      $ie: $val;
-    }
-  }
-  @if (length($media) > 0) {
-    @if (length($media) == 1) {
-      $min: nth($media,1);
-    } @else {
-      $min: nth($media,1);
-      $max: nth($media,2);
-      @if comparable($min, $max) {
-        @if ($min > $max) {
-          $max: nth($media,1);
-          $min: nth($media,2);
-        }
-      } @else {
-        @warn "Can't compare incompatible units.
-         Using #{$min} for min-width, and #{$max} for max-width";
-      }
-      @if (length($media) > 2) {
-        @warn "You can only send two lengths: a min-width and an (optional) max-width.
-         You sent #{length($media)}: #{$media}";
-      }
-    }
-  }
-
-  // media-queries must be set in ems relative to the browser default
-  // rather than the font-size set in CSS.
-  $min: fix-ems($min,$font-size);
-  $max: fix-ems($max,$font-size);
-
-  @return $min $layout $max $ie;
-}
-
-// Return the nearest layout (column-count) above a given breakpoint.
-//
-// $min : The min-width media-query breakpoint above which to establish a new layout.
-@function get-layout (
-  $min
-) {
-  $columns        : 1;
-  $layout-width   : container-outer-width($columns);
-  $return         : false;
-  $min            : fix-ems($min);
-
-  @if comparable($min, $layout-width) {
-    @while $min >= $layout-width {
-      $columns        : $columns + 1;
-      $layout-width   : container-outer-width($columns);
-    }
-    $return : $columns;
-  }
-
-  @return $return;
-}
-
-// Check to see if a given $media-layout list is simply the default.
-//
-// $media-layout  : a list of values including -
-//                : One unitless number (columns in a layout)
-//                : Two optional lengths (min and max-width media-query breakpoints).
-//                : One optional boolean or string to trigger fallback support for IE.
-@function is-default-layout(
-  $media-layout
-) {
-  $media-layout : medialayout($media-layout);
-  $min          : nth($media-layout,1);
-  $layout-cols  : nth($media-layout,2);
-  $max          : nth($media-layout,3);
-
-  @if $min or $max {
-    @return false;
-  } @else {
-    @return if($layout-cols == $total-columns,true,false);
-  }
-}