piecss 0.1.0.alpha.01

data/sass/piecss/settings/grid.scss

@@ -0,0 +1,157 @@
+// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
+
+
+// Rhythm settings
+
+// Vertical measurements like line-height and %-top and %-bottom are factors of rhythm
+
+/**
+ * This measure is used to calculare vertical measurements like line-height and top and bottom paddings and margins. It defaults to the $default-line-height but some prefer to set it to a smaller value, like 1/2 or 1/3 times the $default-line-height.
+ *
+ * @since 0.1
+ *
+ * @type {Number}
+ */
+
+$rhythm: $default-line-height !default;
+
+/**
+ * If true,reveals the document's vertical rhythm. Also see: [mixin $debug-rhythm](./#mixin-debug-rhythm).
+ *
+ * @since 0.1
+ *
+ * @type {Bool}
+ */
+
+$debug-rhythm: false !default;
+
+/**
+ * Based on an idea by [@csswizardry](https://twitter.com/csswizardry): apply a bottom margin of one rhythm height to any element in this comma separated list.
+ *
+ * @since 0.1
+ *
+ * @type {List}
+ */
+
+$single-direction-elements: (p,pre,table,hr,article) !default;
+
+/**
+ * Column classes are rendered from this map. The first level of each item has a breakpoint string as a key, the value is another Map of classnames/column widths pairs. Column widths are expressed as factors.
+ * Piecss will render these columns by default, unless you override this Map from your project settings.
+ *
+ * @since 0.1
+ *
+ * @type {Map}
+ */
+
+$column-widths: (
+    $small_handheld: (small-1-2: 1/2, small-1-3: 1/3, small-2-3: 2/3),
+    $medium_handheld: (medium-1-2: 1/2, medium-1-3: 1/3, medium-1-4: 1/4, medium-2-3: 2/3, medium-3-4: 3/4),
+    $small_desktop: (default-1-2: 1/2, default-1-3: 1/3, default-1-4: 1/4, default-2-3: 2/3, default-3-4: 3/4),
+) !default;
+
+/**
+ * Default column width, all columns implemented with [column()](./#mixin-column) will have this width unless otherwise specified.
+ *
+ * @since 0.1
+ *
+ * @type {Number}
+ */
+
+$column-width-default: 1/1 !default;
+
+/**
+ * If set to true, the [column() mixin](./#mixin-column) will mixin a reset of all column widths to 100% at the smallest [breakpoint](./#variable-small_handheld). If you are developing mobile-first, leave this setting to false.
+ *
+ * @deprecated
+ *
+ * @since 0.1
+ *
+ * @type {Bool}
+ */
+
+$column-breakpoint: false !default;
+
+/**
+ * By default, columns are rendered as inline-blocks. Inline-block elements are much easier to implement than floating elements, but require the invisible space between elements to be minified or obscured.
+ * If you can't minify your markup, then floated columns (or [negative right margin](./#variable-negative-right-margin)) will be helpful. You will have to implement your own clearfix method though.
+ *
+ * @since 0.1
+ *
+ * @type {Bool}
+ */
+
+$column-float: false !default; // If you prefer floated columns instead of inline-blocks, set to true.
+
+/**
+ * Gutter widths are based on the vertical [rhythm](./#variable-rhythm) and default to 2*$rhythm. Gutters are implemented using the [gutter mixin](./#mixin-gutters) and are expressed in factors of this measure (usually 1/2).
+ *
+ * @since 0.1
+ *
+ * @type {Number}
+ */
+
+$gutter-width: 2*$rhythm !default;
+
+/**
+ * The final unit of output in which gutter widths are rendered
+ *
+ * @since 0.1
+ *
+ * @type {Number}
+ */
+
+$gutter-width-unit: $unit !default;
+
+/**
+ * If false, gutter widths will be halved below the smallest breakpoint.
+ *
+ * @deprecated
+ *
+ * @since 0.1
+ *
+ * @type {Number}
+ */
+
+$gutter-width-persistent: false !default;
+
+/**
+ * If you cannot minify your markup, you can assign a negative right margin to close gaps between columns to make them fit.
+ * You can also set [$column-float](./#variable-column-float) to true to render your columns as floated blocks.  You will have to implement your own clearfix method though.
+ * This is a hack and not necessary when your html (or column markup) is minimized.
+ * @since 0.1
+ *
+ * @type {Number}
+ */
+
+$negative-right-margin: false !default;
+
+
+// Root settings
+// Set a max width on a root container of your choice, the content will not stretch beyond this width.
+// The root container can be positioned left or center, for alternate position you can provide your own behavior.
+
+
+/**
+ * Fixes content maximum width, 72em is 1152px at a 16px [$default-font-size](./#variable-default-font-size). It is used by the [root mixin](./#mixin-root).
+ *
+ * @deprecated
+ *
+ * @since 0.1
+ *
+ * @type {Number}
+ */
+
+$root-max-width: 72em !default;
+
+/**
+ * Aligns content inside the viewport, center by default. Used by the [root mixin](./#mixin-root).
+ *
+ * @deprecated
+ *
+ * @since 0.1
+ *
+ * @type {Number}
+ */
+
+$root-position: center !default;

data/sass/piecss/settings/list.scss

@@ -0,0 +1,216 @@
+// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
+
+
+/**
+ * If true, the default behavior of lists will be reset (remove padding and list-style-type none).
+ *
+ * @type {Bool}
+ */
+
+$reset-list: false;
+
+/**
+ * The namespace for the list placeholders
+ *
+ * @type {String}
+ */
+
+$list-selector: "list" !default;
+
+/**
+ * The default list-style-type for ul lists
+ *
+ * @type {String}
+ */
+
+$list-ul-default: disc !default;
+
+/**
+ * The default list-style-type for ol lists
+ *
+ * @type {String}
+ */
+
+$list-ol-default: decimal !default;
+
+
+// ==========================================================================
+// List Style Types
+// See: http://www.w3schools.com/cssref/pr_list-style-type.asp
+// ==========================================================================
+
+/**
+ * If true, Piecss will render a placeholder for this list-style-type (%list--armenian)
+ *
+ * @type {Bool}
+ */
+
+$list-style-type-armenian: false !default;
+
+/**
+ * If true, Piecss will render a placeholder for this list-style-type (%list--circle)
+ *
+ * @type {Bool}
+ */
+
+$list-style-type-circle: true !default;
+
+/**
+ * If true, Piecss will render a placeholder for this list-style-type (%list--cjk-ideographic)
+ *
+ * @type {Bool}
+ */
+
+$list-style-type-cjk-ideographic: false !default;
+
+/**
+ * If true, Piecss will render a placeholder for this list-style-type (%list--decimal)
+ *
+ * @type {Bool}
+ */
+
+$list-style-type-decimal: true !default;
+
+/**
+ * If true, Piecss will render a placeholder for this list-style-type (%list--decimal-leading-zero)
+ *
+ * @type {Bool}
+ */
+
+$list-style-type-decimal-leading-zero: false !default;
+
+/**
+ * If true, Piecss will render a placeholder for this list-style-type (%list--disc)
+ *
+ * @type {Bool}
+ */
+
+$list-style-type-disc: true !default;
+
+/**
+ * If true, Piecss will render a placeholder for this list-style-type (%list--georgian)
+ *
+ * @type {Bool}
+ */
+
+$list-style-type-georgian: false !default;
+
+/**
+ * If true, Piecss will render a placeholder for this list-style-type (%list--hebrew)
+ *
+ * @type {Bool}
+ */
+
+$list-style-type-hebrew: false !default;
+
+/**
+ * If true, Piecss will render a placeholder for this list-style-type (%list--hiragana)
+ *
+ * @type {Bool}
+ */
+
+$list-style-type-hiragana: false;
+
+/**
+ * If true, Piecss will render a placeholder for this list-style-type (%list--hiragana-iroha)
+ *
+ * @type {Bool}
+ */
+
+$list-style-type-hiragana-iroha: false !default;
+
+/**
+ * If true, Piecss will render a placeholder for this list-style-type (%list--inherit)
+ *
+ * @type {Bool}
+ */
+
+$list-style-type-inherit: true !default;    
+
+/**
+ * If true, Piecss will render a placeholder for this list-style-type (%list--katakana)
+ *
+ * @type {Bool}
+ */
+
+$list-style-type-katakana: false !default;
+
+/**
+ * If true, Piecss will render a placeholder for this list-style-type (%list--katakana-iroha)
+ *
+ * @type {Bool}
+ */
+
+$list-style-type-katakana-iroha: false !default;
+
+/**
+ * If true, Piecss will render a placeholder for this list-style-type (%list--lower-alpha)
+ *
+ * @type {Bool}
+ */
+
+$list-style-type-lower-alpha: true !default;
+
+/**
+ * If true, Piecss will render a placeholder for this list-style-type (%list--lower-greek)
+ *
+ * @type {Bool}
+ */
+
+$list-style-type-lower-greek: false !default;
+
+/**
+ * If true, Piecss will render a placeholder for this list-style-type (%list--lower-latin)
+ *
+ * @type {Bool}
+ */
+
+$list-style-type-lower-latin: true !default;
+
+/**
+ * If true, Piecss will render a placeholder for this list-style-type (%list--lower-roman)
+ *
+ * @type {Bool}
+ */
+
+$list-style-type-lower-roman: true !default;
+
+/**
+ * If true, Piecss will render a placeholder for this list-style-type (%list--none)
+ *
+ * @type {Bool}
+ */
+
+$list-style-type-none: true !default;
+
+/**
+ * If true, Piecss will render a placeholder for this list-style-type (%list--square)
+ *
+ * @type {Bool}
+ */
+
+$list-style-type-square: true !default;
+
+/**
+ * If true, Piecss will render a placeholder for this list-style-type (%list--upper-alpha)
+ *
+ * @type {Bool}
+ */
+
+$list-style-type-upper-alpha: true !default;
+
+/**
+ * If true, Piecss will render a placeholder for this list-style-type (%list--upper-latin)
+ *
+ * @type {Bool}
+ */
+
+$list-style-type-upper-latin: true !default;
+
+/**
+ * If true, Piecss will render a placeholder for this list-style-type (%list--upper-roman)
+ *
+ * @type {Bool}
+ */
+
+$list-style-type-upper-roman: true !default;

data/sass/piecss/utilities.scss

@@ -0,0 +1,16 @@
+// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
+
+
+
+
+@import "utilities/cache";
+@import "utilities/units";
+@import "utilities/sides";
+@import "utilities/rhythm";
+@import "utilities/breakpoint";
+@import "utilities/layout";
+@import "utilities/typography";
+@import "utilities/elements";
+@import "utilities/image";
+@import "utilities/list";
+@import "utilities/miscellaneous";

data/sass/piecss/utilities/README.md

@@ -0,0 +1,105 @@
+#Utilities
+
+## Table of Content
+
+ 1. Typography
+ 2. Rhythm
+  1. Vertical Rhythm
+  2. Horizontal Rhythm
+ 3. Layout
+
+
+----------
+
+## 2. Rhythm
+
+### 2.1 Vertical Rhythm
+
+Properties that implement vertical rhythm:
+
+* margin (-top, -bottom)
+* padding (-top, -bottom)
+* height
+* top
+* bottom
+* font-size
+* line-height
+
+
+
+#### Usage
+Vertical units can be calculated with vrhythm-units();
+
+```scss
+// units, context
+@include line-height(1, 16px);
+```
+
+```scss
+// units, property, context
+@include vrhythm(1, line-height, 16px);
+```
+
+```scss
+// units, context
+line-height: vrhythm(1, 16px);
+```
+
+Output (assuming context font-size is 16px and rhythm-measurement is 24px):
+
+```scss
+// unit: px
+line-height: 24px;
+```
+
+```scss
+// unit: em
+line-height: 1em;
+```
+
+```scss
+// unit: rem
+line-height: 1.5rem;
+```
+
+```scss
+// unit: %
+line-height: 150%;
+```
+
+### 2.2 Horizontal Rhythm
+
+Vertical rhythm is used for horizontal padding. It's based on the value for column gutters which is configured in the layout settings file.
+
+Properties that implement horizontal rhythm:
+
+* margin (-right, -left)
+* padding (-right, -left)
+* width
+* right
+* left
+
+#### Usage
+Horizontal units can be calculated with hrhythm-units();
+
+```scss
+// units, context
+@include margin-bottom(1, 16px);
+```
+
+```scss
+// units, property, context
+@include hrhythm(1, margin-bottom, 16px);
+```
+
+```scss
+// units, context
+margin-bottom: hrhythm(1, 16px);
+```
+
+Which outputs:
+
+```scss
+// unit: rem
+margin-bottom: 1.5rem;
+```