cask 0.2.0

data/Rakefile

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

data/app/assets/stylesheets/_cask.scss

@@ -0,0 +1,12 @@
+// Cask
+// ============================================================
+
+*, *:before, *:after {
+  box-sizing: border-box;
+}
+
+@import "variables";
+
+@import "functions/all";
+
+@import "mixins/all";

data/app/assets/stylesheets/_variables.scss

@@ -0,0 +1,31 @@
+// Grid Settings
+// ============================================================
+
+// ========= Grid Variables =========
+
+$text-direction: ltr;
+
+@if $text-direction == ltr {
+  $default-float: left !global;
+  $opposite-direction: right !global;
+} @else if $text-direction == rtl {
+  $default-float: right !global;
+  $opposite-direction: left !global;
+}
+
+$grid-row-width: 80rem !default;
+$grid-gutter: 1.25rem !default;
+$grid-total-columns: 12 !default;
+
+// ========= Media Queries =========
+
+$small-screen: 768px !default;
+$medium-screen: 1280px !default;
+$large-screen: 1440px !default;
+
+$screen: "only screen" !default;
+$small: "only screen and (min-width: #{$small-screen})" !default;
+$medium: "only screen and (min-width:#{$medium-screen})" !default;
+$large: "only screen and (min-width:#{$large-screen})" !default;
+$landscape: "only screen and (orientation: landscape)" !default;
+$portrait: "only screen and (orientation: portrait)" !default;

data/app/assets/stylesheets/functions/_all.scss

@@ -0,0 +1,5 @@
+// Functions
+
+@import "grid-calc";
+@import "grid-column-ratio";
+@import "grid-parse-column-count";

data/app/assets/stylesheets/functions/_grid-calc.scss

@@ -0,0 +1,13 @@
+// Calculates the width of a column for grid-column() and other mixins
+
+@function grid-calc($columns, $collapse:false) {
+  $_column-ratio: grid-column-ratio($columns);
+
+  @if $collapse {
+    $_grid-gutter-affordance: (-$grid-gutter) + ($grid-gutter * $_column-ratio);
+    @return unquote("#{percentage($_column-ratio)} - #{$_grid-gutter-affordance}");
+  } @else {
+    $_grid-gutter-affordance: $grid-gutter + ($grid-gutter * $_column-ratio);
+    @return unquote("#{percentage($_column-ratio)} - #{$_grid-gutter-affordance}");
+  }
+}

data/app/assets/stylesheets/functions/_grid-column-ratio.scss

@@ -0,0 +1,11 @@
+// Calculates the ratio of a given column over its container.
+
+@function grid-column-ratio($columns) {
+  @if length($columns) > 1 {
+    @return nth($columns, 1) / grid-parse-column-count($columns);
+  } @if $columns {
+    @return $columns / $grid-total-columns;
+  } @else {
+    @return 1;
+  }
+}

data/app/assets/stylesheets/functions/_grid-parse-column-count.scss

@@ -0,0 +1,13 @@
+// Parses the total number of columns from `$columns`
+@function grid-parse-column-count($span) {
+
+  @if length($span) == 3 {
+    $_total-columns: nth($span, 3);
+    @return $_total-columns;
+  } @else if length($span) == 2 {
+    $_total-columns: nth($span, 2);
+    @return $_total-columns;
+  } @else if length($span) >= 3 {
+    @error "`$column` had #{$span} values but should have no greater than 3";
+  }
+}

data/app/assets/stylesheets/mixins/_all.scss

@@ -0,0 +1,8 @@
+// Mixins
+
+@import "grid-column";
+@import "grid-gutter";
+@import "grid-is-zero-error";
+@import "grid-push";
+@import "grid-row";
+@import "grid-shift";

data/app/assets/stylesheets/mixins/_grid-column.scss

@@ -0,0 +1,17 @@
+// Specifies the number of columns an element should span.
+
+@mixin grid-column(
+    $columns: false,
+    $collapse: false,
+    $center: false
+  ) {
+  @include grid-gutter($collapse: $collapse, $center: $center);
+
+  @if $center {
+    float: none;
+  } @else {
+    float: $default-float;
+  }
+
+  width: calc(#{grid-calc($columns, $collapse)});
+}

data/app/assets/stylesheets/mixins/_grid-gutter.scss

@@ -0,0 +1,17 @@
+// Specifies what a column's margins should be.
+
+@mixin grid-gutter(
+    $collapse: false,
+    $center: false
+  ) {
+  @if $center {
+    margin-#{$default-float}: auto;
+    margin-#{$opposite-direction}: auto;
+  } @else if $collapse {
+    margin-#{$default-float}: 0;
+    margin-#{$opposite-direction}: -($grid-gutter);
+  } @else {
+    margin-#{$default-float}: $grid-gutter;
+    margin-#{$opposite-direction}: 0;
+  }
+}

data/app/assets/stylesheets/mixins/_grid-is-zero-error.scss

@@ -0,0 +1,7 @@
+// Calculates the width of a column for grid-column() and other mixins.
+
+@mixin grid-is-zero-error($property, $value) {
+  @if $value == 0 {
+    @error "if `#{$property}` is 0, use false or leave the input value blank";
+  }
+}

data/app/assets/stylesheets/mixins/_grid-push.scss

@@ -0,0 +1,15 @@
+// Push columns away from their container.
+
+@mixin grid-push(
+    $push: false
+  ) {
+  @if $push {
+    $_grid-gutter-affordance: $grid-gutter * $push;
+    $_margin-value: calc(#{unquote(grid-calc($push))} + #{$_grid-gutter-affordance});
+  } @else {
+    $_margin-value: $grid-gutter;
+  }
+
+  @include grid-is-zero-error(grid-push, $push);
+  margin-#{$default-float}: $_margin-value;
+}

data/app/assets/stylesheets/mixins/_grid-row.scss

@@ -0,0 +1,11 @@
+// Create default and collapsed rows.
+
+@mixin grid-row(
+    $center: true,
+    $max-width: $grid-row-width
+  ) {
+
+  @include clearfix;
+  @include grid-column($collapse: true, $center: $center);
+  max-width: $max-width;
+}

data/app/assets/stylesheets/mixins/_grid-shift.scss

@@ -0,0 +1,16 @@
+// Shift columns and reorder them within their container.
+
+@mixin grid-shift(
+    $shift: false
+  ) {
+  @if $shift == 0 {
+    @error grid-is-zero-error(grid-shift);
+  }
+
+  @if $shift {
+    $_shift-value: calc(#{unquote(grid-calc($shift))} + #{$grid-gutter});
+    #{$default-float}: $_shift-value;
+  }
+
+  position: relative;
+}

data/bin/console

@@ -0,0 +1,6 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "cask"
+require "irb"
+IRB.start

data/bin/setup

@@ -0,0 +1,2 @@
+#!/bin/sh
+bundle install

data/cask.gemspec

@@ -0,0 +1,27 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'cask/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "cask"
+  spec.version       = Cask::VERSION
+  spec.platform      = Gem::Platform::RUBY
+  spec.authors       = ["Will H McMahan"]
+  spec.email         = ["will@mcmahan.me"]
+
+  spec.summary       = %q{A simple relible float based grid system}
+  spec.description   = %q{A simple relible float based grid system}
+  spec.homepage      = "http://whmii.github.io/cask"
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
+  spec.bindir        = "exe"
+  spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
+  spec.require_paths = ["lib"]
+
+  spec.add_dependency "bourbon", ">= 4.0"
+
+  spec.add_development_dependency "bundler", "~> 1.10"
+  spec.add_development_dependency "rake", "~> 10.0"
+end

data/contrib/stylesheets/_example.scss

@@ -0,0 +1,200 @@
+// Example Styles
+// =======================================
+
+.header {
+  @include grid-row();
+  margin-bottom: 1em;
+
+  .title {
+    background-color: $base-font-color;
+    color: white;
+    font-size: 6.25rem;
+    margin-bottom: 0;
+    padding-bottom: 0.5rem;
+    text-align: center;
+
+    small {
+      display: block;
+      font-size: 1rem;
+      line-height: 1.5;
+      margin-bottom: 1rem;
+    }
+
+    a {
+      color: white;
+
+      &.contact {
+        margin: 0 0.75em;
+      }
+    }
+  }
+
+  .description li {
+    border-bottom: $base-border;
+    padding: $small-spacing;
+  }
+
+  @media #{$small} {
+    display: flex;
+
+    .title {
+      @include grid-column($columns: 6);
+    }
+
+    .description {
+      @include grid-column($columns: 6);
+    }
+  }
+}
+
+.example {
+
+  .section-title {
+    @include grid-row($max-width: null);
+    background-color: whitesmoke;
+    line-height: 4;
+    text-align: center;
+    white-space: nowrap;
+  }
+
+  .row {
+    @include grid-row();
+    background-color: $medium-gray;
+    margin-bottom: 1em;
+    padding-bottom: em(2);
+    padding-top: em(2);
+  }
+
+  .content {
+    background-color: $light-gray;
+    display: block;
+    line-height: 6em;
+    text-align: center;
+    white-space: nowrap;
+  }
+
+  .content-label {
+    color: $base-background-color;
+    display: block;
+    font-family: $monospace-font-family;
+    -webkit-font-smoothing: antialiased;
+    line-height: 1.5em;
+    text-align: center;
+    white-space: nowrap;
+
+    &::after {
+      border-color: $light-gray;
+      border-style: solid;
+      border-width: 1px 1px 0;
+      content: "";
+      display: block;
+      height: 1.5em;
+      margin: 0 3px;
+    }
+  }
+
+  [class^="col-"] {
+    border-left: $base-border;
+    border-right: $base-border;
+  }
+
+  .col-12 {
+
+    @media #{$small} {
+      @include grid-column($columns: 12);
+    }
+  }
+
+  .col-6 {
+
+    @media #{$small} {
+      @include grid-column($columns: 6);
+    }
+  }
+
+  .col-6-center {
+
+    @media #{$small} {
+      @include grid-column($columns: 6, $center: true);
+    }
+  }
+
+  .col-6-collapse {
+
+    @media #{$small} {
+      @include grid-column($columns: 6, $collapse: true);
+    }
+  }
+
+  .col-4 {
+
+    @media #{$small} {
+      @include grid-column($columns: 4);
+    }
+  }
+
+  .col-3 {
+
+    @media #{$small} {
+      @include grid-column($columns: 3);
+    }
+  }
+
+  .col-2 {
+
+    @media #{$small} {
+      @include grid-column($columns: 2);
+    }
+  }
+
+  .col-1 {
+
+    @media #{$small} {
+      @include grid-column($columns: 1);
+    }
+  }
+
+  .col-5-push {
+
+    @media #{$small} {
+      @include grid-column($columns: 5);
+      @include grid-push($push: 2);
+    }
+  }
+
+  .col-4-shift-1 {
+
+    @media #{$small} {
+      @include grid-column($columns: 4);
+      @include grid-shift($shift: 4);
+    }
+  }
+
+  .col-4-shift-2 {
+
+    @media #{$small} {
+      @include grid-column($columns: 4);
+      @include grid-shift($shift: -4);
+    }
+  }
+
+  .col-2-of-5 {
+    @include grid-column($columns: 2 of 5);
+  }
+
+  .col-3-of-5 {
+    @include grid-column($columns: 3 of 5);
+  }
+}
+
+@media #{$screen} {}
+
+@media #{$small} {}
+
+@media #{$medium} {}
+
+@media #{$large} {}
+
+@media #{$landscape} {}
+
+@media #{$portrait} {}

data/contrib/stylesheets/base/_base.scss

@@ -0,0 +1,15 @@
+// Bitters 1.1.0
+// http://bitters.bourbon.io
+// Copyright 2013-2015 thoughtbot, inc.
+// MIT License
+
+@import "variables";
+
+// Neat Settings -- uncomment if using Neat -- must be imported before Neat
+// @import "grid-settings";
+
+@import "buttons";
+@import "forms";
+@import "lists";
+@import "tables";
+@import "typography";