whiskers 0.0.2

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 (59) hide show
  1. checksums.yaml +7 -0
  2. data/Gemfile +3 -0
  3. data/Gemfile.lock +34 -0
  4. data/LICENSE.md +12 -0
  5. data/README.md +116 -0
  6. data/bin/whiskers +4 -0
  7. data/core/whiskers/base/index.html +180 -0
  8. data/core/whiskers/base/scripts/src/app.coffee +8 -0
  9. data/core/whiskers/base/scripts/src/layouts/home.coffee +3 -0
  10. data/core/whiskers/base/scripts/src/modules/header.coffee +11 -0
  11. data/core/whiskers/base/stylesheets/app.sass +6 -0
  12. data/core/whiskers/base/stylesheets/layouts/home.sass +8 -0
  13. data/core/whiskers/base/stylesheets/layouts/layouts.sass +1 -0
  14. data/core/whiskers/base/stylesheets/modules/comment.scss +65 -0
  15. data/core/whiskers/base/stylesheets/modules/device.scss +87 -0
  16. data/core/whiskers/base/stylesheets/modules/footer.scss +104 -0
  17. data/core/whiskers/base/stylesheets/modules/grid-item.scss +97 -0
  18. data/core/whiskers/base/stylesheets/modules/header.scss +268 -0
  19. data/core/whiskers/base/stylesheets/modules/modules.sass +6 -0
  20. data/core/whiskers/base/stylesheets/modules/sample-box.sass +9 -0
  21. data/core/whiskers/base/stylesheets/plugins/plugins.sass +5 -0
  22. data/core/whiskers/base/stylesheets/plugins/sticky-footer.sass +11 -0
  23. data/core/whiskers/blog/index.html +97 -0
  24. data/core/whiskers/blog/scripts/src/app.coffee +8 -0
  25. data/core/whiskers/blog/scripts/src/layouts/home.coffee +3 -0
  26. data/core/whiskers/blog/scripts/src/modules/header.coffee +13 -0
  27. data/core/whiskers/blog/stylesheets/app.sass +6 -0
  28. data/core/whiskers/blog/stylesheets/layouts/home.sass +10 -0
  29. data/core/whiskers/blog/stylesheets/layouts/layouts.sass +1 -0
  30. data/core/whiskers/blog/stylesheets/modules/article.scss +90 -0
  31. data/core/whiskers/blog/stylesheets/modules/footer.scss +104 -0
  32. data/core/whiskers/blog/stylesheets/modules/header.scss +262 -0
  33. data/core/whiskers/blog/stylesheets/modules/hero.scss +62 -0
  34. data/core/whiskers/blog/stylesheets/modules/modules.sass +4 -0
  35. data/core/whiskers/blog/stylesheets/plugins/plugins.sass +5 -0
  36. data/core/whiskers/blog/stylesheets/plugins/sticky-footer.sass +11 -0
  37. data/core/whiskers/store/index.html +245 -0
  38. data/core/whiskers/store/scripts/src/app.coffee +8 -0
  39. data/core/whiskers/store/scripts/src/layouts/home.coffee +3 -0
  40. data/core/whiskers/store/scripts/src/modules/header.coffee +11 -0
  41. data/core/whiskers/store/stylesheets/app.sass +6 -0
  42. data/core/whiskers/store/stylesheets/layouts/home.sass +12 -0
  43. data/core/whiskers/store/stylesheets/layouts/layouts.sass +1 -0
  44. data/core/whiskers/store/stylesheets/modules/button-group.scss +92 -0
  45. data/core/whiskers/store/stylesheets/modules/card.scss +86 -0
  46. data/core/whiskers/store/stylesheets/modules/footer.scss +104 -0
  47. data/core/whiskers/store/stylesheets/modules/header.scss +339 -0
  48. data/core/whiskers/store/stylesheets/modules/hero.scss +55 -0
  49. data/core/whiskers/store/stylesheets/modules/modules.sass +6 -0
  50. data/core/whiskers/store/stylesheets/modules/pagination.scss +63 -0
  51. data/core/whiskers/store/stylesheets/plugins/plugins.sass +5 -0
  52. data/core/whiskers/store/stylesheets/plugins/sticky-footer.sass +11 -0
  53. data/lib/whiskers.rb +1 -0
  54. data/lib/whiskers/generator.rb +235 -0
  55. data/lib/whiskers/version.rb +3 -0
  56. data/ruby.version +1 -0
  57. data/whiskers.gemspec +26 -0
  58. data/whiskers.png +0 -0
  59. metadata +173 -0
@@ -0,0 +1,62 @@
1
+ .hero {
2
+ $base-border-radius: 3px !default;
3
+ $action-color: #477DCA !default;
4
+ $large-screen: em(860) !default;
5
+ $hero-background-top: #7F99BE;
6
+ $hero-background-bottom: #20392B;
7
+ $hero-color: white;
8
+ $gradient-angle: 10deg;
9
+ $hero-image: 'https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/mountains.png';
10
+
11
+ @include background(url($hero-image), linear-gradient($gradient-angle, $hero-background-bottom, $hero-background-top), no-repeat $hero-background-top scroll);
12
+ background-color: #324766;
13
+ background-position: top;
14
+ background-repeat: no-repeat;
15
+ background-size: cover;
16
+ padding-bottom: 0;
17
+
18
+ .hero-logo img {
19
+ height: 4em;
20
+ margin-bottom: 1em;
21
+ }
22
+
23
+ .hero-inner {
24
+ @include outer-container;
25
+ @include clearfix;
26
+ margin: auto;
27
+ padding: 3.5em 3.5em 1em 3.5em;
28
+ text-align: center;
29
+
30
+ .hero-copy {
31
+ text-align: center;
32
+
33
+ h1 {
34
+ color: $hero-color;
35
+ font-size: 2.4em;
36
+ margin: 1.2em 0 0 0;
37
+
38
+ @include media($large-screen) {
39
+ font-size: 3.4em;
40
+ }
41
+ }
42
+
43
+ p {
44
+ color: $hero-color;
45
+ line-height: 1.4em;
46
+ margin: 0 auto 3em auto;
47
+
48
+ @include media($large-screen) {
49
+ font-size: 1.1em;
50
+ max-width: 40%;
51
+ }
52
+ }
53
+
54
+ hr {
55
+ display: inline-block;
56
+ width: 8em;
57
+ border-bottom: 5px #FFF solid;
58
+ margin-bottom: 0.4em;
59
+ }
60
+ }
61
+ }
62
+ }
@@ -0,0 +1,4 @@
1
+ @import 'header'
2
+ @import 'footer'
3
+ @import 'hero'
4
+ @import 'article'
@@ -0,0 +1,5 @@
1
+ @import 'bourbon/bourbon'
2
+ @import 'neat/neat'
3
+ @import 'bitters/base'
4
+ @import 'sticky-footer'
5
+ @import 'normalize'
@@ -0,0 +1,11 @@
1
+ body, html
2
+ margin: 0
3
+ padding: 0
4
+
5
+ body
6
+ display: flex
7
+ min-height: 100vh
8
+ flex-direction: column
9
+
10
+ main
11
+ flex: 1
@@ -0,0 +1,245 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <title>Web Template</title>
5
+ <link type="text/css" href="stylesheets/app.css" rel="stylesheet">
6
+ <script type="text/javascript" src="scripts/lib/plugins/jquery.min.js"></script>
7
+ <script type="text/javascript" src="scripts/lib/plugins/require.min.js"></script>
8
+ <script type="text/javascript" src="scripts/lib/app.js"></script>
9
+ <script type="text/javascript" src="scripts/lib/layouts/home.js"></script>
10
+ </head>
11
+ <body>
12
+ <header class="navigation" role="banner">
13
+ <div class="navigation-wrapper">
14
+ <a href="javascript:void(0)" class="logo">
15
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/placeholder_logo_1.png" alt="Logo Image">
16
+ </a>
17
+ <a href="javascript:void(0)" class="navigation-menu-button" id="js-mobile-menu">MENU</a>
18
+ <nav role="navigation">
19
+ <ul id="js-navigation-menu" class="navigation-menu show">
20
+ <li class="nav-link"><a href="javascript:void(0)">Products</a></li>
21
+ <li class="nav-link"><a href="javascript:void(0)">About Us</a></li>
22
+ <li class="nav-link"><a href="javascript:void(0)">Contact</a></li>
23
+ <li class="nav-link more"><a href="javascript:void(0)">More</a>
24
+ <ul class="submenu">
25
+ <li><a href="javascript:void(0)">Submenu Item</a></li>
26
+ <li><a href="javascript:void(0)">Another Item</a></li>
27
+ <li class="more"><a href="javascript:void(0)">Item with submenu</a>
28
+ <ul class="submenu">
29
+ <li><a href="javascript:void(0)">Sub-submenu Item</a></li>
30
+ <li><a href="javascript:void(0)">Another Item</a></li>
31
+ </ul>
32
+ </li>
33
+ <li class="more"><a href="javascript:void(0)">Another submenu</a>
34
+ <ul class="submenu">
35
+ <li><a href="javascript:void(0)">Sub-submenu</a></li>
36
+ <li><a href="javascript:void(0)">An Item</a></li>
37
+ </ul>
38
+ </li>
39
+ </ul>
40
+ </li>
41
+ </ul>
42
+ </nav>
43
+ <div class="navigation-tools">
44
+ <div class="search-bar">
45
+ <form role="search">
46
+ <input type="search" placeholder="Enter Search" />
47
+ <button type="submit">
48
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/search-icon.png" alt="Search Icon">
49
+ </button>
50
+ </form>
51
+ </div>
52
+ </div>
53
+ </div>
54
+ </header>
55
+
56
+ <main>
57
+ <!-- This is a hero section, you could use it to talk about your coompany or
58
+ any promotions you have going on -->
59
+ <div class="hero">
60
+ <div class="hero-inner">
61
+ <a href="" class="hero-logo"><img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/placeholder_logo_1.png
62
+ " alt="Logo Image"></a>
63
+ <div class="hero-copy">
64
+ <h1>Short description of Product</h1>
65
+ <p>A few reasons why this product is worth using, who it's for and why they need it.</p>
66
+ </div>
67
+ </div>
68
+ </div>
69
+
70
+ <!-- Here is a button group for sorting --><br>
71
+ <div class="button-wrapper">
72
+ <div class="button-group">
73
+ <label>
74
+ <input type="radio" name="button-group" value="item" checked>
75
+ <span class="button-group-item">Item</span>
76
+ </label>
77
+ <label>
78
+ <input type="radio" name="button-group" value="other-item">
79
+ <span class="button-group-item">Other But Longer Item</span>
80
+ </label>
81
+ <label>
82
+ <input type="radio" name="button-group" value="other-item">
83
+ <span class="button-group-item">Third</span>
84
+ </label>
85
+ <label>
86
+ <input type="radio" name="button-group" value="third">
87
+ <span class="button-group-item">Last Item</span>
88
+ </label>
89
+ </div>
90
+ </div>
91
+
92
+ <!-- Here are some cards, you could put products and prices in here --><br>
93
+ <div class="cards">
94
+ <div class="card">
95
+ <div class="card-image">
96
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/mountains.png" alt="">
97
+ </div>
98
+ <div class="card-header">
99
+ First Card
100
+ </div>
101
+ <div class="card-copy">
102
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, officiis sunt neque facilis culpa molestiae necessitatibus delectus veniam provident.</p>
103
+ </div>
104
+ </div>
105
+
106
+ <div class="card">
107
+ <div class="card-image">
108
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/mountains-4.png" alt="">
109
+ </div>
110
+ <div class="card-header">
111
+ Another Card
112
+ </div>
113
+ <div class="card-copy">
114
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, officiis sunt neque facilis culpa molestiae necessitatibus delectus veniam provident.</p>
115
+ </div>
116
+ </div>
117
+
118
+ <div class="card">
119
+ <div class="card-image">
120
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/mountains-3.png" alt="">
121
+ </div>
122
+ <div class="card-header">
123
+ The Last Card
124
+ </div>
125
+ <div class="card-copy">
126
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
127
+ </div>
128
+ </div>
129
+
130
+ <div class="card">
131
+ <div class="card-image">
132
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/mountains.png" alt="">
133
+ </div>
134
+ <div class="card-header">
135
+ First Card
136
+ </div>
137
+ <div class="card-copy">
138
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, officiis sunt neque facilis culpa molestiae necessitatibus delectus veniam provident.</p>
139
+ </div>
140
+ </div>
141
+
142
+ <div class="card">
143
+ <div class="card-image">
144
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/mountains-4.png" alt="">
145
+ </div>
146
+ <div class="card-header">
147
+ Another Card
148
+ </div>
149
+ <div class="card-copy">
150
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, officiis sunt neque facilis culpa molestiae necessitatibus delectus veniam provident.</p>
151
+ </div>
152
+ </div>
153
+
154
+ <div class="card">
155
+ <div class="card-image">
156
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/mountains-3.png" alt="">
157
+ </div>
158
+ <div class="card-header">
159
+ The Last Card
160
+ </div>
161
+ <div class="card-copy">
162
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
163
+ </div>
164
+ </div>
165
+
166
+ <div class="card">
167
+ <div class="card-image">
168
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/mountains-3.png" alt="">
169
+ </div>
170
+ <div class="card-header">
171
+ The Last Card
172
+ </div>
173
+ <div class="card-copy">
174
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
175
+ </div>
176
+ </div>
177
+
178
+ <div class="card">
179
+ <div class="card-image">
180
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/mountains-3.png" alt="">
181
+ </div>
182
+ <div class="card-header">
183
+ The Last Card
184
+ </div>
185
+ <div class="card-copy">
186
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
187
+ </div>
188
+ </div>
189
+ </div>
190
+
191
+ <!-- Here is some buttons for pagination --><br>
192
+ <div class="pagination">
193
+ <ul>
194
+ <li class="page-prev"><a href="javascript:void(0)">Prev</a></li>
195
+ <li>
196
+ <ul>
197
+ <li><a href="javascript:void(0)">1</a></li>
198
+ <li><a href="javascript:void(0)">2</a></li>
199
+ <li><a href="javascript:void(0)">3</a></li>
200
+ <li><a href="javascript:void(0)">4</a></li>
201
+ <li><a href="javascript:void(0)">5</a></li>
202
+ <li><a href="javascript:void(0)">6</a></li>
203
+ <li><a href="javascript:void(0)">7</a></li>
204
+ </ul>
205
+ </li>
206
+ <li class="page-next"><a href="javascript:void(0)">Next</a></li>
207
+ </ul>
208
+ </div>
209
+ <br>
210
+
211
+ </main>
212
+
213
+ <footer role="contentinfo">
214
+ <!-- Last, here is the footer. You can chop out the footer tag's content if you
215
+ just want a sticky footer without anything else. -->
216
+ <div class="footer-logo">
217
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/placeholder_logo_1.png" alt="Logo image">
218
+ </div>
219
+ <ul>
220
+ <li><a href="javascript:void(0)">About</a></li>
221
+ <li><a href="javascript:void(0)">Contact</a></li>
222
+ <li><a href="javascript:void(0)">Products</a></li>
223
+ </ul>
224
+
225
+ <div class="footer-secondary-links">
226
+ <ul>
227
+ <li><a href="javascript:void(0)">Terms and Conditions</a></li>
228
+ <li><a href="javascript:void(0)">Privacy Policy</a></li>
229
+ </ul>
230
+
231
+ <ul class="footer-social">
232
+ <li><a href="javascript:void(0)">
233
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/facebook-logo-circle.png" alt="Facebook">
234
+ </a></li>
235
+ <li><a href="javascript:void(0)">
236
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/twitter-logo-circle.png" alt="Twitter">
237
+ </a></li>
238
+ <li><a href="javascript:void(0)">
239
+ <img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/youtube-logo-circle.png" alt="YouTube">
240
+ </a></li>
241
+ </ul>
242
+ </div>
243
+ </footer>
244
+ </body>
245
+ </html>
@@ -0,0 +1,8 @@
1
+ # Do any app-wide setup here
2
+
3
+ requirejs.config({
4
+ baseUrl: 'js/lib',
5
+ paths: {
6
+ jquery: 'jquery-2.2.2'
7
+ }
8
+ });
@@ -0,0 +1,3 @@
1
+ # Put all the modules you require in here
2
+
3
+ require ['modules/header']
@@ -0,0 +1,11 @@
1
+ $(document).ready ->
2
+ menuToggle = $('#js-mobile-menu').unbind()
3
+ $('#js-navigation-menu').removeClass 'show'
4
+ menuToggle.on 'click', (e) ->
5
+ e.preventDefault()
6
+ $('#js-navigation-menu').slideToggle ->
7
+ if $('#js-navigation-menu').is(':hidden')
8
+ $('#js-navigation-menu').removeAttr 'style'
9
+ return
10
+ return
11
+ return
@@ -0,0 +1,6 @@
1
+ // app.css is generated from this file via:
2
+ // sass --watch css/app.sass:css/app.css
3
+
4
+ @import 'plugins/plugins'
5
+ @import 'modules/modules'
6
+ @import 'layouts/layouts'
@@ -0,0 +1,12 @@
1
+ // Put styles here that ony effect this layout
2
+ .cards
3
+ +clearfix
4
+ +outer-container
5
+
6
+ .button-wrapper
7
+ +clearfix
8
+ +outer-container
9
+ text-align: center
10
+
11
+ .button-group
12
+ display: inline-block
@@ -0,0 +1,92 @@
1
+ .button-group {
2
+ $base-border-color: gainsboro !default;
3
+ $base-border-radius: 3px !default;
4
+ $base-line-height: 1.5em !default;
5
+ $base-spacing: 1.5em !default;
6
+ $base-font-size: 1em !default;
7
+ $base-background-color: white !default;
8
+ $action-color: #477DCA !default;
9
+ $dark-gray: #333 !default;
10
+ $large-screen: em(860) !default;
11
+ $base-font-color: $dark-gray !default;
12
+ $button-group-background: $base-background-color;
13
+ $button-group-color: lighten($base-font-color, 30%);
14
+ $button-group-border: 1px solid silver;
15
+ $button-group-inner-border: 1px solid lighten(silver, 18%);
16
+ $button-group-background-checked: $action-color;
17
+ $button-group-color-checked: white;
18
+ $button-group-border-checked: darken($button-group-background-checked, 15%);
19
+
20
+ input {
21
+ display: none;
22
+ }
23
+
24
+ label {
25
+ margin-bottom: 0;
26
+
27
+ @include media($large-screen) {
28
+ float: left;
29
+ }
30
+
31
+ .button-group-item {
32
+ background: $button-group-background;
33
+ border-left: $button-group-border;
34
+ border-radius: 0;
35
+ border-right: $button-group-border;
36
+ color: $button-group-color;
37
+ cursor: pointer;
38
+ display: inline-block;
39
+ font-size: $base-font-size;
40
+ font-weight: normal;
41
+ line-height: 1;
42
+ padding: 0.75em 1em;
43
+ width: 100%;
44
+
45
+ @include media($large-screen) {
46
+ border-bottom: $button-group-border;
47
+ border-left: 0;
48
+ border-right: $button-group-inner-border;
49
+ border-top: $button-group-border;
50
+ width: auto;
51
+ }
52
+
53
+ &:focus,
54
+ &:hover {
55
+ background-color: darken($button-group-background, 3%);
56
+ }
57
+ }
58
+
59
+ &:first-child .button-group-item {
60
+ border-top-left-radius: $base-border-radius;
61
+ border-top-right-radius: $base-border-radius;
62
+ border-top: $button-group-border;
63
+
64
+ @include media($large-screen) {
65
+ border-bottom-left-radius: $base-border-radius;
66
+ border-left: $button-group-border;
67
+ border-top-left-radius: $base-border-radius;
68
+ border-top-right-radius: 0;
69
+ }
70
+ }
71
+
72
+ &:last-child .button-group-item {
73
+ border-bottom-left-radius: $base-border-radius;
74
+ border-bottom-right-radius: $base-border-radius;
75
+ border-bottom: $button-group-border;
76
+
77
+ @include media($large-screen) {
78
+ border-bottom-left-radius: 0;
79
+ border-bottom-right-radius: $base-border-radius;
80
+ border-right: $button-group-border;
81
+ border-top-right-radius: $base-border-radius;
82
+ }
83
+ }
84
+
85
+ input:checked + .button-group-item {
86
+ background: $button-group-background-checked;
87
+ border: 1px solid $button-group-border-checked;
88
+ box-shadow: inset 0 1px 2px darken($button-group-background-checked, 10%);
89
+ color: $button-group-color-checked;
90
+ }
91
+ }
92
+ }