wordpress-starter 0.1 → 0.2

data/CHANGELOG.md

@@ -1 +1,14 @@
+CHANGELOG (notable new features or fixes)
+---------
 
+### 0.2
+* Big refactoring
+- default project now contains custom starter them
+-
+- Added Automattic _s (underscores) theme http://underscores.me
+- Added Foundation based Theme
+- Included FC Webicons Set from http://fairheadcreative.com
+
+### 0.1
+* First release
+* Bundled with custom theme based on Susy

data/README.md

@@ -6,18 +6,62 @@ This Compass extension provides support for creating WordPress Themes using Sass
 Installing
 ==========
 
-    sudo gem install wordpress-starter-0.1.gem
+    [sudo] gem install wordpress-starter
 
 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:
+Or, just run this command:
 
-    compass -r wordpress-starter -f wordpress -s compressed /path/to/installation
+    compass -r wordpress-starter -f wordpress /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.
 
+Available patterns
+==================
+
+There are some available patterns:
+
+The default pattern creates a basic theme
+-----------------------------------------
+
+	compass -r wordpress-starter -f wordpress /path/to/installation
+
+this theme comes bundled with a few features that makes easier to start:
+
+- Full HTML5+CSS3 markup
+- Build with [Compass](http://compass-style.org/) and Susy grid framework [http://susy.oddbird.net/](http://susy.oddbird.net/)
+- The theme is bundled with the [Slightly Modded Options Framework SMOF](http://aquagraphite.com/2011/09/29/slightly-modded-options-framework/), and include some known filters and actions that cleans and improves the output generated by WordPress
+
+The foundation pattern contains a basic theme based on Zurb's Foundation framework
+---------------------------------------------------------------------------------
+
+	compass -r wordpress-starter -f wordpress/foundation /path/to/installation
+
+this theme comes bundled with a few features that makes easier to start:
+
+- Full HTML5+CSS3 markup
+- Build with [Compass](http://compass-style.org/) and Zurb's Foundation framework 3.2 [http://foundation.zurb.com/](http://foundation.zurb.com/)
+- The theme is bundled with the [Slightly Modded Options Framework SMOF](http://aquagraphite.com/2011/09/29/slightly-modded-options-framework/), and include some known filters and actions that cleans and improves the output generated by WordPress
+
+The starter pattern contains the Automattic starter theme _s [http://underscores.me/](http://underscores.me/)
+------------------------------------------------------------
+
+	compass -r wordpress-starter -f wordpress/starter /path/to/installation
+
+- The theme has been adapted to work with sass.
+
+All the code included tries to follow the [WordPress coding standards](http://codex.wordpress.org/WordPress_Coding_Standards)
+
+Dependencies
+============
+
+- compass >= 0.12.2
+- sass >= 3.2.0
+- zurb-foundation >= 3.2.2
+- susy ~> 1.0.5
+
 Note on Patches/Pull Requests
 ==============================
 
@@ -27,7 +71,6 @@ Note on Patches/Pull Requests
 4. Push to the branch (`git push origin my-new-feature`)
 5. Create new Pull Request
 
-
 Copyright
 ===========
 

data/lib/wordpress-starter.rb

@@ -3,6 +3,7 @@
 # By default, you should always included Compass. Do not include your
 # extension.
 require 'compass'
+require 'zurb-foundation'
 require "susy"
 
 # This tells Compass what your Compass extension is called, and where to find
@@ -16,8 +17,8 @@ Compass::Frameworks.register('wordpress', :path => extension_path)
 # a prerelease version
 # Date is in the form of YYYY-MM-DD
 module WordpressStarter
-  VERSION = "0.1"
-  DATE = "2012-12-06"
+  VERSION = "0.2"
+  DATE = "2012-12-11"
 end
 
 # This is where any custom SassScript should be placed. The functions will be

data/stylesheets/wordpress/_defaults.scss

@@ -1,28 +1,275 @@
-// base classes
-.alignnone {
-  margin: 1em 1em 1em 0;
-}
+/* == WordPress WYSIWYG Editor Styles == */
 
-.aligncenter, div.aligncenter {
-  display: block;
-  margin: .5em auto;
-}
-
-.alignright {
-  float: right;
-  margin: 0 0 1em 1em;
-}
+.entry-content img {}
 
-.alignleft {
+.alignleft, img.alignleft {
   float: left;
   margin: 0 1em 1em 0;
 }
-
-.aligncenter {
+.alignright, img.alignright {
+  float: right;
+  margin: 0 0 1em 1em;
+}
+.aligncenter, img.aligncenter {
   display: block;
-  margin: 1em auto;
+  margin: .5em auto;
 }
-
-.round-corners {
-  @include border-radius(3px);
+.alignnone, img.alignnone {
+  margin: 1em 1em 1em 0;
 }
+
+.wp-caption {}
+.wp-caption img {}
+.wp-caption p.wp-caption-text {}
+
+.wp-smiley {}
+
+blockquote.left {}
+
+blockquote.right {}
+
+.gallery dl {}
+.gallery dt {}
+.gallery dd {}
+.gallery dl a {}
+.gallery dl img {}
+.gallery-caption {}
+
+.size-full {}
+.size-large {}
+.size-medium {}
+.size-thumbnail {}
+
+/* == WordPress CSS - Miscellaneous Styles == */
+
+/* category links */
+li.categories {}
+li.cat-item {}
+/* li.cat-item-{id} {} */
+li.current-cat {}
+li.current-cat-parent {}
+ul.children {}
+
+/* blogroll links */
+.linkcat {}
+.blogroll {}
+
+/* read-more links */
+.more-link {}
+
+/* == WP CSS - Page Listings == */
+
+.pagenav {}               /* outermost list item */
+.page_item {}             /* any page item */
+/* .page-item-{id} {} */        /* specific page id */
+.current_page_item {}     /* current page */
+.current_page_parent {}   /* parent of current page */
+.current_page_ancestor {} /* any ancestor of current page */
+
+.pagenav ul,
+.pagenav .current_page_item ul,
+.pagenav .current_page_ancestor ul,
+.pagenav .current_page_ancestor .current_page_item ul,
+.pagenav .current_page_ancestor .current_page_ancestor ul,
+.pagenav .current_page_ancestor .current_page_ancestor .current_page_item ul,
+.pagenav .current_page_ancestor .current_page_ancestor .current_page_ancestor ul {}
+
+.pagenav  ul ul,
+.pagenav .current_page_item ul ul,
+.pagenav .current_page_ancestor ul ul,
+.pagenav .current_page_ancestor .current_page_item ul ul,
+.pagenav .current_page_ancestor .current_page_ancestor ul ul {}
+.pagenav .current_page_ancestor .current_page_ancestor .current_page_item ul ul,
+.pagenav .current_page_ancestor .current_page_ancestor .current_page_ancestor ul ul {}
+
+/* == WordPress CSS - Default WordPress Widgets == */
+
+.widget {}
+
+/* links widget */
+.widget_links {}
+.widget_links ul {}
+.widget_links ul li {}
+.widget_links ul li a {}
+
+/* meta widget */
+.widget_meta {}
+.widget_meta ul {}
+.widget_meta ul li {}
+.widget_meta ul li a {}
+
+/* pages widget */
+.widget_pages {}
+.widget_pages ul {}
+.widget_pages ul li {}
+.widget_pages ul li a {}
+
+/* recent-posts widget */
+.widget_recent_entries {}
+.widget_recent_entries ul {}
+.widget_recent_entries ul li {}
+.widget_recent_entries ul li a {}
+
+/* archives widget */
+.widget_archive {}
+.widget_archive ul {}
+.widget_archive ul li {}
+.widget_archive ul li a {}
+.widget_archive select {}
+.widget_archive option {}
+
+/* tag-cloud widget */
+.widget_links {}
+.widget_links li:after {}
+.widget_links li:before {}
+.widget_tag_cloud {}
+.widget_tag_cloud a {}
+.widget_tag_cloud a:after {}
+.widget_tag_cloud a:before {}
+
+/* calendar widget */
+.widget_calendar {}
+#calendar_wrap {}
+#calendar_wrap th {}
+#calendar_wrap td {}
+#wp-calendar tr td {}
+#wp-calendar caption {}
+#wp-calendar a {}
+#wp-calendar #today {}
+#wp-calendar #prev {}
+#wp-calendar #next {}
+#wp-calendar #next a {}
+#wp-calendar #prev a {}
+
+/* category widget */
+.widget_categories {}
+.widget_categories ul {}
+.widget_categories ul li {}
+.widget_categories ul ul.children {}
+.widget_categories a {}
+.widget_categories select{}
+.widget_categories select#cat {}
+.widget_categories select.postform {}
+.widget_categories option {}
+.widget_categories .level-0 {}
+.widget_categories .level-1 {}
+.widget_categories .level-2 {}
+.widget_categories .level-3 {}
+
+/* recent-comments widget */
+.recentcomments {}
+#recentcomments {}
+#recentcomments li {}
+#recentcomments li a {}
+.widget_recent_comments {}
+
+/* search widget */
+#searchform {}
+.widget_search {}
+.screen-reader-text {}
+
+/* text widget */
+.textwidget {}
+.widget_text {}
+.textwidget p {}
+
+/* == WP CSS - Comment Styles == */
+
+.commentlist .reply {}
+.commentlist .reply a {}
+
+.commentlist .alt {}
+.commentlist .odd {}
+.commentlist .even {}
+.commentlist .thread-alt {}
+.commentlist .thread-odd {}
+.commentlist .thread-even {}
+.commentlist li ul.children .alt {}
+.commentlist li ul.children .odd {}
+.commentlist li ul.children .even {}
+
+.commentlist .vcard {}
+.commentlist .vcard cite.fn {}
+.commentlist .vcard span.says {}
+.commentlist .vcard img.photo {}
+.commentlist .vcard img.avatar {}
+.commentlist .vcard cite.fn a.url {}
+
+.commentlist .comment-meta {}
+.commentlist .comment-meta a {}
+.commentlist .commentmetadata {}
+.commentlist .commentmetadata a {}
+
+.commentlist .parent {}
+.commentlist .comment {}
+.commentlist .children {}
+.commentlist .pingback {}
+.commentlist .bypostauthor {}
+.commentlist .comment-author {}
+.commentlist .comment-author-admin {}
+
+.commentlist {}
+.commentlist li {}
+.commentlist li p {}
+.commentlist li ul {}
+.commentlist li ul.children li {}
+.commentlist li ul.children li.alt {}
+.commentlist li ul.children li.byuser {}
+.commentlist li ul.children li.comment {}
+/* .commentlist li ul.children li.depth-{id} {} */
+.commentlist li ul.children li.bypostauthor {}
+.commentlist li ul.children li.comment-author-admin {}
+
+#cancel-comment-reply {}
+#cancel-comment-reply a {}
+
+/* == WP CSS - body_class() == */
+
+.rtl {}
+.home {}
+.blog {}
+.archive {}
+.date {}
+.search {}
+.paged {}
+.attachment {}
+.error404 {}
+/* .single .postid-(id) {} */
+/* .attachmentid-(id) {} */
+/* .attachment-(mime-type) {} */
+.author {}
+/* .author-(user_nicename) {} */
+.category {}
+/* .category-(slug) {} */
+.tag {}
+/* .tag-(slug) {} */
+.page-parent {}
+/*
+.page-child parent-pageid-(id) {}
+.page-template page-template-(template file name) {}
+*/
+.search-results {}
+.search-no-results {}
+.logged-in {}
+/* .paged-(page number) {} */
+/* .single-paged-(page number) {} */
+/* .page-paged-(page number) {} */
+/* .category-paged-(page number) {} */
+/* .tag-paged-(page number) {} */
+/* .date-paged-(page number) {} */
+/* .author-paged-(page number) {} */
+/* .search-paged-(page number) {} */
+
+/* == WP CSS - post_class() == */
+
+.post-id {}
+.post {}
+.page {}
+.attachment {}
+.sticky {}
+.hentry {}
+.category-misc {}
+.category-example {}
+.tag-news {}
+.tag-wordpress {}
+.tag-markup {}

data/stylesheets/wordpress/_page.scss

@@ -1,364 +1 @@
-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));
-          }
-        }
-      }
-    }
-  }
-}