ratchet_design 0.1.17 → 0.1.18

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 (34) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/ratchet/core.js +4 -0
  3. data/app/assets/javascripts/ratchet/shim/object_fit.js +236 -0
  4. data/app/assets/javascripts/ratchet/utility/load_font.js +24 -11
  5. data/app/assets/stylesheets/ratchet/base/_document.scss +8 -30
  6. data/app/assets/stylesheets/ratchet/base/_form.scss +42 -58
  7. data/app/assets/stylesheets/ratchet/base/_section.scss +140 -159
  8. data/app/assets/stylesheets/ratchet/base/_text.scss +1 -1
  9. data/app/assets/stylesheets/ratchet/base/_validation.scss +3 -3
  10. data/app/assets/stylesheets/ratchet/fonts-woff.css +22 -6
  11. data/app/assets/stylesheets/ratchet/fonts-woff2.css +22 -6
  12. data/app/assets/stylesheets/ratchet/utility/_color.scss +80 -54
  13. data/app/assets/stylesheets/ratchet/utility/_global.scss +96 -21
  14. data/app/assets/stylesheets/ratchet/utility/_grid.scss +54 -5
  15. data/app/helpers/ratchet/application_helper.rb +10 -11
  16. data/app/views/layouts/ratchet/default.html.slim +7 -7
  17. data/app/views/shared/ratchet/_defs.html.slim +23 -2
  18. data/app/views/shared/ratchet/_footer.html.slim +2 -4
  19. data/app/views/shared/ratchet/_icons.html.slim +197 -128
  20. data/lib/ratchet_design/version.rb +1 -1
  21. data/public/{core-0.1.17.js → core-0.1.18.js} +68 -64
  22. data/public/core-0.1.18.js.gz +0 -0
  23. data/public/core-0.1.18.map.json +1 -0
  24. data/public/fonts-woff-0.1.18.css +71 -0
  25. data/public/fonts-woff-0.1.18.css.gz +0 -0
  26. data/public/fonts-woff2-0.1.18.css +71 -0
  27. data/public/fonts-woff2-0.1.18.css.gz +0 -0
  28. metadata +10 -9
  29. data/public/core-0.1.17.js.gz +0 -0
  30. data/public/core-0.1.17.map.json +0 -1
  31. data/public/fonts-woff-0.1.17.css +0 -55
  32. data/public/fonts-woff-0.1.17.css.gz +0 -0
  33. data/public/fonts-woff2-0.1.17.css +0 -55
  34. data/public/fonts-woff2-0.1.17.css.gz +0 -0
@@ -3,24 +3,41 @@
3
3
  * -------------------------------------------------------------------------- */
4
4
 
5
5
  // Passive colors
6
- $space: #263d53; // Blue-Black
7
- $shark: #445d75; // Dark Blue-Gray
8
- $steel: #58728a; // Blue-Gray
9
- $pewter: #87a0b8; // Light Blue-Gray
10
- $alabaster: #cbd6e1; // Light Blue
11
- $isabella: #dde8eb; // Off-Cream
12
- $smoke: #eff4f6; // Cream
6
+ $space: #1f2b54; // Blue-Black
7
+ $shark: #30446e; // Dark Blue-Gray
8
+ $steel: #576e91; // Blue-Gray
9
+ $pewter: #869ebc; // Light Blue-Gray
10
+ $dolphin: #b4c1d2; // Lighter Blue
11
+ $alabaster: #c3cdda; // Light Blue
12
+ $isabella: #d6dde7; // Off-Cream
13
+ $smoke: #edf5f7; // Cream
13
14
  $white: #FFFFFF; // White
14
15
 
16
+ // Passive (dark to light)
17
+ $rhino: #263D53;
18
+ $bayou: #445D75;
19
+ $smalt: #58728A;
20
+ $bali: #87A0B8;
21
+ $boticelli: #C3D4E4;
22
+ $catskill: #EDF5F7;
23
+
24
+ // Active
25
+ $azure: #0094FD; // Blue
26
+ $cornflower: #625ff9; // Blue purple
27
+ $medium: #8F52EA; // Purple
28
+ $shocking: #C60CA5; // Pink
29
+ $shamrock: #25C894; // Mint green
30
+ $poppy: #F69523; // Light orange
31
+ $orange: #F96623; // Orange
32
+ $crimson: #DD2F41; // Red
15
33
  // Active colors
16
34
  $azure: #0094fd; // Blue
17
35
  $cerulean: #0FA7DB; // Softer Blue
18
36
  $byzantine: #c60ca5; // Magenta
19
37
  $mulberry: #8f52ea; // Purple
20
38
  $majorelle: #625ff9; // Indigo
21
- $grass: #2ac84f; // Green
22
- $apple: #3FBE3E; // Very Green
23
39
  $caribbean: #25c894; // Mint
40
+ $grass: #2ac84f; // Green
24
41
  $gold: #f69523; // Yellow
25
42
  $tangelo: #f96623; // Orange
26
43
  $rusty: #dd2f41; // Red
@@ -34,42 +51,45 @@ $terracotta: #A81C27; // Thanksgiving
34
51
  $cobalt: #006dff; // Royal blue
35
52
  $capri: #00d2fe; // Deep sky blue
36
53
 
37
- // Gradient (colors)
38
- $earthrise: ( start: $azure, end: $majorelle ); // Blue to Indigo // PostgreSQL
39
- $royalty: ( start: $majorelle, end: $mulberry ); // Indigo to Purple // Elasticsearch
40
- $lagoon: ( start: $azure, end: $caribbean ); // Blue to Mint // RethinkDB
41
- $pearlescent: ( start: $azure, end: $mulberry ); // Blue to Purple // MySQL
42
- $firestorm: ( start: $gold, end: $tangelo ); // Yellow to Orange // RabbitMQ
43
- $sunset: ( start: $tangelo, end: $rusty ); // Orange to Red // Redis
44
- $berries: ( start: $byzantine, end: $rusty ); // Magenta to Red // etcd
45
- $supernova: ( start: $byzantine, end: $mulberry ); // Magenta to Purple // ScyllaDB
46
- $emerald: ( start: $caribbean, end: $grass ); // Mint to Green // MongoDB
47
- $aurora: ( start: $grass, end: $mulberry ); // Green to Indigo
48
- $tidal: ( start: $cobalt, end: $capri ); // Hero Gradient Only
54
+ // Active color gradients
55
+ $active-gradients: (
56
+ earthrise: ( start: $azure, end: $majorelle ), // Blue to Indigo | PostgreSQL
57
+ royalty: ( start: $majorelle, end: $mulberry ), // Indigo to Purple | Elasticsearch
58
+ lagoon: ( start: $azure, end: $caribbean ), // Blue to Mint | RethinkDB
59
+ pearlescent: ( start: $azure, end: $mulberry ), // Blue to Purple | MySQL
60
+ firestorm: ( start: $gold, end: $tangelo ), // Yellow to Orange | RabbitMQ
61
+ sunset: ( start: $tangelo, end: $rusty ), // Orange to Red | Redis
62
+ berries: ( start: $byzantine, end: $rusty ), // Magenta to Red | etcd
63
+ supernova: ( start: $byzantine, end: $mulberry ), // Magenta to Purple | ScyllaDB
64
+ emerald: ( start: $caribbean, end: $grass ), // Mint to Green | MongoDB
65
+ aurora: ( start: $grass, end: $mulberry ), // Green to Indigo
66
+ tidal: ( start: $cobalt, end: $capri ) // Hero Gradient Only
67
+ );
49
68
 
50
69
  // Gradient (passive)
51
- $blackhole: ( start: $space, end: $steel ); // Hero Gradient Only
52
- $midnight: ( start: $shark, end: $pewter ); // Hero Gradient Only
53
- $shady: ( start: $steel, end: $alabaster ); // Hero Gradient Only
54
- $grayscale: ( start: $pewter, end: $isabella ); // Hero Gradient Only
55
- $polar: ( start: $alabaster, end: $smoke ); // Hero Gradient Only
56
- $eggshell: ( start: $isabella, end: $white ); // Hero Gradient Only
57
-
70
+ $passive-gradients: (
71
+ blackhole: ( start: $space, end: $steel ), // Hero Gradient Only
72
+ midnight: ( start: $shark, end: $pewter ), // Hero Gradient Only
73
+ shady: ( start: $steel, end: $alabaster ), // Hero Gradient Only
74
+ grayscale: ( start: $pewter, end: $isabella ), // Hero Gradient Only
75
+ polar: ( start: $alabaster, end: $smoke ), // Hero Gradient Only
76
+ eggshell: ( start: $isabella, end: $white ) // Hero Gradient Only
77
+ );
58
78
 
59
79
  // Translucent colors
60
80
  $translucent-white: rgba($white, .5);
61
81
 
62
82
  // Active Variable List
63
- $active-colors: $azure, $byzantine, $mulberry, $majorelle, $caribbean, $grass, $gold, $tangelo, $rusty;
64
- $active-color-names: azure, byzantine, mulberry, majorelle, caribbean, grass, gold, tangelo, rusty;
83
+ $active-colors: $azure, $cerulean, $byzantine, $mulberry, $majorelle, $caribbean, $grass, $gold, $tangelo, $rusty, $orchid;
84
+ $active-color-names: azure, cerulean, byzantine, mulberry, majorelle, caribbean, grass, gold, tangelo, rusty, orchid;
65
85
 
66
86
  // Passive Variable List
67
- $passive-colors: $space, $shark, $steel, $pewter, $alabaster, $smoke, $white;
68
- $passive-color-names: space, shark, steel, pewter, alabaster, smoke, white;
87
+ $passive-colors: $space, $shark, $steel, $pewter, $dolphin, $alabaster, $isabella, $smoke, $white;
88
+ $passive-color-names: space, shark, steel, pewter, dolphin, alabaster, isabella, smoke, white;
69
89
 
70
- // Active Gradient Variable List
71
- $gradient-colors: $earthrise, $royalty, $lagoon, $pearlescent, $firestorm, $sunset, $berries, $supernova, $emerald, $aurora, $tidal, $blackhole, $midnight, $shady, $grayscale, $polar, $eggshell;
72
- $gradient-color-names: earthrise, royalty, lagoon, pearlescent, firestorm, sunset, berries, supernova, emerald, aurora, tidal, blackhole, midnight, shady, grayscale, polar, eggshell;
90
+ // // Active Gradient Variable List
91
+ // $gradient-colors: $earthrise, $royalty, $lagoon, $pearlescent, $firestorm, $sunset, $berries, $supernova, $emerald, $aurora, $tidal, $blackhole, $midnight, $shady, $grayscale, $polar, $eggshell;
92
+ // $gradient-color-names: earthrise, royalty, lagoon, pearlescent, firestorm, sunset, berries, supernova, emerald, aurora, tidal, blackhole, midnight, shady, grayscale, polar, eggshell;
73
93
 
74
94
  // Active and Passive List
75
95
  $full-solid-color-list: zip( join($active-color-names, $passive-color-names), join($active-colors, $passive-colors));
@@ -92,44 +112,50 @@ $full-solid-color-list: zip( join($active-color-names, $passive-color-names), jo
92
112
  stop-color: #{$color};
93
113
  }
94
114
  }
115
+
116
+ linearGradient##{$name}-darken {
117
+ stop:nth-child(1) {
118
+ stop-color: darken($color, 10%);
119
+ }
120
+ }
95
121
  }
96
122
 
97
- @for $i from 1 through length($gradient-colors) {
98
123
 
99
- $gradient: nth($gradient-colors, $i);
100
- $start-color: map_get( $gradient, start );
101
- $end-color: map_get( $gradient, end );
124
+ // Create active gradients
125
+ @each $key, $val in $active-gradients {
126
+ $start: map-get($val, start);
127
+ $end: map-get($val, end);
102
128
 
103
- .#{nth($gradient-color-names, $i)}-bg {
104
- &:before {
105
- background: linear-gradient(135deg, $start-color, $end-color) left top/100% 100% no-repeat;
106
- }
107
- }
129
+ // .#{$key}-bg {
130
+ // &:before {
131
+ // background: linear-gradient(135deg, #{$start}, #{$end}) left top/100% 100% no-repeat;
132
+ // }
133
+ // }
108
134
 
109
- linearGradient##{nth($gradient-color-names, $i)} {
135
+ linearGradient##{$key} {
110
136
  stop:nth-child(1) {
111
- stop-color: $start-color;
137
+ stop-color: $start;
112
138
  }
113
139
  stop:nth-child(2) {
114
- stop-color: $end-color;
140
+ stop-color: $end;
115
141
  }
116
142
  }
117
143
 
118
- linearGradient##{nth($gradient-color-names, $i)}-darken {
144
+ linearGradient##{$key}-darken {
119
145
  stop:nth-child(1) {
120
- stop-color: darken($start-color, 10%);
146
+ stop-color: darken($start, 10%);
121
147
  }
122
148
  stop:nth-child(2) {
123
- stop-color: darken($end-color, 10%);
149
+ stop-color: darken($end, 10%);
124
150
  }
125
151
  }
126
152
 
127
- linearGradient##{nth($gradient-color-names, $i)}-lighten {
153
+ linearGradient##{$key}-lighten {
128
154
  stop:nth-child(1) {
129
- stop-color: lighten($start-color, 10%);
155
+ stop-color: lighten($start, 10%);
130
156
  }
131
157
  stop:nth-child(2) {
132
- stop-color: lighten($end-color, 10%);
158
+ stop-color: lighten($end, 10%);
133
159
  }
134
160
  }
135
- }
161
+ }
@@ -8,11 +8,13 @@
8
8
 
9
9
  @import 'color';
10
10
 
11
-
12
11
  /* ===================================== *
13
12
  * ii. Fonts
14
13
  * ------------------------------------- */
15
14
 
15
+ // Cap height declaration
16
+ $cap-height: .75;
17
+
16
18
  // Vertical rhythm base unit
17
19
  $vr-base-unit: 15px;
18
20
 
@@ -21,6 +23,38 @@ $vr-base-unit: 15px;
21
23
  @return $vr-base-unit * $factor;
22
24
  }
23
25
 
26
+ // Vertical rhythm
27
+ $base-size: 16px;
28
+ $base-height: vr(2); // 30px
29
+
30
+ // Properly align type to baseline
31
+ @mixin baseline($font-size: 16px, $line-height: 2, $size-output: on, $extra-top: 0, $extra-bottom: 0) {
32
+
33
+ // Vertical rhythm line height
34
+ $vr-line-height: vr($line-height);
35
+
36
+ // Top line height remainder (for off-rhythm line height declarations)
37
+ $top-remainder: vr(1 - $line-height % 1);
38
+
39
+ // Bottom line height remainder (for off-rhythm line height declarations)
40
+ $bottom-remainder: vr($line-height % 1);
41
+
42
+ // Magic sauce (read: calculate the true baseline)
43
+ $baseline: $font-size * ($vr-line-height / $font-size - $cap-height) / 2;
44
+
45
+ // Final top offset calculation
46
+ $top-offset: ($baseline + $top-remainder) % $vr-base-unit;
47
+
48
+ // Final bottom offset calculation
49
+ $bottom-offset: ($vr-base-unit - $top-offset) % $vr-base-unit;
50
+
51
+ // Declarations
52
+ @if $size-output == on { font-size: $font-size; }
53
+ line-height: $vr-line-height;
54
+ padding-top: $top-offset + vr($extra-top);
55
+ margin-bottom: $bottom-offset + vr($extra-bottom);
56
+ }
57
+
24
58
  // Vertical rhythm mixin
25
59
  @mixin rhythm($top: null, $bottom: null, $match: off, $switch: on) {
26
60
  @if $switch == on {
@@ -45,9 +79,27 @@ $vr-base-unit: 15px;
45
79
  @include rhythm($switch: off);
46
80
  }
47
81
 
48
- // Vertical rhythm
49
- $base-size: 15px;
50
- $base-height: vr(2); // 30px
82
+ // Responsive font mixin
83
+ @mixin responsive-font($responsive, $min, $max: false, $fallback: false) {
84
+ $responsive-unitless: $responsive / ($responsive - $responsive + 1);
85
+ $dimension: if(unit($responsive) == 'vh', 'height', 'width');
86
+ $min-breakpoint: $min / $responsive-unitless * 100;
87
+
88
+ @media (max-#{$dimension}: #{$min-breakpoint}) {
89
+ font-size: $min;
90
+ }
91
+
92
+ @if $max {
93
+ $max-breakpoint: $max / $responsive-unitless * 100;
94
+
95
+ @media (min-#{$dimension}: #{$max-breakpoint}) {
96
+ font-size: $max;
97
+ }
98
+ }
99
+
100
+ @if $fallback { font-size: $fallback; }
101
+ font-size: $responsive;
102
+ }
51
103
 
52
104
  // Fonts stacks
53
105
  $base-font: Caslon, 'Proxima Nova', Avenir, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
@@ -123,34 +175,40 @@ $deg: 30deg;
123
175
  }
124
176
 
125
177
  // Modules with max-width and padding
126
- @mixin padded-module($width: 1100px, $padding: $content-padding) {
127
- width: $width;
128
- max-width: 100%;
129
- margin-left: auto;
130
- margin-right: auto;
131
- padding-left: $padding;
132
- padding-right: $padding;
178
+ @mixin padded-module($width: 1100px, $padding: $content-padding, $nested: true) {
179
+ padding-left: calc(50vw - #{$width / 2});
180
+ padding-right: calc(50vw - #{$width / 2});
181
+
182
+ @if $nested {
183
+ width: 100vw;
184
+ }
185
+
186
+ @media (max-width: $width + $padding * 2) {
187
+ padding-left: $padding;
188
+ padding-right: $padding;
189
+ }
190
+ }
191
+
192
+ // Center an element to the viewport regardless of nesting
193
+ @mixin center-to-viewport {
194
+ margin-left: calc(-50vw + 50%);
195
+ transform: translateX(calc(50vw - 50%));
133
196
  }
134
197
 
135
198
  // Width-agnostic module backgrounds
136
199
  @mixin cover-background($background: transparent, $offset: null) {
137
- position: relative;
200
+ &,
201
+ > * {
202
+ position: relative;
203
+ }
138
204
 
139
205
  &:before {
140
206
  content: '';
141
207
  width: 100vw;
142
208
  position: absolute;
143
209
  left: calc(-50vw + 50%);
210
+ background: $background;
144
211
  z-index: -1;
145
-
146
-
147
- @if contains($gradient-colors, $background) {
148
- $start-color: map_get( $background, start );
149
- $end-color: map_get( $background, end );
150
- background: linear-gradient(135deg, $start-color, $end-color) left top/100% 100% no-repeat;
151
- } @else {
152
- background: $background;
153
- }
154
212
 
155
213
  // Set top offset (if present)
156
214
  @if $offset != null {
@@ -167,6 +225,23 @@ $deg: 30deg;
167
225
  * v. Context
168
226
  * ------------------------------------- */
169
227
 
228
+ // Normal link state mixin
229
+ @mixin normal {
230
+ &,
231
+ &:visited {
232
+ @content;
233
+ }
234
+ }
235
+
236
+ // Active link state mixin
237
+ @mixin active {
238
+ &:hover,
239
+ &:focus,
240
+ &:active {
241
+ @content;
242
+ }
243
+ }
244
+
170
245
  // Until width media query mixin
171
246
  @mixin until($width) {
172
247
  $width: $width - 1;
@@ -6,6 +6,19 @@
6
6
  * i. Utilities
7
7
  * ------------------------------------- */
8
8
 
9
+ // Display breakpoints
10
+ $breakpoint-xlg: 1500px;
11
+ $breakpoint-lg: 1100px;
12
+ $breakpoint: 800px;
13
+ $breakpoint-sm: 550px;
14
+ $breakpoint-xsm: 400px;
15
+ $sidebar-width: 225px;
16
+
17
+ // Grid gutter definitions
18
+ $grid-no-gutter: 0;
19
+ $grid-small-gutter: vr(2); // 30px
20
+ $grid-large-gutter: vr(4); // 60px
21
+
9
22
  // Grid init mixin (use on parent elements)
10
23
  @mixin grid($direction: row) {
11
24
  display: flex;
@@ -16,9 +29,9 @@
16
29
 
17
30
  // Grid gutter mixin (use on parent elements)
18
31
  @mixin gutter($amount: 0) {
19
- margin-top: -$amount;
20
- margin-left: $amount * -.5;
21
- margin-right: $amount * -.5;
32
+ // margin-top: -$amount;
33
+ // margin-left: $amount * -.5;
34
+ // margin-right: $amount * -.5;
22
35
 
23
36
  > * {
24
37
  margin-bottom: 0;
@@ -62,9 +75,13 @@
62
75
  }
63
76
 
64
77
  // Column span mixin (use on child elements)
65
- @mixin span($cols: auto, $breakpoint: 34em) {
78
+ @mixin span($cols: auto, $breakpoint: auto) {
66
79
 
67
80
  // Universal styles
81
+ display: flex;
82
+ flex-flow: column nowrap;
83
+ align-items: flex-start;
84
+ // justify-content: center;
68
85
  flex: 0 0 auto;
69
86
  max-width: inherit;
70
87
 
@@ -99,4 +116,36 @@
99
116
  // Column offset mixin (use on child elements)
100
117
  @mixin offset($offset: 1) {
101
118
  margin-left: span($offset);
102
- }
119
+ }
120
+
121
+ /* ===================================== *
122
+ * ii. Grid Core
123
+ * ------------------------------------- */
124
+
125
+ .grid {
126
+ @include grid();
127
+
128
+ &.small-gutter {
129
+ @include gutter($grid-small-gutter);
130
+ }
131
+
132
+ &.large-gutter {
133
+ @include gutter($grid-large-gutter);
134
+ }
135
+ }
136
+
137
+ $cell-sizes: (1:one, 2:two, 3:three, 4:four, 5:five, 6:six);
138
+
139
+ @mixin grid-cell($num) {
140
+ @for $i from 1 through length($cell-sizes) {
141
+ .#{map-get($cell-sizes, $i)}-of-#{map-get($cell-sizes, $num)} {
142
+ @include span($i of $num);
143
+ }
144
+ }
145
+ }
146
+
147
+ @include grid-cell(2);
148
+ @include grid-cell(3);
149
+ @include grid-cell(4);
150
+ @include grid-cell(5);
151
+ @include grid-cell(6);
@@ -47,22 +47,21 @@ module Ratchet
47
47
  end
48
48
 
49
49
  # Set custom page selector class
50
- def selector(selector = nil)
51
- selector ? content_for(:selector) { selector } : content_for(:selector).presence
50
+ def page_class(*classes)
51
+ @classes = [] if @classes.nil?
52
+ @classes += classes
53
+ @classes.uniq!
54
+ nil
52
55
  end
53
56
 
54
57
  # Consolidated page class output
55
- def page_class( classnames = nil )
56
- if ( classnames )
57
- @page_classes ||= ''
58
- @page_classes = @page_classes + ' ' + classnames
59
- @page_classes.strip!
60
- else
61
- @page_classes || ''
62
- end
58
+ def page_classes
59
+ page_class = @classes.map(&:to_s).join(" ") rescue nil
60
+ parts = request.path.split("/").reject(&:blank?).reject{|s| s.match(/\A[0-9]+(\.[0-9]+)?\z/)}
61
+ [ parts.last, page_class ].reject(&:blank?).join(" ")
63
62
  end
64
63
 
65
- # Consolidated page class output
64
+ # Main section class output
66
65
  def main_class( classnames = nil )
67
66
  if ( classnames )
68
67
  @main_classes ||= ''