on_the_rocks 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 2a8b1f38392ad87eda6df995368b38e7f2828d23
+  data.tar.gz: 3577a6e5cd6dd3cea6bedb4452f63a2069c2f5cc
+SHA512:
+  metadata.gz: 458ee039fe5db8d4af29be32d5a0002cab44f8eb25b9d3cf5484263729fcc13c26b9ce17bace421a7c51858a387b5e9e887da9fea96907b8f1faa42ef0500ad2
+  data.tar.gz: 4c1248530de183d6941ce01c2e284e26818d78646d08da23161de57f8636ba35b804c7965b45751545cf8df7b647335f841bd1b909702a6287293de9572ae936

data/.gitignore

@@ -0,0 +1,22 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+test/dummy/db/*.sqlite3
+test/dummy/db/*.sqlite3-journal
+test/dummy/log/*.log
+test/dummy/tmp/
+test/dummy/.sass-cache
+tmp

data/Gemfile

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

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2013 Jérôme Guyon
+
+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,89 @@
+# Bourbon On The Rocks
+
+**on_the_rocks** is a rails plugin which includes a fluid grid system built on top of [bourbon](https://github.com/thoughtbot/bourbon).
+It is based on an opinion: the gutter width (space between columns) of a grid should always be fixed and proportional to the font size. The fancy css3 `calc` function allows to do that quite easily. What **on_the_rocks** provides is sass mixins which use this function to place your elements on the grid, and declare fallbacks depending on the viewport size for browsers that don't support the function.
+
+## Installing
+
+In your Gemfile:
+
+```ruby
+gem 'on_the_rocks'
+```
+
+At the top of your stylesheet:
+
+```scss
+@import 'on_the_rocks';
+```
+
+## Usage
+
+First, override the default settings if you need to:
+
+```scss
+$gutter: em(24);
+$columns: 12;
+$max-width: em(1080);
+$fallback-width: em(1000);
+```
+
+Then define your breakpoints:
+
+```scss
+$small-pc: breakpoint($max-width: 1080px, $fallback-width: em(768))
+$tablet: breakpoint($max-width: 768px, $fallback-width: em(480));
+$mobile: breakpoint($max-width: 480px, $fallback-width: em(400), $columns: 6)
+```
+
+Keep in mind that the `$gutter` and the `$fallback-width`s must be expressed with the same unit. Here I used the `em` function of bourbon (which converts pixels to ems) but that's just my preference, use the unit you like to use.
+
+Now's time to set your main container:
+
+```scss
+.container {
+  @include container;
+}
+```
+
+And finally set up your grid:
+
+```scss
+.navbar {
+  @include columns(4);
+  @include media($mobile) {
+    @include columns(6);
+    @include omega;
+  }
+}
+
+.content {
+  @include columns(8);
+  @include omega;
+  @include media($mobile) {
+    @include columns(6);
+    @include omega
+  }
+
+  .left {
+    @include columns(4 of 8);
+    @include media($mobile) {
+      @include columns(3);
+    }
+  }
+
+  .right {
+    @include columns(4 of 8);
+    @include omega;
+    @include media($mobile) {
+      @include columns(3);
+      @include omega;
+    }
+  }
+}
+```
+
+## Contributing
+
+Please create an issue if you encounter a bug.
+Any pull request is welcome ;)

data/Rakefile

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

data/lib/assets/stylesheets/on_the_rocks/_grid.sass

@@ -0,0 +1,11 @@
+*
+  +box-sizing(border-box)
+
+@import grid/private
+
+@import grid/container
+@import grid/row
+@import grid/columns
+@import grid/omega
+@import grid/shift
+@import grid/media

data/lib/assets/stylesheets/on_the_rocks/_helpers.sass

@@ -0,0 +1,3 @@
+@import helpers/private
+
+@import helpers/breakpoint

data/lib/assets/stylesheets/on_the_rocks/_settings.sass

@@ -0,0 +1,4 @@
+$gutter: em(24) !default
+$columns: 12 !default
+$max-width: em(1080) !default
+$fallback-width: em(1000) !default

data/lib/assets/stylesheets/on_the_rocks/grid/_columns.sass

@@ -0,0 +1,18 @@
+= columns($span: $columns)
+  $n: nth($span, 1)
+  
+  $parent-n: parent-columns($span)
+  $expression: "(100% + #{$gutter}) * #{$n / $parent-n} - #{$gutter}"
+  $fallback: ($fallback-width - $gutter) * $n / $columns - $gutter
+  +calc(width, $expression, $fallback)
+  
+  @each $breakpoint in $breakpoints
+    +media($breakpoint)
+      $parent-n: parent-columns($span)
+      $expression: "(100% + #{$gutter}) * #{$n / $parent-n} - #{$gutter}"
+      $fallback: ($fallback-width - $gutter) * $n / $columns - $gutter
+      +calc(width, $expression, $fallback)
+
+  display: block
+  margin-right: $gutter
+  float: left

data/lib/assets/stylesheets/on_the_rocks/grid/_container.sass

@@ -0,0 +1,14 @@
+= container
+  +clearfix
+  +calc(max-width, $max-width)
+
+  +calc(width, 100%, $fallback-width)
+  @each $breakpoint in $breakpoints
+    +media($breakpoint)
+      +calc(width, 100%, $fallback-width)
+
+  display: block
+  margin:
+    left: auto
+    right: auto
+  padding: 0 $gutter

data/lib/assets/stylesheets/on_the_rocks/grid/_media.sass

@@ -0,0 +1,24 @@
+= media($breakpoint)
+  $base-columns: $columns
+  $base-fallback-width: $fallback-width
+
+  @if index($breakpoint, columns)
+    $i: index($breakpoint, columns) + 1
+    $columns: nth($breakpoint, $i)
+  @if index($breakpoint, fallback-width)
+    $i: index($breakpoint, fallback-width) + 1
+    $fallback-width: nth($breakpoint, $i)
+
+  $query: "screen"
+  @if index($breakpoint, max-width)
+    $i: index($breakpoint, max-width) + 1
+    $query: $query + " and (max-width: #{nth($breakpoint, $i)})"
+  @if index($breakpoint, min-width)
+    $i: index($breakpoint, min-width) + 1
+    $query: $query + " and (min-width: #{nth($breakpoint, $i)})"
+
+  @media #{$query}
+    @content
+  
+  $columns: $base-columns
+  $fallback-width: $base-fallback-width

data/lib/assets/stylesheets/on_the_rocks/grid/_omega.sass

@@ -0,0 +1,2 @@
+= omega
+  margin-right: 0

data/lib/assets/stylesheets/on_the_rocks/grid/_private.sass

@@ -0,0 +1,6 @@
+= calc($property, $expression, $fallback: false)
+  @if $fallback
+    #{$property}: #{$fallback}
+  #{$property}: -moz-calc(#{$expression})
+  #{$property}: -webkit-calc(#{$expression})
+  #{$property}: calc(#{$expression})

data/lib/assets/stylesheets/on_the_rocks/grid/_row.sass

@@ -0,0 +1,4 @@
+= row
+  +clearfix
+
+  display: block

data/lib/assets/stylesheets/on_the_rocks/grid/_shift.sass

@@ -0,0 +1,14 @@
+= shift($span)
+  $n: nth($span, 1)
+
+  $parent-n: parent-columns($span)
+  $expression: "(100% + #{$gutter}) * #{$n / $parent-n}"
+  $fallback: ($fallback-width - $gutter) * $n / $columns
+  +calc(margin-left, $expression, $fallback)
+
+  @each $breakpoint in $breakpoints
+    +media($breakpoint)
+      $parent-n: parent-columns($span)
+      $expression: "(100% + #{$gutter}) * #{$n / $parent-n}"
+      $fallback: ($fallback-width - $gutter) * $n / $columns
+      +calc(margin-left, $expression, $fallback)

data/lib/assets/stylesheets/on_the_rocks/helpers/_breakpoint.sass

@@ -0,0 +1,15 @@
+$breakpoints: () !default
+
+@function breakpoint($max-width: false, $min-width: false, $columns: false, $fallback-width: false)
+  $breakpoint: ()
+  @if $columns
+    $breakpoint: join($breakpoint, columns $columns)
+  @if $fallback-width
+    $breakpoint: join($breakpoint, fallback-width $fallback-width)
+  @if $max-width
+    $breakpoint: join($breakpoint, max-width $max-width)
+  @if $min-width
+    $breakpoint: join($breakpoint, min-width $min-width)
+
+  $breakpoints: append($breakpoints, $breakpoint)
+  @return $breakpoint

data/lib/assets/stylesheets/on_the_rocks/helpers/_private.sass

@@ -0,0 +1,7 @@
+@function parent-columns($span)
+  @if length($span) == 3
+    @return nth($span, 3)
+  @else if length($span) == 2
+    @return nth($span, 2)
+  @else
+    @return $columns

data/lib/assets/stylesheets/on_the_rocks.sass

@@ -0,0 +1,5 @@
+@import bourbon
+
+@import on_the_rocks/settings
+@import on_the_rocks/helpers
+@import on_the_rocks/grid

data/lib/on_the_rocks/engine.rb

@@ -0,0 +1,4 @@
+module OnTheRocks
+  class Engine < Rails::Engine
+  end
+end

data/lib/on_the_rocks/version.rb

@@ -0,0 +1,3 @@
+module OnTheRocks
+  VERSION = "0.1.0"
+end

data/lib/on_the_rocks.rb

@@ -0,0 +1,6 @@
+require "on_the_rocks/version"
+require "on_the_rocks/engine"
+require "bourbon"
+
+module OnTheRocks
+end

data/on_the_rocks.gemspec

@@ -0,0 +1,28 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'on_the_rocks/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "on_the_rocks"
+  spec.version       = OnTheRocks::VERSION
+  spec.authors       = ["J. Fleming"]
+  spec.email         = ["jflemingprod@gmail.com"]
+  spec.description   = %q{A shot at a responsive fluid grid system with fixed gutter width using the fancy css3 calc function.}
+  spec.summary       = %q{Yet another responsive grid system.}
+  spec.homepage      = "https://github.com/jflemingprod/on_the_rocks"
+  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_dependency "rails", "~> 4.0"
+  spec.add_dependency "sass-rails", "~> 4.0"
+  spec.add_dependency "bourbon", "~> 3.0"
+
+  spec.add_development_dependency "bundler", "~> 1.3"
+  spec.add_development_dependency "rake"
+  spec.add_development_dependency "high_voltage"
+end

data/test/dummy/README.rdoc

@@ -0,0 +1,28 @@
+== README
+
+This README would normally document whatever steps are necessary to get the
+application up and running.
+
+Things you may want to cover:
+
+* Ruby version
+
+* System dependencies
+
+* Configuration
+
+* Database creation
+
+* Database initialization
+
+* How to run the test suite
+
+* Services (job queues, cache servers, search engines, etc.)
+
+* Deployment instructions
+
+* ...
+
+
+Please feel free to use a different markup language if you do not plan to run
+<tt>rake doc:app</tt>.

data/test/dummy/Rakefile

@@ -0,0 +1,6 @@
+# Add your own tasks in files placed in lib/tasks ending in .rake,
+# for example lib/tasks/capistrano.rake, and they will automatically be available to Rake.
+
+require File.expand_path('../config/application', __FILE__)
+
+Dummy::Application.load_tasks

data/test/dummy/app/assets/javascripts/application.js

@@ -0,0 +1,13 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// compiled file.
+//
+// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
+// about supported directives.
+//
+//= require_tree .

data/test/dummy/app/assets/stylesheets/application.css

@@ -0,0 +1,13 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the top of the
+ * compiled file, but it's generally better to create a new file per style scope.
+ *
+ *= require_self
+ *= require_tree .
+ */

data/test/dummy/app/assets/stylesheets/home.css.sass

@@ -0,0 +1,85 @@
+body
+  margin: 0
+  padding: 0
+
+h2, p
+  text-align: center
+
+p
+  // height: 6em
+  overflow: hidden
+
+.base
+  background-color: #CCF
+.element
+  background-color: #AAF
+.nested
+  background-color: #88F
+
+.base, .element, .nested
+  margin-bottom: 1.5em
+
+
+@import on_the_rocks
+
+$fallback-width: em(1080)
+
+$small: breakpoint($max-width: em(1080), $fallback-width: em(760))
+$tablet: breakpoint($max-width: em(760), $fallback-width: em(480))
+$mobile: breakpoint($max-width: em(480), $fallback-width: em(400))
+
+.basic
+  +container
+  .left
+    +columns(4)
+  .right
+    +columns(8)
+    +omega
+
+.multiple
+  +container
+  .row
+    +row
+    .top-left
+      +columns(3)
+    .top-right
+      +columns(9)
+      +omega
+    .bottom-left
+      +columns(6)
+    .bottom-right
+      +columns(6)
+      +omega
+
+.nested-cols
+  +container
+  .left
+    +columns(4)
+  .right
+    +columns(8)
+    +omega
+    .right-left
+      +columns(4 of 8)
+    .right-right
+      +columns(4 of 8)
+      +omega
+
+.shifted-cols
+  +container
+  .shifted
+    +columns(6)
+    +shift(3)
+
+.media
+  +container
+  .left
+    +columns(6)
+    +media($mobile)
+      +columns(12)
+      +omega
+  .right
+    +columns(6)
+    +omega
+    +media($mobile)
+      +columns(12)
+      +omega