longitude 0.0.1

data/.gitignore

@@ -0,0 +1,6 @@
+*.gem
+.bundle
+Gemfile.lock
+pkg/*
+bin/
+.sass-cache

data/.rspec

@@ -0,0 +1,2 @@
+--color
+--format progress

data/.rvmrc

@@ -0,0 +1,38 @@
+#!/usr/bin/env bash
+
+# This is an RVM Project .rvmrc file, used to automatically load the ruby
+# development environment upon cd'ing into the directory
+
+# First we specify our desired <ruby>[@<gemset>], the @gemset name is optional,
+# Only full ruby name is supported here, for short names use:
+#     echo "rvm use 1.9.3" > .rvmrc
+environment_id="ruby-1.9.3-p125@longitude"
+
+# Uncomment the following lines if you want to verify rvm version per project
+# rvmrc_rvm_version="1.10.2" # 1.10.1 seams as a safe start
+# eval "$(echo ${rvm_version}.${rvmrc_rvm_version} | awk -F. '{print "[[ "$1*65536+$2*256+$3" -ge "$4*65536+$5*256+$6" ]]"}' )" || {
+#   echo "This .rvmrc file requires at least RVM ${rvmrc_rvm_version}, aborting loading."
+#   return 1
+# }
+
+# First we attempt to load the desired environment directly from the environment
+# file. This is very fast and efficient compared to running through the entire
+# CLI and selector. If you want feedback on which environment was used then
+# insert the word 'use' after --create as this triggers verbose mode.
+if [[ -d "${rvm_path:-$HOME/.rvm}/environments"
+  && -s "${rvm_path:-$HOME/.rvm}/environments/$environment_id" ]]
+then
+  \. "${rvm_path:-$HOME/.rvm}/environments/$environment_id"
+  [[ -s "${rvm_path:-$HOME/.rvm}/hooks/after_use" ]] &&
+    \. "${rvm_path:-$HOME/.rvm}/hooks/after_use" || true
+  if [[ $- == *i* ]] # check for interactive shells
+  then echo "Using: $(tput setaf 2)$GEM_HOME$(tput sgr0)" # show the user the ruby and gemset they are using in green
+  else echo "Using: $GEM_HOME" # don't use colors in non-interactive shells
+  fi
+else
+  # If the environment file has not yet been created, use the RVM CLI to select.
+  rvm --create use  "$environment_id" || {
+    echo "Failed to create RVM environment '${environment_id}'."
+    return 1
+  }
+fi

data/Gemfile

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

data/MIT-LICENSE

@@ -0,0 +1,8 @@
+Copyright (c) 2012 Johannes Edelstam
+
+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,196 @@
+Longitude - Make a responsive SCSS grid
+=======================================
+
+Longitude lets you easily create responsive, mobile first layouts with
+minimal footprint in an unobtrusive way!
+
+Longitude is more a collection of calculations than just a normal CSS
+grid. It lets you define how elements will be styled based on your
+class hierarchy, not the framework's.
+
+
+Install
+-------
+
+To use it together with SASS just do:
+
+    gem install jede-longitude --source http://gems.github.com
+
+Or if you are using [Bundler](http://gembundler.com/) just type add it
+to your Gemfile
+
+    gem 'longitude', git: 'git@github.com:jede/longitude.git'
+
+Usage
+-----
+
+Start off by creating a stylesheet for the parts of your design that
+will depend on the screen width. Let's place it in a directory called
+stylesheets. Also create a folder named public where the compiled CSS
+files will be placed.
+
+    ./stylesheets/layout.scss
+
+
+Longitude calculates responsive widths for you, but to make it easier to
+relate to actual pixels at the different breakpoints, it uses base values
+in pixels. Breakpoints are then calculated by different column counts.
+Longitude defaults to 60px wide columns with 10px gutters on each side.
+
+     +------+-------------------------------+------+
+     |      |                               |      |
+     |      |                               |      |
+     | 10px |             60px              | 10px |
+     |      |                               |      |
+     |      |                               |      |
+     +------+-------------------------------+------+
+
+This can be changed by updating the following config variables:
+
+```scss
+    $longitude-gutter-width: 5px; // Use 5px gutters instead of the standard 10px
+    $longitude-column-width: 70px; // Use 70px columns instead of the standard 60px
+```
+
+Let's say that you want two responsive breakpoints, one for devices up
+to 320px wide and then one 960px breakpoint for larger screens. Between
+these breakpoints we want the design to be fluid.
+
+Then our layout.scss could look like this:
+
+```scss
+@import 'longitude';
+
+@include longitude(4 12) {
+  article {
+    margin: 0 gutter();
+    width: columns(4);
+  }
+}
+```
+
+If you are running bundler you could now run the following
+
+    bundle exec sass --watch stylesheets:public -r longitude
+
+This then translates to CSS, and public/layout.css will now look like:
+
+```css
+@media (max-width: 320px) {
+  article {
+    margin: 0 3.125%;
+    width: 93.75%; } }
+@media (min-width: 321px) and (max-width: 960px) {
+  article {
+    margin: 0 1.042%;
+    width: 31.25%; } }
+@media (min-width: 961px) {
+  article {
+    margin: 0 10px;
+    width: 300px; } }
+```
+
+Documentation
+---------------
+
+### columns($columns, $surrounding-gutters: false)
+
+Calculates the width for the specified number of columns. You can choose
+to include surrounding gutters, this is normally not preferred since you
+add that as gutters with margin.
+
+### gutter($gutters: 1)
+
+Calculates the width for the specified number of gutters (normally one).
+
+### column-count()
+
+The column count for this breakpoint. If you call @include longitude(4 12)
+then column-count() would return 4, 12 and then 12 again.
+
+### full-width($outer-gutters: true)
+
+Returns the "full-width" for the current breakpoint. This is
+equivalent to calling columns(column-count(), $surrounding-gutters: true)
+
+
+### absolute-width($columns)
+
+The width in pixels for the specified columns. So with standard config
+values absolute-width(12) would return 960px.
+
+### @include gutters
+
+This is a mixin to add gutters to a selector.
+
+```scss
+section {
+  @include gutters;
+}
+```
+
+If the current gutter width is 5%, it will compile to:
+
+```css
+section {
+  margin-left: 5%;
+  margin-right: 5%;
+}
+```
+
+### @include longitude($columns-list){ ... }
+
+Creates breakpoints for the columns in the columns list. It also adds an
+extra breakpoint for all width larger then the maximum provided with in
+real pixels. This makes debugging and adjusting much easier and ensures
+pixel perfectness when the largest breakpoint is used.
+
+Compatibility mode (dealing with Internet Explorer)
+---------------------------------------------------
+
+Longitude uses the mobile first approach. This means that when you visit
+the site with a browser that doesn't handle media queries the smallest
+layout will be the default (i.e. we assume that it is a feature phone).
+However IE 8 and down doesn't support media queries. This means that IE
+8 will get the same layout as old mobile phones (which it maybe deserves
+though). But fear not!
+
+This solution is inspired from a solution that [Henrik Ekelöf](http://twitter.com/#!/henrikekelo)
+presented in a [blog post](http://henrikekelof.se/2011/12/responsive-design-med-sass-for-alla-webblasare.html) (unfortunately in swedish).
+
+In short the idea is to load different main stylesheets depending on if
+the user uses IE 8 or lower. Say that you include your layout stylesheet
+in your application.scss file like this. Then you could create an
+application-ie.scss file that only loads in IE 8 and lower. 
+
+This will look something like this in your HTML:
+
+```html
+<!--[if (gte IE 9)|!(IE)]><!-->
+    <link rel="stylesheet" href="public/application.css">
+<!--<![endif]-->
+
+<!--[if (lte IE 8)]>
+    <link rel="stylesheet" href="public/application-ie.css">
+<![endif]-->
+```
+
+The application-ie.scss would then set a config variable:
+
+
+```scss
+
+$longitude-compatibility-mode: true;
+
+@import 'layout';
+```
+
+When setting this variable only the largest breakpoint without any media
+queries will be rendered.
+
+
+Author
+------
+
+Longitude is created by Johannes Edelstam. It is licensed under the MIT
+License, just like SASS.

data/Rakefile

@@ -0,0 +1,7 @@
+require "bundler/gem_tasks"
+require "rspec/core/rake_task"
+
+RSpec::Core::RakeTask.new
+
+task :default => :spec
+task :test => :spec

data/lib/longitude/version.rb

@@ -0,0 +1,3 @@
+module Longitude
+  VERSION = "0.0.1"
+end

data/lib/longitude.rb

@@ -0,0 +1,8 @@
+require "longitude/version"
+
+module Longitude
+  # Your code goes here...
+end
+
+require 'sass'
+Sass.load_paths << File.dirname(__FILE__) + '/../stylesheets'

data/longitude.gemspec

@@ -0,0 +1,27 @@
+# -*- encoding: utf-8 -*-
+$:.push File.expand_path("../lib", __FILE__)
+require "longitude/version"
+
+Gem::Specification.new do |s|
+  s.name        = "longitude"
+  s.version     = Longitude::VERSION
+  s.authors     = ["Johannes Edelstam"]
+  s.email       = ["johannes@edelst.am"]
+  s.homepage    = "http://github.com/jede.longitude"
+  s.summary     = %q{A responsive, mobile first, unobtrusive SCSS grid!}
+  s.description = """Longitude lets you easily create responsive, mobile first layouts with minimal footprint in an unobtrusive way!
+
+Longitude is more a collection of calculations than just a normal CSS grid. It lets you define how elements will be styled based on your class hierarchy, not the framework's."""
+
+  s.rubyforge_project = "longitude"
+
+  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_development_dependency 'rake'
+  s.add_development_dependency "rspec"
+
+  s.add_runtime_dependency "sass", ">= 3.2.beta"
+end

data/spec/integration/columns_spec.rb

@@ -0,0 +1,26 @@
+require 'spec_helper'
+
+describe 'Columns' do
+  describe 'standard column widths' do
+    before :each do
+      @css = render """
+      @include longitude(2 4) {
+        p { width: columns(2); }
+      }
+      """
+    end
+
+    it 'calculates width for maxed layout' do
+      #two columns 60px each, with two gutter widths of 10px in between
+      @css.should include("width: #{60 + 10 + 10 + 60}px;")
+    end
+
+    it 'calculates width for 4 column layout' do
+      @css.should include("width: #{100.0 * 140/320}%;")
+    end
+
+    it 'calculates width for 2 column layout' do
+      @css.should include("width: #{100.0 * 140/160}%;")
+    end
+  end
+end

data/spec/integration/compatibility_mode_spec.rb

@@ -0,0 +1,21 @@
+require 'spec_helper'
+
+describe 'Compatibility mode' do
+  before :each do
+    @css = render """
+      $longitude-compatibility-mode: true;
+
+      @include longitude(2 4) {
+        p { width: columns(2); }
+      }
+    """
+  end
+
+  it 'disables media queries' do
+    @css.should_not include('@media')
+  end
+
+  it 'renders pixels' do
+    @css.should include('width: 140px;')
+  end
+end

data/spec/integration/full_width_spec.rb

@@ -0,0 +1,47 @@
+require 'spec_helper'
+
+describe 'Full width' do
+  describe 'and outer gutters' do
+    before :each do
+      @css = render """
+      @include longitude(2 4) {
+        p { width: full-width(); }
+      }
+      """
+    end
+
+    it 'calculates for maxed layout' do
+      @css.should include("width: 320px;")
+    end
+
+    it 'calculates width for 4 column layout' do
+      @css.should include("width: 100%;")
+    end
+
+    it 'calculates width for 2 column layout' do
+      @css.should include("width: 100%;")
+    end
+  end
+
+  describe 'no outer gutters' do
+    before :each do
+      @css = render """
+      @include longitude(2 4) {
+        p { width: full-width($outer-gutters: false); }
+      }
+      """
+    end
+
+    it 'calculates for maxed layout' do
+      @css.should include("width: 300px;")
+    end
+
+    it 'calculates width for 4 column layout' do
+      @css.should include("width: #{100 - 100.0 * 20/320}%;")
+    end
+
+    it 'calculates width for 2 column layout' do
+      @css.should include("width: #{100 - 100.0 * 20/160}%;")
+    end
+  end
+end

data/spec/integration/gutters_spec.rb

@@ -0,0 +1,52 @@
+require 'spec_helper'
+
+describe 'Gutters' do
+  describe 'function' do
+    before :each do
+      @css = render """
+      @include longitude(2 4) {
+        p { margin: 0 gutter(); }
+      }
+      """
+    end
+
+    it 'calculates correct gutter value for max layout' do
+      @css.should include("margin: 0 10px")
+    end
+
+    it 'calculates correct gutter value for 4 column layout' do
+      @css.should include("margin: 0 #{100.0 * 10/320}%")
+    end
+
+    it 'calculates correct gutter value for 2 column layout' do
+      @css.should include("margin: 0 #{100.0 * 10/160}%")
+    end
+  end
+
+  describe 'mixin' do
+    before :each do
+      @css = render """
+      @include longitude(2 4) {
+        p { @include gutters; }
+      }
+      """
+    end
+
+    it 'calculates correct gutter value for max layout' do
+      @css.should include("margin-left: 10px")
+      @css.should include("margin-right: 10px")
+    end
+
+    it 'calculates correct gutter value for 4 column layout' do
+      gutter = 100.0 * 10/320
+      @css.should include("margin-left: #{gutter}%")
+      @css.should include("margin-right: #{gutter}%")
+    end
+
+    it 'calculates correct gutter value for 2 column layout' do
+      gutter = 100.0 * 10/160
+      @css.should include("margin-left: #{gutter}%")
+      @css.should include("margin-right: #{gutter}%")
+    end
+  end
+end

data/spec/integration/media_queries_spec.rb

@@ -0,0 +1,42 @@
+require 'spec_helper'
+
+describe 'Media queries' do
+  describe 'standard column widths' do
+    before :each do
+      @css = render """
+      @include longitude(2 4) {
+        p { color: blue; }
+      }
+      """
+    end
+
+    it 'includes lower bound' do
+      @css.should include('@media (max-width: 160px)')
+    end
+
+    it 'includes the middle step' do
+      @css.should include('@media (min-width: 161px) and (max-width: 320px)')
+    end
+
+    it 'includes the higher bound' do
+      @css.should include('@media (min-width: 321px)')
+    end
+  end
+
+  describe 'custom column widths' do
+    before :each do
+      @css = render """
+      $longitude-gutter-width: 5px;
+      $longitude-column-width: 10px;
+
+      @include longitude(2 4) {
+        p { color: blue; }
+      }
+      """
+    end
+
+    it 'renders the middle stop according to the custom widths' do
+      @css.should include('@media (min-width: 41px) and (max-width: 80px)')
+    end
+  end
+end

data/spec/spec_helper.rb

@@ -0,0 +1,20 @@
+# This file was generated by the `rspec --init` command. Conventionally, all
+# specs live under a `spec` directory, which RSpec adds to the `$LOAD_PATH`.
+# Require this file using `require "spec_helper.rb"` to ensure that it is only
+# loaded once.
+#
+# See http://rubydoc.info/gems/rspec-core/RSpec/Core/Configuration
+
+require 'sass'
+require 'longitude'
+
+def render(template)
+  template = "@import 'longitude'; " + template
+  Sass::Engine.new(template, syntax: :scss).render
+end
+
+RSpec.configure do |config|
+  config.treat_symbols_as_metadata_keys_with_true_values = true
+  config.run_all_when_everything_filtered = true
+  config.filter_run :focus
+end

data/stylesheets/longitude.scss

@@ -0,0 +1,77 @@
+$longitude-gutter-width: 10px !default;
+$longitude-column-width: 60px !default;
+$longitude-compatibility-mode: false !default;
+
+$longitude-column-count: 0;
+$longitude-base-width: 100%;
+
+@function absolute-width($columns) {
+  @return $columns * ($longitude-gutter-width * 2 + $longitude-column-width)
+}
+
+@function full-width($outer-gutters: true) {
+  @return columns(column-count(), $outer-gutters);
+}
+
+@function column-count() {
+  @return $longitude-column-count;
+}
+
+@function column-width(){
+  @return relative-width($longitude-column-width);
+}
+
+@function gutter-width(){
+  @return relative-width($longitude-gutter-width);
+}
+
+@function relative-width($width){
+  @return $longitude-base-width * $width / absolute-width(column-count());
+}
+
+@function columns($columns, $surrounding-gutters: false) {
+  $gutters: ($columns - 1) * 2;
+  @if $surrounding-gutters {
+    $gutters: $gutters + 2;
+  }
+  @return $gutters * gutter-width() + $columns * column-width();
+}
+
+@function gutter($gutters: 1) {
+  @return gutter-width() * $gutters;
+}
+
+@mixin gutters {
+  margin-left: gutter();
+  margin-right: gutter();
+}
+
+@mixin longitude($columns-list) {
+  $prev-column-count: 0;
+  $max-width: 0;
+  @each $column-count in $columns-list {
+    $longitude-column-count: $column-count;
+    @if $longitude-compatibility-mode == false {
+      $min-width: absolute-width($prev-column-count);
+      $max-width: absolute-width($column-count);
+      $query: '(max-width: #{$max-width})';
+      @if $min-width > 0 {
+        $query: '(min-width: #{$min-width + 1px}) and #{$query}';
+      }
+      @media $query {
+        @content;
+      }
+    }
+    $prev-column-count: $column-count
+  }
+  // Last step, use pixels
+  $longitude-base-width: absolute-width(column-count());
+  @if $longitude-compatibility-mode  {
+    @content;
+  } @else {
+    @media (min-width: ($max-width + 1px)) {
+      @content;
+    }
+  }
+}
+

metadata

@@ -0,0 +1,106 @@
+--- !ruby/object:Gem::Specification
+name: longitude
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+  prerelease: 
+platform: ruby
+authors:
+- Johannes Edelstam
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2012-03-06 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: &70114280662980 !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: *70114280662980
+- !ruby/object:Gem::Dependency
+  name: rspec
+  requirement: &70114280662540 !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: *70114280662540
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: &70114280661940 !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 3.2.beta
+  type: :runtime
+  prerelease: false
+  version_requirements: *70114280661940
+description: ! 'Longitude lets you easily create responsive, mobile first layouts
+  with minimal footprint in an unobtrusive way!
+
+
+  Longitude is more a collection of calculations than just a normal CSS grid. It lets
+  you define how elements will be styled based on your class hierarchy, not the framework''s.'
+email:
+- johannes@edelst.am
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- .gitignore
+- .rspec
+- .rvmrc
+- Gemfile
+- MIT-LICENSE
+- README.md
+- Rakefile
+- lib/longitude.rb
+- lib/longitude/version.rb
+- longitude.gemspec
+- spec/integration/columns_spec.rb
+- spec/integration/compatibility_mode_spec.rb
+- spec/integration/full_width_spec.rb
+- spec/integration/gutters_spec.rb
+- spec/integration/media_queries_spec.rb
+- spec/spec_helper.rb
+- stylesheets/longitude.scss
+homepage: http://github.com/jede.longitude
+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: longitude
+rubygems_version: 1.8.10
+signing_key: 
+specification_version: 3
+summary: A responsive, mobile first, unobtrusive SCSS grid!
+test_files:
+- spec/integration/columns_spec.rb
+- spec/integration/compatibility_mode_spec.rb
+- spec/integration/full_width_spec.rb
+- spec/integration/gutters_spec.rb
+- spec/integration/media_queries_spec.rb
+- spec/spec_helper.rb