cask 0.2.0

data/contrib/stylesheets/base/_buttons.scss

@@ -0,0 +1,35 @@
+#{$all-buttons} {
+  appearance: none;
+  background-color: $action-color;
+  border: 0;
+  border-radius: $base-border-radius;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: $base-font-family;
+  font-size: $base-font-size;
+  -webkit-font-smoothing: antialiased;
+  font-weight: 600;
+  line-height: 1;
+  padding: $small-spacing $base-spacing;
+  text-decoration: none;
+  transition: background-color $base-duration $base-timing;
+  user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+
+  &:hover,
+  &:focus {
+    background-color: shade($action-color, 20%);
+    color: #fff;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+
+    &:hover {
+      background-color: $action-color;
+    }
+  }
+}

data/contrib/stylesheets/base/_forms.scss

@@ -0,0 +1,90 @@
+fieldset {
+  background-color: $base-background-color;
+  border: $base-border;
+  margin: 0 0 $small-spacing;
+  padding: $base-spacing;
+}
+
+input,
+label,
+select {
+  display: block;
+  font-family: $base-font-family;
+  font-size: $base-font-size;
+}
+
+label {
+  font-weight: 600;
+  margin-bottom: $small-spacing / 2;
+
+  &.required::after {
+    content: "*";
+  }
+
+  abbr {
+    display: none;
+  }
+}
+
+#{$all-text-inputs},
+select[multiple=multiple] {
+  background-color: $base-background-color;
+  border: $base-border;
+  border-radius: $base-border-radius;
+  box-shadow: $form-box-shadow;
+  box-sizing: border-box;
+  font-family: $base-font-family;
+  font-size: $base-font-size;
+  margin-bottom: $small-spacing;
+  padding: $base-spacing / 3;
+  transition: border-color $base-duration $base-timing;
+  width: 100%;
+
+  &:hover {
+    border-color: shade($base-border-color, 20%);
+  }
+
+  &:focus {
+    border-color: $action-color;
+    box-shadow: $form-box-shadow-focus;
+    outline: none;
+  }
+
+  &:disabled {
+    background-color: shade($base-background-color, 5%);
+    cursor: not-allowed;
+
+    &:hover {
+      border: $base-border;
+    }
+  }
+}
+
+textarea {
+  resize: vertical;
+}
+
+input[type="search"] {
+  appearance: none;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+  display: inline;
+  margin-right: $small-spacing / 2;
+
+  + label {
+    display: inline-block;
+  }
+}
+
+input[type="file"] {
+  margin-bottom: $small-spacing;
+  width: 100%;
+}
+
+select {
+  margin-bottom: $base-spacing;
+  max-width: 100%;
+  width: auto;
+}

data/contrib/stylesheets/base/_lists.scss

@@ -0,0 +1,19 @@
+ul,
+ol {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+dl {
+  margin-bottom: $small-spacing;
+
+  dt {
+    font-weight: 600;
+    margin-top: $small-spacing;
+  }
+
+  dd {
+    margin: 0;
+  }
+}

data/contrib/stylesheets/base/_tables.scss

@@ -0,0 +1,24 @@
+table {
+  border-collapse: collapse;
+  margin: $small-spacing 0;
+  table-layout: fixed;
+  width: 100%;
+}
+
+th {
+  border-bottom: 1px solid shade($base-border-color, 25%);
+  font-weight: 600;
+  padding: $small-spacing 0;
+  text-align: left;
+}
+
+td {
+  border-bottom: $base-border;
+  padding: $small-spacing 0;
+}
+
+tr,
+td,
+th {
+  vertical-align: middle;
+}

data/contrib/stylesheets/base/_typography.scss

@@ -0,0 +1,48 @@
+body {
+  color: $base-font-color;
+  font-family: $base-font-family;
+  font-size: $base-font-size;
+  line-height: $base-line-height;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: $heading-font-family;
+  font-size: $base-font-size;
+  line-height: $heading-line-height;
+  margin: 0 0 $small-spacing;
+}
+
+p {
+  margin: 0 0 $small-spacing;
+}
+
+a {
+  color: $action-color;
+  text-decoration: none;
+  transition: color $base-duration $base-timing;
+
+  &:active,
+  &:focus,
+  &:hover {
+    color: shade($action-color, 25%);
+  }
+}
+
+hr {
+  border-bottom: $base-border;
+  border-left: 0;
+  border-right: 0;
+  border-top: 0;
+  margin: $base-spacing 0;
+}
+
+img,
+picture {
+  margin: 0;
+  max-width: 100%;
+}

data/contrib/stylesheets/base/_variables.scss

@@ -0,0 +1,43 @@
+// Typography
+$base-font-family: $helvetica;
+$heading-font-family: $base-font-family;
+$monospace-font-family: $monospace;
+
+// Font Sizes
+$base-font-size: 1em;
+
+// Line height
+$base-line-height: 1.5;
+$heading-line-height: 1.2;
+
+// Other Sizes
+$base-border-radius: 3px;
+$base-spacing: $base-line-height * 1em;
+$small-spacing: $base-spacing / 2;
+$base-z-index: 0;
+
+// Colors
+$blue: #477dca;
+$dark-gray: #333;
+$medium-gray: #999;
+$light-gray: #ddd;
+
+// Font Colors
+$base-font-color: $dark-gray;
+$action-color: $blue;
+
+// Border
+$base-border-color: $light-gray;
+$base-border: 1px solid $base-border-color;
+
+// Background Colors
+$base-background-color: #fff;
+$secondary-background-color: tint($base-border-color, 75%);
+
+// Forms
+$form-box-shadow: inset 0 1px 3px rgba(#000, 0.06);
+$form-box-shadow-focus: $form-box-shadow, 0 0 5px adjust-color($action-color, $lightness: -5%, $alpha: -0.3);
+
+// Animations
+$base-duration: 150ms;
+$base-timing: ease;

data/contrib/stylesheets/styles.scss

@@ -0,0 +1,11 @@
+@charset "utf-8";
+@import "bourbon";
+
+// Base styles
+@import "base/base";
+
+// Cask
+@import "../../app/assets/stylesheets/cask";
+
+// Example Styles
+@import "example";

data/contrib/views/index.haml

@@ -0,0 +1,149 @@
+!!!
+%html
+  %head
+    %meta{ charset: "utf-8" }
+    %meta{ content: "IE=edge,chrome=1", http: { equiv: "X-UA-Compatible" } }
+    %meta{ name: "viewport", content: "width=device-width, initial-scale=1" }
+    %meta{ content: "noindex, nofollow", name: "robots" }
+    %title
+      "Cask"
+    %link{ href: "styles.css", rel: "stylesheet", type: "text/css" }
+
+  %body
+    %header.header
+      %h1.title
+        Cask
+        %small
+          A simple relible float based grid system.
+        %small
+          %a.contact{ href: "https://github.com/whmii/cask" }
+            github
+          %a.contact{ href: "https://twitter.com/WHMII" }
+            @whmii
+      %ul.description
+        %li
+          Cask is only ~84 lines of code so its basically fully knowable
+        %li
+          Because of its simplicity there is virtually no “where is this coming from!?”
+        %li
+          The syntax for media queries is greatly simplified
+        %li
+          There is no use of relative positioning or nth child selectors
+        %li
+          Cask is built around defining as few attributes as possible
+        %li
+          It’s easy to use in conjunction with flex-box
+    %main.example
+      %section
+        %h1.section-title
+          Some Examples
+        .row
+          .col-12
+            .content
+              %code
+                @include grid-column($columns: 12);
+        .row
+          - 2.times do
+            .col-6
+              .content
+                %code
+                  @include grid-column($columns: 6);
+        .row
+          - 3.times do
+            .col-4
+              .content
+                %code
+                  $columns: 4
+        .row
+          - 4.times do
+            .col-3
+              .content
+                %code
+                  3
+        .row
+          - 6.times do
+            .col-2
+              .content
+                %code
+                  2
+        .row
+          - 12.times do
+            .col-1
+              .content
+                %code
+                  1
+      %section
+        %h1.section-title
+          Centered Grids
+        .row
+          .col-6-center
+            .content
+              %code
+                @include grid-column($columns: 6, $center: true);
+      %section
+        %h1.section-title
+          Push Grids
+        .row
+          .col-5-push
+            .content
+              %code
+                @include grid-push($push: 2);
+      %section
+        %h1.section-title
+          Shift Grids (reordering)
+        .row
+          .col-4-shift-1
+            .content
+              %code
+                [first] @include grid-shift($shift: 4);
+          .col-4-shift-2
+            .content
+              %code
+                [second] @include grid-shift($shift: -4);
+      %section
+        %h1.section-title
+          Collapsed & Nested Grids
+        .row
+          .content-label
+          .col-6
+            .content-label
+              6
+            .content
+              %code
+                $columns: 6
+          .col-6-collapse
+            .content-label
+              6
+            .col-6
+              .content-label
+                6
+              .content
+                %code
+                  $columns: 6
+            .col-6-collapse
+              .content-label
+                6
+              .col-6
+                .content-label
+                  6
+                .content
+                  %code
+                    6
+              .col-6
+                .content-label
+                  6
+                .content
+                  %code
+                    6
+      %section
+        %h1.section-title
+          Custom sub-grids
+        .row
+          .col-2-of-5
+            .content
+              %code
+                @include grid-column($columns:2 of 5);
+          .col-3-of-5
+            .content
+              %code
+                @include grid-column($columns:3 of 5);

data/lib/cask.rb

@@ -0,0 +1,19 @@
+require "cask/version"
+
+module Cask
+  if defined?(Rails) && defined?(Rails::Engine)
+    class Engine < ::Rails::Engine
+      require 'cask/engine'
+    end
+
+    module Rails
+      class Railtie < ::Rails::Railtie
+        rake_tasks do
+          load "tasks/install.rake"
+        end
+      end
+    end
+  else
+    Sass.load_paths << File.expand_path("../../app/assets/stylesheets", __FILE__)
+  end
+end