pine 0.1.0

data/.gitignore

@@ -0,0 +1,4 @@
+*.gem
+.bundle
+Gemfile.lock
+pkg/*

data/Gemfile

@@ -0,0 +1,3 @@
+source "http://rubygems.org"
+gemspec
+

data/LICENSE

@@ -0,0 +1,20 @@
+Copyright (C) 2011 by Tobias Svensson
+
+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,171 @@
+# Pine
+
+CSS grid that smell of pine. In SCSS, based on [1140](http://cssgrid.net/) for
+[Compass](http://compass-style.org/). Pines are evergreen.
+
+## <a name="installation">Installation</a>
+
+The best way to install Pine is with RubyGems:
+
+    $ [sudo] gem install pine
+
+You can safely include the whole framework. Nothing is being mixed into the
+global scope by default:
+
+    require 'pine'
+
+And in your main SCSS file:
+
+    @import "pine";
+
+## <a name="reset">The Reset</a>
+
+Pine includes a very basic reset mixin which contains only the rules required
+in order to make the grid work. It is not intended to be a general CSS reset.
+
+    @include grid-reset;
+
+## <a name="grid">The Grid</a>
+
+### Basics
+
+Pine is a fluid, response 12-column grid, based on
+[1140](http://cssgrid.net/) by [Andy Taylor](http://www.andytlr.com/). To
+create a grid, simply include the container, row and column mixins:
+
+    .container {
+      @include grid-container;
+
+      .row {
+        @include grid-row;
+
+        // Define 3 4-column wide columns.
+        .column1 {
+          @include grid-column(4);
+        }
+
+        .column2 {
+          @include grid-column(4);
+        }
+
+        .column3 {
+          // Pass 'last' as an additional argument to indicate the last column
+          // in a row and clear the right margin.
+          @include grid-column(4, last);
+        }
+      }
+    }
+
+### Media queries
+
+Pine automatically generates media queries for each of your grid containers and
+columns to stack columns on top of each other if the browser window sizes
+reaches 767px or less. The following SCSS code:
+
+    .container {
+      @include grid-container;
+
+      .row {
+        @include grid-row;
+
+        .column1 {
+          @include grid-column(12);
+        }
+      }
+    }
+
+Compiles to:
+
+    .container {
+      padding-left: 20px;
+      padding-right: 20px;
+    }
+
+    @media handheld, only screen and (max-width: 767px) {
+      .container {
+        width: auto;
+        float: none;
+        margin-left: 0px;
+        margin-right: 0px;
+        padding-left: 20px;
+        padding-right: 20px;
+      }
+    }
+
+    .container .row {
+      width: 100%;
+      max-width: 1140px;
+      margin: 0 auto;
+      overflow: hidden;
+    }
+
+    .container .row .column1 {
+      width: 100.0%;
+      margin-right: 3.8%;
+      float: left;
+    }
+
+    @media handheld, only screen and (max-width: 767px) {
+      .container .row .column1 {
+        width: auto;
+        float: none;
+        margin-left: 0px;
+        margin-right: 0px;
+        padding-left: 20px;
+        padding-right: 20px;
+      }
+    }
+
+Of course it is possible to disable automatic media queries with:
+
+    $grid-media-queries: false;
+
+As opposed to 1140, Pine supports floating-point column widths:
+
+    @include grid-column(1.5);
+
+### Configuration
+
+Pine adds a few new things to the 1140 grid system. You can set the overall
+grid width with:
+
+    $grid-width: 1140px;
+
+Enable debug mode (background + border-bottom) with:
+
+    $grid-debug: true;
+
+And also change the color and borders used in debug mode:
+
+    $grid-debug-background: #FDD;
+    $grid-debug-border-bottom: 1px solid #977;
+
+### Internet Explorer
+
+To make all this work in Internet Explorer, simply import "pine/ie" into your
+Internet Explorer specific stylesheet before using any of the mixins.
+
+    @import "pine/ie";
+
+## <a name="contributing">Contributing</a>
+
+If you'd like to contribute to Pine, start by forking my repo on GitHub:
+
+[http://github.com/tobiassvn/pine](http://github.com/tobiassvn/pine)
+
+To get all of the dependencies, install the gem first. The best way to get
+your changes merged back into core is as follows:
+
+1. Clone down your fork
+1. Create a thoughtfully named topic branch to contain your change
+1. Hack away
+1. If you are adding new functionality, document it in the README
+1. Do not change the version number, I will do that on my end
+1. If necessary, rebase your commits into logical chunks, without errors
+1. Push the branch up to GitHub
+1. Send a pull request to the tobiassvn/pine project.
+
+## <a name="license">License</a>
+
+Copyright (c) 2011 Tobias Svensson. See LICENSE for further details.
+

data/Rakefile

@@ -0,0 +1,2 @@
+require "bundler/gem_tasks"
+

data/lib/pine.rb

@@ -0,0 +1,9 @@
+require "compass"
+
+module Pine
+  VERSION = "0.1.0"
+  COMPASS_REQUIRE_DIR = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+end
+
+Compass::Frameworks.register("pine", Pine::COMPASS_REQUIRE_DIR)
+

data/pine.gemspec

@@ -0,0 +1,22 @@
+# -*- encoding: utf-8 -*-
+$:.push File.expand_path("../lib", __FILE__)
+require "pine"
+
+Gem::Specification.new do |s|
+  s.name        = "pine"
+  s.version     = Pine::VERSION
+  s.authors     = ["Tobias Svensson"]
+  s.email       = ["tob@tobiassvensson.co.uk"]
+  s.homepage    = "http://github.com/tobiassvn/pine"
+  s.summary     = %q{CSS grid that smells of pine. In SCSS, for Compass.}
+  s.description = s.summary
+
+  s.rubyforge_project = "pine"
+
+  s.files         = `git ls-files`.split("\n")
+  s.require_paths = ["lib"]
+  s.has_rdoc      = false
+
+  s.add_dependency "compass", ">= 0.10"
+end
+

data/stylesheets/_pine.scss

@@ -0,0 +1,3 @@
+@import "pine/reset";
+@import "pine/grid";
+

data/stylesheets/pine/_grid.scss

@@ -0,0 +1,69 @@
+$grid-width: 1140px !default;
+$grid-debug: false !default;
+$grid-debug-background: #FDD !default;
+$grid-debug-border-bottom: 1px solid #977 !default;
+$grid-media-queries: true !default;
+$grid-ie-mode: false !default;
+
+@mixin grid-container {
+  padding-left: 20px;
+  padding-right: 20px;
+
+  @if $grid-media-queries {
+    @media handheld, only screen and (max-width: 767px) {
+      width: auto;
+      float: none;
+      margin-left: 0px;
+      margin-right: 0px;
+      padding-left: 20px;
+      padding-right: 20px;
+    }
+  }
+}
+
+@mixin grid-row {
+  width: 100%;
+  max-width: $grid-width;
+  margin: 0 auto;
+  overflow: hidden;
+}
+
+@mixin grid-column($size: 1, $last: false) {
+  $column-margin: 3.8%;
+  $column-width: 4.85%;
+
+  @if $size < 1 {
+    @warn "Grid column sizes smaller than one are not supported by pine.";
+  }
+
+  // Internet Explorer rounds sub-pixels up instead of down, so use slightly
+  // smaller column sizes.
+  @if $grid-ie-mode { $column-width: 4.8; }
+
+  width: $size * $column-width + $size * $column-margin - $column-margin;
+
+  @if $last {
+    margin-right: 0px;
+  } @else {
+    margin-right: $column-margin;
+  }
+
+  @if $grid-debug {
+    background: $grid-debug-background;
+    border-bottom: $grid-debug-border-bottom;
+  }
+
+  float: left;
+
+  @if $grid-media-queries {
+    @media handheld, only screen and (max-width: 767px) {
+      width: auto;
+      float: none;
+      margin-left: 0px;
+      margin-right: 0px;
+      padding-left: 20px;
+      padding-right: 20px;
+    }
+  }
+}
+

data/stylesheets/pine/_ie.scss

@@ -0,0 +1,2 @@
+$grid-ie-mode: true;
+

data/stylesheets/pine/_reset.scss

@@ -0,0 +1,34 @@
+@mixin grid-reset {
+  html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
+  pre, a, abbr, address, cite, code, del, dfn, em, img, ins, q, small, strong,
+  sub, sup, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
+  caption, tbody, tfoot, thead, tr, th, td {
+    border: 0;
+    margin: 0;
+    padding: 0;
+  }
+
+  article, aside, figcaption, hgroup, footer, header, nav, section, video,
+  object {
+    display: block;
+  }
+
+  a img{
+    border: 0;
+  }
+
+  figure {
+    position: relative;
+    display: block;
+
+    img {
+      display: block;
+      width: 100%;
+    }
+  }
+
+  img, object, embed {
+    max-width: 100%;
+  }
+}
+

metadata

@@ -0,0 +1,67 @@
+--- !ruby/object:Gem::Specification
+name: pine
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+  prerelease: 
+platform: ruby
+authors:
+- Tobias Svensson
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2011-10-20 00:00:00.000000000Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: &70174221894100 !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0.10'
+  type: :runtime
+  prerelease: false
+  version_requirements: *70174221894100
+description: CSS grid that smells of pine. In SCSS, for Compass.
+email:
+- tob@tobiassvensson.co.uk
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- .gitignore
+- Gemfile
+- LICENSE
+- README.md
+- Rakefile
+- lib/pine.rb
+- pine.gemspec
+- stylesheets/_pine.scss
+- stylesheets/pine/_grid.scss
+- stylesheets/pine/_ie.scss
+- stylesheets/pine/_reset.scss
+homepage: http://github.com/tobiassvn/pine
+licenses: []
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: pine
+rubygems_version: 1.8.10
+signing_key: 
+specification_version: 3
+summary: CSS grid that smells of pine. In SCSS, for Compass.
+test_files: []