piecss 0.2.0.0 → 0.3.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 5d87e78a2c83fdcdaf3beaf00c3a3d5b0029a692
-  data.tar.gz: 0a93841dbc65eb0d486326ae167f924c085a829a
+  metadata.gz: b7481f4a0a17af62b411c402369f026c80bb711d
+  data.tar.gz: 00defa1ccaa2009e0c581110be401483829a3c09
 SHA512:
-  metadata.gz: 31842f3f50bbe86cc9550ec0621e9612174b905aedb7f40625d23b6b1a219205fb0f22e64200237cf88ecb18e5706b423a117c6c8438c320f16f6f1052febae7
-  data.tar.gz: 15662e9f2b36805c7270c8bab2811d1e93dbcf8d4102ef7609fd75583a456d963e449098ab2a7012f4a4eb3020115a33c833a6e3cae08c8a962d52fa69aa76ac
+  metadata.gz: 387328d81fcec0c83451307f8df10dcd05aa22b41596afd1617f38fe8785ae2a6f86ab066c9d5ab1fcf7e71a7c7bb6f8e739e075cb8d570c710108dc6a40ea74
+  data.tar.gz: 4ae988bfb93b6125bb65e65b7e259383fd46678657061cc777c552ffe4f279fe0c4a99e93a00fc54e8f93cd1cc61a64850bdf2d676a40d2f8f9f887779c4b9e5

data/lib/piecss.rb

@@ -1,6 +1,17 @@
-require 'compass'
 extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
-Compass::Frameworks.register('piecss',
-                                :path => extension_path,
-                                :stylesheets_directory => File.join(extension_path, 'sass'),
-                                :templates_directory => File.join(extension_path, 'templates'))
+stylesheets_path = File.join(base_directory, 'sass')
+templates_path = File.join(base_directory, 'templates')
+
+if (defined? Compass)
+  Compass::Frameworks.register('piecss',
+                                  :path => extension_path,
+                                  :stylesheets_directory => stylesheets_path,
+                                  :templates_directory => templates_path
+else
+  # compass not found, register on the Sass path via the environment.
+  if ENV.has_key?("SASS_PATH")
+    ENV["SASS_PATH"] = ENV["SASS_PATH"] + File::PATH_SEPARATOR + stylesheets_path
+  else
+    ENV["SASS_PATH"] = stylesheets_path
+  end
+end

data/sass/piecss/_settings.scss

@@ -6,14 +6,17 @@
 // ==========================================================================
 
 @import "settings/constants";
+@import "settings/colour";
 @import "settings/font";
+@import "settings/typography";
 @import "settings/base";
 
-// All below rely on setting in settings/base
+// All below rely on settings/base
 @import "settings/breakpoint";
 
-// Relies on setting in settings/breakpoint
-@import "settings/grid";
+//  All below rely on settings/breakpoint
+@import "settings/layout";
 @import "settings/form";
 @import "settings/button";
 @import "settings/list";
+@import "settings/miscellaneous";

data/sass/piecss/_utilities.scss

@@ -2,6 +2,7 @@
 
 @import "utilities/cache";
 @import "utilities/unit";
+@import "utilities/string";
 @import "utilities/side";
 @import "utilities/rhythm";
 @import "utilities/breakpoint";
@@ -10,4 +11,6 @@
 @import "utilities/element";
 @import "utilities/image";
 @import "utilities/list";
+@import "utilities/colour";
+@import "utilities/svg";
 @import "utilities/miscellaneous";

data/sass/piecss/behavior/_anchor.scss

@@ -1,5 +1,5 @@
 // /*
-// * @copyright  Copyright (C) 2013 Crossing Hippos - Babs Gösgens. All rights reserved.
+// * @copyright  Copyright (C) 2013 Babs Gösgens. All rights reserved.
 // * @license    GNU General Public License version 2 or later; see LICENSE.txt
 // */
 

data/sass/piecss/settings/_base.scss

@@ -1,26 +1,6 @@
 // Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
 
 
-///
-/// Compass has deprecated this value. Piecss is still using it.
-///
-/// @since 0.1
-///
-/// @type {Bool}
-///
-
-$legacy-support-for-ie: false;
-
-///
-/// Compass has deprecated this value. Piecss is still using it.
-///
-/// @since 0.1
-///
-/// @type {Bool}
-///
-
-$legacy-support-for-mozilla: true;
-
 ///
 /// The unit to which to-unit() will convert px values. Used in various functions and mixins.
 ///
@@ -53,14 +33,14 @@ $line-height-unit: 1% !default;
 
 ///
 /// Is used to calculate the project's base font-size, eg the font-size on which all other calculations are based.
-/// Note that Chrome has [issues](https://code.google.com/p/chromium/issues/detail?id=320754) when the base font size is smaller than 16px. 
-/// 
+/// Note that Chrome has [issues](https://code.google.com/p/chromium/issues/detail?id=320754) when the base font size is smaller than 16px.
+///
 /// @since 0.1
 ///
 /// @type {Number}
 ///
 
-$base-font-size: 16px !default;
+$base-font-size: 14px !default;
 
 ///
 /// The default font-size for your project. This is translated to the final unit of output using the [$unit](./#variable-unit) variable.
@@ -70,7 +50,7 @@ $base-font-size: 16px !default;
 /// @type {Number}
 ///
 
-$default-font-size: 16px !default;
+$font-size: 14px !default;
 
 ///
 /// The default line-height for your project. This is translated to the final unit of output using the [$line-height-unit](./#line-height-unit) variable.
@@ -80,7 +60,7 @@ $default-font-size: 16px !default;
 /// @type {Number}
 ///
 
-$default-line-height: 24px !default;
+$line-height: 21px !default;
 
 ///
 /// The default font for your project. It is set in a $font-type list, Piecss has a collection of pre-defined font-types that can be augmented.

data/sass/piecss/settings/_breakpoint.scss

@@ -1,65 +1,159 @@
 // Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
 
 
+// ==========================================================================
+//
+// CONTENT
+//
+// ==========================================================================
+//
+// 1. Breakpoint settings
+
+
+// ==========================================================================
+//
+// BREAKPOINT SETTINGS
+//
+// ==========================================================================
+
+
+///
+/// Breakpoint selector: smaller than handheld
+///
+/// @since 1.0
+///
+/// @type {String}
+///
+
+$lt-small-handheld: "(max-width: #{to-unit(319px, $unit, $default-font-size)})" !default;
+
+///
+/// Breakpoint selector: larger than handheld
+///
+/// @since 1.0
+///
+/// @type {String}
+///
+
+$gt-small-handheld: "(min-width: #{to-unit(320px, $unit, $default-font-size)})" !default;
+
+
+///
+/// Breakpoint selector: smaller than medium-sized handheld
+///
+/// @since 1.0
+///
+/// @type {String}
+///
+
+$lt-medium-handheld: "(max-width: #{to-unit(519px, $unit, $default-font-size)})" !default;
+
+///
+/// Breakpoint selector: larger than medium-sized handheld
+///
+/// @since 1.0
+///
+/// @type {String}
+///
+
+$gt-medium-handheld: "(min-width: #{to-unit(520px, $unit, $default-font-size)})" !default;
+
+///
+/// Breakpoint selector: smaller than large-sized handheld
+///
+/// @since 1.0
+///
+/// @type {String}
+///
+
+$lt-large-handheld: "(max-width: #{to-unit(767px, $unit, $default-font-size)})" !default;
+
+///
+/// Breakpoint selector: larger than large-sized handheld
+///
+/// @since 1.0
+///
+/// @type {String}
+///
+
+$gt-large-handheld: "(min-width: #{to-unit(768px, $unit, $default-font-size)})" !default;
+
+///
+/// Breakpoint selector: smaller than small desktop
 ///
-/// Breakpoint for smallest handheld devices (phones). Overwrite and augment breakpoint presets as you see fit.
+/// @since 1.0
+///
+/// @type {String}
 ///
-/// @since 0.1
+
+$lt-small-desktop: "(max-width: #{to-unit(1023px, $unit, $default-font-size)})" !default;
+
+///
+/// Breakpoint selector: larger than small desktop
+///
+/// @since 1.0
 ///
 /// @type {String}
 ///
 
-$small_handheld: "(max-width: #{to-unit(480px,$unit,$default-font-size)})" !default;
+$gt-small-desktop: "(min-width: #{to-unit(1024px, $unit, $default-font-size)})" !default;
 
 ///
-/// Breakpoint for medium handheld devices (tablets). Overwrite and augment breakpoint presets as you see fit.
+/// Breakpoint selector: smaller than medium-sized desktop
 ///
-/// @since 0.1
+/// @since 1.0
 ///
 /// @type {String}
 ///
 
-$medium_handheld: "(min-width #{to-unit(481px,$unit,$default-font-size)}) and (max-width #{to-unit(1024px,$unit,$default-font-size)})" !default;
+$lt-medium-desktop: "(max-width: #{to-unit(1259px, $unit, $default-font-size)})" !default;
 
 ///
-/// Breakpoint for small desktop devices. Overwrite and augment breakpoint presets as you see fit.
+/// Breakpoint selector: larger than medium-sized desktop
 ///
-/// @since 0.1
+/// @since 1.0
 ///
 /// @type {String}
 ///
 
-$small_desktop: "(min-width: #{to-unit(1024px,$unit,$default-font-size)})" !default;
+$gt-medium-desktop: "(min-width: #{to-unit(1260px, $unit, $default-font-size)})" !default;
 
+///
+/// Breakpoint selector: smaller than large-sized desktop
+///
+/// @since 1.0
+///
+/// @type {String}
+///
 
+$lt-large-desktop: "(max-width: #{to-unit(1439px, $unit, $default-font-size)})" !default;
 
 ///
-/// Breakpoint for small sized handheld devices. Overwrite and augment breakpoint presets as you see fit.
+/// Breakpoint selector: larger than large-sized desktop
 ///
 /// @since 1.0
 ///
 /// @type {String}
 ///
-$lt-small: "(max-width: #{to-unit(479px,$unit,$default-font-size)})" !default;
-$gt-small: "(min-width: #{to-unit(480px,$unit,$default-font-size)})" !default;
+
+$gt-large-desktop: "(min-width: #{to-unit(1440px, $unit, $default-font-size)})" !default;
 
 ///
-/// Breakpoint for medium sized handheld and small desktop devices. Overwrite and augment breakpoint presets as you see fit.
+/// Breakpoint selector: orientation portrait
 ///
 /// @since 1.0
 ///
 /// @type {String}
 ///
-$lt-medium: "(max-width: #{to-unit(767px,$unit,$default-font-size)})" !default;
-$gt-medium: "(min-width: #{to-unit(768px,$unit,$default-font-size)})" !default;
+
+$portrait: "(orientation: portrait)" !default;
 
 ///
-/// Breakpoint for larger (desktop) devices. Overwrite and augment breakpoint presets as you see fit.
+/// Breakpoint selector: orientation landscape
 ///
 /// @since 1.0
 ///
 /// @type {String}
 ///
 
-$lt-large: "(max-width: #{to-unit(1439px,$unit,$default-font-size)})" !default;
-$gt-large: "(min-width: #{to-unit(1440px,$unit,$default-font-size)})" !default;
+$landscape: "(orientation: landscape)" !default;

data/sass/piecss/settings/_button.scss

@@ -38,7 +38,7 @@ $button-selector: "%btn" !default;
 
 
 ///
-/// Collection of button selectors and property maps. For each selector, the corrresponding properties are rendered by the button behavior. 
+/// Collection of button selectors and property maps. For each selector, the corrresponding properties are rendered by the button behavior.
 /// You can override button behavior by a) overriding any of the button settings, or by b) replacing the selector entry in this element collection map.
 ///
 /// @since 0.1
@@ -259,4 +259,4 @@ $button-focussed-outline-color: mix($button-border-color, $button-focussed-backg
 /// @type {Number}
 ///
 
-$button-focussed-outline-offset: -1*( $button-focussed-outline-width + 3*$button-border-width) !default;
+$button-focussed-outline-offset: -1 * ($button-focussed-outline-width + 3 * $button-border-width) !default;

data/sass/piecss/settings/_colour.scss

@@ -0,0 +1,152 @@
+
+$shades: (20%, 40%, 60%, 80%, 100%) !default;
+
+$aliceblue: #f0f8ff;
+$antiquewhite: #faebd7;
+$aqua: #0ff;
+$aquamarine: #7fffd4;
+$azure: #f0ffff;
+$becca: #639;
+$beige: #f5f5dc;
+$bisque: #ffe4c4;
+$black: #000;
+$blanchedalmond: #ffebcd;
+$blue: #00f;
+$blueviolet: #8a2be2;
+$brown: #a52a2a;
+$burlywood: #deb887;
+$cadetblue: #5f9ea0;
+$chartreuse: #7fff00;
+$chocolate: #d2691e;
+$coral: #ff7f50;
+$cornflowerblue: #6495ed;
+$cornsilk: #fff8dc;
+$crimson: #dc143c;
+$cyan: $aqua;
+$darkblue: #00008b;
+$darkbluegrey: #2c3e50;
+$darkcyan: #008b8b;
+$darkgoldenrod: #b8860b;
+$darkgray: #a9a9a9;
+/* alternate spelling */ $darkgrey: $darkgray;
+$darkgreen: #006400;
+$darkkhaki: #bdb76b;
+$darkmagenta: #8b008b;
+$darkolivegreen: #556b2f;
+$darkorange: #ff8c00;
+$darkorchid: #9932cc;
+$darkred: #8b0000;
+$darksalmon: #e9967a;
+$darkseagreen: #8fbc8f;
+$darkslateblue: #483d8b;
+$darkslategray: #2f4f4f;
+/* alternate spelling */ $darkslategrey: $darkslategray;
+$darkturquoise: #00ced1;
+$darkviolet: #9400d3;
+$deeppink: #ff1493;
+$deepskyblue: #00bfff;
+$dimgray: #696969;
+/* alternate spelling */ $dimgrey: $dimgray;
+$dodgerblue: #1e90ff;
+$firebrick: #b22222;
+$floralwhite: #fffaf0;
+$forestgreen: #228b22;
+$fuchsia: #f0f;
+$gainsboro: #dcdcdc;
+$ghostwhite: #f8f8ff;
+$gold: #ffd700;
+$goldenrod: #daa520;
+$gray: #808080;
+/* alternate spelling */ $grey: $gray;
+$green: #008000;
+$greenyellow: #adff2f;
+$honeydew: #f0fff0;
+$hotpink: #ff69b4;
+$indianred: #cd5c5c;
+$indigo: #4b0082;
+$ivory: #fffff0;
+$khaki: #f0e68c;
+$lavender: #e6e6fa;
+$lavenderblush: #fff0f5;
+$lawngreen: #7cfc00;
+$lemonchiffon: #fffacd;
+$lightblue: #add8e6;
+$lightcoral: #f08080;
+$lightcyan: #e0ffff;
+$lightgoldenrodyellow: #fafad2;
+$lightgray: #d3d3d3;
+/* alternate spelling */ $lightgrey: $lightgray;
+$lightgreen: #90ee90;
+$lightpink: #ffb6c1;
+$lightsalmon: #ffa07a;
+$lightseagreen: #20b2aa;
+$lightskyblue: #87cefa;
+$lightslategray: #789;
+/* alternate spelling */ $lightslategrey: $lightslategray;
+$lightsteelblue: #b0c4de;
+$lightyellow: #ffffe0;
+$lime: #0f0;
+$limegreen: #32cd32;
+$linen: #faf0e6;
+$magenta: #f0f;
+$maroon: #800000;
+$mediumaquamarine: #66cdaa;
+$mediumblue: #0000cd;
+$mediumorchid: #ba55d3;
+$mediumpurple: #9370db;
+$mediumseagreen: #3cb371;
+$mediumslateblue: #7b68ee;
+$mediumspringgreen: #00fa9a;
+$mediumturquoise: #48d1cc;
+$mediumvioletred: #c71585;
+$midnightblue: #191970;
+$mintcream: #f5fffa;
+$mistyrose: #ffe4e1;
+$moccasin: #ffe4b5;
+$navajowhite: #ffdead;
+$navy: #000080;
+$oldlace: #fdf5e6;
+$olive: #808000;
+$olivedrab: #6b8e23;
+$orange: #ffa500;
+$orangered: #ff4500;
+$orchid: #da70d6;
+$palegoldenrod: #eee8aa;
+$palegreen: #98fb98;
+$paleturquoise: #afeeee;
+$palevioletred: #db7093;
+$papayawhip: #ffefd5;
+$peachpuff: #ffdab9;
+$peru: #cd853f;
+$pink: #ffc0cb;
+$plum: #dda0dd;
+$powderblue: #b0e0e6;
+$purple: #800080;
+$red: #f00;
+$rosybrown: #bc8f8f;
+$royalblue: #4169e1;
+$saddlebrown: #8b4513;
+$salmon: #fa8072;
+$sandybrown: #f4a460;
+$seagreen: #2e8b57;
+$seashell: #fff5ee;
+$sienna: #a0522d;
+$silver: #c0c0c0;
+$skyblue: #87ceeb;
+$slateblue: #6a5acd;
+$slategray: #708090;
+/* alternate spelling */ $slategrey: $slategray;
+$snow: #fffafa;
+$springgreen: #00ff7f;
+$steelblue: #4682b4;
+$tan: #d2b48c;
+$teal: #008080;
+$thistle: #d8bfd8;
+$tomato: #ff6347;
+$turquoise: #40e0d0;
+$violet: #ee82ee;
+$wheat: #f5deb3;
+$white: #fff;
+$whitesmoke: #f5f5f5;
+$yellow: #ff0;
+$yellowgreen: #9acd32;

data/sass/piecss/settings/_constants.scss

@@ -8,146 +8,3 @@ $keys-padding: $keys-side;
 $keys-margin: $keys-side;
 $keys-border: width style color;
 $keys-corner: top-left top-right right-bottom left-bottom;
-
-
-$aliceblue: #f0f8ff;
-$antiquewhite: #faebd7;
-$aqua: #00ffff;
-$aquamarine: #7fffd4;
-$azure: #f0ffff;
-$becca: #639;
-$beige: #f5f5dc;
-$bisque: #ffe4c4;
-$black: #000000;
-$blanchedalmond: #ffebcd;
-$blue: #0000ff;
-$blueviolet: #8a2be2;
-$brown: #a52a2a;
-$burlywood: #deb887;
-$cadetblue: #5f9ea0;
-$chartreuse: #7fff00;
-$chocolate: #d2691e;
-$coral: #ff7f50;
-$cornflowerblue: #6495ed;
-$cornsilk: #fff8dc;
-$crimson: #dc143c;
-$cyan: #00ffff;
-$darkblue: #00008b;
-$darkcyan: #008b8b;
-$darkgoldenrod: #b8860b;
-$darkgray: #a9a9a9;
-$darkgreen: #006400;
-$darkkhaki: #bdb76b;
-$darkmagenta: #8b008b;
-$darkolivegreen: #556b2f;
-$darkorange: #ff8c00;
-$darkorchid: #9932cc;
-$darkred: #8b0000;
-$darksalmon: #e9967a;
-$darkseagreen: #8fbc8f;
-$darkslateblue: #483d8b;
-$darkslategray: #2f4f4f;
-$darkturquoise: #00ced1;
-$darkviolet: #9400d3;
-$deeppink: #ff1493;
-$deepskyblue: #00bfff;
-$dimgray: #696969;
-$dodgerblue: #1e90ff;
-$firebrick: #b22222;
-$floralwhite: #fffaf0;
-$forestgreen: #228b22;
-$fuchsia: #ff00ff;
-$gainsboro: #dcdcdc;
-$ghostwhite: #f8f8ff;
-$gold: #ffd700;
-$goldenrod: #daa520;
-$gray: #808080;
-$green: #008000;
-$greenyellow: #adff2f;
-$honeydew: #f0fff0;
-$hotpink: #ff69b4;
-$indianred : #cd5c5c;
-$indigo : #4b0082;
-$ivory: #fffff0;
-$khaki: #f0e68c;
-$lavender: #e6e6fa;
-$lavenderblush: #fff0f5;
-$lawngreen: #7cfc00;
-$lemonchiffon: #fffacd;
-$lightblue: #add8e6;
-$lightcoral: #f08080;
-$lightcyan: #e0ffff;
-$lightgoldenrodyellow: #fafad2;
-$lightgray: #d3d3d3;
-$lightgreen: #90ee90;
-$lightpink: #ffb6c1;
-$lightsalmon: #ffa07a;
-$lightseagreen: #20b2aa;
-$lightskyblue: #87cefa;
-$lightslategray: #778899;
-$lightsteelblue: #b0c4de;
-$lightyellow: #ffffe0;
-$lime: #00ff00;
-$limegreen: #32cd32;
-$linen: #faf0e6;
-$magenta: #ff00ff;
-$maroon: #800000;
-$mediumaquamarine: #66cdaa;
-$mediumblue: #0000cd;
-$mediumorchid: #ba55d3;
-$mediumpurple: #9370db;
-$mediumseagreen: #3cb371;
-$mediumslateblue: #7b68ee;
-$mediumspringgreen: #00fa9a;
-$mediumturquoise: #48d1cc;
-$mediumvioletred: #c71585;
-$midnightblue: #191970;
-$mintcream: #f5fffa;
-$mistyrose: #ffe4e1;
-$moccasin: #ffe4b5;
-$navajowhite: #ffdead;
-$navy: #000080;
-$oldlace: #fdf5e6;
-$olive: #808000;
-$olivedrab: #6b8e23;
-$orange: #ffa500;
-$orangered: #ff4500;
-$orchid: #da70d6;
-$palegoldenrod: #eee8aa;
-$palegreen: #98fb98;
-$paleturquoise: #afeeee;
-$palevioletred: #db7093;
-$papayawhip: #ffefd5;
-$peachpuff: #ffdab9;
-$peru: #cd853f;
-$pink: #ffc0cb;
-$plum: #dda0dd;
-$powderblue: #b0e0e6;
-$purple: #800080;
-$red: #ff0000;
-$rosybrown: #bc8f8f;
-$royalblue: #4169e1;
-$saddlebrown: #8b4513;
-$salmon: #fa8072;
-$sandybrown: #f4a460;
-$seagreen: #2e8b57;
-$seashell: #fff5ee;
-$sienna: #a0522d;
-$silver: #c0c0c0;
-$skyblue: #87ceeb;
-$slateblue: #6a5acd;
-$slategray: #708090;
-$snow: #fffafa;
-$springgreen: #00ff7f;
-$steelblue: #4682b4;
-$tan: #d2b48c;
-$teal: #008080;
-$thistle: #d8bfd8;
-$tomato: #ff6347;
-$turquoise: #40e0d0;
-$violet: #ee82ee;
-$wheat: #f5deb3;
-$white: #ffffff;
-$whitesmoke: #f5f5f5;
-$yellow: #ffff00;
-$yellowgreen: #9acd32;

data/sass/piecss/settings/_font.scss

@@ -9,24 +9,3 @@
 @import "fonts/sans-serif";
 @import "fonts/monospace";
 @import "fonts/verdana";
-
-
-// ==========================================================================
-// Google fonts
-// ==========================================================================
-
-@import "fonts/bree-serif";
-@import "fonts/lato";
-@import "fonts/pt-sans";
-@import "fonts/raleway";
-@import "fonts/righteous";
-@import "fonts/roboto";
-@import "fonts/roboto-slab";
-@import "fonts/varela-round";
-
-
-// ==========================================================================
-// Fontspring fonts
-// ==========================================================================
-
-@import "fonts/sofia-pro";