compass-drupal-plugin 0.2.0.alpha.1 → 0.2.0.beta.1

data/compass-drupal-plugin.gemspec

@@ -1,7 +1,7 @@
 Gem::Specification.new do |s|
   # Release Specific Information
-  s.version = "0.2.0.alpha.1"
-  s.date = "2010-12-1"
+  s.version = "0.2.0.beta.1"
+  s.date = "2010-12-15"
 
   # Gem Details
   s.name = %q{compass-drupal-plugin}

data/stylesheets/drupal/_zen.scss

@@ -7,6 +7,11 @@ $zen-second-sidebar-width: 200px !default;
 $zen-navigation-width: 100% !default;
 $zen-navigation-height: 2.3em !default;
 
+$zen-proportional-typeface: 'Verdana, Tahoma, "DejaVu Sans", sans-serif' !default;
+$zen-monospaced-typeface: '"Courier New", "DejaVu Sans Mono", monospace' !default;
+
+$zen-base-font-size: 14px !default;
+
 @mixin zen-layout-base {
 
   .region-header {
@@ -318,15 +323,21 @@ $zen-navigation-height: 2.3em !default;
 
 }
 
-@mixin zen-typefaces(
-  $proportional: 'Verdana, Tahoma, "DejaVu Sans", sans-serif',
-  $monospaced: '"Courier New", "DejaVu Sans Mono", monospace') {
+@mixin zen-typefaces {
 
   body, caption, th, td, input, textarea, select, option, legend, fieldset {
-    font-family: $proportional; }
+    font-family: $zen-proportional-typeface; }
 
   pre, code {
-    font-family: $monospaced; }
+    font-family: $zen-monospaced-typeface; }
+
+}
+
+@mixin zen-typography {
+
+  #skip-link, #page {
+    font-size: $zen-base-font-size * 1em / 16px;
+    line-height: ($zen-base-font-size + 4px) * 1em / $zen-base-font-size;
+  }
 
-  
 }

data/templates/project/_skin.scss

@@ -1,12 +1,45 @@
-/* Page Elements */
+// This variable controls the total width of the container div
+// You can use px for a Fixed layout or % for a Liquid layout
+$<%= project_name %>-width: 960px;
+
+// These variables control the size of the sidebars
+$<%= project_name %>-first-sidebar-width: 200px;
+$<%= project_name %>-second-sidebar-width: 200px;
+
+// This variable positions the content relative to the sidebars
+// Possible values are first, last, middle
+$<%= project_name %>-content-position: "middle";
+
+// These variables control the #navigation div
+$<%= project_name %>-navigation-width: 100%;
+$<%= project_name %>-navigation-height: 2.3em;
+
+// These variables control the typefaces as defined in html-reset.css
+$<%= project_name %>-proportional-typeface: 'Verdana, Tahoma, "DejaVu Sans", sans-serif';
+$<%= project_name %>-monospaced-typeface: '"Courier New", "DejaVu Sans Mono", monospace';
+
+// These variables control the font sizes as defined in html-reset.css
+$<%= project_name %>-font-size: 14px;
+
+// Page Components
 <% project_name = File.basename(config.project_path) %>
+
+.-<%= project_name %>-body { }
+
 .-<%= project_name %>-skip-link { }
+
+.-<%= project_name %>-page { }
+
+.-<%= project_name %>-content-area { }
+
 .-<%= project_name %>-logo { }
 
-.-<%= project_name %>-name-and-slogan {
-  #site-name { 
-    a { } }
-  #site-slogan { } }
+.-<%= project_name %>-name-and-slogan { } // usally the .name-and-slogan div
+
+.-<%= project_name %>-site-name {
+  a { } }
+
+.-<%= project_name %>-site-slogan { }
 
 .-<%= project_name %>-search-box {
   #search {
@@ -15,42 +48,118 @@
     .form-submit { } } }
 
 .-<%= project_name %>-mission { }
-.-<%= project_name %>-breadcrumb { }
+
+.-<%= project_name %>-breadcrumb {
+  a { } }
 
 .-<%= project_name %>-messages {
   ul {
-    li { } }
-  &.error { }
-  &.warning { }
-  &.status { }
-  &.help { } }
-
-.-<%= project_name %>-primary-tabs { }
-.-<%= project_name %>-secondary-tabs { }
+    li { } } }
+
+.-<%= project_name %>-messages-error { @extend .-<%= project_name %>-messages; }
+
+.-<%= project_name %>-messages-warning { @extend .-<%= project_name %>-messages; }
+
+.-<%= project_name %>-messages-status { @extend .-<%= project_name %>-messages; }
+
+.-<%= project_name %>-messages-help { @extend .-<%= project_name %>-messages; }
+
+.-<%= project_name %>-tabs { } // usually the .tabs div
+
+.-<%= project_name %>-primary-tabs {
+  li {
+    a { }
+    &.active {
+      a { } } } }
+
+.-<%= project_name %>-secondary-tabs {
+  li {
+    a { }
+    &.active {
+      a { } } } }
+
 .-<%= project_name %>-menu {
-  > li { //use > to target only child items,
+  > li { // use '>' to target only child items
     &.first { }
     &.last { }
-    &.expanded {
-      > ul { @extend .-<%= project_name %>-submenu; } } } }
+    &.expanded { } } }
 
-.-<%= project_name %>-submenu {
-    > li { //use > to target only child items,
+.-<%= project_name %>-submenu { // think expanded menus, not secondary menus
+    > li { // use '>' to target only child items
     &.first { }
     &.last { }
-    &.expanded {
-      > ul { } } } }
+    &.expanded { } } }
+
+.-<%= project_name %>-pager {
+  .pager-item { }
+  .pager-current { }
+  .pager-previous { }
+  .pager-next { }
+  .pager-first { }
+  .pager-last { }
+  a { } }
 
 .-<%= project_name %>-feed-icons {
   .feed-icon { } }
 
 .-<%= project_name %>-footer-message { }
 
-/* Common Elements */
+// Block Components
+// Make copies of these components to make for a diversity of block styles
+.-<%= project_name %>-block { }
+.-<%= project_name %>-block-title { }
+.-<%= project_name %>-block-content { }
+
+// Node Components
+.-<%= project_name %>-node { }
+
+.-<%= project_name %>-node-picture { }
+
+.-<%= project_name %>-node-title { }
+
+.-<%= project_name %>-node-meta {
+
+.-<%= project_name %>-node-submitted { }
+
+.-<%= project_name %>-node-terms { } }
+
+.-<%= project_name %>-node-content { @extend .-<%= project_name %>-content-object; }
+
+.-<%= project_name %>-node-links {
+  li {
+    &.first { }
+    &.last { } } }
+
+.-<%= project_name %>-node-sticky { }
+
+.-<%= project_name %>-node-unpublished {
+    .unpublished { } }
+
+.-<%= project_name %>-node-by-viewer { }
 
+.-<%= project_name %>-node-preview { }
+
+// Profile Components
+.-<%= project_name %>-profile { }
+
+.-<%= project_name %>-profile-picture { }
+
+.-<%= project_name %>-profile-category-header { }
+
+.-<%= project_name %>-profile-category-wrapper { }
+
+.-<%= project_name %>-profile-field-label { }
+
+.-<%= project_name %>-profile-field-value { }
+
+// Block Elements
+// Make a copy of these if you're looking for block diversity
 .-<%= project_name %>-h2 { }
+
 .-<%= project_name %>-h3 { }
+
 .-<%= project_name %>-p { }
+
 .-<%= project_name %>-li { }
 
 .-<%= project_name %>-ul {
@@ -66,72 +175,48 @@
   &:focus { }
   &:active { } }
 
-/* Content Elements */
-
-.-<%= project_name %>-h1 { }
+// Node Elements
+// These objects shouldn't appear outside of nodes, but you never know.
 .-<%= project_name %>-h4 { }
+
 .-<%= project_name %>-pre { }
+
 .-<%= project_name %>-code { }
+
 .-<%= project_name %>-blockquote { }
+
 .-<%= project_name %>-cite { }
+
 .-<%= project_name %>-table {
   caption { }
   tr {
+    &.odd { }
+    &.even { }
     th { }
     td { }
     thead & { }
     tfoot & { }
     tbody & { } } }
 
-/* Base Object */
-
-.-<%= project_name %>-base-object {
-  .title { }
-  .content { } }
-
-/* Helper Objects */
-
-.-<%= project_name %>-content-object {
-  @extend .-base-object;
-  h1 { @extend .-<%= project_name %>-h1; }
-  h4 { @extend .-<%= project_name %>-h4; }
-  code { @extend .-<%= project_name %>-code; }
-  blockquote { @extend .-<%= project_name %>-blockquote; }
-  table { @extend .-<%= project_name %>-table; }
+// Content Classes
+.-<%= project_name %>-node-content {
   h2 { @extend .-<%= project_name %>-h2; }
   h3 { @extend .-<%= project_name %>-h3; }
+  h4 { @extend .-<%= project_name %>-h4; }
   p { @extend .-<%= project_name %>-p; }
-  li { @extend .-<%= project_name %>-li; }
   ul { @extend .-<%= project_name %>-ul; }
   ol { @extend .-<%= project_name %>-ol; }
+  li { @extend .-<%= project_name %>-li; }
+  table { @extend .-<%= project_name %>-table; }
+  code { @extend .-<%= project_name %>-code; }
+  blockquote { @extend .-<%= project_name %>-blockquote; }
   a { @extend .-<%= project_name %>-a; } }
 
-.-<%= project_name %>-block-object {
-  @extend .-base-object;
-  h2 { @extend .-<%= project_name %>-h2; }
+.-<%= project_name %>-block-content {
   h3 { @extend .-<%= project_name %>-h3; }
+  h4 { @extend .-<%= project_name %>-h4; }
   p { @extend .-<%= project_name %>-p; }
-  li { @extend .-<%= project_name %>-li; }
   ul { @extend .-<%= project_name %>-ul; }
   ol { @extend .-<%= project_name %>-ol; }
-  a { @extend .-<%= project_name %>-a; } }
-
-/* Node Object */
-
-.-<%= project_name %>-node-object {
-  .picture { }
-  .title { }
-  .meta { }
-  .content { @extend .-content-object; }
-  .links {
-    li {
-      &.first { }
-      &.last { } } } }
-
-/* Profile Object */
-.-<%= project_name %>-profile-object {
-  .picture { }
-  h3 { } /* profile category header */ 
-  dl { /* profile category wrapper */ 
-    dt { } /*profile category label */
-    dd { } /* profile category value */ } }
+  li { @extend .-<%= project_name %>-li; }
+  a { @extend .-<%= project_name %>-a; } }

data/templates/zen/zen-base.scss

@@ -1,84 +1,150 @@
 @import "drupal/zen";
 @import "<%= File.basename(config.project_path) %>-skin";
 
-// This variable controls the total width of the Zen theme.
-// You can use px for a Fixed layout or % for a Liquid layout
-$zen-width: 960px;
-
-// These variables control the size of the sidebars
-$zen-first-sidebar-width: 200px;
-$zen-second-sidebar-width: 200px;
-
-// This variable positions the content relative to the sidebars
-// Possible values are first, last, middle
-$zen-content-position: "middle";
+// Map the zen variables to the skin variables
+$zen-width: $<%= project_name %>-width;
+$zen-first-sidebar-width: $<%= project_name %>-first-sidebar-width;
+$zen-second-sidebar-width: $<%= project_name %>-second-sidebar-width;
+$zen-content-position: $<%= project_name %>-content-position;
+$zen-navigation-width: $<%= project_name %>-navigation-width;
+$zen-navigation-height: $<%= project_name %>-navigation-height;
+$zen-proportional-typeface: $<%= project_name %>-proportional-typeface;
+$zen-monospaced-typeface: $<%= project_name %>-monospaced-typeface;
+$zen-base-font-size: $<%= project_name %>-base-font-size: 14px;
 
 // Use this mixin to generate the Zen layout
-@include zen-layout();
-
-// These variables control the #navigation div
-$zen-navigation-width: 100%;
-$zen-navigation-height: 2.3em;
+@include zen-layout;
 
 // Use this mixin to properly position the #navigation div
-@include zen-navigation();
+@include zen-navigation;
 
-// These variables control the typefaces as defined in html-reset.css
-$zen-proportional-typeface: 'Verdana, Tahoma, "DejaVu Sans", sans-serif';
-$zen-monospaced-typeface: '"Courier New", "DejaVu Sans Mono", monospace';
+//Use this mixin to set the typefaces
+@include zen-typefaces;
 
-//Use this mixin to set the new typefaces
-@include zen-typefaces($zen-proportional-typeface, $zen-monospaced-typeface);
+//Use this mixin to set the font sizes
+@include zen-typography;
 
-body { }
+body { @extend .-<%= project_name %>-body; }
 
-#skip-link { }
+#skip-link { @extend .-<%= project_name %>-skip-link; }
 
 #page-wrapper {
+@extend .-<%= project_name %>-page;
 
 /* Content */
 
   #content {
-    #mission { }
-    #breadcrumb { }
-    .messages { }
+    #content-area { @extend .-<%= project_name %>-content-area; }
+    #mission { @extend .-<%= project_name %>-mission; }
+    #breadcrumb { @extend .-<%= project_name %>-breadcrumb; }
+    .messages {
+      &.status { @extend .-<%= project_name %>-messages-status; }
+      &.warning { @extend .-<%= project_name %>-messages-warning; }
+      &.error { @extend .-<%= project_name %>-messages-error; }
+      &.help { @extend .-<%= project_name %>-messages-help; } }
     .tabs {
-      .primary { }
-      .secondary { } }
-    .feed-icons { } }
+      @extend .-<%= project_name %>-tabs;
+      .primary { @extend .-<%= project_name %>-primary-tabs; }
+      .secondary { @extend .-<%= project_name %>-secondary-tabs; } }
+    .feed-icons { }
+
+/* Nodes */
+
+  .node {
+    @extend .-<%= project_name %>-node;
+    .picture { @extend .-<%= project_name %>-node-picture; }
+    .title { @extend .-<%= project_name %>-node-title; }
+    .meta {
+      @extend .-<%= project_name %>-node-meta;
+      .submitted { @extend .-<%= project_name %>-node-submitted; }
+      .terms { @extend .-<%= project_name %>-node-terms; } }
+    .content { @extend .-<%= project_name %>-node-content; }
+    .links {@extend .-<%= project_name %>-node-links; }
+    &.node-sticky { @extend .-<%= project_name %>-node-sticky; }
+    &.node-unpublished { @extend .-<%= project_name %>-node-unpublished; }
+    &.node-by-viewer { @extend .-<%= project_name %>-node-by-viewer; }
+    .preview & { @extend .-<%= project_name %>-node-preview; } }
+
+/* Profiles */
+
+.profile {
+  @extend .-<%= project_name %>-profile;
+  .picture { @extend .-<%= project_name %>-profile-picture; }
+  h3 { @extend .-<%= project_name %>-profile-category-title; } /* profile category header */
+  dl { @extend .-<%= project_name %>-profile-category-wrapper; /* profile category wrapper */
+    dt { @extend .-<%= project_name %>-profile-field-label; } /* profile category label */
+    dd { @extend .-<%= project_name %>-profile;-field-value; } } } /*  profile category value */
+
+}
 
 /* Regions */
 
-  .region-sidebar-first & {
-    .block { } }
-
-  .region-sidebar-first & {
-    .block { } }
-
-  .region-navigation & {
-    #main-menu { }
-    .block { } }
-
-  .region-highlight & {
-    .block { } }
-
-  .region-content-top & {
-    .block { } }
-
-  .region-content-bottom & {
-    .block { } }
-
-  .region-header & {
-    #logo { }
-    #name-and-slogan { }
-    .block { } }
-
-  .region-footer & {
-    #secondary-menu { }
-    #footer-message { }
-    .block { } }
-
-  .region-page-closure & {
-    .block { } }
+  .region-sidebar-first {
+    .block {
+      @extend .-<%= project_name %>-block;
+      .title { @extend .-<%= project_name %>-block-title; }
+      .content { @extend .-<%= project_name %>-block-content; }
+      &.odd { }
+      &.even { } } }
+
+  .region-sidebar-second {
+    .block {
+      @extend .-<%= project_name %>-block;
+      .title { @extend .-<%= project_name %>-block-title; }
+      .content { @extend .-<%= project_name %>-block-content; }
+      &.odd { }
+      &.even { } } }
+
+  .region-navigation {
+    #main-menu {
+      @extend .-<%= project_name %>-menu;
+      > li.expanded > ul.menu { @extend .-<%= project_name %>-submenu; } }
+    .block { @extend .-<%= project_name %>-block;
+      .title { @extend .-<%= project_name %>-block-title; }
+      .content { @extend .-<%= project_name %>-block-content; } } }
+
+  .region-highlight {
+    .block {
+      @extend .-<%= project_name %>-block;
+      .title { @extend .-<%= project_name %>-block-title; }
+      .content { @extend .-<%= project_name %>-block-content; } } }
+
+  .region-content-top {
+    .block {
+      @extend .-<%= project_name %>-block;
+      .title { @extend .-<%= project_name %>-block-title; }
+      .content { @extend .-<%= project_name %>-block-content; } } }
+
+  .region-content-bottom {
+    .block {
+      @extend .-<%= project_name %>-block;
+      .title { @extend .-<%= project_name %>-block-title; }
+      .content { @extend .-<%= project_name %>-block-content; } } }
+
+  .region-header {
+    #logo { @extend .-<%= project_name %>-logo; }
+    #name-and-slogan {
+      @extend .-<%= project_name %>-name-and-slogan;
+      #site-name { @extend .-<%= project_name %>-site-name; }
+      #site-slogan { @extend .-<%= project_name %>-site-slogan; } }
+    #search-box { @extend .-<%= project_name %>-search-box; }
+    .block {
+      @extend .-<%= project_name %>-block;
+      .title { @extend .-<%= project_name %>-block-title; }
+      .content { @extend .-<%= project_name %>-block-content; } } }
+
+  .region-footer {
+    #secondary-menu { @extend .-<%= project_name %>-menu; }
+    #footer-message { @extend .-<%= project_name %>-footer-message; }
+    .block {
+      @extend .-<%= project_name %>-block;
+      .title { @extend .-<%= project_name %>-block-title; }
+      .content { @extend .-<%= project_name %>-block-content; } } }
+
+  .region-page-closure {
+    .block {
+      @extend .-<%= project_name %>-block;
+      .title { @extend .-<%= project_name %>-block-title; }
+      .content { @extend .-<%= project_name %>-block-content; } } }
 
 }

metadata

@@ -1,15 +1,15 @@
 --- !ruby/object:Gem::Specification 
 name: compass-drupal-plugin
 version: !ruby/object:Gem::Version 
-  hash: 592302975
+  hash: 62196353
   prerelease: true
   segments: 
   - 0
   - 2
   - 0
-  - alpha
+  - beta
   - 1
-  version: 0.2.0.alpha.1
+  version: 0.2.0.beta.1
 platform: ruby
 authors: 
 - Capi /. Etheriel
@@ -17,7 +17,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2010-12-01 00:00:00 -02:00
+date: 2010-12-15 00:00:00 -02:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency