ratchet_design 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (78) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE.txt +21 -0
  3. data/README.md +41 -0
  4. data/app/assets/images/ratchet/favicon.ico +0 -0
  5. data/app/assets/javascripts/ratchet/_svg.js +55 -0
  6. data/app/assets/javascripts/ratchet/base/form.js +220 -0
  7. data/app/assets/javascripts/ratchet/base/mobilemenu.js +62 -0
  8. data/app/assets/javascripts/ratchet/base/validation.js +230 -0
  9. data/app/assets/javascripts/ratchet/core.js +92 -0
  10. data/app/assets/javascripts/ratchet/enhancement/_collapse.js +96 -0
  11. data/app/assets/javascripts/ratchet/enhancement/_lightbox.js +93 -0
  12. data/app/assets/javascripts/ratchet/enhancement/_swap.js +120 -0
  13. data/app/assets/javascripts/ratchet/enhancement/_switcheroo.js +28 -0
  14. data/app/assets/javascripts/ratchet/enhancement/_textcounter.js +92 -0
  15. data/app/assets/javascripts/ratchet/enhancement/loader.js +77 -0
  16. data/app/assets/javascripts/ratchet/enhancement/notice.js +70 -0
  17. data/app/assets/javascripts/ratchet/enhancement/sticky.js +128 -0
  18. data/app/assets/javascripts/ratchet/enhancement/waypoints.js +328 -0
  19. data/app/assets/javascripts/ratchet/shim/classlist.js +234 -0
  20. data/app/assets/javascripts/ratchet/shim/object.assign.js +30 -0
  21. data/app/assets/javascripts/ratchet/utility/compile_data.js +32 -0
  22. data/app/assets/javascripts/ratchet/utility/from_top.js +14 -0
  23. data/app/assets/javascripts/ratchet/utility/full_stop.js +55 -0
  24. data/app/assets/javascripts/ratchet/utility/get_closest.js +20 -0
  25. data/app/assets/javascripts/ratchet/utility/get_next.js +17 -0
  26. data/app/assets/javascripts/ratchet/utility/load_font.js +72 -0
  27. data/app/assets/javascripts/ratchet/utility/load_script.js +34 -0
  28. data/app/assets/javascripts/ratchet/utility/matches.js +15 -0
  29. data/app/assets/javascripts/ratchet/utility/scroll_to.js +74 -0
  30. data/app/assets/javascripts/ratchet/utility/throttle.js +25 -0
  31. data/app/assets/javascripts/ratchet/utility/timeout.js +45 -0
  32. data/app/assets/javascripts/ratchet/utility/unhover.js +56 -0
  33. data/app/assets/javascripts/ratchet/utility/word_count.js +15 -0
  34. data/app/assets/stylesheets/ratchet/_core.scss +20 -0
  35. data/app/assets/stylesheets/ratchet/base/_button.scss +101 -0
  36. data/app/assets/stylesheets/ratchet/base/_document.scss +306 -0
  37. data/app/assets/stylesheets/ratchet/base/_form.scss +614 -0
  38. data/app/assets/stylesheets/ratchet/base/_list.scss +114 -0
  39. data/app/assets/stylesheets/ratchet/base/_media.scss +41 -0
  40. data/app/assets/stylesheets/ratchet/base/_table.scss +81 -0
  41. data/app/assets/stylesheets/ratchet/base/_text.scss +411 -0
  42. data/app/assets/stylesheets/ratchet/enhancement/_contrast-section.scss +22 -0
  43. data/app/assets/stylesheets/ratchet/enhancement/_feature.scss +49 -0
  44. data/app/assets/stylesheets/ratchet/enhancement/_hero.scss +44 -0
  45. data/app/assets/stylesheets/ratchet/enhancement/_loader.scss +109 -0
  46. data/app/assets/stylesheets/ratchet/enhancement/_notice.scss +74 -0
  47. data/app/assets/stylesheets/ratchet/enhancement/_signup.scss +206 -0
  48. data/app/assets/stylesheets/ratchet/enhancement/_sticky-sidebar.scss +36 -0
  49. data/app/assets/stylesheets/ratchet/fonts-woff.css +55 -0
  50. data/app/assets/stylesheets/ratchet/fonts-woff2.css +55 -0
  51. data/app/assets/stylesheets/ratchet/utility/_global.scss +255 -0
  52. data/app/assets/stylesheets/ratchet/utility/_grid.scss +102 -0
  53. data/app/assets/svgs/ratchet/facebook.svg +1 -0
  54. data/app/assets/svgs/ratchet/github.svg +1 -0
  55. data/app/assets/svgs/ratchet/google-plus.svg +1 -0
  56. data/app/assets/svgs/ratchet/ibm.svg +1 -0
  57. data/app/assets/svgs/ratchet/inbox.svg +1 -0
  58. data/app/assets/svgs/ratchet/linkedin.svg +1 -0
  59. data/app/assets/svgs/ratchet/ratchet.svg +1 -0
  60. data/app/assets/svgs/ratchet/search.svg +1 -0
  61. data/app/assets/svgs/ratchet/subscribe.svg +1 -0
  62. data/app/assets/svgs/ratchet/twitter.svg +1 -0
  63. data/app/assets/svgs/ratchet/y-combinator.svg +1 -0
  64. data/app/helpers/ratchet/application_helper.rb +51 -0
  65. data/app/views/layouts/ratchet/default.html.slim +61 -0
  66. data/app/views/shared/ratchet/_footer.html.slim +2 -0
  67. data/app/views/shared/ratchet/_header.html.slim +17 -0
  68. data/app/views/shared/ratchet/_icons.html.slim +89 -0
  69. data/lib/ratchet_design.rb +12 -0
  70. data/lib/ratchet_design/version.rb +3 -0
  71. data/public/assets/ratchet/core-0.1.0.js +103 -0
  72. data/public/assets/ratchet/core-0.1.0.js.gz +0 -0
  73. data/public/assets/ratchet/core-0.1.0.map.json +1 -0
  74. data/public/assets/ratchet/fonts-woff-0.1.0.css +55 -0
  75. data/public/assets/ratchet/fonts-woff-0.1.0.css.gz +0 -0
  76. data/public/assets/ratchet/fonts-woff2-0.1.0.css +55 -0
  77. data/public/assets/ratchet/fonts-woff2-0.1.0.css.gz +0 -0
  78. metadata +177 -0
@@ -0,0 +1,114 @@
1
+ /* ========================================================================== *
2
+ * b. List module
3
+ * -------------------------------------------------------------------------- */
4
+
5
+ /* ===================================== *
6
+ * i. Utility
7
+ * ------------------------------------- */
8
+
9
+ // Remove styling from unordered lists
10
+ @mixin unstyle($reset-padding: on) {
11
+ list-style: none;
12
+
13
+ li {
14
+ text-indent: 0;
15
+ @if $reset-padding == on {
16
+ padding-left: 0;
17
+ }
18
+ }
19
+ }
20
+
21
+ // Unstyle list
22
+ %unstyle {
23
+ @include unstyle;
24
+ }
25
+
26
+ // Style
27
+ %list-style {
28
+ padding-top: 9px;
29
+ margin-bottom: 21px;
30
+ list-style-position: inside;
31
+
32
+ // Horizontal alignment
33
+ li {
34
+ text-indent: -20px;
35
+ padding-left: 20px;
36
+ }
37
+ }
38
+
39
+ /* ===================================== *
40
+ * ii. Unordered
41
+ * ------------------------------------- */
42
+
43
+ ul {
44
+ @extend %list-style;
45
+ list-style-type: disc;
46
+
47
+ // Bare unordered list vertical rhythm
48
+ li > &,
49
+ dd > & {
50
+ padding-top: 0;
51
+ margin-bottom: 0;
52
+ }
53
+ }
54
+
55
+ // Nested unordered lists
56
+ ul ul {
57
+ list-style-type: circle;
58
+ }
59
+
60
+ ul ul ul {
61
+ list-style-type: square;
62
+ }
63
+
64
+ /* ===================================== *
65
+ * iii. Ordered
66
+ * ------------------------------------- */
67
+
68
+ // Ordered lists
69
+ ol {
70
+ @extend %list-style;
71
+ counter-reset: item;
72
+ list-style-type: none;
73
+
74
+ // Bare unordered list vertical rhythm
75
+ li > &,
76
+ dd > & {
77
+ padding-top: 0;
78
+ margin-bottom: 0;
79
+ }
80
+
81
+ > li:before {
82
+ content: counter(item) '.';
83
+ counter-increment: item;
84
+ font-size: 13px;
85
+ line-height: 0;
86
+ font-weight: 700;
87
+ margin-right: 8px;
88
+ }
89
+ }
90
+
91
+ // Nested ordered lists
92
+ ol ol > li:before {
93
+ content: counter(item, upper-alpha) '.';
94
+ }
95
+
96
+ ol ol ol > li:before {
97
+ content: counter(item, upper-roman) '.';
98
+ }
99
+
100
+ /* ===================================== *
101
+ * iv. Definition
102
+ * ------------------------------------- */
103
+
104
+ // Definition term
105
+ dt {
106
+ font-weight: 700;
107
+ padding-top: 10px;
108
+ margin-bottom: -1px;
109
+ }
110
+
111
+ // Definition
112
+ dd {
113
+ margin-bottom: 21px;
114
+ }
@@ -0,0 +1,41 @@
1
+ /* ========================================================================== *
2
+ * d. Media module
3
+ * -------------------------------------------------------------------------- */
4
+
5
+ /* ===================================== *
6
+ * i. Utility
7
+ * ------------------------------------- */
8
+
9
+ // Fluid Embeds
10
+ @mixin embed {
11
+ width: 100%;
12
+ // height: calc(9 / 16 * #{$content-width});
13
+
14
+ // @media (max-width: $content-width + $content-padding * 2) {
15
+ // height: calc(9 / 16 * 100vw - #{$content-padding});
16
+ // }
17
+ }
18
+
19
+ // Image caption mixin
20
+ @mixin figcaption {
21
+ font-size: 14px;
22
+ color: $nobel;
23
+ @include rhythm(11px, 4px);
24
+ }
25
+
26
+ // Extendable image caption placeholder
27
+ %figcaption {
28
+ @include figcaption;
29
+ }
30
+
31
+ /* ===================================== *
32
+ * ii. Common
33
+ * ------------------------------------- */
34
+
35
+ // Media
36
+ img,
37
+ video {
38
+ max-width: 100%;
39
+ height: auto;
40
+ vertical-align: top;
41
+ }
@@ -0,0 +1,81 @@
1
+ /* ========================================================================== *
2
+ * f. Table module
3
+ * -------------------------------------------------------------------------- */
4
+
5
+ /* ===================================== *
6
+ * i. Utility
7
+ * ------------------------------------- */
8
+
9
+ // Bordered cells
10
+ @mixin bordered() {
11
+ tbody {
12
+ tr {
13
+ border-right: 1px solid #d1d1d1;
14
+ }
15
+
16
+ td {
17
+ box-shadow: 1px 1px $alto inset;
18
+ }
19
+ }
20
+ }
21
+
22
+ // Striped rows
23
+ @mixin striped() {
24
+ tbody tr:nth-child(2n+1) {
25
+ background: lighten($iron, 5);
26
+ }
27
+ }
28
+
29
+ // Equal-width columns
30
+ @mixin stretched() {
31
+ table-layout: fixed;
32
+ width: 100%;
33
+ }
34
+
35
+ // With key column
36
+ @mixin keyed() {
37
+ tbody tr > :first-child {
38
+ font-weight: 700;
39
+ color: $shark;
40
+ white-space: nowrap;
41
+ }
42
+ }
43
+
44
+ /* ===================================== *
45
+ * ii. Common
46
+ * ------------------------------------- */
47
+
48
+ table {
49
+ font-size: 15px;
50
+ vertical-align: top;
51
+ border-spacing: 0;
52
+ border-collapse: collapse;
53
+ margin-bottom: vr(1); // 15px
54
+
55
+ tbody tr {
56
+ background: $white;
57
+ }
58
+ }
59
+
60
+ th,
61
+ td {
62
+ text-align: left;
63
+ vertical-align: top;
64
+ }
65
+
66
+ th {
67
+ padding: 9px 10px 6px 10px;
68
+ }
69
+
70
+ td {
71
+ padding: 8px 10px 7px 10px;
72
+ box-shadow: 0 1px $alto inset;
73
+ }
74
+
75
+ caption {
76
+ display: none;
77
+ }
78
+
79
+ tfoot th {
80
+ box-shadow: 0 1px $alto inset;
81
+ }
@@ -0,0 +1,411 @@
1
+ /* ========================================================================== *
2
+ * a. Text module
3
+ * -------------------------------------------------------------------------- */
4
+
5
+ /* ===================================== *
6
+ * i. Utility
7
+ * ------------------------------------- */
8
+
9
+ // Create an underlined link with cleared descenders
10
+ @mixin inline-link($default-color: $capecod, $active-color: $cerulean, $background: $white) {
11
+ background: linear-gradient(to bottom, transparent 50%, $active-color 50%) 0 91% / 2px 2px repeat-x;
12
+ transition: color $duration;
13
+ text-shadow:
14
+ .03em 0em $background,
15
+ -.03em 0em $background,
16
+ 0em .03em $background,
17
+ 0em -.03em $background,
18
+ .06em -.06em $background,
19
+ -.06em -.06em $background,
20
+ .06em 0em $background,
21
+ -.06em 0em $background,
22
+ .09em 0em $background,
23
+ -.09em 0em $background,
24
+ .12em 0em $background,
25
+ -.12em 0em $background,
26
+ .15em 0em $background,
27
+ -.15em 0em $background;
28
+
29
+ // Default link color
30
+ &,
31
+ &:visited {
32
+ color: $default-color;
33
+ }
34
+
35
+ // Active link color
36
+ &:hover,
37
+ &:focus,
38
+ &:active {
39
+ color: $active-color;
40
+ }
41
+ }
42
+
43
+ /* ===================================== *
44
+ * ii. Common
45
+ * ------------------------------------- */
46
+
47
+ body,
48
+ input,
49
+ select,
50
+ button,
51
+ textarea {
52
+ font-family: $base-font;
53
+ }
54
+
55
+ /* ===================================== *
56
+ * iii. Heading
57
+ * ------------------------------------- */
58
+
59
+ // 1.15 modular scale - http://www.modularscale.com/?18&px&1.15&web&text
60
+ h1 {
61
+ font-size: 42px;
62
+ line-height: 60px;
63
+ padding-top: 3px;
64
+ margin-bottom: 12px;
65
+ }
66
+
67
+ h2 {
68
+ font-size: 36px;
69
+ line-height: 45px;
70
+ padding-top: 13px;
71
+ margin-bottom: 17px;
72
+ }
73
+
74
+ h3 {
75
+ font-size: 31px;
76
+ line-height: 45px;
77
+ padding-top: 14px;
78
+ margin-bottom: 16px;
79
+ }
80
+
81
+ h4 {
82
+ font-size: 27px;
83
+ line-height: 45px;
84
+ padding-top: 15px;
85
+ margin-bottom: 15px;
86
+ }
87
+
88
+ h5 {
89
+ font-size: 24px;
90
+ line-height: 30px;
91
+ padding-top: 8px;
92
+ margin-bottom: 22px;
93
+ }
94
+
95
+ h6 {
96
+ font-size: 21px;
97
+ line-height: 30px;
98
+ padding-top: 9px;
99
+ margin-bottom: 21px;
100
+ }
101
+
102
+ /* ===================================== *
103
+ * iv. Paragraph
104
+ * ------------------------------------- */
105
+
106
+ p {
107
+ padding-top: 9px;
108
+ margin-bottom: 21px;
109
+ }
110
+
111
+ // Inline article links
112
+ article p a {
113
+ @include inline-link;
114
+ }
115
+
116
+ /* ===================================== *
117
+ * v. Blockquote
118
+ * ------------------------------------- */
119
+
120
+ // Blockquotes
121
+ blockquote {
122
+ font-size: 28px;
123
+ color: $nobel;
124
+ line-height: vr(3); // 45px
125
+ border-top: 14px solid transparent;
126
+ margin-bottom: 31px;
127
+ padding-left: 30px;
128
+
129
+ p {
130
+ padding-top: 0;
131
+ margin-bottom: 0;
132
+
133
+ &:first-of-type {
134
+ text-indent: -.325em;
135
+ }
136
+
137
+ &:first-of-type:before {
138
+ content: '“';
139
+ }
140
+
141
+ &:last-of-type:after {
142
+ content: '”';
143
+ }
144
+ }
145
+
146
+ p + p {
147
+ padding-top: vr(2); // 30px
148
+ }
149
+
150
+ cite {
151
+ display: block;
152
+ font-size: 16px;
153
+ font-style: normal;
154
+ padding-top: 26px;
155
+ padding-bottom: 4px;
156
+ line-height: vr(2); // 30px
157
+ font-weight: 700;
158
+
159
+ a {
160
+ @include inline-link($capecod, $cerulean);
161
+ }
162
+ }
163
+ }
164
+
165
+ /* ===================================== *
166
+ * vi. Inline
167
+ * ------------------------------------- */
168
+
169
+ // Bare inline text elements
170
+ :not(p):not(li):not(dd):not(blockquote):not(small):not(strong) > {
171
+ small {
172
+ display: inline-block;
173
+ line-height: vr(2); // 30px
174
+ padding-top: 11px;
175
+ margin-bottom: 19px;
176
+ }
177
+
178
+ b,
179
+ strong {
180
+ display: inline-block;
181
+ line-height: vr(2); // 30px
182
+ padding-top: 10px;
183
+ margin-bottom: 5px;
184
+ }
185
+ }
186
+
187
+ // Small text
188
+ small {
189
+ font-size: 14px;
190
+ line-height: 0;
191
+ }
192
+
193
+ // Lone children of paragraphs
194
+ p > small:first-child:last-child {
195
+ display: inline-block;
196
+ line-height: vr(2); // 30px
197
+ padding-top: 2px;
198
+ margin-bottom: -2px;
199
+ }
200
+
201
+ // Bold text
202
+ b,
203
+ strong {
204
+ line-height: 0;
205
+ font-weight: 700;
206
+ }
207
+
208
+ // Subscripts & superscripts
209
+ sub,
210
+ sup {
211
+ vertical-align: baseline;
212
+ position: relative;
213
+ line-height: 0;
214
+ font-size: 75%;
215
+ }
216
+
217
+ sub {
218
+ bottom: -.25em;
219
+ }
220
+
221
+ sup {
222
+ top: -0.5em;
223
+ }
224
+
225
+ // Highlighted marks
226
+ mark {
227
+ background: lighten($cerulean, 45);
228
+ }
229
+
230
+ // Definitions & Abbreviations
231
+ dfn[title],
232
+ abbr[title] {
233
+ position: relative;
234
+ cursor: help;
235
+ font-style: normal;
236
+ border-bottom: 1px dashed $nobel;
237
+
238
+ &:after,
239
+ &:before {
240
+ position: absolute;
241
+ opacity: 0;
242
+ z-index: -1;
243
+ transition: $duration;
244
+ }
245
+
246
+ &:after {
247
+ content: attr(title);
248
+ top: calc(100% + 6px);
249
+ left: 50%;
250
+ transform: translateX(-50%);
251
+ color: $white;
252
+ font-size: 14px;
253
+ text-align: center;
254
+ white-space: nowrap;
255
+ padding: 2px 10px;
256
+ border-radius: $radius;
257
+ background: $shark;
258
+ }
259
+
260
+ &:before {
261
+ content: '';
262
+ left: calc(50% - 5px);
263
+ top: 100%;
264
+ width: 0;
265
+ height: 0;
266
+ border-style: solid;
267
+ border-width: 0 5px 6px 5px;
268
+ border-color: transparent transparent $shark transparent;
269
+ }
270
+
271
+ &:hover:after,
272
+ &:hover:before {
273
+ opacity: 1;
274
+ z-index: 2;
275
+ }
276
+ }
277
+
278
+ // Links
279
+ a,
280
+ button {
281
+ cursor: pointer;
282
+ text-decoration: none;
283
+ }
284
+
285
+ a,
286
+ a:hover,
287
+ a:focus,
288
+ a:active,
289
+ a:visited,
290
+ button {
291
+ color: inherit;
292
+ cursor: pointer;
293
+ text-decoration: none;
294
+ }
295
+
296
+ /* ===================================== *
297
+ * vii. Horizontal rule
298
+ * ------------------------------------- */
299
+
300
+ hr {
301
+ border: 0;
302
+ padding-top: vr(2); // 30px
303
+ margin-bottom: vr(3); // 45px
304
+ box-shadow: 0 1px $alto;
305
+ height: vr(1); // 15px
306
+ line-height: vr(1); // 15px
307
+ }
308
+
309
+ hr.stars {
310
+ color: $nobel;
311
+ box-shadow: none;
312
+ text-align: center;
313
+
314
+ &:before {
315
+ content: '***';
316
+ font-size: 30px;
317
+ letter-spacing: 20px;
318
+ padding-left: 20px;
319
+ }
320
+ }
321
+
322
+ /* ===================================== *
323
+ * viii. Preformatted text
324
+ * ------------------------------------- */
325
+
326
+ pre,
327
+ code,
328
+ kbd,
329
+ samp {
330
+ font-family: $mono-font;
331
+ letter-spacing: -.015em;
332
+ word-spacing: -.015em;
333
+ color: $aluminum;
334
+ direction: ltr;
335
+ text-align: left;
336
+ tab-size: 2;
337
+ hyphens: none;
338
+ tab-size: 2;
339
+ hyphens: none;
340
+ }
341
+
342
+ pre {
343
+ font-size: .9375rem; // 15.5px
344
+ overflow: auto;
345
+ @include rhythm(26px, 23px, on);
346
+ border-radius: $radius;
347
+ background: $alabaster;
348
+ box-shadow: 0 0 0 1px $iron inset;
349
+ }
350
+
351
+ :not(pre) > code,
352
+ :not(pre) > kbd,
353
+ :not(pre) > samp {
354
+ font-size: .9375rem; // 15.5px
355
+ line-height: 0;
356
+ word-wrap: break-word;
357
+ white-space: pre-wrap;
358
+ border-radius: $radius;
359
+ padding: 4px 6px;
360
+ background: $alabaster;
361
+ box-shadow: 0 0 0 1px $iron inset;
362
+ }
363
+
364
+ /* ===================================== *
365
+ * xi. Syntax highlighting
366
+ * ------------------------------------- */
367
+
368
+ pre[class*=language-],
369
+ code[class*=language-] {
370
+ color: $aluminum;
371
+ }
372
+
373
+ .cm-s-default {
374
+ .cm-keyword { color: $bahama; }
375
+ .cm-atom { color: $lightning; }
376
+ .cm-number { color: $rose; }
377
+ .cm-def { color: $lima; }
378
+ .cm-variable { color: $flush; }
379
+ .cm-variable-2 { color: $orchid; }
380
+ .cm-variable-3 { color: $flush; }
381
+ .cm-property { color: $cerulean; }
382
+ .cm-operator { color: $nobel; }
383
+ .cm-comment { color: $nobel; }
384
+ .cm-string { color: $cerulean; }
385
+ .cm-string-2 { color: $lima; }
386
+ .cm-meta { color: $nobel; }
387
+ .cm-error { color: $punch; }
388
+ .cm-qualifier { color: $nobel; }
389
+ .cm-builtin { color: $bahama; }
390
+ .cm-bracket { color: $nobel; }
391
+ .cm-tag { color: $bahama; }
392
+ .cm-attribute { color: $nobel; }
393
+ .cm-header { color: $cerulean; }
394
+ .cm-quote { color: $lima; }
395
+ .cm-hr { color: $nobel; }
396
+ .cm-link { color: $orchid; }
397
+ .cm-qualifier.cm-attribute { color: $flush; }
398
+ .cm-error { color: $punch; }
399
+ }
400
+
401
+ .static-code {
402
+ .cm-variable { color: $lima; }
403
+ }
404
+
405
+ .cm-negative { color: $rose; }
406
+ .cm-positive { color: $lima; }
407
+ .cm-header,
408
+ .cm-strong { }
409
+ .cm-em { }
410
+ .cm-link { }
411
+ .cm-invalidchar { color: $punch; }