staticmatic2 2.0.0

data/website/src/helpers/content_helper.rb

@@ -0,0 +1,10 @@
+module ContentHelper
+  def content_navigation(*pages)
+    output = "<ul>"
+    pages.each do |page|
+      anchor = page.downcase.gsub(/\s+/, "_").gsub(/\W+/, "")
+      output << %Q{<li><a href="##{anchor}">#{page}</a></li>}
+    end
+    output << "</ul>"
+  end
+end

data/website/src/layouts/default.haml

@@ -0,0 +1,15 @@
+!!!
+%html
+  %head
+    %title StaticMatic Documentation
+    %link{:rel => "stylesheet", :href => "/stylesheets/screen.css", :media => "screen"}
+  %body
+    #page
+      #header
+        #logo StaticMatic
+        #menu
+          %ul
+            %li= link "Home", "/"
+            %li= link "Documentation", "/docs/getting_started.html"
+            %li= link "Development"
+      #content= yield

data/website/src/pages/development.haml

@@ -0,0 +1,9 @@
+%h3 Source Code
+
+%p 
+  You can get the source code from 
+  = link "Github", "http://github.com/staticmatic/staticmatic/tree/master"
+  \:
+  
+.code git clone git@github.com:staticmatic/staticmatic.git
+

data/website/src/pages/docs/_menu.haml

@@ -0,0 +1,4 @@
+%ul
+  %li= link "Getting Started", "/docs/getting_started"
+  %li= link "Compass Integration", "/docs/compass_integration"
+  %li= link "Helpers", "/docs/helpers"

data/website/src/pages/docs/_requires_prerelease.haml

@@ -0,0 +1,4 @@
+%p.notice 
+  You'll need to install the pre-release version of StaticMatic to use this feature: 
+
+  %kbd gem install staticmatic --pre

data/website/src/pages/docs/compass_integration.haml

@@ -0,0 +1,54 @@
+%h1 Compass Integration
+
+= partial "requires_prerelease"
+
+= content_navigation("What is Compass?", "Using Compass with StaticMatic", "Using Compass's CSS Frameworks")
+
+:markdown
+  <a id="what_is_compass"></a>
+  ## What is Compass?
+  
+  Compass is simply awesome.  It gives you a access huge amount of stylesheet libraries that take much of the duplication out of authoring stylesheets.
+  
+  Check out the code for adding borders to a box:
+  
+      .box {
+        @include border-radius(5px)
+      }
+  
+  This compiles to:
+  
+      .box {
+        -moz-border-radius: 5px;
+        -webkit-border-radius: 5px;
+        -o-border-radius: 5px;
+        -ms-border-radius: 5px;
+        -khtml-border-radius: 5px;
+        border-radius: 5px;
+      }
+  
+  Compass also comes with a port of the popular [Blueprint](http://www.blueprintcss.org/) CSS framework and has many plugin frameworks such as [Susy](http://susy.oddbird.net/) & [960.gs](http://960.gs/).
+  
+  <a id="using_compass_with_staticmatic"></a>
+  ## Using Compass with StaticMatic
+  
+  StaticMatic works with Compass out of the box.  You can start using all the great features Compass provides ([read about Compass's core framework here](http://compass-style.org/docs/reference/compass/)).
+  
+  It's also simple to customize the way Compass work.  When you [setup your project](getting_started.html), you'll have a file called <kbd>config/compass.rb</kbd>. You can use this file to configure Compass:
+  
+      output_style = :compressed
+  
+  For a run down of what you can configure in <kbd>config/compass.rb</kbd>, see [The Compass Configuration Reference](http://compass-style.org/docs/tutorials/configuration-reference/)
+
+  <a id="using_compasss_css_frameworks"></a>
+  ## Using Compass's CSS Frameworks
+  
+  Compass's command line tool can generate CSS framework base files for you.  This works seemlessly with StaticMatic.
+  
+  For example, if you'd like to use the Blueprint framework for your project simply run:
+  
+      > compass install blueprint
+  
+  in your project directory.  Compass will then install all of the base stylesheets you need to get started.
+  
+  [Read more about Compass's command line tool here](http://compass-style.org/docs/tutorials/command-line/).

data/website/src/pages/docs/getting_started.haml

@@ -0,0 +1,31 @@
+%h1 Getting Started
+
+:markdown
+  StaticMatic is designed to be quick & easy to get up and running.  
+  
+  ## Installing
+  
+  You'll need to have (Ruby)[http://ruby-lang.org] installed along with Ruby's package manager (RubyGems)[http://rubygems.org/pages/download].  If you're using OSX or Linux, chances are you're ready to go.  If you're using Windows, you may need to install Rubyy using one of the packages found (here)[http://www.ruby-lang.org/en/downloads/].
+  
+  To install StaticMatic, open a terminal window and run:
+  
+      > gem install staticmatic
+      
+  If everything is set up correctly, you should now be able to run:
+  
+      > staticmatic -v
+      
+  and see a version number.
+  
+  Congratulations - you're ready to start creating your first StaticMatic site!
+
+  ## Creating a site
+  
+  Open a terminal and run:
+  
+      > staticmatic setup my-first-site
+  
+  and StaticMatic will create a set of files for you to get started.
+  
+  
+

data/website/src/pages/docs/helpers.haml

@@ -0,0 +1 @@
+%h1 Helpers

data/website/src/pages/index.haml

@@ -0,0 +1,27 @@
+%h1 Static websites, the modern way
+
+%p 
+  Web developers are used to using dynamic and frameworks like
+  = link "Ruby on Rails", "http://www.rubyonrails.com"
+  to develop applications. When it comes to working with static, non-dynamic websites it can seem like stepping back in time.
+
+%h2 You'd like to
+
+%ul
+  %li.highlight Replace over-featured, cumbersome Content Management Systems
+  %li.highlight Speed up your prototypes
+
+%h2 Meet StaticMatic
+
+.columns
+  .left_column
+    %em Concise and terse Haml Templating
+    = img "homepage-templating.jpg"
+
+  .right_column
+    %em Live preview server for development
+    = img "homepage-previewing.jpg"
+  
+  %p 
+    %em Output full HTML pages
+    = img "homepage-build.jpg"

data/website/src/stylesheets/_base.scss

@@ -0,0 +1,43 @@
+//**
+//  Susy: Un-obtrusive grids for designers
+//  By: Eric A. Meyer and OddBird
+//  Site: www.oddbird.net/susy/
+//**
+
+// Font Sizes --------------------------------------------------------------
+
+$base-font-size: 16px;
+$base-line-height: 24px;
+
+// Grid --------------------------------------------------------------
+
+$total-cols: 12;
+$col-width: 4em;
+$gutter-width: 1em;
+$side-gutter-width: $gutter-width;
+
+// Don't move this @import above the GRID and FONT-SIZE variables.
+@import "susy/susy";
+
+// Colors --------------------------------------------------------------
+
+$base: #4c4c4c;
+$alt: #005498;
+
+// Fonts --------------------------------------------------------------
+
+@mixin sans-family {
+  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+}
+
+@mixin serif-family {
+  font-family: 'Adobe Caslon Pro', Caslon, Baskerville, Palatino, 'Palatino Linotype', "Hoefler Text", Garamond, "URW Palladio L", "Book Antiqua", Georgia, serif;
+}
+
+@mixin monospace-family {
+  font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif;
+}
+
+// OTHER MIXINS --------------------------------------------------------------
+// Mixins set here will be available in defaults, screen, print and IE
+// Or anywhere you import either base.sass or defaults.sass

data/website/src/stylesheets/_defaults.scss

@@ -0,0 +1,260 @@
+//** DEFAULT STYLES **//
+
+// Based on the work of:
+// Andy Clarke: http://forabeautifulweb.com/
+
+// Imports --------------------------------------------------------------*/
+
+@import "base";
+@import "susy/reset";
+
+/* Body --------------------------------------------------------------*/
+
+body {
+  @include serif-family;
+  color: $base;
+}
+
+/* Links --------------------------------------------------------------*/
+
+a {
+  &:link, &:visited {
+    color: $alt;
+  }
+  &:focus, &:hover, &:active {
+    color: darken($alt,5);
+    text-decoration: none;
+  }
+  img {
+    border: none;
+  }
+}
+
+/* Headings --------------------------------------------------------------*/
+
+h1, h2, h3, h4, h5, h6 { 
+  font-weight: normal;
+  img {
+    margin: 0;
+  }
+}
+
+h1 { 
+  @include adjust-font-size-to(32px);
+  @include trailer(1,32px);
+}
+
+h2 { 
+  @include adjust-font-size-to(24px);
+  @include trailer(1,24px);  
+}
+
+h3 {
+  @include adjust-font-size-to(18px);
+  @include trailer(1,18px);
+}
+
+h4 {
+  @include adjust-font-size-to(16px);
+  @include trailer(1,16px);
+}
+
+h5, h6 { 
+  @include trailer(1);
+  font-weight: bold;
+}
+
+/* Text --------------------------------------------------------------*/
+
+cite, em, dfn { 
+  font-style: italic;
+}
+
+strong, dfn { 
+  font-weight: bold;
+}
+
+sup, sub { 
+  line-height: 0;
+}
+
+abbr, acronym { 
+  border-bottom: 1px dotted;
+  cursor: help;
+}
+
+address {
+  @include trailer;
+  font-style: italic;
+}
+
+ins { 
+  text-decoration: underline;
+}
+
+del { 
+  text-decoration: line-through;
+}
+
+pre, code, tt, kbd {
+  // margin: $base-rhythm-unit {
+  //   left: -$base-rhythm-unit;
+  // };
+  // padding: $base-rhythm-unit;
+  // border-left: 1px dotted;
+
+  @include monospace-family;
+  font-size: 0.9em
+
+}
+
+pre { 
+  white-space: pre;
+}
+
+code { 
+  display: block;
+}
+
+q {
+  font-style: italic;
+  em {
+    font-style: normal;
+  } 
+}
+
+p {
+  @include trailer;
+}
+
+blockquote, q {
+  quotes : "" "";
+}
+
+blockquote { 
+  margin: $base-rhythm-unit {
+    left: -$base-rhythm-unit;
+  };
+  padding-left: $base-rhythm-unit;
+  border-left: 1px solid;
+  @include serif-family;
+  font-style: italic;
+}
+
+blockquote, q {
+  &:before, &:after { 
+    content: "";
+  }
+}
+
+/* Replaced --------------------------------------------------------------*/
+
+img {
+  vertical-align: bottom;
+}
+
+/* Lists --------------------------------------------------------------*/
+
+@mixin list-default($ol: false) {
+  margin: 0 $base-rhythm-unit $base-rhythm-unit 0;
+  @if $ol {
+    list-style: decimal;
+  } @else {
+    list-style: disc;
+  } 
+}
+
+@mixin no-style-list {
+  @include no-bullets;
+  margin: 0;
+  padding: 0;
+}
+
+ol {
+  @include list-default(ol);
+}
+
+ul {
+  @include list-default;
+}
+
+li {
+  ul, ol { 
+    list-style-type: circle;
+    margin: 0 $base-rhythm-unit $base-rhythm-unit*.5;
+  }
+}
+
+dl {
+  @include trailer;
+  @include leading-border(1px);
+  dt {
+    @include adjust-font-size-to(18px);
+    @include trailer(.5,18px);
+  }
+}
+
+dd {
+  @include trailer;
+  @include trailing-border(1px);
+}
+
+/* Tables --------------------------------------------------------------*/
+/* tables still need 'cellspacing="0"' in the markup */
+
+table {
+  @include trailer;
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+table, td, th { 
+  vertical-align: top;
+}
+
+th, thead th {
+  font-weight: bold;
+}
+
+th, td, caption {
+  padding: $base-rhythm-unit*.5;
+  text-align: left;
+  font-weight: normal;
+}
+
+th, td {
+  @include trailing-border(1px,.5);
+}
+
+tfoot { 
+  @include adjust-font-size-to(14px);
+}
+
+caption {
+  @include adjust-font-size-to(24px);
+  @include trailer(1,24px);
+}
+
+/* Forms --------------------------------------------------------------*/
+
+fieldset {
+  @include trailer;
+  @include rhythm-borders(1px);
+}
+
+legend {
+  @include adjust-font-size-to(18px);
+  font-weight: bold;
+}
+
+label {
+  font-weight: bold;
+}
+
+textarea, input:not([type="radio"]) {
+  // box-sizing will help us control the width of inputs
+  // which are otherwise very hard to manage in the grid.
+  @include box-sizing(border-box);
+  width: 100%;
+}