piecss 0.1.6.1 → 0.1.6.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 1344c40bbaf258d5fcc0b991fbe2bd3307b300d6
-  data.tar.gz: cf60c8b0b54458900350507792eb64c996bd7368
+  metadata.gz: c64ea9e1c010a19b7869d8edcde69140a778b109
+  data.tar.gz: 59f6540b170ed197dea325a055d6d98ffcfac158
 SHA512:
-  metadata.gz: d7696c62cfbe406c4e19b4833779807ca5fde6e301769fc73d7bcb730c06367d683134dad0e04f68a79524535574dea789803a14523e0c47df3608e1f2985797
-  data.tar.gz: ef2a1e52dfe99c0f0316a18e874b6269794fd4ce95225a5e3651fb514727cf3e6158faa565cf8974f7467934cf5a8d41acad7c2dab2d315f368121a9f503cfd2
+  metadata.gz: dc551e91d874c8da5a13099f252bf2a46e92602f5fe5ee41649adc4f9e318ebccc73d4a0b810dbe8142acc0eadbda8ce48d3a7ca7d913865ff37b1a12507f8bb
+  data.tar.gz: 6132f47fc1c7d76454321bb66cf4031ccb6cfb1d46f670753e37899e844ec6cb07592f24e2ace33329794beef7a9b8a5992aed55a9cdba1ad2bef506aa40d56a

data/sass/piecss/behavior/form.scss

@@ -18,26 +18,6 @@
 // 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

data/sass/piecss/settings/form.scss

@@ -375,22 +375,6 @@ $field-line-height: $default-line-height !default;
 
 $field-shadow: mix($black, $field-background-color, 10%) 1px 1px 1px 0 inset !default;
 
-$form-elements: add-properties(
-    (
-        box-sizing: $field-box-sizing, // The search box needs this, weirdly
-        height: $field-height,
-        width: $field-width,
-        padding: (top: $field-padding-top, right: $field-padding-right, bottom: $field-padding-bottom, left: $field-padding-left),
-        background: $field-background-color if($field-background-image, url(#{$field-background-image}), none),
-        border: $field-border-width $field-border-style $field-border-color,
-        border-radius: $field-border-radius,
-        line-height: $field-line-height,
-        box-shadow: $field-shadow, 
-    ),
-    $form-field-base-selector,
-    $form-elements
-);
-
 
 // --------------------------------------------------------------------------
 //
@@ -450,16 +434,6 @@ $field-focussed-outline-color: mix($field-border-color, $field-focussed-backgrou
 
 $field-focussed-outline-offset: -1*( $field-focussed-outline-width + 3*$field-border-width) !default; 
 
-$form-elements: add-properties(
-    (
-        background-color: $field-focussed-background-color,
-        outline: $field-focussed-outline-width $field-focussed-outline-style $field-focussed-outline-color,
-        outline-offset: $field-focussed-outline-offset,
-    ),
-    $form-field-base-selector--focus,
-    $form-elements
-);
-
 
 // ==========================================================================
 //
@@ -467,14 +441,6 @@ $form-elements: add-properties(
 //
 // ==========================================================================
 
-$form-elements: add-properties(
-    (
-        // border: $field-border-width $field-border-style $field-border-color,
-        border-radius: $field-border-radius,
-    ),
-    $form-field-color-selector,
-    $form-elements
-);
 
 
 // ==========================================================================
@@ -494,14 +460,6 @@ $form-elements: add-properties(
 
 $field-range-width: $field-width !default;
 
-$form-elements: add-properties(
-    (
-        width: $field-range-width,
-    ),
-    $form-field-range-selector,
-    $form-elements
-);
-
 
 // --------------------------------------------------------------------------
 //
@@ -530,15 +488,6 @@ $field-search-border-radius: $field-border-radius !default;
 
 $field-search-outline-offset: 0 !default;
 
-$form-elements: add-properties(
-    (
-        // border-radius: $field-search-border-radius,
-        // outline-offset: $field-search-outline-offset,
-    ),
-    $form-field-search-selector,
-    $form-elements
-);
-
 
 // --------------------------------------------------------------------------
 //
@@ -546,6 +495,7 @@ $form-elements: add-properties(
 //
 // --------------------------------------------------------------------------
 
+
 /**
  * Height of select element.
  *
@@ -577,22 +527,6 @@ $select-appearance: menulist !default;
 
 $select-webkit: false !default;
 
-$form-elements: add-properties(
-    (
-        height: $select-height,
-    ),
-    $form-select-selector,
-    $form-elements
-);
-
-$form-elements: add-properties(
-    (
-        height: auto,
-    ),
-    $form-select-box-selector,
-    $form-elements
-);
-
 
 // --------------------------------------------------------------------------
 //
@@ -631,29 +565,6 @@ $textarea-height-medium: rhythm(5) - 2*$field-border-width !default;
 
 $textarea-height-large: rhythm(10) - 2*$field-border-width !default;
 
-$form-elements: add-properties(
-    (
-        height: $textarea-height,
-    ),
-    $form-textarea-selector,
-    $form-elements
-);
-
-$form-elements: add-properties(
-    (
-        height: $textarea-height-medium,
-    ),
-    #{$form-textarea-selector}--medium,
-    $form-elements
-);
-
-$form-elements: add-properties(
-    (
-        height: $textarea-height-large,
-    ),
-    #{$form-textarea-selector}--large,
-    $form-elements
-);
 
 // ==========================================================================
 //

data/sass/piecss/settings.scss

@@ -6,7 +6,7 @@
 // ==========================================================================
 
 @import "settings/constants";
-@import "settings/fonts";
+@import "settings/font";
 @import "settings/base";
 
 // All below rely on setting in settings/base

data/sass/piecss/utilities.scss

@@ -4,13 +4,13 @@
 
 
 @import "utilities/cache";
-@import "utilities/units";
-@import "utilities/sides";
+@import "utilities/unit";
+@import "utilities/side";
 @import "utilities/rhythm";
 @import "utilities/breakpoint";
 @import "utilities/layout";
 @import "utilities/typography";
-@import "utilities/elements";
+@import "utilities/element";
 @import "utilities/image";
 @import "utilities/list";
 @import "utilities/miscellaneous";

data/templates/project/_elements.scss

@@ -0,0 +1,6 @@
+/*
+ * Copyright (C) 2014 Crossing Hippos - Babs Gösgens. All rights reserved.
+ * Licensed under MIT; see LICENSE.txt
+ */
+
+@import "elements/form"

data/templates/project/_settings.scss

@@ -3,22 +3,14 @@
  * Licensed under MIT; see LICENSE.txt
  */
 
-$single-direction-elements: (ul,p,pre,table,hr,article);
-
+// Example configuration for layout
 $column-widths: (
     $small_handheld: (main: 1/1, side: 1/1),
     $small_desktop: (main: 2/3, side: 1/3),
 );
 
+// Example configuration for list
 $reset-list: true;
 
-$corner-radius: 4px;
-
-
-$form-elements: add-properties(
-    (
-        border-radius: $corner-radius
-    ),
-    $form-field-base-selector,
-    $form-elements
-);
+// Example configuration for rounded corners
+$corner-radius: .25em;

data/templates/project/elements/_form.scss

@@ -0,0 +1,115 @@
+/*
+ * Copyright (C) 2014 Crossing Hippos - Babs Gösgens. All rights reserved.
+ * Licensed under MIT; see LICENSE.txt
+ */
+
+// $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;
+
+$form-elements: add-properties(
+    (
+        box-sizing: $field-box-sizing, // The search box needs this, weirdly
+        height: $field-height,
+        width: $field-width,
+        padding: (top: $field-padding-top, right: $field-padding-right, bottom: $field-padding-bottom, left: $field-padding-left),
+        background: $field-background-color if($field-background-image, url(#{$field-background-image}), none),
+        border: $field-border-width $field-border-style $field-border-color,
+        border-radius: $field-border-radius,
+        line-height: $field-line-height,
+        box-shadow: $field-shadow, 
+    ),
+    $form-field-base-selector,
+    $form-elements
+);
+
+$form-elements: add-properties(
+    (
+        background-color: $field-focussed-background-color,
+        outline: $field-focussed-outline-width $field-focussed-outline-style $field-focussed-outline-color,
+        outline-offset: $field-focussed-outline-offset,
+    ),
+    $form-field-base-selector--focus,
+    $form-elements
+);
+
+$form-elements: add-properties(
+    (
+        // border: $field-border-width $field-border-style $field-border-color,
+        border-radius: $field-border-radius,
+    ),
+    $form-field-color-selector,
+    $form-elements
+);
+
+$form-elements: add-properties(
+    (
+        width: $field-range-width,
+    ),
+    $form-field-range-selector,
+    $form-elements
+);
+
+$form-elements: add-properties(
+    (
+        // border-radius: $field-search-border-radius,
+        // outline-offset: $field-search-outline-offset,
+    ),
+    $form-field-search-selector,
+    $form-elements
+);
+
+$form-elements: add-properties(
+    (
+        height: $select-height,
+    ),
+    $form-select-selector,
+    $form-elements
+);
+
+$form-elements: add-properties(
+    (
+        height: auto,
+    ),
+    $form-select-box-selector,
+    $form-elements
+);
+
+
+$form-elements: add-properties(
+    (
+        height: $textarea-height,
+    ),
+    $form-textarea-selector,
+    $form-elements
+);
+
+$form-elements: add-properties(
+    (
+        height: $textarea-height-medium,
+    ),
+    #{$form-textarea-selector}--medium,
+    $form-elements
+);
+
+$form-elements: add-properties(
+    (
+        height: $textarea-height-large,
+    ),
+    #{$form-textarea-selector}--large,
+    $form-elements
+);

data/templates/project/manifest.rb

@@ -1,6 +1,8 @@
+directory 'sass/elements'
 stylesheet 'screen.scss', :media => 'screen, projection'
 stylesheet '_settings.scss'
-
+stylesheet '_elements.scss'
+stylesheet 'elements/_form.scss'
 html 'examples.html'
 
 help %Q{

data/templates/project/screen.scss

@@ -12,13 +12,14 @@
 //    debug-rhythm
 // 2. Imports
 //    2a. Dependencies
-//    2b. Settings
-//        Piecss settings
-//        Project settings
-//    2c. Utilities
+//    2b. Utilities
 //        Piecss utilities
 //        Project utilities
-//    2d. Behavior (output)
+//    2c. Settings
+//        Piecss settings
+//        Project settings
+//    2d. Elements
+//    2e. Behavior (output)
 //        Piecss behavior
 //        Project behavior
 
@@ -77,7 +78,18 @@ $debug-rhythm: false;
 
 // ==========================================================================
 //
-// 2c. BEHAVIOR
+// 2d. ELEMENTS
+//
+// 2. Project elements
+//
+// ==========================================================================
+
+@import "elements";
+
+
+// ==========================================================================
+//
+// 2e. BEHAVIOR
 //
 // 1. Piecss behavior
 // 2. Project behavior - you should have that ;)

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: piecss
 version: !ruby/object:Gem::Version
-  version: 0.1.6.1
+  version: 0.1.6.2
 platform: ruby
 authors:
 - Babs Gosgens
@@ -61,7 +61,7 @@ files:
 - sass/piecss/settings/base.scss
 - sass/piecss/settings/breakpoint.scss
 - sass/piecss/settings/constants.scss
-- sass/piecss/settings/fonts.scss
+- sass/piecss/settings/font.scss
 - sass/piecss/settings/fonts/_asap.scss
 - sass/piecss/settings/fonts/_bree-serif.scss
 - sass/piecss/settings/fonts/_example.scss
@@ -93,16 +93,18 @@ files:
 - sass/piecss/utilities/README.md
 - sass/piecss/utilities/breakpoint.scss
 - sass/piecss/utilities/cache.scss
-- sass/piecss/utilities/elements.scss
+- sass/piecss/utilities/element.scss
 - sass/piecss/utilities/image.scss
 - sass/piecss/utilities/layout.scss
 - sass/piecss/utilities/list.scss
 - sass/piecss/utilities/miscellaneous.scss
 - sass/piecss/utilities/rhythm.scss
-- sass/piecss/utilities/sides.scss
+- sass/piecss/utilities/side.scss
 - sass/piecss/utilities/typography.scss
-- sass/piecss/utilities/units.scss
+- sass/piecss/utilities/unit.scss
+- templates/project/_elements.scss
 - templates/project/_settings.scss
+- templates/project/elements/_form.scss
 - templates/project/examples.html
 - templates/project/manifest.rb
 - templates/project/screen.scss