cask 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +18 -0
  3. data/.hound.yml +3 -0
  4. data/.scss-lint.yml +237 -0
  5. data/CONTRIBUTING.md +61 -0
  6. data/Gemfile +4 -0
  7. data/Gulpfile.js +41 -0
  8. data/LICENSE +21 -0
  9. data/README.md +54 -0
  10. data/Rakefile +1 -0
  11. data/app/assets/stylesheets/_cask.scss +12 -0
  12. data/app/assets/stylesheets/_variables.scss +31 -0
  13. data/app/assets/stylesheets/functions/_all.scss +5 -0
  14. data/app/assets/stylesheets/functions/_grid-calc.scss +13 -0
  15. data/app/assets/stylesheets/functions/_grid-column-ratio.scss +11 -0
  16. data/app/assets/stylesheets/functions/_grid-parse-column-count.scss +13 -0
  17. data/app/assets/stylesheets/mixins/_all.scss +8 -0
  18. data/app/assets/stylesheets/mixins/_grid-column.scss +17 -0
  19. data/app/assets/stylesheets/mixins/_grid-gutter.scss +17 -0
  20. data/app/assets/stylesheets/mixins/_grid-is-zero-error.scss +7 -0
  21. data/app/assets/stylesheets/mixins/_grid-push.scss +15 -0
  22. data/app/assets/stylesheets/mixins/_grid-row.scss +11 -0
  23. data/app/assets/stylesheets/mixins/_grid-shift.scss +16 -0
  24. data/bin/console +6 -0
  25. data/bin/setup +2 -0
  26. data/cask.gemspec +27 -0
  27. data/contrib/stylesheets/_example.scss +200 -0
  28. data/contrib/stylesheets/base/_base.scss +15 -0
  29. data/contrib/stylesheets/base/_buttons.scss +35 -0
  30. data/contrib/stylesheets/base/_forms.scss +90 -0
  31. data/contrib/stylesheets/base/_lists.scss +19 -0
  32. data/contrib/stylesheets/base/_tables.scss +24 -0
  33. data/contrib/stylesheets/base/_typography.scss +48 -0
  34. data/contrib/stylesheets/base/_variables.scss +43 -0
  35. data/contrib/stylesheets/styles.scss +11 -0
  36. data/contrib/views/index.haml +149 -0
  37. data/lib/cask.rb +19 -0
  38. data/lib/cask/engine.rb +5 -0
  39. data/lib/cask/version.rb +3 -0
  40. data/package.json +36 -0
  41. metadata +125 -0
@@ -0,0 +1 @@
1
+ require "bundler/gem_tasks"
@@ -0,0 +1,12 @@
1
+ // Cask
2
+ // ============================================================
3
+
4
+ *, *:before, *:after {
5
+ box-sizing: border-box;
6
+ }
7
+
8
+ @import "variables";
9
+
10
+ @import "functions/all";
11
+
12
+ @import "mixins/all";
@@ -0,0 +1,31 @@
1
+ // Grid Settings
2
+ // ============================================================
3
+
4
+ // ========= Grid Variables =========
5
+
6
+ $text-direction: ltr;
7
+
8
+ @if $text-direction == ltr {
9
+ $default-float: left !global;
10
+ $opposite-direction: right !global;
11
+ } @else if $text-direction == rtl {
12
+ $default-float: right !global;
13
+ $opposite-direction: left !global;
14
+ }
15
+
16
+ $grid-row-width: 80rem !default;
17
+ $grid-gutter: 1.25rem !default;
18
+ $grid-total-columns: 12 !default;
19
+
20
+ // ========= Media Queries =========
21
+
22
+ $small-screen: 768px !default;
23
+ $medium-screen: 1280px !default;
24
+ $large-screen: 1440px !default;
25
+
26
+ $screen: "only screen" !default;
27
+ $small: "only screen and (min-width: #{$small-screen})" !default;
28
+ $medium: "only screen and (min-width:#{$medium-screen})" !default;
29
+ $large: "only screen and (min-width:#{$large-screen})" !default;
30
+ $landscape: "only screen and (orientation: landscape)" !default;
31
+ $portrait: "only screen and (orientation: portrait)" !default;
@@ -0,0 +1,5 @@
1
+ // Functions
2
+
3
+ @import "grid-calc";
4
+ @import "grid-column-ratio";
5
+ @import "grid-parse-column-count";
@@ -0,0 +1,13 @@
1
+ // Calculates the width of a column for grid-column() and other mixins
2
+
3
+ @function grid-calc($columns, $collapse:false) {
4
+ $_column-ratio: grid-column-ratio($columns);
5
+
6
+ @if $collapse {
7
+ $_grid-gutter-affordance: (-$grid-gutter) + ($grid-gutter * $_column-ratio);
8
+ @return unquote("#{percentage($_column-ratio)} - #{$_grid-gutter-affordance}");
9
+ } @else {
10
+ $_grid-gutter-affordance: $grid-gutter + ($grid-gutter * $_column-ratio);
11
+ @return unquote("#{percentage($_column-ratio)} - #{$_grid-gutter-affordance}");
12
+ }
13
+ }
@@ -0,0 +1,11 @@
1
+ // Calculates the ratio of a given column over its container.
2
+
3
+ @function grid-column-ratio($columns) {
4
+ @if length($columns) > 1 {
5
+ @return nth($columns, 1) / grid-parse-column-count($columns);
6
+ } @if $columns {
7
+ @return $columns / $grid-total-columns;
8
+ } @else {
9
+ @return 1;
10
+ }
11
+ }
@@ -0,0 +1,13 @@
1
+ // Parses the total number of columns from `$columns`
2
+ @function grid-parse-column-count($span) {
3
+
4
+ @if length($span) == 3 {
5
+ $_total-columns: nth($span, 3);
6
+ @return $_total-columns;
7
+ } @else if length($span) == 2 {
8
+ $_total-columns: nth($span, 2);
9
+ @return $_total-columns;
10
+ } @else if length($span) >= 3 {
11
+ @error "`$column` had #{$span} values but should have no greater than 3";
12
+ }
13
+ }
@@ -0,0 +1,8 @@
1
+ // Mixins
2
+
3
+ @import "grid-column";
4
+ @import "grid-gutter";
5
+ @import "grid-is-zero-error";
6
+ @import "grid-push";
7
+ @import "grid-row";
8
+ @import "grid-shift";
@@ -0,0 +1,17 @@
1
+ // Specifies the number of columns an element should span.
2
+
3
+ @mixin grid-column(
4
+ $columns: false,
5
+ $collapse: false,
6
+ $center: false
7
+ ) {
8
+ @include grid-gutter($collapse: $collapse, $center: $center);
9
+
10
+ @if $center {
11
+ float: none;
12
+ } @else {
13
+ float: $default-float;
14
+ }
15
+
16
+ width: calc(#{grid-calc($columns, $collapse)});
17
+ }
@@ -0,0 +1,17 @@
1
+ // Specifies what a column's margins should be.
2
+
3
+ @mixin grid-gutter(
4
+ $collapse: false,
5
+ $center: false
6
+ ) {
7
+ @if $center {
8
+ margin-#{$default-float}: auto;
9
+ margin-#{$opposite-direction}: auto;
10
+ } @else if $collapse {
11
+ margin-#{$default-float}: 0;
12
+ margin-#{$opposite-direction}: -($grid-gutter);
13
+ } @else {
14
+ margin-#{$default-float}: $grid-gutter;
15
+ margin-#{$opposite-direction}: 0;
16
+ }
17
+ }
@@ -0,0 +1,7 @@
1
+ // Calculates the width of a column for grid-column() and other mixins.
2
+
3
+ @mixin grid-is-zero-error($property, $value) {
4
+ @if $value == 0 {
5
+ @error "if `#{$property}` is 0, use false or leave the input value blank";
6
+ }
7
+ }
@@ -0,0 +1,15 @@
1
+ // Push columns away from their container.
2
+
3
+ @mixin grid-push(
4
+ $push: false
5
+ ) {
6
+ @if $push {
7
+ $_grid-gutter-affordance: $grid-gutter * $push;
8
+ $_margin-value: calc(#{unquote(grid-calc($push))} + #{$_grid-gutter-affordance});
9
+ } @else {
10
+ $_margin-value: $grid-gutter;
11
+ }
12
+
13
+ @include grid-is-zero-error(grid-push, $push);
14
+ margin-#{$default-float}: $_margin-value;
15
+ }
@@ -0,0 +1,11 @@
1
+ // Create default and collapsed rows.
2
+
3
+ @mixin grid-row(
4
+ $center: true,
5
+ $max-width: $grid-row-width
6
+ ) {
7
+
8
+ @include clearfix;
9
+ @include grid-column($collapse: true, $center: $center);
10
+ max-width: $max-width;
11
+ }
@@ -0,0 +1,16 @@
1
+ // Shift columns and reorder them within their container.
2
+
3
+ @mixin grid-shift(
4
+ $shift: false
5
+ ) {
6
+ @if $shift == 0 {
7
+ @error grid-is-zero-error(grid-shift);
8
+ }
9
+
10
+ @if $shift {
11
+ $_shift-value: calc(#{unquote(grid-calc($shift))} + #{$grid-gutter});
12
+ #{$default-float}: $_shift-value;
13
+ }
14
+
15
+ position: relative;
16
+ }
@@ -0,0 +1,6 @@
1
+ #!/usr/bin/env ruby
2
+
3
+ require "bundler/setup"
4
+ require "cask"
5
+ require "irb"
6
+ IRB.start
@@ -0,0 +1,2 @@
1
+ #!/bin/sh
2
+ bundle install
@@ -0,0 +1,27 @@
1
+ # coding: utf-8
2
+ lib = File.expand_path('../lib', __FILE__)
3
+ $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
4
+ require 'cask/version'
5
+
6
+ Gem::Specification.new do |spec|
7
+ spec.name = "cask"
8
+ spec.version = Cask::VERSION
9
+ spec.platform = Gem::Platform::RUBY
10
+ spec.authors = ["Will H McMahan"]
11
+ spec.email = ["will@mcmahan.me"]
12
+
13
+ spec.summary = %q{A simple relible float based grid system}
14
+ spec.description = %q{A simple relible float based grid system}
15
+ spec.homepage = "http://whmii.github.io/cask"
16
+ spec.license = "MIT"
17
+
18
+ spec.files = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
19
+ spec.bindir = "exe"
20
+ spec.executables = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
21
+ spec.require_paths = ["lib"]
22
+
23
+ spec.add_dependency "bourbon", ">= 4.0"
24
+
25
+ spec.add_development_dependency "bundler", "~> 1.10"
26
+ spec.add_development_dependency "rake", "~> 10.0"
27
+ end
@@ -0,0 +1,200 @@
1
+ // Example Styles
2
+ // =======================================
3
+
4
+ .header {
5
+ @include grid-row();
6
+ margin-bottom: 1em;
7
+
8
+ .title {
9
+ background-color: $base-font-color;
10
+ color: white;
11
+ font-size: 6.25rem;
12
+ margin-bottom: 0;
13
+ padding-bottom: 0.5rem;
14
+ text-align: center;
15
+
16
+ small {
17
+ display: block;
18
+ font-size: 1rem;
19
+ line-height: 1.5;
20
+ margin-bottom: 1rem;
21
+ }
22
+
23
+ a {
24
+ color: white;
25
+
26
+ &.contact {
27
+ margin: 0 0.75em;
28
+ }
29
+ }
30
+ }
31
+
32
+ .description li {
33
+ border-bottom: $base-border;
34
+ padding: $small-spacing;
35
+ }
36
+
37
+ @media #{$small} {
38
+ display: flex;
39
+
40
+ .title {
41
+ @include grid-column($columns: 6);
42
+ }
43
+
44
+ .description {
45
+ @include grid-column($columns: 6);
46
+ }
47
+ }
48
+ }
49
+
50
+ .example {
51
+
52
+ .section-title {
53
+ @include grid-row($max-width: null);
54
+ background-color: whitesmoke;
55
+ line-height: 4;
56
+ text-align: center;
57
+ white-space: nowrap;
58
+ }
59
+
60
+ .row {
61
+ @include grid-row();
62
+ background-color: $medium-gray;
63
+ margin-bottom: 1em;
64
+ padding-bottom: em(2);
65
+ padding-top: em(2);
66
+ }
67
+
68
+ .content {
69
+ background-color: $light-gray;
70
+ display: block;
71
+ line-height: 6em;
72
+ text-align: center;
73
+ white-space: nowrap;
74
+ }
75
+
76
+ .content-label {
77
+ color: $base-background-color;
78
+ display: block;
79
+ font-family: $monospace-font-family;
80
+ -webkit-font-smoothing: antialiased;
81
+ line-height: 1.5em;
82
+ text-align: center;
83
+ white-space: nowrap;
84
+
85
+ &::after {
86
+ border-color: $light-gray;
87
+ border-style: solid;
88
+ border-width: 1px 1px 0;
89
+ content: "";
90
+ display: block;
91
+ height: 1.5em;
92
+ margin: 0 3px;
93
+ }
94
+ }
95
+
96
+ [class^="col-"] {
97
+ border-left: $base-border;
98
+ border-right: $base-border;
99
+ }
100
+
101
+ .col-12 {
102
+
103
+ @media #{$small} {
104
+ @include grid-column($columns: 12);
105
+ }
106
+ }
107
+
108
+ .col-6 {
109
+
110
+ @media #{$small} {
111
+ @include grid-column($columns: 6);
112
+ }
113
+ }
114
+
115
+ .col-6-center {
116
+
117
+ @media #{$small} {
118
+ @include grid-column($columns: 6, $center: true);
119
+ }
120
+ }
121
+
122
+ .col-6-collapse {
123
+
124
+ @media #{$small} {
125
+ @include grid-column($columns: 6, $collapse: true);
126
+ }
127
+ }
128
+
129
+ .col-4 {
130
+
131
+ @media #{$small} {
132
+ @include grid-column($columns: 4);
133
+ }
134
+ }
135
+
136
+ .col-3 {
137
+
138
+ @media #{$small} {
139
+ @include grid-column($columns: 3);
140
+ }
141
+ }
142
+
143
+ .col-2 {
144
+
145
+ @media #{$small} {
146
+ @include grid-column($columns: 2);
147
+ }
148
+ }
149
+
150
+ .col-1 {
151
+
152
+ @media #{$small} {
153
+ @include grid-column($columns: 1);
154
+ }
155
+ }
156
+
157
+ .col-5-push {
158
+
159
+ @media #{$small} {
160
+ @include grid-column($columns: 5);
161
+ @include grid-push($push: 2);
162
+ }
163
+ }
164
+
165
+ .col-4-shift-1 {
166
+
167
+ @media #{$small} {
168
+ @include grid-column($columns: 4);
169
+ @include grid-shift($shift: 4);
170
+ }
171
+ }
172
+
173
+ .col-4-shift-2 {
174
+
175
+ @media #{$small} {
176
+ @include grid-column($columns: 4);
177
+ @include grid-shift($shift: -4);
178
+ }
179
+ }
180
+
181
+ .col-2-of-5 {
182
+ @include grid-column($columns: 2 of 5);
183
+ }
184
+
185
+ .col-3-of-5 {
186
+ @include grid-column($columns: 3 of 5);
187
+ }
188
+ }
189
+
190
+ @media #{$screen} {}
191
+
192
+ @media #{$small} {}
193
+
194
+ @media #{$medium} {}
195
+
196
+ @media #{$large} {}
197
+
198
+ @media #{$landscape} {}
199
+
200
+ @media #{$portrait} {}
@@ -0,0 +1,15 @@
1
+ // Bitters 1.1.0
2
+ // http://bitters.bourbon.io
3
+ // Copyright 2013-2015 thoughtbot, inc.
4
+ // MIT License
5
+
6
+ @import "variables";
7
+
8
+ // Neat Settings -- uncomment if using Neat -- must be imported before Neat
9
+ // @import "grid-settings";
10
+
11
+ @import "buttons";
12
+ @import "forms";
13
+ @import "lists";
14
+ @import "tables";
15
+ @import "typography";