para-grids 0.0.2

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 10c079ed0f3d33a900a9bcd2ef2b9ba4859eb4a7
+  data.tar.gz: 06a921beb2d8d1fa1db151e839bfa46014835baa
+SHA512:
+  metadata.gz: 8416958f943c7546469c856eb59c143bbbdf37dd7dc1476a74bc3b60e5f691430235ac0a580cc8937bc51c400700ee61904d51403bbd271001c423468c389ea5
+  data.tar.gz: 2bd3901c4d865ffe4aba0e5b8eb1c4afddac493e9608faa299a6b5a2ae220d56edc49728b04a1e0599a815131e3d8d8b9536e1196b83a1bd2e3663b60125de71

data/.gitignore

@@ -0,0 +1,17 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp

data/Gemfile

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

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2013 Ian Thomas
+
+MIT License
+
+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,125 @@
+# Para
+
+> ORIGIN from Greek para ‘beside’;
+
+Para is a simple grid system developed for use internally at [finn](http://www.finncomms.com) and borrows heavily from the thinking of our good friend [@csswizardry](http://www.twitter.com/csswizardy) creator of [inuit css](www.github.com/csswizardy/inuit.css) and [csswizardry-grids](http://www.github.com/csswizardry/csswizardry-grids).
+
+Para adds basic grids to your project as a compass extension.
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+    gem 'para-grids'
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install para
+
+## Usage
+
+Setting up a grid using the defaults is as simple as
+
+```sass
+@import "compass";
+@import "para";
+
+@include initialise-grid(); //we are English!
+
+@inlude setup-grid();
+```
+
+### Getting Responsive
+
+Para includes features to help make your grids respond to device widths and you can set them up as follows
+
+```sass
+@import "compass";
+@import "para";
+
+@include initialise-grid();
+
+@include setup-grid();
+$tablet: '(min-width: 500px)';
+
+@include media-query($tablet){
+  @include setup-grid('tablet-');
+}
+```
+
+Of course, there are neater ways of doing this, and we favour the following:
+
+```sass
+@import "compass";
+@import "para";
+
+$breakpoints: palm, tablet, portable, desk, wide, huge;
+$vars: $palm, $tablet, $portable, $desk, $wide, $huge;
+
+@for $i from 1 through length($breakpoints){
+  @include media-query(#{nth($vars, $i)}){
+    @include setup-grid("#{nth($breakpoints, $i)-"});
+   }
+}
+```
+
+We define the breakpoints above for you as defaults, but you can set them to be whatever you like. 
+
+### In your html
+
+To use the grids that para spits out, simply scaffold as follows:
+
+```html
+<div class="grid">
+  <div class="grid__item one-third">Column 1</div>
+  <div class="grid__item two-thirds">Column 2</div>
+</div>
+```
+
+When you run `setup-grid()` what you are actually doing is creating a namespaced set of widths that can be used as secondary classes to define column sizes. Sounds complicated, but it's very simple.
+
+Currently para supports columns up to `eigths` but more may well be added in the future.
+
+To use a namespaced grid such as those created in the second responsive example above, simply work from mobile outwards and use the namespaced classes to size as you want.
+
+```html
+<div class="grid">
+  <div class="grid__item one-whole portable-one-third">...</div>
+  <div class="grid__item one-whole portable-two-thirds">...</div>
+</div>
+```
+
+### Pushing and Pulling
+
+Para also includes the ability to create push- and pull- classes for your namespaced grid widths. It's as simple as adding:
+
+```sass
+@include setup-push-pull();
+```
+
+You can include a namespace inside the mixin to achieve classes that match your namespaced grid widths (e.g. `@include setup-push-pull('palm-');`).
+
+Using these classes follows the same BEM format as the grid widths:
+
+```html
+<div class="grid">
+  <div class="grid__item one-third push-two-thirds">...</div>
+  <div class="grid__item two-thirds pull_one-third">...</div>
+</div>
+```
+
+## Contributing
+
+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
+
+## Big Thanks
+
+Once again, big thanks to Harry for his awesome work that has been a big influence on this project. [Check him out](http://www.csswizardy.com) - he's a very clever fella!

data/Rakefile

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

data/lib/para/version.rb

@@ -0,0 +1,3 @@
+module Para
+  VERSION = "0.0.2"
+end

data/lib/para.rb

@@ -0,0 +1,7 @@
+require "para/version"
+require "compass"
+
+module Para
+  extension_path = File.expand_path(File.join(File.dirname(__FILE__), '..'))
+  Compass::Frameworks.register('para', path: extension_path)
+end

data/para.gemspec

@@ -0,0 +1,23 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'para/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "para-grids"
+  spec.version       = Para::VERSION
+  spec.authors       = ["Ian Thomas"]
+  spec.email         = ["ian@ian-thomas.net"]
+  spec.description   = %q{'para', from the greek 'beside' and the latin meaning 'alongside', is a grid system of great simplicity for use internally but available for the world.}
+  spec.summary       = %q{A small grid framework that gets out of the way and lets the dev choose how they do things.}
+  spec.homepage      = "http://www.github.com/finndigital/para"
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files`.split($/)
+  spec.executables   = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
+  spec.test_files    = spec.files.grep(%r{^(test|spec|features)/})
+  spec.require_paths = ["lib"]
+
+  spec.add_development_dependency "bundler", "~> 1.3"
+  spec.add_development_dependency "rake"
+end

data/stylesheets/_para.scss

@@ -0,0 +1,6 @@
+@import "para/functions";
+@import "para/settings";
+@import "para/widths";
+@import "para/media";
+@import "para/push-pull";
+@import "para/grids";

data/stylesheets/para/_functions.scss

@@ -0,0 +1,4 @@
+@function column-width($numerator, $denominator){
+  $width: ( $numerator / $denominator ) * 100%;
+  @return $width;
+}

data/stylesheets/para/_grids.scss

@@ -0,0 +1,19 @@
+@mixin initialise-grid{
+  /*
+   * We want to be able to space the grid, but not use padding
+   */
+  .grid{
+    margin: 0 $base-grid-padding;
+  }
+
+  /*
+   * While there is a movement towards inline-block for grid elements, we favour
+   * display:block and floats
+   */
+  .grid__item{
+    @include box-sizing(border-box);
+    @include float(left);
+    padding-left: $base-gutter-width / 2;
+    padding-right: $base-gutter-width / 2;
+  }
+}

data/stylesheets/para/_media.scss

@@ -0,0 +1,5 @@
+@mixin media-query($query){
+  @media only screen and #{$query}{
+    @content;
+  }
+}

data/stylesheets/para/_push-pull.scss

@@ -0,0 +1,74 @@
+@mixin silent-relative{
+  position: relative;
+}
+
+@mixin setup-push($namespace: ''){
+
+  .#{$namespace}push-one-whole { left: 100%; @include silent-relative }
+
+  .#{$namespace}push-one-half { left: 50%; @include silent-relative }
+
+  .#{$namespace}push-one-third { left: 33.3333%; @include silent-relative }
+  .#{$namespace}push-two-thirds { left: 66.6666%; @include silent-relative }
+
+  .#{$namespace}push-one-quarter { left: 25%; @include silent-relative; } 
+  .#{$namespace}push-two-quarters { @extend .#{$namespace}push-one-half; }
+  .#{$namespace}push-three-quarters { left: 75%; @include silent-relative; }
+
+  .#{$namespace}push-one-fifth { left: 20%; @include silent-relative }
+  .#{$namespace}push-two-fifths { left: 40%; @include silent-relative }
+  .#{$namespace}push-three-fifths { left: 60%; @include silent-relative }
+  .#{$namespace}push-four-fifths { left: 80%; @include silent-relative }
+
+  .#{$namespace}push-one-sixth { left: 16.666%; @include silent-relative }
+  .#{$namespace}push-two-sixths { @extend .#{$namespace}push-one-third; }
+  .#{$namespace}push-three-sixths { @extend .#{$namespace}push-one-half; }
+  .#{$namespace}push-four-sixths { @extend .#{$namespace}push-two-thirds; }
+  .#{$namespace}push-five-sixths { left: 83.3333%; @include silent-relative }
+
+  .#{$namespace}push-one-eighth { width: column-width(1,8); }
+  .#{$namespace}push-two-eighths { @extend .#{$namespace}push-one-quarter; }
+  .#{$namespace}push-three-eighths { width: column-width(3,8); }
+  .#{$namespace}push-four-eighths { @extend .#{$namespace}push-one-half; }
+  .#{$namespace}push-five-eighths { width: column-width(5,8); }
+  .#{$namespace}push-six-eighths { @extend .#{$namespace}push-three-quarters; }
+  .#{$namespace}push-seven-eights { width: column-width(7,8); }
+}
+
+@mixin setup-pull($namespace: ''){
+
+  .#{$namespace}pull-one-whole { left: 100%; @include silent-relative; }
+
+  .#{$namespace}pull-one-half { left: -50%; @include silent-relative }
+
+  .#{$namespace}pull-one-third { left: -33.3333%; @include silent-relative }
+  .#{$namespace}pull-two-thirds { left: -66.6666%; @include silent-relative }
+
+  .#{$namespace}pull-one-quarter { left: -25%; @include silent-relative; } 
+  .#{$namespace}pull-two-quarters { @extend .#{$namespace}pull-one-half; }
+  .#{$namespace}pull-three-quarters { left: -75%; @include silent-relative; }
+
+  .#{$namespace}pull-one-fifth { left: -20%; @include silent-relative }
+  .#{$namespace}pull-two-fifths { left: -40%; @include silent-relative }
+  .#{$namespace}pull-three-fifths { left: -60%; @include silent-relative }
+  .#{$namespace}pull-four-fifths { left: -80%; @include silent-relative }
+
+  .#{$namespace}pull-one-sixth { left: column-width(-1,5); @include silent-relative }
+  .#{$namespace}pull-two-sixths { @extend .#{$namespace}pull-one-third; }
+  .#{$namespace}pull-three-sixths { @extend .#{$namespace}pull-one-half; }
+  .#{$namespace}pull-four-sixths { @extend .#{$namespace}pull-two-thirds; }
+  .#{$namespace}pull-five-sixths { left: column-width(-5,6); @include silent-relative }
+
+  .#{$namespace}pull-one-eighth { width: column-width(-1,8); }
+  .#{$namespace}pull-two-eighths { @extend .#{$namespace}pull-one-quarter; }
+  .#{$namespace}pull-three-eighths { width: column-width(-3,8); }
+  .#{$namespace}pull-four-eighths { @extend .#{$namespace}pull-one-half; }
+  .#{$namespace}pull-five-eighths { width: column-width(-5,8); }
+  .#{$namespace}pull-six-eighths { @extend .#{$namespace}pull-three-quarters; }
+  .#{$namespace}pull-seven-eights { width: column-width(-7,8); }
+}
+
+@mixin setup-push-pull($namespace: ''){
+  @include setup-push($namespace);
+  @include setup-pull($namespace);
+}

data/stylesheets/para/_settings.scss

@@ -0,0 +1,10 @@
+// media queries
+$palm: '(max-width:500px)'!default;
+$tablet: '(min-width: 501px) and (max-width:1023px)'!default;
+$portable: '(max-width:1023px)'!default;
+$desk: '(min-width: 1024px)'!default;
+$wide: '(min-width: 1200px)'!default;
+$huge: '(min-width: 1600px)'!default;
+
+$base-gutter-width: (30px/16px) * 1em!default;
+$base-grid-padding: $base-gutter-width!default;

data/stylesheets/para/_widths.scss

@@ -0,0 +1,34 @@
+@mixin setup-grid($namespace: ''){
+
+  .#{$namespace}one-whole { width: 100%; }
+
+  .#{$namespace}one-half { width: 50%; }
+
+  .#{$namespace}one-third { width: column-width(1, 3); }
+  .#{$namespace}two-thirds { width: column-width(2, 3); }
+
+  .#{$namespace}one-quarter { width: 25% } 
+  .#{$namespace}two-quarters { @extend .#{$namespace}one-half; }
+  .#{$namespace}three-quarters { width: 75% }
+
+  .#{$namespace}one-fifth { width: 20%; }
+  .#{$namespace}two-fifths { width: 40%; }
+  .#{$namespace}three-fifths { width: 60%; }
+  .#{$namespace}four-fifths { width: 80%; }
+
+  // Six column grid
+  .#{$namespace}one-sixth { width: column-width(1, 6); }
+  .#{$namespace}two-sixths { @extend .#{$namespace}one-third; }
+  .#{$namespace}three-sixths { @extend .#{$namespace}one-half; }
+  .#{$namespace}four-sixths { @extend .#{$namespace}two-thirds; }
+  .#{$namespace}five-sixths { width: column-width(5, 6); }
+
+  //Eight column grid
+  .#{$namespace}one-eighth { width: column-width(1,8); }
+  .#{$namespace}two-eighths { @extend .#{$namespace}one-quarter; }
+  .#{$namespace}three-eighths { width: column-width(3,8); }
+  .#{$namespace}four-eighths { @extend .#{$namespace}one-half; }
+  .#{$namespace}five-eighths { width: column-width(5,8); }
+  .#{$namespace}six-eighths { @extend .#{$namespace}three-quarters; }
+  .#{$namespace}seven-eights { width: column-width(7,8); }
+}

metadata

@@ -0,0 +1,90 @@
+--- !ruby/object:Gem::Specification
+name: para-grids
+version: !ruby/object:Gem::Version
+  version: 0.0.2
+platform: ruby
+authors:
+- Ian Thomas
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2013-10-07 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '1.3'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '1.3'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+description: '''para'', from the greek ''beside'' and the latin meaning ''alongside'',
+  is a grid system of great simplicity for use internally but available for the world.'
+email:
+- ian@ian-thomas.net
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- .gitignore
+- Gemfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- lib/para.rb
+- lib/para/version.rb
+- para.gemspec
+- stylesheets/.DS_Store
+- stylesheets/_para.scss
+- stylesheets/para/_functions.scss
+- stylesheets/para/_grids.scss
+- stylesheets/para/_media.scss
+- stylesheets/para/_push-pull.scss
+- stylesheets/para/_settings.scss
+- stylesheets/para/_widths.scss
+homepage: http://www.github.com/finndigital/para
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.0.3
+signing_key: 
+specification_version: 4
+summary: A small grid framework that gets out of the way and lets the dev choose how
+  they do things.
+test_files: []