wordpress-starter 0.1

data/CHANGELOG.md

@@ -0,0 +1 @@
+

data/LICENSE

@@ -0,0 +1,20 @@
+Copyright (c) 2012 Alex Sancho
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,34 @@
+WordPress Starter
+==================
+
+This Compass extension provides support for creating WordPress Themes using Sass.
+
+Installing
+==========
+
+    sudo gem install wordpress-starter-0.1.gem
+
+To install a theme into your existing compass project, add the following to your compass configuration file:
+
+    require 'wordpress-starter'
+
+OR, just run this command:
+
+    compass -r wordpress-starter -f wordpress -s compressed /path/to/installation
+
+What this does is call `compass`, requires the wordpress-starter extension, uses the framework wordpress, sets the Sass output to be compressed and finally ends with you setting the theme name.
+
+Note on Patches/Pull Requests
+==============================
+
+1. Fork it
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create new Pull Request
+
+
+Copyright
+===========
+
+Copyright (c) 2012 Alex Sancho. See LICENSE for details.

data/lib/wordpress-starter.rb

@@ -0,0 +1,29 @@
+# All gems that are required for this extension to work should go here.
+# These are the requires you would normally put in your config.rb file
+# By default, you should always included Compass. Do not include your
+# extension.
+require 'compass'
+require "susy"
+
+# This tells Compass what your Compass extension is called, and where to find
+# its files
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('wordpress', :path => extension_path)
+
+# Version and date of version for your Compass extension.
+# Letters, numbers, and underscores only
+# Version is a number. If a version contains alphas, it will be created as
+# a prerelease version
+# Date is in the form of YYYY-MM-DD
+module WordpressStarter
+  VERSION = "0.1"
+  DATE = "2012-12-06"
+end
+
+# This is where any custom SassScript should be placed. The functions will be
+# available on require of your extension without the need for users to import
+# any partials. Uncomment below.
+
+# module Sass::Script::Functions
+#
+# end

data/stylesheets/_wordpress.scss

@@ -0,0 +1,9 @@
+@import "wordpress/base";
+@import "wordpress/mixins";
+@import "wordpress/typography";
+@import "wordpress/layout";
+@import "wordpress/theme";
+@import "wordpress/page";
+@import "wordpress/responsive";
+@import "wordpress/defaults";
+@import "wordpress/utils";

data/stylesheets/wordpress/_base.scss

@@ -0,0 +1,74 @@
+@import "compass";
+@import "susy";
+
+@include global-reset;
+@include reset-html5;
+
+// border-box-sizing()
+@include border-box-sizing;
+
+// Settings --------------------------------------------------------------
+$responsive-embeds-default-ratio : 1 !default;
+
+$tagsHeight                      : 26px;
+$tagsDefaultColor                : #eb6b22;
+
+// Susy & Compass use HTML hacks to support IE 6 and 7. You can turn that off:
+$legacy-support-for-ie6          : false;
+// $legacy-support-for-ie7       : true;
+
+$experimental-support-for-opera  : false;
+$experimental-support-for-khtml  : false;
+
+// Grid -------------------------------------------------------------------
+$total-columns                   : 7;              // a 7-column grid
+$column-width                    : 60px;           // each column is 4em wide
+$gutter-width                    : 20px;           // 1em gutters between columns
+$grid-padding                    : 10px;           // grid-padding equal to gutters
+$break                           : 12;             // a 12-column grid
+
+// Typography -------------------------------------------------------------
+$sans-serif                      : "Helvetica Neue", Helvetica, sans-serif;
+$serif                           : Georgia, Times, "Times New Roman", serif;
+$monospace                       : "Menlo", "Bitstream Vera Sans", Monaco, "Andale Mono", "Lucida Console", monospace;
+
+// Vertical Ryhthm --------------------------------------------------------
+$base-font-size                  : 16px;           // Font-size of your body copy.
+$base-line-height                : 12px;           // Setting the base-line-height half.
+$relative-font-sizing            : true;           // Set to false if you want to use absolute pixels in sizing your typography.
+
+$fs-h1                           : 40px;
+$fs-h2                           : 35px;
+$fs-h3                           : 32px;
+$fs-h4                           : 28px;
+$fs-h5                           : 24px;
+$fs-h6                           : 12px;
+
+// Colors ------------------------------------------------------------------
+$white                           : #fff;
+$black                           : #252525;
+
+$brand-color                     : #3b5998;
+$action-color                    : #67a54b;
+$function-color                  : #f2f2f2;
+$alert-color                     : #b22727;
+
+$brand-color-light               : lighten( $brand-color, 10% );
+$brand-color-lighter             : lighten( $brand-color, 20% );
+$brand-color-dark                : darken( $brand-color, 15% );
+$brand-color-darker              : darken( $brand-color, 25% );
+
+$action-color-light              : lighten( $action-color, 10% );
+$action-color-lighter            : lighten( $action-color, 20% );
+$action-color-dark               : darken( $action-color, 15% );
+$action-color-darker             : darken( $action-color, 25% );
+
+$function-color-light            : lighten( $function-color, 10% );
+$function-color-lighter          : lighten( $function-color, 20% );
+$function-color-dark             : darken( $function-color, 15% );
+$function-color-darker           : darken( $function-color, 25% );
+
+$alert-color-light               : lighten( $alert-color, 10% );
+$alert-color-lighter             : lighten( $alert-color, 20% );
+$alert-color-dark                : darken( $alert-color, 15% );
+$alert-color-darker              : darken( $alert-color, 25% );

data/stylesheets/wordpress/_defaults.scss

@@ -0,0 +1,28 @@
+// base classes
+.alignnone {
+  margin: 1em 1em 1em 0;
+}
+
+.aligncenter, div.aligncenter {
+  display: block;
+  margin: .5em auto;
+}
+
+.alignright {
+  float: right;
+  margin: 0 0 1em 1em;
+}
+
+.alignleft {
+  float: left;
+  margin: 0 1em 1em 0;
+}
+
+.aligncenter {
+  display: block;
+  margin: 1em auto;
+}
+
+.round-corners {
+  @include border-radius(3px);
+}

data/stylesheets/wordpress/_layout.scss

@@ -0,0 +1,56 @@
+div.page {
+  // page acts as a container for our grid.
+  @include container($total-columns, $break);
+  .header {
+    padding-top: 50px;
+  }
+  .main, .secondary {
+    padding: 0 gutter();
+  }
+}
+
+@include at-breakpoint($break) {
+  div.page {
+    .header { @include prefix(2,$break); }
+
+    // nav spans 2 columns of total 12.
+    .nav-menu { @include span-columns(2,$break); }
+
+    .content {
+      $main-columns: 10;
+      // content spans the final (omega) 10 columns of 12.
+      @include span-columns($main-columns omega, $break);
+
+      // main content spans 7 of those 10 columns.
+      .main {
+        @include span-columns(7,$main-columns);
+        article, .archive-title, .navigation, .comments-area {
+          width: columns(7,7) - gutter();
+          margin-left: gutter();
+        }
+      }
+      .main, .secondary {
+        padding: 0;
+      }
+
+      // secondary content spans the final 3 (omega) of 10 columns.
+      .secondary {
+        @include span-columns(3 omega, $main-columns);
+        .widgets {
+          width: columns(3,3) - gutter();
+          margin-right: gutter();
+        }
+      }
+    }
+  }
+}
+
+.footer {
+  clear: both;
+  margin: $grid-padding 0 - $grid-padding;
+  padding: $grid-padding;
+  @include at-breakpoint($break) {
+    margin: 0;
+    @include pad(2,3,$break);
+  }
+}

data/stylesheets/wordpress/_mixins.scss

@@ -0,0 +1,57 @@
+// $ratio : any valid ratio like 16/9, 4/3...
+@mixin responsive-embed($ratio: $responsive-embeds-default-ratio) {
+  position: relative;
+  display: inline-block;
+  height: 100%/$ratio;
+  overflow: hidden;
+  iframe,
+  object,
+  embed {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@function inverse-side($side) {
+  @if $side == top { @return bottom; }
+  @else if $side == bottom { @return top; }
+  @else if $side == left { @return right; }
+  @else if $side == right { @return left; }
+}
+
+@mixin linear-gradient($gradientLine, $colorStops...) {
+  background-image: -webkit-linear-gradient($gradientLine, $colorStops);
+  background-image: -moz-linear-gradient($gradientLine, $colorStops);
+  @if length($gradientLine) == 2 {
+    background-image: linear-gradient(to #{inverse-side(nth($gradientLine, 1))} #{inverse-side(nth($gradientLine, 2))}, $colorStops);
+  } @else {
+    background-image: linear-gradient(to #{inverse-side($gradientLine)}, $colorStops);
+  }
+}
+
+@mixin button($color: #fff, $bg-color: #50A7E7, $font-size: 12px, $radius: 15px, $float: right) {
+  @include linear-gradient(top, $bg-color, darken($bg-color, 25%));
+  border: 1px solid darken($bg-color, 15%);
+  color: $color;
+  cursor: pointer;
+  float: $float;
+  @include adjust-font-size-to($font-size);
+  @include leader(2);
+  @include trailer;
+  padding: 4px 15px;
+  text-decoration: none;
+  text-shadow: 0 1px 0 darken($color, 50%);
+  @include box-shadow(0 1px 1px darken($bg-color, 10%) inset, 0 0 1px darken($bg-color, 5%));
+  @include border-radius($radius);
+  &:hover {
+    @include linear-gradient(top, darken($bg-color, 25%), $bg-color);
+    @include box-shadow(0 1px 1px darken($bg-color, 20%) inset, 0 0 1px darken($bg-color, 10%));
+  }
+  &:active {
+    @include box-shadow(0 0 10px darken($bg-color, 30%) inset);
+    text-shadow: 0 -1px 0 darken($color, 90%);
+  }
+}

data/stylesheets/wordpress/_page.scss

@@ -0,0 +1,364 @@
+div.page {
+  .search {
+    position: relative;
+    margin: 0 auto;
+    width: columns(3,3) - gutter();
+    input[type=search] {
+      height: 26px;
+      width: 100%;
+      padding: 0 12px 0 25px;
+      background: white url(../images/search.png) 8px 6px no-repeat;
+      color: #555;
+      border: 1px solid;
+      border-color: #a8acbc #babdcc #c0c3d2;
+      border-radius: 13px;
+      -webkit-appearance: textfield;
+      @include box-shadow(inset 0 1px #e5e7ed, 0 1px #fcfcfc);
+      &:focus {
+        outline: 0;
+        border-color: #66b1ee;
+        @include box-shadow(0 0 2px rgba(85, 168, 236, .9));
+      }
+    }
+  }
+  .main {
+    article.hentry {
+      @extend .clearfix;
+      @include padding-leader(2);
+      @include padding-trailer(1);
+      @include trailing-border(1px, lines-for-font-size(17px));
+      border-color: rgba(shade($function-color-light, 15%), .4);
+      &.single .entry-content {
+        border-bottom: none;
+      }
+      &.format-aside .entry-meta, &.format-quote .entry-meta {
+        margin-top: 0;
+      }
+      .featured-post {
+        @include adjust-font-size-to(24px);
+        @include trailing-border(2px, 1);
+        @include rhythm(1, 0, 1, 0);
+        border-color: rgba(shade($function-color-light, 15%), .4);
+      }
+      &.sticky {}
+      header {
+        .wp-post-image {
+          max-width: columns(7,7) - gutter();
+          height: auto;
+          float: left;
+          @include rhythm-borders(1px, 1/2);
+          @include trailer;
+          margin-right: gutter();
+          border-color: $function-color;
+          background: $white;
+        }
+        .entry-title {
+          a {
+            color: $brand-color-dark;
+            &:hover {
+              color: $brand-color-light;
+            }
+          }
+        }
+      }
+      #{headings(1, 6)} {
+        color: $function-color-darker;
+      }
+      &.format-status {
+        .entry-header {
+          @extend .clearfix;
+          img {
+            float: left;
+            @include rhythm-borders(1px, 1/4);
+            @include trailer;
+            margin-right: gutter();
+            border-color: $function-color;
+            background: $white;
+          }
+          header {
+            float: left;
+            h1 {
+              @include adjust-font-size-to(32px);
+            }
+            h2 {
+              @include adjust-font-size-to(22px);
+            }
+          }
+        }
+      }
+      .entry-meta {
+        @include adjust-font-size-to(14px);
+        @include leader(3);
+        @include trailer(2);
+        .edit-link {
+          color: $brand-color-darker;
+          text-decoration: none;
+          &:hover {
+            background: none;
+            color: desaturate(darken($brand-color, 50), 15);
+          }
+        }
+        .author-info {
+          @include adjust-font-size-to(14px);
+          @include leader(3);
+          padding: $grid-padding;
+          background: $function-color;
+          color: $brand-color-darker;
+          @include border-radius(3px);
+          @include box-shadow(darken($function-color, 5), 1px, 1px, 1px);
+          .author-avatar {
+            float: left;
+            width: columns(1,7);
+            img {
+              padding: 3px;
+              background: $white;
+              border: 1px solid $function-color;
+            }
+          }
+          .author-description {
+            float: right;
+            width: columns(6,7);
+          }
+          @include background-clip(padding-box);
+        }
+      }
+    }
+    .more-link {
+      @extend .heading-font;
+      @include adjust-font-size-to(13px);
+      &:hover {
+        text-decoration: underline;
+      }
+      &:after {
+        content: "\FFEB";
+        padding-left: 5px;
+      }
+    }
+    .navigation {
+      @extend .clearfix;
+      @extend .heading-font;
+      .section-heading {
+        @include adjust-font-size-to(15px);
+        @include rhythm(0, 0, 1, 0);
+      }
+      .nav-next, .nav-previous {
+        a {
+          @include adjust-font-size-to(18px);
+          color: $function-color-darker;
+          text-decoration: none;
+          &:hover {
+            color: $brand-color-dark;
+          }
+        }
+      }
+      .nav-next {
+        display: inline-block;
+        float: right;
+        a:after {
+          content: "\FFEB";
+          padding-left: 5px;
+        }
+      }
+      .nav-previous {
+        display: inline-block;
+        float: left;
+        a:before {
+          content: "\FFE9";
+          padding-right: 5px;
+        }
+      }
+    }
+    .page-numbers {
+      @extend .navigation;
+      @include rhythm(1,0,1,0);
+      li {
+        list-style-type: none;
+        float: left;
+      }
+    }
+    .page-links {
+        @extend .navigation;
+    }
+    .comments-area {
+      @include leader;
+      border-color: $function-color-dark;
+      .comments-title {
+        @include trailer;
+      }
+      ol.commentlist {
+        list-style: none;
+        @include trailer(2);
+        text-indent: 0;
+        @include leading-border(1px, lines-for-font-size(18px), $base-font-size, dashed);
+        padding-top: 0;
+        li {
+          &.alt!, &.bypostauthor!, &.byuser!, &.comment-author-admin! {}
+          &.comment {
+            @extend .clearfix;
+            @include trailing-border(1px, lines-for-font-size(18px), $base-font-size, dashed);
+            border-color: $function-color-dark;
+            padding: $grid-padding;
+            .vcard {
+              @extend .sans-font;
+              @include adjust-font-size-to(14px);
+              color: $function-color-dark;
+              font-weight: 400;
+              a {
+                color: $function-color-dark;
+              }
+              cite.fn {
+                font-style: italic;
+                a.url! {}
+              }
+              img {
+                float: right;
+                @include rhythm-borders(1px, 1/3);
+                margin-left: gutter();
+                border-color: $function-color;
+                background: $white;
+                &.avatar {}
+                &.avatar-32!, &.photo! {}
+              }
+              span.says! {}
+            }
+            p {
+              @include adjust-font-size-to(16px);
+              @include rhythm(0, 0, 1, 0);
+            }
+            ul {
+              @include adjust-font-size-to(16px);
+              @include rhythm(0, 0, 1, 0);
+              list-style: square;
+            }
+            .reply {
+              @include adjust-font-size-to(11px);
+              .comment-edit-link {
+                font-weight: 600;
+                color: $alert-color-dark;
+                a {
+                  font-weight: 600;
+                }
+              }
+            }
+            .children {
+              list-style: none;
+              @include leader;
+              text-indent: 0;
+              li {
+                &.alt!, &.bypostauthor!, &.byuser!, &.comment!, &.comment-author-admin! {}
+                &.depth-2, &.depth-3, &.depth-4, &.depth-5 {
+                  @include apply-side-rhythm-border(left, 2px, .25);
+                  @include trailer;
+                  border-bottom: none;
+                }
+                &.depth-2 {
+                  border-color: $function-color;
+                }
+                &.depth-3 {
+                  border-color: $function-color-dark;
+                }
+                &.depth-4 {
+                  border-color: $function-color-darker;
+                }
+                &.depth-5!, &.odd! {}
+              }
+            }
+          }
+          &.even {
+            background: shade($function-color-light, 1%);
+          }
+          &.odd {
+            background: shade($function-color-light, 2%);
+          }
+          &.parent {
+            border-left: 1px solid $function-color-dark;
+          }
+          &.thread-alt!, &.thread-even!, &.thread-odd! {}
+        }
+      }
+    }
+    form#commentform {
+      label {
+        width: 120px;
+        display: inline-block;
+        .required {
+          color: $alert-color;
+        }
+      }
+      textarea, input[type=text], , input[type=email], input[type=password] {
+        padding: 4px 6px;
+        width: 350px;
+        color: #555;
+        border: 1px solid;
+        border-color: #a8acbc #babdcc #c0c3d2;
+        float: right;
+        &:focus {
+          border-color: $alert-color;
+          background: $function-color;
+        }
+      }
+      textarea {
+        height: 46px;
+        clear: both;
+      }
+      .form-allowed-tags {
+        display: none;
+      }
+      input[type=submit] {
+        @include button($function-color-light, $action-color-lighter);
+      }
+    }
+
+    p.subscribe-to-comments, .comment-rss {
+      height: 32px;
+      text-indent: 42px;
+      padding: 5px 0 0;
+    }
+
+    p.subscribe-to-comments {
+      input {
+        margin: 5px 3px 3px !important;
+        border: 0;
+        outline: 0;
+      }
+      label {
+        top: -2px;
+        color: #666;
+      }
+    }
+  }
+  .secondary {
+    .widgets {
+      @include padding-leader(2);
+      @include padding-trailer(2);
+      .wp-tag-cloud {
+        @extend .clearfix;
+        li {
+          position: relative;
+          float: left;
+          margin: 0 12px 8px 0;
+        }
+        a {
+          display: block;
+          height: $tagsHeight;
+          line-height: $tagsHeight - 3px;
+          padding: 0 9px 0 8px;
+          font-size: 12px;
+          color: #555;
+          text-decoration: none;
+          text-shadow: 0 1px white;
+          background: #fafafa;
+          border-width: 1px;
+          border-style: solid;
+          border-color: #dadada #d2d2d2 #c5c5c5;
+          @extend .round-corners;
+          @include linear-gradient(top, #fcfcfc, #f0f0f0);
+          @include box-shadow(inset 0 0 0 1px rgba(white, .7), 0 1px 2px rgba(black, .05));
+          &:hover {
+            @include box-shadow(inset 0 0 0 1px rgba(white, .15), 1px 1px 2px rgba(black, .2));
+          }
+        }
+      }
+    }
+  }
+}