piecss 0.1.0.alpha.01

data/sass/piecss/behavior/base/preset.scss

@@ -0,0 +1,57 @@
+// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
+
+
+/*
+-----------------------------------------------------------------------------
+Miscellaneous - consider movin to reset
+-----------------------------------------------------------------------------
+*/
+
+abbr[title] {
+    border-bottom: 1px dotted;
+}
+hr {
+    height: 0;
+}
+code,
+kbd,
+pre,
+samp {
+    @include font-family($monospace-regular);
+    @include font-size($default-font-size);
+}
+pre {
+    white-space: pre-wrap;
+}
+small {
+    font-size: 80%;
+}
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+sup {
+    top: -0.5em;
+}
+sub {
+    bottom: -0.25em;
+}
+
+@if $base-quote-quotes
+{
+    /*
+     * Set consistent quote types.
+     */
+
+    q {
+        quotes: "\201C" "\201D" "\2018" "\2019";
+    }
+}
+
+ul {
+    padding: 0;
+    margin: 0;
+}

data/sass/piecss/behavior/form.scss

@@ -0,0 +1,120 @@
+// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
+
+
+// select,
+// textarea,
+// input[type="date"],
+// input[type="datetime"],
+// input[type="datetime-local"],
+// input[type="email"],
+// input[type="month"],
+// input[type="number"],
+// input[type="password"],
+// input[type="search"],
+// input[type="tel"],
+// input[type="text"],
+// input[type="time"],
+// input[type="url"],
+// input[type="week"]
+
+
+// $form-form-selector: "%form" !default;
+// $form-fieldset-selector: "%fieldset" !default;
+// $form-legend-selector: "%legend" !default;
+// $form-field-base-selector: "%field-base" !default;
+// $form-field-base-selector--focus: "%field-base--focus" !default;
+// $form-field-selector: "%field" !default;
+// $form-field-color-selector: "%field--color" !default;
+// $form-field-range-selector: "%field--range" !default;
+// $form-field-search-selector: "%field--search" !default;
+// $form-checkbox-selector: "%checkbox" !default;
+// $form-radio-selector: "%radio" !default;
+// $form-textarea-selector: "%textarea" !default;
+// $form-select-selector: "%select" !default;
+// $form-select-dropdown-selector: "%select--dropdown" !default;
+// $form-select-box-selector: "%select--box" !default;
+// $form-select-multiple-selector: "%select--multiple" !default;
+// $form-label-selector: "%label" !default;
+
+
+
+/*
+-----------------------------------------------------------------------------
+Field base
+-----------------------------------------------------------------------------
+*/
+
+
+@include elements($form-elements);
+
+
+#{$form-field-base-selector} {
+    &:focus {
+        @extend #{$form-field-base-selector--focus} !optional;
+    }
+}
+
+#{$form-field-selector} {
+    @extend #{$form-field-base-selector} !optional;
+}
+
+select,
+textarea,
+input[type="date"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="email"],
+input[type="month"],
+input[type="number"],
+input[type="password"],
+input[type="search"],
+input[type="tel"],
+input[type="text"],
+input[type="time"],
+input[type="url"],
+input[type="week"] {
+    @extend #{$form-field-selector} !optional;
+}
+
+input[type="color"] {
+    @extend #{$form-field-color-selector} !optional;
+}
+input[type="range"] {
+    @extend #{$form-field-range-selector} !optional;
+}
+input[type="search"] {
+    @extend #{$form-field-search-selector} !optional;
+}
+
+select:not([size]) {
+    @extend #{$form-select-dropdown-selector} !optional;
+    @if to-bool($select-appearance) {
+        @include reset-appearance($select-appearance);
+    }
+    @if $select-webkit {
+        @at-root .webkit {
+            // background: $input-background-color url("/assets/images/icons/icon-sort.svg") no-repeat 1% center;
+            // background-size: 10px auto;
+        }
+    }
+}
+
+select[size] {
+    @extend #{$form-select-box-selector} !optional;
+}
+select[multiple] {
+    @extend #{$form-select-box-selector} !optional;
+    @extend #{$form-select-multiple-selector} !optional;
+}
+
+.editor--small,
+textarea {
+    @extend #{$form-textarea-selector} !optional;
+    @at-root .editor--medium {
+        @extend #{$form-textarea-selector}--medium !optional;
+    }
+    @at-root .editor--large {
+        @extend #{$form-textarea-selector}--large !optional;
+    }
+}
+

data/sass/piecss/behavior/grid.scss

@@ -0,0 +1,4 @@
+// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
+
+@import "grid/rhythm";
+@import "grid/layout";

data/sass/piecss/behavior/grid/layout.scss

@@ -0,0 +1,170 @@
+// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
+
+
+// ==========================================================================
+//
+// CONTENT
+//
+// ==========================================================================
+//
+// 1. Placeholders
+//    %root
+//    %column
+//    %gutters
+//    %gutters--right
+//    %gutters--left
+//    %bleed
+//    %bleed--right
+//    %bleed--left
+// 2. Selectors
+//    Column widths
+
+
+// ==========================================================================
+//
+// 1. PLACEHOLDERS
+//
+// ==========================================================================
+//
+// Example usage of a placeholder:
+// .root {
+//     @extend %root;
+// }
+//
+// --------------------------------------------------------------------------
+
+
+// ==========================================================================
+// Placeholder %root
+// --------------------------------------------------------------------------
+// Sets a maximum width on a container
+// ==========================================================================
+
+%root {
+	@include root();
+}
+
+// ==========================================================================
+// Placeholder %column
+// --------------------------------------------------------------------------
+// Column or region, but excluding gutters (padding or margin)
+// ==========================================================================
+
+%column {
+	@include column-behavior();
+	@include column-width();
+}
+
+
+// ==========================================================================
+// Placeholder %gutters
+// --------------------------------------------------------------------------
+// Adds responsive padding left and right
+// ==========================================================================
+
+%gutters {
+	@include gutters();
+}
+
+// ==========================================================================
+// Placeholder %gutters--right
+// --------------------------------------------------------------------------
+// Adds responsive padding right
+// ==========================================================================
+
+%gutters-right {
+	@include gutters((false 1/2));
+}
+
+// ==========================================================================
+// Placeholder %gutters--left
+// --------------------------------------------------------------------------
+// Adds responsive padding left
+// ==========================================================================
+
+%gutters-left {
+	@include gutters((1/2 false));
+}
+
+// ==========================================================================
+// Placeholder %bleed
+// --------------------------------------------------------------------------
+// Responsive bleed padding left and right
+// ==========================================================================
+
+%bleed {
+	@include bleed(); 
+}
+
+// ==========================================================================
+// Placeholder %bleed--right
+// --------------------------------------------------------------------------
+// Responsive bleed padding right
+// ==========================================================================
+
+%bleed--right {
+	@include bleed((false 1/2)); 
+}
+
+// ==========================================================================
+// Placeholder %bleed--left
+// --------------------------------------------------------------------------
+// Responsive bleed padding left
+// ==========================================================================
+
+%bleed-left {
+	@include bleed((1/2 false)); 
+}
+
+
+// ==========================================================================
+//
+// 2. SELECTORS
+//
+// ==========================================================================
+
+
+// ==========================================================================
+// Column widths
+// --------------------------------------------------------------------------
+//
+// Outputs columns for different breakpoints.
+// Columns and breakpoints can be set from your project's settings:
+//
+// $small_handheld: "(max-width: #{to-unit(480px,$unit,$default-font-size)})" !default;
+// $small_desktop: "(min-width: #{to-unit(1024px,$unit,$default-font-size)})" !default;
+//
+// $column-widths: (
+//     $small_handheld: (main: 1/1, side: 1/1),
+//     $small_desktop: (main: 2/3, side: 1/3) );
+//
+// Will output:
+//
+// @media only screen and (max-width: 30em) {
+//   .main {
+//     width: 100%; }
+//   .side {
+//     width: 100%; } }
+// @media only screen and (min-width: 64em) {
+//   .main {
+//     width: 66.66667%; }
+//   .side {
+//     width: 33.33333%; } }
+//
+// ==========================================================================
+
+@each $breakpoint in map-keys($column-widths) {
+	$widths: map-get($column-widths, $breakpoint);
+	@each $selector in map-keys($widths){
+	    %#{$selector} {
+	        @extend %column;
+	    }
+	}
+	@include breakpoint($breakpoint) {
+	    @each $selector in map-keys($widths){
+	        %#{$selector} {
+	            @include column-width( map-get($widths, $selector) );
+	        }
+	    }
+	}
+}

data/sass/piecss/behavior/grid/rhythm.scss

@@ -0,0 +1,54 @@
+// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
+
+
+/*
+-----------------------------------------------------------------------------
+Debug helpers
+-----------------------------------------------------------------------------
+*/
+
+%debug {
+    /*
+     * Mixin debug-rhythm to display the vertical rhythm units
+     */
+    @include debug-rhythm;
+}
+
+@if $debug-rhythm {
+    body {
+        @extend %debug;         
+    }
+}
+
+%rhythm-padding {
+    @include vrhythm(1, padding-top);
+    @include vrhythm(1, padding-bottom);
+    &--top {
+        @include vrhythm(1, padding-top);
+    }
+    &--bottom {
+        @include vrhythm(1, padding-bottom);
+    }
+}
+
+%rhythm-margin {
+    @include vrhythm(0, margin-top);
+    @include vrhythm(1, margin-bottom);
+    &--top {
+        @include vrhythm(1, margin-top);
+    }
+    &--bottom {
+        @include vrhythm(1, margin-bottom);
+    }
+}
+
+$single-direction-selector: '';
+@if length($single-direction-elements) > 0 and $single-direction-elements != '' {
+    @each $element in $single-direction-elements {
+        // This leaves the last element with a comma, but the compiler will strip that out anyway so leave for now and revisit later
+        $single-direction-selector: $single-direction-selector + $element + ',' !global;
+    }
+    #{$single-direction-selector} {
+        @extend %rhythm-margin;
+    }
+}

data/sass/piecss/behavior/list.scss

@@ -0,0 +1,189 @@
+// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
+
+
+// ==========================================================================
+//
+// CONTENT
+//
+// ==========================================================================
+//
+// 1. Reset
+// 2. Placeholders
+//    %list--incognito
+//    %list--inline
+//    %list--outside
+//    %list--inside
+//    %list--{type}
+
+
+// ==========================================================================
+//
+// 1. RESET
+//
+// ==========================================================================
+//
+// If $reset-list-style equals true (see settings/list) all lists are reset.
+// Applying a class of list to a ul or ol will restore the default behavior.
+//
+// 1. Remove default list behavior
+// 2. Restore default list behavior when a class of list is applied
+// 3. Ensure list items inherit from their parent list 
+//
+// --------------------------------------------------------------------------
+
+@if $reset-list {
+	ol,ul {
+		@extend %#{$list-selector}--incognito !optional;
+	}
+	ol {
+		&.#{$list-selector} {
+			@extend %#{$list-selector}--#{$list-ol-default} !optional;
+		}
+		@extend %#{$list-selector}--inside;
+	}
+	ul {
+		&.#{$list-selector} {
+			@extend %#{$list-selector}--#{$list-ul-default} !optional;
+		}
+		@extend %#{$list-selector}--inside;
+	}
+	li {
+		list-style-type: inherit;
+		list-style-position: inherit;
+		list-style-image: inherit;
+	}
+}
+
+
+// ==========================================================================
+//
+// 2. PLACEHOLDERS
+//
+// ==========================================================================
+
+
+// ==========================================================================
+// Placeholder %list--incognito
+// --------------------------------------------------------------------------
+// Remove default list behavior
+// ==========================================================================
+
+%#{$list-selector}--incognito {
+	padding: 0;
+	list-style-type: none;
+}
+
+
+// ==========================================================================
+// Placeholder %list--inline
+// --------------------------------------------------------------------------
+// List all items inline
+// ==========================================================================
+
+%#{$list-selector}--inline {
+	&>li {
+		display: inline;
+	}
+}
+
+
+// ==========================================================================
+// Placeholder %list--outside
+// --------------------------------------------------------------------------
+// Moves bullets outside of the left text margin
+// ==========================================================================
+
+%#{$list-selector}--outside {
+	list-style-position: outside;
+}
+
+
+// ==========================================================================
+// Placeholder %list--incognito
+// --------------------------------------------------------------------------
+// Moves bullets inside of the left text margin
+// ==========================================================================
+
+%#{$list-selector}--inside {
+	list-style-position: inside;
+	padding-left: 1em;
+	text-indent: -1em;
+}
+
+
+// ==========================================================================
+// List bullet types
+// --------------------------------------------------------------------------
+// All bullet types:
+// %list--circle,
+// %list--decimal,
+// %list--lower-alpha,
+// etc.
+// ==========================================================================
+
+@if $list-style-type-armenian {
+	@include list-style-type(armenian);
+}
+@if $list-style-type-circle {
+	@include list-style-type(circle);
+}
+@if $list-style-type-cjk-ideographic {
+	@include list-style-type(armenian);
+}
+@if $list-style-type-decimal {
+	@include list-style-type(decimal);
+}
+@if $list-style-type-decimal-leading-zero {
+	@include list-style-type(decimal-leading-zero);
+}
+@if $list-style-type-disc {
+	@include list-style-type(disc);
+}
+@if $list-style-type-georgian {
+	@include list-style-type(georgian);
+}
+@if $list-style-type-hebrew {
+	@include list-style-type(hebrew);
+}
+@if $list-style-type-hiragana {
+	@include list-style-type(hiragana);
+}
+@if $list-style-type-hiragana-iroha {
+	@include list-style-type(hiragana-iroha);
+}
+@if $list-style-type-inherit {
+	@include list-style-type(inherit);
+}
+@if $list-style-type-katakana {
+	@include list-style-type(katakana);
+}
+@if $list-style-type-katakana-iroha {
+	@include list-style-type(katakana-iroha);
+}
+@if $list-style-type-lower-alpha {
+	@include list-style-type(lower-alpha);
+}
+@if $list-style-type-lower-greek {
+	@include list-style-type(lower-greek);
+}
+@if $list-style-type-lower-latin {
+	@include list-style-type(lower-latin);
+}
+@if $list-style-type-lower-roman {
+	@include list-style-type(lower-roman);
+}
+@if $list-style-type-none {
+	@include list-style-type(none);
+}
+@if $list-style-type-square {
+	@include list-style-type(square);
+}
+@if $list-style-type-upper-alpha {
+	@include list-style-type(upper-alpha);
+}
+@if $list-style-type-upper-latin {
+	@include list-style-type(upper-latin);
+}
+@if $list-style-type-upper-roman {
+	@include list-style-type(upper-roman);
+}