gridpaper 0.0.5

data/.gitignore

@@ -0,0 +1,10 @@
+*.gem
+.bundle
+Gemfile.lock
+pkg/*
+.DS_Store
+*.sassc
+*.scssc
+.sass-cache
+.scss-cache
+.css

data/Gemfile

@@ -0,0 +1,4 @@
+source "http://rubygems.org"
+
+# Specify your gem's dependencies in gridpaper.gemspec
+gemspec

data/Guardfile

@@ -0,0 +1,33 @@
+require 'guard/guard'
+require 'colorize'
+
+module ::Guard
+  class RakeInstall < Guard
+    def start
+
+    end
+
+    def stop
+
+    end
+
+    def reload
+      stop
+      start
+    end
+
+    def run_all
+      true
+    end
+
+    def run_on_change(paths)
+      `rake install`
+    end
+
+  end
+end
+
+# Available options: :pidfile, :port, :executable
+guard 'rake-install' do
+  watch %r{.+}
+end

data/README.rdoc

@@ -0,0 +1,74 @@
+= Gridpaper - A CSS Framework Build On Top of SASS
+
+Gridpaper is a simple SASS framework which puts to work some of the nifty features of SASS in a set of pre-build mixins.
+
+== Use
+
+=== Install
+
+  gem install gridpaper
+
+=== Generate
+
+  cd /path/to/project
+  gridpaper generate
+
+The <tt>gridpaper generate</tt> command is also aliased to:
+  gridpaper g
+  gridpaper new
+  gridpaper setup
+  gridpaper add
+
+=== Options
+
+The <tt>gridpaper</tt> command takes the following options
+
+  --scss
+  # Use SCSS syntax (default is SASS)
+
+  --stylesheets-dir STRING
+  # the name of your stylesheets directory (default is "stylesheets")
+
+== Development
+
+=== Changelog
+
+- Nov 23, 2011 - Versioned to 0.0.4
+- Nov 23, 2011 - Versioned to 0.0.3
+- Nov 23, 2011 - Basic generator is functional, two syntaxes available: SASS and SCSS
+
+=== TODO
+
+- Flesh out the framework
+- Documentation
+- Examples
+
+---
+
+=== Contribute
+
+Feel free to fork and change!
+
+---
+
+=== License (MIT)
+
+Copyright (C) 2011 by Christian Naths
+
+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/Rakefile

@@ -0,0 +1,10 @@
+require 'bundler/gem_tasks'
+require 'fileutils'
+require 'colorize'
+
+desc "Build SCSS templates"
+task 'convert' do
+  FileUtils.mkdir("scss") unless File.exists?("templates/scss")
+  `sass-convert -R templates/sass templates/scss --from sass --to scss --unix-newlines`
+  puts "templates converted to SCSS in 'templates/scss'".green
+end

data/bin/gridpaper

@@ -0,0 +1,62 @@
+#!/usr/bin/env ruby
+
+require File.dirname(__FILE__) + '/../lib/gridpaper'
+
+
+# :name is optional, otherwise uses the basename of this executable
+program :name, 'Gridpaper'
+program :version, Gridpaper::VERSION
+program :description, 'A CSS Framework Built On Top of SASS'
+
+
+command :generate do |c|
+  # Describe this command
+  c.syntax = 'gridpaper generate <path>'
+  c.description = 'Creates a new gridpaper project'
+
+  # options
+  c.option '--scss', 'Use the alternate SCSS sytnax'
+  c.option '--stylesheets-dir STRING', String, 'Use a different directory to hold your stylesheets'
+
+  c.action do |args, options|
+    path = args[0] || "."
+    options.scss ? syntax = :scss : syntax = :sass
+    stylesheets_dir = options.stylesheets_dir || "stylesheets"
+    puts stylesheets_dir
+
+    Gridpaper::Generate.new(path, stylesheets_dir, syntax)
+  end
+
+end
+
+command :watch do |c|
+  c.syntax = 'gridpaper watch'
+  c.description = 'Watches for changes in your input file and generates CSS to your output file.'
+
+  # c.option '--stylesheets-dir STRING', String, 'Use a different directory to hold your stylesheets'
+
+  c.action do |args, options|
+    stylesheets_dir = options.stylesheets_dir || "stylesheets"
+    # working_path = Dir.pwd
+
+    input_path = args[0] || "stylesheets/sass"
+    # input_path = File.expand_path File.join(working_path, input_path)
+    output_path = args[1] || "../stylesheets"
+    # output_path = File.expand_path File.join(working_path, output_path)
+
+    Gridpaper::Watch.new(input_path, output_path)
+  end
+
+end
+
+def check_input_path(working_path)
+  unless File.exists?(File.join(working_path, 'sass')) || File.exists?(File.join(working_path, 'scss'))
+    puts "Could not find a directory named './#{ stylesheets_dir }/sass' or './#{ stylesheets_dir }/scss'. Aborting.".red
+    return false
+  end
+end
+
+alias_command :g, :generate
+alias_command :new, :generate
+alias_command :setup, :generate
+alias_command :add, :generate

data/examples/index.html

@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Gridpaper</title>
+  <link rel="stylesheet" type="text/css" href="stylesheets/styles.css" />
+</head>
+<body>
+
+  <header>
+    <h1>Gridpaper</h1>
+  </header>
+
+  <div id="content">
+
+    <section id="headers">
+      <h4>Headers</h4>
+      <hgroup>
+        <h1>1st Header</h1>
+        <h2>2nd Header</h2>
+        <h3>3rd Header</h3>
+        <h4>4th Header</h4>
+        <h5>5th Header</h5>
+        <h6>6th Header</h6>
+      </hgroup>
+    </section>
+
+
+    <section id="columns-example">
+      <h4>Grid Columns</h4>
+
+      <div id="two-columns" class="row">
+        <div class="grid-column"></div>
+        <div class="grid-column"></div>
+      </div>
+
+      <div id="three-columns" class="row">
+        <div class="grid-column"></div>
+        <div class="grid-column"></div>
+        <div class="grid-column"></div>
+      </div>
+
+      <div id="four-columns" class="row">
+        <div class="grid-column"></div>
+        <div class="grid-column"></div>
+        <div class="grid-column"></div>
+        <div class="grid-column"></div>
+      </div>
+
+      <div id="six-columns" class="row">
+        <div class="grid-column"></div>
+        <div class="grid-column"></div>
+        <div class="grid-column"></div>
+        <div class="grid-column"></div>
+        <div class="grid-column"></div>
+        <div class="grid-column"></div>
+      </div>
+
+      <div id="eight-columns" class="row">
+        <div class="grid-column"></div>
+        <div class="grid-column"></div>
+        <div class="grid-column"></div>
+        <div class="grid-column"></div>
+        <div class="grid-column"></div>
+        <div class="grid-column"></div>
+        <div class="grid-column"></div>
+        <div class="grid-column"></div>
+      </div>
+
+    </section>
+
+    <section id="text-columns-example">
+      <h4>Text Columns</h4>
+      <h5> Two Columns</h5>
+      <div id="two-text-columns" class="text-columns">
+        <p>Pellentesque placerat rhoncus viverra. Nunc a enim at est egestas semper. Pellentesque ultrices dapibus magna, non dapibus ipsum pharetra non. Donec viverra, velit in lobortis commodo, ante erat faucibus nisl, ut lobortis enim dolor euismod libero. Maecenas blandit ullamcorper sem, et rutrum sem sagittis vel. Nulla rhoncus ante fermentum leo dictum cursus. In bibendum vehicula lectus, id imperdiet libero tempus ac. Aenean eget tellus ac tortor facilisis venenatis. Donec ut libero ante, a mattis justo. Duis ullamcorper nulla egestas ante vehicula in posuere nunc congue. Aenean sit amet odio at magna viverra vulputate. In vestibulum, ante quis rhoncus pulvinar, mauris odio lacinia lacus, at auctor enim nisi sed elit. In venenatis tincidunt sollicitudin. Aliquam interdum orci vel turpis condimentum feugiat.</p>
+      </div>
+
+      <h5> Three Columns</h5>
+      <div id="three-text-columns" class="text-columns">
+        <p>Pellentesque placerat rhoncus viverra. Nunc a enim at est egestas semper. Pellentesque ultrices dapibus magna, non dapibus ipsum pharetra non. Donec viverra, velit in lobortis commodo, ante erat faucibus nisl, ut lobortis enim dolor euismod libero. Maecenas blandit ullamcorper sem, et rutrum sem sagittis vel. Nulla rhoncus ante fermentum leo dictum cursus. In bibendum vehicula lectus, id imperdiet libero tempus ac. Aenean eget tellus ac tortor facilisis venenatis. Donec ut libero ante, a mattis justo. Duis ullamcorper nulla egestas ante vehicula in posuere nunc congue. Aenean sit amet odio at magna viverra vulputate. In vestibulum, ante quis rhoncus pulvinar, mauris odio lacinia lacus, at auctor enim nisi sed elit. In venenatis tincidunt sollicitudin. Aliquam interdum orci vel turpis condimentum feugiat.</p>
+      </div>
+
+      <h5> Four Columns</h5>
+      <div id="four-text-columns" class="text-columns">
+        <p>Pellentesque placerat rhoncus viverra. Nunc a enim at est egestas semper. Pellentesque ultrices dapibus magna, non dapibus ipsum pharetra non. Donec viverra, velit in lobortis commodo, ante erat faucibus nisl, ut lobortis enim dolor euismod libero. Maecenas blandit ullamcorper sem, et rutrum sem sagittis vel. Nulla rhoncus ante fermentum leo dictum cursus. In bibendum vehicula lectus, id imperdiet libero tempus ac. Aenean eget tellus ac tortor facilisis venenatis. Donec ut libero ante, a mattis justo. Duis ullamcorper nulla egestas ante vehicula in posuere nunc congue. Aenean sit amet odio at magna viverra vulputate. In vestibulum, ante quis rhoncus pulvinar, mauris odio lacinia lacus, at auctor enim nisi sed elit. In venenatis tincidunt sollicitudin. Aliquam interdum orci vel turpis condimentum feugiat.</p>
+      </div>
+    </section>
+
+    <section id="forms-example">
+      <h4>Forms</h4>
+
+      <form id="fake-form" action="#">
+        <fieldset>
+          <legend>Contact Us</legend>
+          <div class="field">
+            <label for="contact-name">Name:</label>
+            <input name="contact-name" type="text" placeholder="name" required autofocus>
+          </div>
+
+          <div class="field">
+            <label for="contact-email">Email:</label>
+            <input name="contact-email" type="email" placeholder="email" required>
+          </div>
+
+          <div class="field">
+            <label for="contact-message">Message:</label>
+            <textarea id="contact-message">Type your message here</textarea>
+          </div>
+
+          <div class="field">
+            <input name="login" type="submit" value="Login">
+          </div>
+        </fieldset>
+      </form>
+    </section>
+
+
+  </div><!-- /content -->
+
+  <footer>
+  </footer>
+
+</body>
+</html>

data/examples/stylesheets/sass/_columns.sass

@@ -0,0 +1,51 @@
+#columns-example
+  .row
+    overflow: hidden
+
+    .grid-column
+      min-height: 15em
+      margin: 0.5em 0
+      @include showgrid
+      background-color: #f1f1f1
+
+
+  #two-columns
+    div
+      @include column
+      @include span(12, -1px)
+
+  #three-columns
+    div
+      @include column
+      @include span(8, -1px)
+
+  #four-columns
+    div
+      @include column
+      @include span(6, -1px)
+
+  #six-columns
+    div
+      @include column
+      @include span(4, -1px)
+
+  #eight-columns
+    div
+      @include column
+      @include span(3, -1px)
+
+
+#text-columns-example
+
+  .text-columns
+    @include showgrid
+    margin-bottom: 1.5em
+
+  #two-text-columns
+    @include text-columns(2)
+
+  #three-text-columns
+    @include text-columns(3)
+
+  #four-text-columns
+    @include text-columns(4)

data/examples/stylesheets/sass/_settings.sass

@@ -0,0 +1,7 @@
+// Define your own grid
+$grid-columns: 24
+$grid-column-width: 24px
+$grid-gutter-width: 16px
+
+// Set your base font size
+$base-font-size: 16px

data/examples/stylesheets/sass/styles.sass

@@ -0,0 +1,38 @@
+@import settings
+@import ../../../templates/sass/gridpaper/all
+
+@import columns
+
+body
+  @include container
+  color: #333
+
+p
+  line-height: 1.5em
+  margin-bottom: 1.5em
+  &:last-child
+    margin-bottom: 0
+
+section, header, footer
+  overflow: hidden
+  margin-bottom: 1.5em
+  padding-bottom: 1.5em
+
+.box
+  @include column
+  @include span(4)
+
+.fake-button
+  @include border-radius(0px 30px, true)
+  @include box-shadow(4px 4px 4px rgba(0,0,0,0.2))
+  @include box-gradient(#eee, #aaa)
+
+section h4:first-child
+  margin-bottom: 0.5em
+  padding: 0.25em 0.5em
+  color: #fff
+  background: #333
+
+.something
+  display: block
+  position: relative

data/examples/stylesheets/scss/nested_folder/_imported_file.scss

@@ -0,0 +1,3 @@
+body {
+  display: block;
+}

data/examples/stylesheets/scss/something.scss

@@ -0,0 +1 @@
+@import "nested_folder/_imported_file";

data/gridpaper.gemspec

@@ -0,0 +1,26 @@
+# -*- encoding: utf-8 -*-
+$:.push File.expand_path("../lib", __FILE__)
+require "gridpaper/version"
+
+Gem::Specification.new do |s|
+  s.name        = "gridpaper"
+  s.version     = Gridpaper::VERSION
+  s.authors     = ["Christian Naths"]
+  s.email       = ["christiannaths@gmail.com"]
+  s.homepage    = "http://christiannaths.com"
+  s.summary     = %q{A SASS Framework}
+  s.description = %q{Gridpaper is a CSS framework built on top of SASS.}
+
+  s.rubyforge_project = "Gridpaperform"
+
+  s.files         = `git ls-files`.split("\n")
+  s.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
+  s.executables   = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
+  s.require_paths = ["lib"]
+
+  s.add_dependency("commander", '>= 4.0.4')
+  s.add_dependency("sass", '>=3.1.7')
+  s.add_dependency("guard", '>=0.8.8')
+  s.add_dependency("guard-sass", '>=0.5.4')
+  s.add_dependency("colorize", '>= 0.5.8')
+end