compass-pattern-primer 0.3.beta → 0.4.beta

data/{stylesheets/compass-pattern-primer/base → templates/shared/sass/base/links}/_links.scss

@@ -1,3 +1,9 @@
+//////////////////////////////
+// BASE: Base element styles 
+//////////////////////////////
+
+@import "_links_variables";
+
 a {
   color: $link-color;
   text-decoration: $link-text-decoration;

data/{stylesheets/compass-pattern-primer/partials/variables/base/_links.scss → templates/shared/sass/base/links/_links_variables.scss}

@@ -1,3 +1,7 @@
+//////////////////////////////
+// VARIABLES: For Base styles 
+//////////////////////////////
+
 $link-color: #369 !default;
 $link-text-decoration: none !default;
 $link-border-width: 0 0 1px 0 !default;

data/{stylesheets/compass-pattern-primer/base → templates/shared/sass/base/page}/_page.scss

@@ -1,3 +1,9 @@
+//////////////////////////////
+// BASE: Base element styles 
+//////////////////////////////
+
+@import "_page_variables";
+
 html {
   @include border-outline(border, $html-border-width, $html-border-style, $html-border-color);
   background-color: $html-background-color;

data/{stylesheets/compass-pattern-primer/partials/variables/base/_page.scss → templates/shared/sass/base/page/_page_variables.scss}

@@ -1,3 +1,7 @@
+//////////////////////////////
+// VARIABLES: For Base styles 
+//////////////////////////////
+
 // Typography _typography.scss
 $body-font-family: Palatino, Cambria, Georgia, serif !default;
 $secondary-font: Calibri, 'Helvetica Neue', Arial, sans-serif !default;

data/{stylesheets/compass-pattern-primer/base → templates/shared/sass/base/search}/_search.scss

@@ -1,3 +1,9 @@
+//////////////////////////////
+// BASE: Base element styles 
+//////////////////////////////
+
+@import "_search_variables";
+
 [role="search"] {
   position: relative;
   background-color: $search-background-color;

data/{stylesheets/compass-pattern-primer/partials/variables/base/_search.scss → templates/shared/sass/base/search/_search_variables.scss}

@@ -1,3 +1,7 @@
+//////////////////////////////
+// VARIABLES: For Base styles 
+//////////////////////////////
+
 /// Search 
 $search-border-radius: 1em !default;
 $search-background-color: #fff !default;

data/{stylesheets/compass-pattern-primer/base → templates/shared/sass/base/typography}/_typography.scss

@@ -1,3 +1,9 @@
+//////////////////////////////
+// BASE: Base element styles 
+//////////////////////////////
+
+@import "_typography_variables";
+
 h1 {
   font-family: $header-font-family;
   @include bold-italic-uppercase-variant($h1-font-bold, $h1-font-italic, $h1-font-uppercase, $h1-font-variant);

data/{stylesheets/compass-pattern-primer/partials/variables/base/_typography.scss → templates/shared/sass/base/typography/_typography_variables.scss}

@@ -1,3 +1,7 @@
+//////////////////////////////
+// VARIABLES: For Base styles 
+//////////////////////////////
+
 /// Headers
 //// h1
 $h1-font-bold: false !default; // normal

data/templates/shared/sass/global-adactio.scss

@@ -1,41 +1,64 @@
-// Basic scaffolding
-
+// Adactio scaffolding
 @import "compass/typography";
 @import "compass/css3";
 
 @import "partials/_browsers";
-@import "partials/_colors";
 @import "partials/_extendables";
 @import "partials/_functions";
 @import "partials/_mixins";
-@import "partials/_variables";
+@import "partials/_colors";
 
 // Eric Meyer Reset used by Adactio's Pattern Primer
+/* @group Reset */
+
+/* Based on http://meyerweb.com/eric/tools/css/reset/ */
 @import "compass-pattern-primer/reset/libraries/_eric_meyer_reset";
 // 
 // Optional Resets include
 //  @import "compass-pattern-primer/reset/libraries/_normalize";
 //  @import "compass-pattern-primer/reset/libraries/_formalize";
+/* @end Reset */  
 
 @import "compass-pattern-primer/partials/_mixins";
-@import "compass-pattern-primer/partials/_variables";
 @import "compass-pattern-primer/partials/_extendables";
 @import "compass-pattern-primer/partials/_functions";
-@import "compass-pattern-primer/partials/_colors"; 
 
-@import "partials/variables/_overrides";
+@import "_config";
+
+/* @group Typography */ 
+@import "page/_page";
+@import "typography/_typography";
+/* @end Typography */
+
+/* @group Links */
+@import "links/_links";
+/* @end Links */
+
+/* @group Forms */
+@import "forms/_forms";
+@import "buttons/_buttons";
+/* @group search */ 
+@import "search/_search";
+/* @end search */
+
+/* @end Forms */
+
+/* @group Classes */
 
-@import "compass-pattern-primer/base/_page";
-@import "compass-pattern-primer/base/_typography";
-@import "compass-pattern-primer/base/_links";
-@import "compass-pattern-primer/base/_forms";
-@import "compass-pattern-primer/base/_buttons";
+/* @group pagination */  
+@import "pagination/_pagination";
+/* @end pagination*/
 
-@import "compass-pattern-primer/modules/_control";
-@import "compass-pattern-primer/modules/_feedback";
-@import "compass-pattern-primer/modules/_options";
-@import "compass-pattern-primer/modules/_pagination";
+/* @group control */
+@import "controls/_controls";
+/* @end control */
 
+/* @group feedback */
+@import "feedback/_feedback";
+/* @end feedback */
 
+/* @group options */
+@import "options/_options";
+/* @end options*/
 
-// some default styling for pattern-primer.html. Most likely you'll want to delete this.
+/* @end Classes */

data/templates/shared/sass/global.scss

@@ -4,44 +4,34 @@
 @import "compass/css3";
 
 @import "partials/_browsers";
-@import "partials/_colors";
 @import "partials/_extendables";
 @import "partials/_functions";
 @import "partials/_mixins";
-@import "partials/_variables";
+@import "partials/_colors";
 
-@import "compass-pattern-primer/reset"; 
+@import "compass-pattern-primer/reset";
 
 @import "compass-pattern-primer/partials/_mixins";
-@import "compass-pattern-primer/partials/_variables";
 @import "compass-pattern-primer/partials/_extendables";
 @import "compass-pattern-primer/partials/_functions";
-@import "compass-pattern-primer/partials/_colors";
 
-@import "partials/variables/theme/_overrides";
+@import "_config";
 
-@import "compass-pattern-primer/base/_page";
-@import "compass-pattern-primer/base/_typography";
-@import "compass-pattern-primer/base/_links";
-@import "compass-pattern-primer/base/_forms";
-@import "compass-pattern-primer/base/_buttons";
+@import "base/page/_page";
+@import "base/typography/_typography";
+@import "base/links/_links";
+@import "base/forms/_forms";
+@import "base/buttons/_buttons";
+@import "base/search/_search";
 
 // optional module imports. comment out ones you don't use
-@import "compass-pattern-primer/modules/_control";
-@import "compass-pattern-primer/modules/_feedback";
-@import "compass-pattern-primer/modules/_options";
-@import "compass-pattern-primer/modules/_pagination";
-
-@import "base/_page";
-
-@import "modules/_header";
-@import "modules/_footer";
+@import "modules/pagination/_pagination";
+@import "modules/controls/_controls";
+@import "modules/feedback/_feedback";
+@import "modules/options/_options";
 
-@import "layout/_page";
+@import "layout/page/_page";  // Sample file
 
-@import "state/_page";
-@import "state/_header";
-@import "state/_footer";
+@import "state/header/_header";  // Sample file
 
-@import "theme/_page";
-@import "modules/_footer";
+@import "theme/page/_page";  // Sample file

data/templates/shared/sass/modules/controls/_controls.scss

@@ -0,0 +1,10 @@
+//////////////////////////////
+// MODULES: Component styles that are layout independent 
+//////////////////////////////
+
+@import "_controls_variables";
+@import "_controls_extendables";
+
+a.control {
+  @extend %controls;
+}

data/templates/shared/sass/modules/controls/_controls_extendables.scss

@@ -0,0 +1,26 @@
+//////////////////////////////
+// EXTENDABLES: For Modules 
+//////////////////////////////
+
+%controls {
+  font-family: $controls-font-family;
+  display: inline-block;
+  font-size: $controls-font-size;
+  @include margin-padding(padding, $controls-padding);
+  line-height: 1;
+  @include border-outline(border, $controls-border-width, $controls-border-style, $controls-border-color);
+  @include border-radius($controls-border-radius);
+  background-clip: padding-box;
+  &:link,
+  &:visited {
+    @include simple-background-gradient($controls-visited-color, $controls-visited-gradient-pos, $controls-visited-gradient-stop-1, $controls-visited-gradient-stop-2);
+  }
+  &:hover,
+  &:focus {
+    outline: none;
+    @include simple-background-gradient($controls-hover-color, $controls-hover-gradient-pos, $controls-hover-gradient-stop-1, $controls-hover-gradient-stop-2);
+  }
+  &:active {
+    @include simple-background-gradient($controls-active-color, $controls-active-gradient-pos, $controls-active-gradient-stop-1, $controls-active-gradient-stop-2);
+  }
+}

data/{stylesheets/compass-pattern-primer/partials/variables/modules/_control.scss → templates/shared/sass/modules/controls/_controls_variables.scss}

@@ -1,3 +1,7 @@
+//////////////////////////////
+// VARIABLES: For Modules 
+//////////////////////////////
+
 // Controls
 $controls-font-family: $secondary-font !default;
 $controls-font-size: 1.5em !default;

data/templates/shared/sass/modules/feedback/_feedback.scss

@@ -0,0 +1,16 @@
+//////////////////////////////
+// MODULES: Component styles that are layout independent 
+//////////////////////////////
+
+@import "_feedback_variables";
+@import "_feedback_extendables";
+
+.feedback {
+  @extend %feedback;
+  &.error {
+    @extend %error;
+  }
+  &.warning {
+    @extend %warning;
+  }
+}

data/templates/shared/sass/modules/feedback/_feedback_extendables.scss

@@ -0,0 +1,35 @@
+//////////////////////////////
+// EXTENDABLES: For Modules 
+//////////////////////////////
+
+%feedback {
+  @include margin-padding(padding, $feedback-padding);
+  @include margin-padding(margin, $feedback-margin);
+  color: $feedback-color;
+  background-color: $feedback-background;
+  @include border-outline(border, $feedback-border-width, $feedback-border-style, $feedback-border-color);
+  @include border-radius($feedback-border-radius);
+  background-clip: padding-box;
+  a {
+    color: $feedback-color;
+    @include bold-italic-uppercase-variant($feedback-a-font-bold, $feedback-a-font-italic, $feedback-a-font-uppercase, $feedback-a-font-variant);
+  }
+}
+
+%error {
+  background-color: $feedback-error-background;
+  color: $feedback-error-color;
+  border-color: $feedback-error-border-color;
+  a {
+    color: $feedback-error-color;
+  }
+}
+
+%warning {
+  background-color: $feedback-warning-background;
+  color: $feedback-warning-color;
+  border-color: $feedback-warning-border-color;
+  a {
+    color: $feedback-warning-color;
+  }
+}

data/{stylesheets/compass-pattern-primer/partials/variables/modules/_feedback.scss → templates/shared/sass/modules/feedback/_feedback_variables.scss}

@@ -1,3 +1,7 @@
+//////////////////////////////
+// VARIABLES: For Modules 
+//////////////////////////////
+
 // Feedback
 $feedback-background: #d9edf7 !default;
 $feedback-padding: 0.125em 1em !default;

data/templates/shared/sass/modules/options/_options.scss

@@ -0,0 +1,10 @@
+//////////////////////////////
+// MODULES: Component styles that are layout independent 
+//////////////////////////////
+
+@import "_options_variables";
+@import "_options_extendables";
+
+.options {
+  @extend %options;
+}

data/templates/shared/sass/modules/options/_options_extendables.scss

@@ -0,0 +1,22 @@
+//////////////////////////////
+// EXTENDABLES: For Modules 
+//////////////////////////////
+
+%options {
+  list-style: $options-list-style;
+  @include border-outline(border, $options-border-width, $options-border-style, $options-border-color);
+  li {
+    text-indent: $options-li-text-indent;
+    font-family: $options-li-font-family;
+    text-transform: $options-li-text-transform;
+    letter-spacing: $options-li-letter-spacing;
+    font-weight: $options-li-font-weight;
+    @include margin-padding(margin, $options-li-margin);
+    @include margin-padding(padding, $options-li-padding);
+    @include border-outline(border, $options-li-border-width, $options-li-border-style, $options-li-border-color);
+  }
+  a {
+    display: block;
+    @include border-outline(border, $options-a-border-width, $options-a-border-style, $options-a-border-color);
+  }
+}

data/{stylesheets/compass-pattern-primer/partials/variables/modules/_options.scss → templates/shared/sass/modules/options/_options_variables.scss}

@@ -1,3 +1,7 @@
+//////////////////////////////
+// VARIABLES: For Modules 
+//////////////////////////////
+
 // Options 
 $options-border-width: 1px 0 0 0!default;
 $options-border-style: solid !default;

data/templates/shared/sass/modules/pagination/_pagination.scss

@@ -0,0 +1,10 @@
+//////////////////////////////
+// MODULES: Component styles that are layout independent 
+//////////////////////////////
+
+@import "_pagination_variables";
+@import "_pagination_extendables";
+
+.pagination {
+  @extend %pagination;
+}

data/templates/shared/sass/modules/pagination/_pagination_extendables.scss

@@ -0,0 +1,35 @@
+//////////////////////////////
+// EXTENDABLES: For Modules 
+//////////////////////////////
+
+%pagination {
+  font-family: $pagination-font-family;
+  li {
+    display: $pagination-li-display;
+    @include margin-padding(margin, $pagination-li-margin, $pagination-li-margin-pos);
+    text-indent: $pagination-text-indent;
+  }
+  a {
+    display: $pagination-a-display;
+    @include margin-padding(padding, $pagination-a-padding);
+    line-height: $pagination-a-line-height;
+    @include margin-padding(margin, $pagination-a-margin);
+    @include border-outline(border, $pagination-a-border-width, $pagination-a-border-style, $pagination-a-border-color);
+    @include border-radius($pagination-a-border-radius);
+    background-clip: padding-box;
+    &:link,
+    &:visited {
+      color: $pagination-link-color;
+      background-color: $pagination-link-background-color;
+    }
+    &[href]:hover,
+    &[href]:focus {
+      color: $pagination-link-hover-color;
+      background-color: $pagination-link-hover-background-color;
+    }
+    &:active {
+      color: $pagination-link-active-color;
+      background-color: $pagination-link-active-background-color;
+    }
+  }
+}

data/{stylesheets/compass-pattern-primer/partials/variables/modules/_pagination.scss → templates/shared/sass/modules/pagination/_pagination_variables.scss}

@@ -1,3 +1,7 @@
+//////////////////////////////
+// VARIABLES: For Modules 
+//////////////////////////////
+
 // Pagination
 $pagination-font-family: $secondary-font !default;
 $pagination-text-indent: 0 !default;

data/templates/shared/sass/partials/_colors.scss

@@ -5,23 +5,23 @@
 
 // Example color scheme
   
-// $primary-color:  #57068c;
-// $black-value: #333;
-//
-// $cs-primary:            $primary-color;
-//// Primary color, can be any color you can use in CSS, plus CMYK from Color Schemer
-// $cs-scheme:             complement;
-//// Options: mono, complement, triad, tetrad, analogic, accented-analogic
-// $cs-hue-offset:         20;
-//// Options: 0-100;
-// $cs-brightness-offset:  0;
-//// Options: 0-100;
-// $cs-color-model:        ryb;
-//// Options: rgb, ryb
-//
-//
-// $black:     tint-stack($black-value);
-// $primary:   tint-stack(cs-primary());
-// $secondary: tint-stack(cs-secondary());
-// $tertiary:  tint-stack(cs-tertiary());
-// $quadrary:  tint-stack(cs-quadrary());
+$primary-color: #693 !default;
+$black-value: #333 !default;
+
+$cs-primary:            $primary-color;
+// Primary color, can be any color you can use in CSS, plus CMYK from Color Schemer
+$cs-scheme:             accented-analogic;
+// Options: mono, complement, triad, tetrad, analogic, accented-analogic
+$cs-hue-offset:         20;
+// Options: 0-100;
+$cs-brightness-offset:  0;
+// Options: 0-100;
+$cs-color-model:        ryb;
+// Options: rgb, ryb
+
+
+$black:     tint-stack($black-value);
+$primary:   tint-stack(cs-primary());
+$secondary: tint-stack(cs-secondary());
+$tertiary:  tint-stack(cs-tertiary());
+$quadrary:  tint-stack(cs-quadrary());