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,22 @@
1
+ /* ========================================================================== *
2
+ * Contrast section
3
+ * -------------------------------------------------------------------------- */
4
+
5
+ /* ===================================== *
6
+ * a. Utilities
7
+ * ------------------------------------- */
8
+
9
+ // Full-width, spaced, colored section mixin
10
+ @mixin contrast-section($background: $alabaster, $spacing: vr(4), $border-color: $iron) {
11
+ padding-top: $spacing;
12
+ padding-bottom: $spacing;
13
+ border: solid transparent;
14
+ border-width: $spacing 0;
15
+ @include cover-background($background);
16
+
17
+ &:before {
18
+ box-shadow:
19
+ inset 0 1px $border-color,
20
+ inset 0 -1px $border-color;
21
+ }
22
+ }
@@ -0,0 +1,49 @@
1
+ /* ========================================================================== *
2
+ * Feature module
3
+ * -------------------------------------------------------------------------- */
4
+
5
+ /* ===================================== *
6
+ * a. Common
7
+ * ------------------------------------- */
8
+
9
+ // Feature figures (as seen on the home page)
10
+ @mixin feature {
11
+ @include grid;
12
+ @include gutter(10px);
13
+
14
+ div {
15
+ @include span(1 of 4);
16
+ }
17
+
18
+ figcaption {
19
+ @include span(3 of 4);
20
+ }
21
+
22
+ div,
23
+ figcaption {
24
+ position: relative;
25
+ margin-top: 0;
26
+ margin-bottom: 0;
27
+ @extend %destroy-margins;
28
+ }
29
+
30
+ @media (max-width: 550px) {
31
+ text-align: center;
32
+
33
+ img,
34
+ figcaption {
35
+ padding: 0;
36
+ position: static;
37
+ }
38
+
39
+ img {
40
+ width: 150px;
41
+ }
42
+
43
+ figcaption {
44
+ width: 100%;
45
+ margin-top: 1.5rem;
46
+ text-align: left;
47
+ }
48
+ }
49
+ }
@@ -0,0 +1,44 @@
1
+ /* ========================================================================== *
2
+ * Hero module
3
+ * -------------------------------------------------------------------------- */
4
+
5
+ /* ===================================== *
6
+ * a. Utilities
7
+ * ------------------------------------- */
8
+
9
+ // Hero banners
10
+ @mixin hero($height: tall, $color: $white, $background: $cerulean linear-gradient(to bottom right, $cerulean, mix($orchid, $cerulean, 75%)) no-repeat) {
11
+ display: flex;
12
+ flex-direction: column;
13
+ align-items: center;
14
+ justify-content: center;
15
+ text-align: center;
16
+ color: $color;
17
+ padding-top: vr(3); // 45px
18
+ @include padded-module; // 1100px width & 30px padding
19
+ @include cover-background($background);
20
+
21
+ // Height conditional
22
+ @if $height == short {
23
+ min-height: vr(24); // 360px
24
+ } @else if $height == tall {
25
+ min-height: vr(36); // 540px
26
+ } @else if $height == full {
27
+ min-height: 100vh; // Full viewport
28
+ } @else {
29
+ min-height: $height; // Manually set
30
+ }
31
+
32
+ // Remove botton margin from buttons
33
+ a {
34
+ @include button($fill: off, $bevel: on, $color: $white);
35
+ margin: 0;
36
+ }
37
+
38
+ // Smaller text for paragraphs
39
+ p {
40
+ font-size: 16px;
41
+ max-width: 450px;
42
+ margin-bottom: 35px;
43
+ }
44
+ }
@@ -0,0 +1,109 @@
1
+ /* ========================================================================== *
2
+ * Loader module
3
+ * -------------------------------------------------------------------------- */
4
+
5
+ /* ===================================== *
6
+ * a. Animations
7
+ * ------------------------------------- */
8
+
9
+ // Loader spinning animation
10
+ @keyframes spin {
11
+ 0% { transform: rotate(0deg); }
12
+ 100% { transform: rotate(360deg); }
13
+ }
14
+
15
+ // Loader success animation
16
+ @keyframes success-in {
17
+ 0% { transform: scale(0) rotate(-45deg); }
18
+ 100% { transform: scale(1) rotate(-45deg); }
19
+ }
20
+
21
+ // Loader failiure animation
22
+ @keyframes failure-in {
23
+ 0% { transform: scale(0); }
24
+ 100% { transform: scale(1); }
25
+ }
26
+
27
+ /* ===================================== *
28
+ * b. Common
29
+ * ------------------------------------- */
30
+
31
+ // Hide loader element by default
32
+ .loader:not(.loading):not(.success):not(.failure) {
33
+ @extend %hidden;
34
+ }
35
+
36
+ // Loader element
37
+ .loader {
38
+ font-size: 14px;
39
+ color: $white;
40
+ position: absolute;
41
+ left: 0;
42
+ top: 145px;
43
+ width: 100%;
44
+ height: 500px;
45
+ display: flex;
46
+ flex-direction: column;
47
+ align-items: center;
48
+ justify-content: center;
49
+ padding-top: 90px;
50
+
51
+ // Spinner
52
+ &:before {
53
+ content: '';
54
+ position: absolute;
55
+ top: 50%;
56
+ left: 50%;
57
+ margin: -25px 0 0 -25px;
58
+ width: 50px;
59
+ height: 50px;
60
+ border-radius: 50%;
61
+ border: 4px solid rgba($white, .2);
62
+ border-right-color: $white;
63
+ animation: spin 1s linear infinite;
64
+ }
65
+ }
66
+
67
+ // Shared success & failure declarations
68
+ .loader.success,
69
+ .loader.failure {
70
+
71
+ // Ring
72
+ &:before {
73
+ transition: border-color .4s;
74
+ border-color: $white;
75
+ }
76
+
77
+ // Icon
78
+ &:after {
79
+ display: block;
80
+ position: absolute;
81
+ top: 50%;
82
+ left: 50%;
83
+ }
84
+ }
85
+
86
+ // Success-specific icon
87
+ .loader.success:after {
88
+ content: '';
89
+ animation: success-in .4s;
90
+ margin: -7px 0 0 -9px;
91
+ height: 10px;
92
+ width: 18px;
93
+ border: solid $white;
94
+ border-width: 0 0 4px 4px;
95
+ transform: rotate(-45deg);
96
+ }
97
+
98
+ // Failure-specific icon
99
+ .loader.failure:after {
100
+ content: '!';
101
+ animation: failure-in .4s;
102
+ width: 50px;
103
+ height: 50px;
104
+ font-size: 24px;
105
+ font-weight: 700;
106
+ line-height: 52px;
107
+ text-align: center;
108
+ margin: -25px 0 0 -25px;
109
+ }
@@ -0,0 +1,74 @@
1
+ /* ========================================================================== *
2
+ * Notice module
3
+ * -------------------------------------------------------------------------- */
4
+
5
+ /* ===================================== *
6
+ * a. Utilities
7
+ * ------------------------------------- */
8
+
9
+ @mixin notice($selector: '.notice', $height: vr(4), $background: rgba($shark, .15)) {
10
+ margin-top: $height;
11
+
12
+ // Temporary notice
13
+ #{$selector} {
14
+ position: absolute;
15
+ width: 100%;
16
+ height: $height;
17
+ top: 0;
18
+ left: 0;
19
+ line-height: $height;
20
+ text-align: center;
21
+ color: $white;
22
+ background: $background;
23
+ font-size: 14px;
24
+ font-weight: 700;
25
+ z-index: 99;
26
+
27
+ .close-btn {
28
+ display: block;
29
+ width: $height;
30
+ height: $height;
31
+ position: absolute;
32
+ top: 0;
33
+ right: 0;
34
+ background: transparent;
35
+ border-bottom: transparent;
36
+ transition: background $duration;
37
+
38
+ &:before,
39
+ &:after {
40
+ position: absolute;
41
+ left: 50%;
42
+ top: calc(50% - 8px);
43
+ content: '';
44
+ width: 2px;
45
+ height: 16px;
46
+ background: $white;
47
+ }
48
+
49
+ &:before {
50
+ transform: rotate(45deg);
51
+ }
52
+
53
+ &:after {
54
+ transform: rotate(-45deg);
55
+ }
56
+
57
+ &:hover {
58
+
59
+ // If background color contains an alpha transparency
60
+ @if alpha($background) != 1 {
61
+
62
+ // Double its opacity
63
+ background: opacify($background, alpha($background));
64
+
65
+ // Otherwise
66
+ } @else {
67
+
68
+ // Darken its color
69
+ background: darken($background, 10);
70
+ }
71
+ }
72
+ }
73
+ }
74
+ }
@@ -0,0 +1,206 @@
1
+ /* ========================================================================== *
2
+ * Signup module
3
+ * -------------------------------------------------------------------------- */
4
+
5
+ /* ===================================== *
6
+ * a. Animations
7
+ * ------------------------------------- */
8
+
9
+ // Hello form animation
10
+ @keyframes fade-in-right {
11
+ 0% {
12
+ opacity: 0;
13
+ transform: perspective(1px) translate3d(200px, 0, 0);
14
+ }
15
+
16
+ 100% {
17
+ opacity: 1;
18
+ transform: perspective(1px) translate3d(0, 0, 0);
19
+ }
20
+ }
21
+
22
+ // Goodbye form animation
23
+ @keyframes fade-out-left {
24
+ 0% {
25
+ opacity: 1;
26
+ transform: perspective(1px) translate3d(0, 0, 0);
27
+ }
28
+
29
+ 99% {
30
+ opacity: 0;
31
+ transform: perspective(1px) translate3d(-200px, 0, 0);
32
+ }
33
+
34
+ 100% {
35
+ opacity: 0;
36
+ transform: perspective(1px) translate3d(-9999px, 0, 0);
37
+ }
38
+ }
39
+
40
+ // Welcome back form animation
41
+ @keyframes fade-in-left {
42
+ 0% {
43
+ opacity: 0;
44
+ transform: perspective(1px) translate3d(-200px, 0, 0);
45
+ }
46
+
47
+ 100% {
48
+ opacity: 1;
49
+ transform: perspective(1px) translate3d(0, 0, 0);
50
+ }
51
+ }
52
+
53
+ /* ===================================== *
54
+ * a. Common
55
+ * ------------------------------------- */
56
+
57
+ // Namespaced declarations
58
+ .signup {
59
+ align-items: center;
60
+ background: $cerulean linear-gradient(to bottom, $cerulean, mix($orchid, $cerulean, 75%)) no-repeat fixed;
61
+
62
+ // Transparent header
63
+ header[role=banner] {
64
+ height: 135px;
65
+ justify-content: center;
66
+
67
+ &,
68
+ &:before {
69
+ background: transparent;
70
+ }
71
+
72
+ // Fancy logo is fancy
73
+ svg {
74
+ width: auto;
75
+ max-width: 100%;
76
+ height: vr(3); // 45px
77
+ color: $white;
78
+ }
79
+ }
80
+
81
+ // Main content
82
+ main {
83
+ width: 100%;
84
+ padding-top: 0;
85
+ }
86
+
87
+ // Fieldset legend
88
+ legend {
89
+ text-transform: none;
90
+ letter-spacing: normal;
91
+ box-shadow: none;
92
+ font-weight: 300;
93
+ width: 100%;
94
+ float: left;
95
+ font-size: 24px;
96
+ padding-top: vr(2); // 30px
97
+ margin-bottom: vr(2); // 30px
98
+ text-align: center;
99
+ }
100
+
101
+ // All form fieldsets
102
+ fieldset {
103
+ position: absolute;
104
+ left: -9999px;
105
+ opacity: 0;
106
+ width: 385px;
107
+ max-width: 100%;
108
+ margin: 0 auto;
109
+ padding: 0 vr(2); // 30px
110
+ background: $white;
111
+ border-radius: $radius;
112
+ box-shadow: 0 0 25px rgba(0, 0, 0, .05);
113
+ will-change: transform;
114
+ -webkit-filter: blur(0);
115
+ backface-visibility: hidden;
116
+ -webkit-font-smoothing: subpixel-antialiased;
117
+ @include nested-label(large);
118
+
119
+ // Animated styles
120
+ &.hello,
121
+ &.welcome-back,
122
+ &.goodbye {
123
+ left: 0;
124
+ right: 0;
125
+ }
126
+
127
+ // I say hello
128
+ &.hello {
129
+ animation: fade-in-right .5s forwards;
130
+ }
131
+
132
+ // Welcome back, Kotter
133
+ &.welcome-back {
134
+ animation: .5s fade-in-left forwards;
135
+ }
136
+
137
+ // You say goodbye
138
+ &.goodbye {
139
+ animation: fade-out-left .5s forwards;
140
+ }
141
+ }
142
+
143
+ // Submit buttons
144
+ button[type=submit] {
145
+ @include button($size: large, $color: $lima);
146
+ margin-bottom: 3px;
147
+ width: 100%;
148
+ }
149
+
150
+ // Grouped inputs
151
+ .input-group {
152
+ @include grid;
153
+ @include gutter(19px);
154
+
155
+ > * {
156
+ @include span(1 of 2);
157
+ }
158
+
159
+ label {
160
+ margin: 0;
161
+ }
162
+ }
163
+
164
+ // Form footers
165
+ footer p {
166
+ font-size: 14px;
167
+ padding-top: 11px;
168
+ margin-bottom: 19px;
169
+ text-align: center;
170
+
171
+ // Inside the box styles
172
+ &:first-child {
173
+ color: $nobel;
174
+
175
+ a {
176
+ font-weight: 700;
177
+
178
+ &:hover,
179
+ &:focus,
180
+ &:active {
181
+ color: $aluminum;
182
+ }
183
+ }
184
+ }
185
+
186
+ // Outside the box styles
187
+ &:last-child {
188
+ color: lighten($cerulean, 45);
189
+ position: absolute;
190
+ top: 100%;
191
+ left: 0;
192
+ width: 100%;
193
+ margin: 0;
194
+
195
+ a {
196
+ font-weight: 700;
197
+
198
+ &:hover,
199
+ &:focus,
200
+ &:active {
201
+ color: $white;
202
+ }
203
+ }
204
+ }
205
+ }
206
+ }