codelation_assets 0.0.1 → 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: c6549536b415b4fc11505c21b5672e6379a3ff7a
4
- data.tar.gz: e82ea463c05fd0c5e333aa5ab2b01c391c751df2
3
+ metadata.gz: 9bf21642cb3b48b0e849b9c33cb37e8cffcd1e33
4
+ data.tar.gz: fbe8b036d9eae571d013962eae06223420892278
5
5
  SHA512:
6
- metadata.gz: 817863835f95d6c9d6a7626d2200fb8fbe22fc6b43209d9f01abf06062ae54e35437a09a2c4bbe1d45edcb01b357b1eaeadf52c490582ee2b544ff0d2949a6b4
7
- data.tar.gz: 1b7e396bb393cbe7bd5ed06ed771b42af2de12caf0edb7e6c5315d6920c108695a6407b566244577e206c94fa5d770e3b6647d3d431fdd61091bc4b42e13ea1c
6
+ metadata.gz: e14b15b966e8836036b0b553ec2394fb29bd6594cdeae16bf22227cec0c6439cde4b29cad294d15d959541250d94ee9dc731c3d9a10212075d8e88d5d0365a37
7
+ data.tar.gz: b6f53c2b0abf70257108638b81a46fa72690fe591199bab776201a83c2a5ea56f7d52c8449f8dd06ea5ad9b03f98384122d9fe72132d657a2537b676eae80746
data/README.md CHANGED
@@ -1,13 +1,14 @@
1
1
  # Codelation Assets
2
2
 
3
- A collection of SCSS mixins and JavaScript helpers used by Codelation for building awesome Rails apps quickly.
3
+ A collection of SCSS mixins and JavaScript helpers used by
4
+ [Codelation](https://codelation.com) for building awesome Rails apps quickly.
4
5
 
5
6
  ## Installation
6
7
 
7
8
  Add this line to your application's Gemfile:
8
9
 
9
10
  ```ruby
10
- gem "codelation-assets"
11
+ gem "codelation_assets"
11
12
  ```
12
13
 
13
14
  Install the Codelation Assets gem with Bundler:
@@ -18,18 +19,84 @@ bundle install
18
19
 
19
20
  ## Usage
20
21
 
21
- **JavaScript**
22
+ ### JavaScript
23
+
24
+ Add to `application.js`:
22
25
 
23
26
  ```javascript
24
27
  //= require codelation
25
28
  ```
26
29
 
27
- **Sass**
30
+ ### Sass
31
+
32
+ Add to `application.scss`:
28
33
 
29
34
  ```scss
30
35
  @include "codelation";
31
36
  ```
32
37
 
38
+ #### Included Sass/CSS Libraries
39
+
40
+ - [Bourbon](http://bourbon.io) - A simple and lightweight mixin library for Sass.
41
+ - [Normalize.css](https://necolas.github.io/normalize.css/) - A modern, HTML5-ready alternative to CSS resets
42
+
43
+ #### Additional Functions and Mixins
44
+
45
+ A handful of useful Sass functions and mixins written by Codelation are also included.
46
+
47
+ ##### Sass Functions
48
+
49
+ ###### color($color, $number: 500)
50
+
51
+ The [Google Material Design Colors](https://www.google.com/design/spec/style/color.html) come in handy when you
52
+ need a color for creating application interfaces. They are a much better alternative to CSS's named colors
53
+ (blue, green, red, etc.), but just as easy to use.
54
+
55
+ Examples:
56
+
57
+ ```scss
58
+ // The named colors are available as variables of the same name
59
+ .warning {
60
+ color: $amber;
61
+ }
62
+
63
+ // You can also use the different shades available
64
+ .error {
65
+ color: ($red, 700);
66
+ }
67
+
68
+ // @see https://www.google.com/design/spec/style/color.html
69
+ .success {
70
+ color: ($green, 600);
71
+ }
72
+ ```
73
+
74
+ ###### text-color($color)
75
+
76
+ This function is useful for creating mixins where you have a background color as a variable
77
+ and need to display either black or white text on top of the given color.
78
+
79
+ ##### Sass Mixins
80
+
81
+ ###### button($background-color: color($grey, 100), $font-color: $grey, $active-background-color: $accent-color, $active-font-color: text-color($accent-color))
82
+
83
+ By default, this will create a plain grey button. It is close to the default button in some browsers, but will
84
+ actually be rendered the same across all browsers. Useful for applications that need to be obvious about
85
+ a button looking like a button.
86
+
87
+ ###### center-children
88
+
89
+ This mixin uses flexbox to center the child elements horizontally and vertically inside the element.
90
+ A good use case is centering an image of unknown height inside a container with a fixed height.
91
+
92
+ ###### has-cards($columns, $margin: 0)
93
+
94
+ TODO: Write description/usage
95
+
96
+ ###### has-columns($columns, $gutter: 0)
97
+
98
+ TODO: Write description/usage
99
+
33
100
  ## Contributing
34
101
 
35
102
  1. Fork it
@@ -2,11 +2,15 @@
2
2
  "use strict";
3
3
 
4
4
  var app = window.App;
5
+ var bodyClass, bodyElement;
5
6
 
6
7
  if (app === undefined) {
7
8
  app = window.App = {};
8
9
  }
9
10
 
11
+ app.enterFunctions = { component: [] };
12
+ app.exitFunctions = { component: [] };
13
+
10
14
  // Register functions to run when any page or specific pages are loaded.
11
15
  //
12
16
  // Example for running code only when `pages#home` loads:
@@ -25,28 +29,63 @@
25
29
  // // Tear down (Might be needed for Turbolinks)
26
30
  // });
27
31
  app.register = function(mixed) {
28
- if (mixed === 'component') {
29
- return appComponent();
30
- } else {
31
- return appController(mixed);
32
+ return {
33
+ enter: function(callback) {
34
+ app.registerEnter(mixed, callback);
35
+ return this;
36
+ },
37
+
38
+ exit: function(callback) {
39
+ app.registerExit(mixed, callback);
40
+ return this;
41
+ }
42
+ };
43
+ };
44
+
45
+ app.registerEnter = function(key, callback) {
46
+ if (app.enterFunctions[key] === undefined) {
47
+ app.enterFunctions[key] = [];
32
48
  }
49
+ app.enterFunctions[key].push(callback);
33
50
  };
34
51
 
35
- // Returns an object with `enter` and `exit` functions with for setting
36
- // up and tearing down components pages specified by the controller/action.
37
- function appController(controllerWithAction) {
38
- var body = $('body');
39
- var split = controllerWithAction.split('.');
40
- var controller = split[0];
41
- var action = split[1];
52
+ app.registerExit = function(key, callback) {
53
+ if (app.exitFunctions[key] === undefined) {
54
+ app.exitFunctions[key] = [];
55
+ }
56
+ app.exitFunctions[key].push(callback);
57
+ };
42
58
 
43
- // enter: ready page:load
44
- // exit: page:before-unload
45
- }
59
+ // Fires off any callbacks registered for enter, with or without Turbolinks.
60
+ $(document).on('ready page:load', function() {
61
+ bodyElement = $('body');
46
62
 
47
- // Returns an object with `enter` and `exit` functions with for setting
48
- // up and tearing down components on each page load/change.
49
- function appComponent() {
63
+ // Determine which functions should be fired
64
+ var fireFunctions = [];
65
+ $.each(app.enterFunctions, function(key, functions) {
66
+ bodyClass = key.split('.').join(' ');
67
+ if (bodyClass === 'component' || bodyElement.hasClass(bodyClass)) {
68
+ fireFunctions = fireFunctions.concat(functions);
69
+ }
70
+ });
50
71
 
51
- }
72
+ // Fire off each function
73
+ $.each(fireFunctions, function() { this.call(); });
74
+ });
75
+
76
+ // Fires off any callbacks registered for exit, ONLY if using Turbolinks.
77
+ $(document).on('page:before-unload', function() {
78
+ var fireFunctions = [];
79
+
80
+ // Determine which functions should be fired
81
+ $.each(app.exitFunctions, function(key, functions) {
82
+ bodyClass = key.split('.').join(' ');
83
+ if (bodyClass === 'component' || bodyElement.hasClass(bodyClass)) {
84
+ fireFunctions = fireFunctions.concat(functions);
85
+ }
86
+ });
87
+
88
+ // Fire off each function
89
+ $.each(fireFunctions, function() { this.call(); });
90
+ });
52
91
  })();
@@ -0,0 +1,427 @@
1
+ /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
2
+
3
+ /**
4
+ * 1. Set default font family to sans-serif.
5
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
6
+ * user zoom.
7
+ */
8
+
9
+ html {
10
+ font-family: sans-serif; /* 1 */
11
+ -ms-text-size-adjust: 100%; /* 2 */
12
+ -webkit-text-size-adjust: 100%; /* 2 */
13
+ }
14
+
15
+ /**
16
+ * Remove default margin.
17
+ */
18
+
19
+ body {
20
+ margin: 0;
21
+ }
22
+
23
+ /* HTML5 display definitions
24
+ ========================================================================== */
25
+
26
+ /**
27
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
28
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
29
+ * and Firefox.
30
+ * Correct `block` display not defined for `main` in IE 11.
31
+ */
32
+
33
+ article,
34
+ aside,
35
+ details,
36
+ figcaption,
37
+ figure,
38
+ footer,
39
+ header,
40
+ hgroup,
41
+ main,
42
+ menu,
43
+ nav,
44
+ section,
45
+ summary {
46
+ display: block;
47
+ }
48
+
49
+ /**
50
+ * 1. Correct `inline-block` display not defined in IE 8/9.
51
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
52
+ */
53
+
54
+ audio,
55
+ canvas,
56
+ progress,
57
+ video {
58
+ display: inline-block; /* 1 */
59
+ vertical-align: baseline; /* 2 */
60
+ }
61
+
62
+ /**
63
+ * Prevent modern browsers from displaying `audio` without controls.
64
+ * Remove excess height in iOS 5 devices.
65
+ */
66
+
67
+ audio:not([controls]) {
68
+ display: none;
69
+ height: 0;
70
+ }
71
+
72
+ /**
73
+ * Address `[hidden]` styling not present in IE 8/9/10.
74
+ * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
75
+ */
76
+
77
+ [hidden],
78
+ template {
79
+ display: none;
80
+ }
81
+
82
+ /* Links
83
+ ========================================================================== */
84
+
85
+ /**
86
+ * Remove the gray background color from active links in IE 10.
87
+ */
88
+
89
+ a {
90
+ background-color: transparent;
91
+ }
92
+
93
+ /**
94
+ * Improve readability when focused and also mouse hovered in all browsers.
95
+ */
96
+
97
+ a:active,
98
+ a:hover {
99
+ outline: 0;
100
+ }
101
+
102
+ /* Text-level semantics
103
+ ========================================================================== */
104
+
105
+ /**
106
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
107
+ */
108
+
109
+ abbr[title] {
110
+ border-bottom: 1px dotted;
111
+ }
112
+
113
+ /**
114
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
115
+ */
116
+
117
+ b,
118
+ strong {
119
+ font-weight: bold;
120
+ }
121
+
122
+ /**
123
+ * Address styling not present in Safari and Chrome.
124
+ */
125
+
126
+ dfn {
127
+ font-style: italic;
128
+ }
129
+
130
+ /**
131
+ * Address variable `h1` font-size and margin within `section` and `article`
132
+ * contexts in Firefox 4+, Safari, and Chrome.
133
+ */
134
+
135
+ h1 {
136
+ font-size: 2em;
137
+ margin: 0.67em 0;
138
+ }
139
+
140
+ /**
141
+ * Address styling not present in IE 8/9.
142
+ */
143
+
144
+ mark {
145
+ background: #ff0;
146
+ color: #000;
147
+ }
148
+
149
+ /**
150
+ * Address inconsistent and variable font size in all browsers.
151
+ */
152
+
153
+ small {
154
+ font-size: 80%;
155
+ }
156
+
157
+ /**
158
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
159
+ */
160
+
161
+ sub,
162
+ sup {
163
+ font-size: 75%;
164
+ line-height: 0;
165
+ position: relative;
166
+ vertical-align: baseline;
167
+ }
168
+
169
+ sup {
170
+ top: -0.5em;
171
+ }
172
+
173
+ sub {
174
+ bottom: -0.25em;
175
+ }
176
+
177
+ /* Embedded content
178
+ ========================================================================== */
179
+
180
+ /**
181
+ * Remove border when inside `a` element in IE 8/9/10.
182
+ */
183
+
184
+ img {
185
+ border: 0;
186
+ }
187
+
188
+ /**
189
+ * Correct overflow not hidden in IE 9/10/11.
190
+ */
191
+
192
+ svg:not(:root) {
193
+ overflow: hidden;
194
+ }
195
+
196
+ /* Grouping content
197
+ ========================================================================== */
198
+
199
+ /**
200
+ * Address margin not present in IE 8/9 and Safari.
201
+ */
202
+
203
+ figure {
204
+ margin: 1em 40px;
205
+ }
206
+
207
+ /**
208
+ * Address differences between Firefox and other browsers.
209
+ */
210
+
211
+ hr {
212
+ -moz-box-sizing: content-box;
213
+ box-sizing: content-box;
214
+ height: 0;
215
+ }
216
+
217
+ /**
218
+ * Contain overflow in all browsers.
219
+ */
220
+
221
+ pre {
222
+ overflow: auto;
223
+ }
224
+
225
+ /**
226
+ * Address odd `em`-unit font size rendering in all browsers.
227
+ */
228
+
229
+ code,
230
+ kbd,
231
+ pre,
232
+ samp {
233
+ font-family: monospace, monospace;
234
+ font-size: 1em;
235
+ }
236
+
237
+ /* Forms
238
+ ========================================================================== */
239
+
240
+ /**
241
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
242
+ * styling of `select`, unless a `border` property is set.
243
+ */
244
+
245
+ /**
246
+ * 1. Correct color not being inherited.
247
+ * Known issue: affects color of disabled elements.
248
+ * 2. Correct font properties not being inherited.
249
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
250
+ */
251
+
252
+ button,
253
+ input,
254
+ optgroup,
255
+ select,
256
+ textarea {
257
+ color: inherit; /* 1 */
258
+ font: inherit; /* 2 */
259
+ margin: 0; /* 3 */
260
+ }
261
+
262
+ /**
263
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
264
+ */
265
+
266
+ button {
267
+ overflow: visible;
268
+ }
269
+
270
+ /**
271
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
272
+ * All other form control elements do not inherit `text-transform` values.
273
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
274
+ * Correct `select` style inheritance in Firefox.
275
+ */
276
+
277
+ button,
278
+ select {
279
+ text-transform: none;
280
+ }
281
+
282
+ /**
283
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
284
+ * and `video` controls.
285
+ * 2. Correct inability to style clickable `input` types in iOS.
286
+ * 3. Improve usability and consistency of cursor style between image-type
287
+ * `input` and others.
288
+ */
289
+
290
+ button,
291
+ html input[type="button"], /* 1 */
292
+ input[type="reset"],
293
+ input[type="submit"] {
294
+ -webkit-appearance: button; /* 2 */
295
+ cursor: pointer; /* 3 */
296
+ }
297
+
298
+ /**
299
+ * Re-set default cursor for disabled elements.
300
+ */
301
+
302
+ button[disabled],
303
+ html input[disabled] {
304
+ cursor: default;
305
+ }
306
+
307
+ /**
308
+ * Remove inner padding and border in Firefox 4+.
309
+ */
310
+
311
+ button::-moz-focus-inner,
312
+ input::-moz-focus-inner {
313
+ border: 0;
314
+ padding: 0;
315
+ }
316
+
317
+ /**
318
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
319
+ * the UA stylesheet.
320
+ */
321
+
322
+ input {
323
+ line-height: normal;
324
+ }
325
+
326
+ /**
327
+ * It's recommended that you don't attempt to style these elements.
328
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
329
+ *
330
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
331
+ * 2. Remove excess padding in IE 8/9/10.
332
+ */
333
+
334
+ input[type="checkbox"],
335
+ input[type="radio"] {
336
+ box-sizing: border-box; /* 1 */
337
+ padding: 0; /* 2 */
338
+ }
339
+
340
+ /**
341
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
342
+ * `font-size` values of the `input`, it causes the cursor style of the
343
+ * decrement button to change from `default` to `text`.
344
+ */
345
+
346
+ input[type="number"]::-webkit-inner-spin-button,
347
+ input[type="number"]::-webkit-outer-spin-button {
348
+ height: auto;
349
+ }
350
+
351
+ /**
352
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
353
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
354
+ * (include `-moz` to future-proof).
355
+ */
356
+
357
+ input[type="search"] {
358
+ -webkit-appearance: textfield; /* 1 */
359
+ -moz-box-sizing: content-box;
360
+ -webkit-box-sizing: content-box; /* 2 */
361
+ box-sizing: content-box;
362
+ }
363
+
364
+ /**
365
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
366
+ * Safari (but not Chrome) clips the cancel button when the search input has
367
+ * padding (and `textfield` appearance).
368
+ */
369
+
370
+ input[type="search"]::-webkit-search-cancel-button,
371
+ input[type="search"]::-webkit-search-decoration {
372
+ -webkit-appearance: none;
373
+ }
374
+
375
+ /**
376
+ * Define consistent border, margin, and padding.
377
+ */
378
+
379
+ fieldset {
380
+ border: 1px solid #c0c0c0;
381
+ margin: 0 2px;
382
+ padding: 0.35em 0.625em 0.75em;
383
+ }
384
+
385
+ /**
386
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
387
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
388
+ */
389
+
390
+ legend {
391
+ border: 0; /* 1 */
392
+ padding: 0; /* 2 */
393
+ }
394
+
395
+ /**
396
+ * Remove default vertical scrollbar in IE 8/9/10/11.
397
+ */
398
+
399
+ textarea {
400
+ overflow: auto;
401
+ }
402
+
403
+ /**
404
+ * Don't inherit the `font-weight` (applied by a rule above).
405
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
406
+ */
407
+
408
+ optgroup {
409
+ font-weight: bold;
410
+ }
411
+
412
+ /* Tables
413
+ ========================================================================== */
414
+
415
+ /**
416
+ * Remove most spacing between table cells.
417
+ */
418
+
419
+ table {
420
+ border-collapse: collapse;
421
+ border-spacing: 0;
422
+ }
423
+
424
+ td,
425
+ th {
426
+ padding: 0;
427
+ }
@@ -1,5 +1,20 @@
1
- // A collection of mixins by Codelation
1
+ // A collection of mixins used in Codelation Rails projects
2
2
  // https://codelation.com
3
3
 
4
+ @import "bourbon";
4
5
  @import "codelation/functions/**/*";
5
6
  @import "codelation/mixins/**/*";
7
+ @import "normalize";
8
+
9
+ // Border Box by default for all elements
10
+ html { // http://bit.ly/1qk2tVR
11
+ box-sizing: border-box;
12
+ }
13
+
14
+ * {
15
+ &,
16
+ &::after,
17
+ &::before {
18
+ box-sizing: inherit;
19
+ }
20
+ }
@@ -1,3 +1,5 @@
1
+ $accent-color: $blue !default;
2
+
1
3
  @mixin button($background-color: color($grey, 100), $font-color: $grey, $active-background-color: $accent-color, $active-font-color: text-color($accent-color)) {
2
4
  background-image: linear-gradient(to bottom, $background-color, darken($background-color, 8%));
3
5
  border: 0;
@@ -1,6 +1,6 @@
1
1
  // Sets up a element and its child elements with the flexbox properties needed
2
2
  // to have the given number of columns with optional gutters or margins.
3
- $mobile-breakpoint: 768px !default;
3
+ $mobile-breakpoint: 767px !default;
4
4
 
5
5
  @mixin has-cards($columns, $margin: 0) {
6
6
  @include align-content(flex-start);
@@ -1,6 +1,6 @@
1
1
  // Sets up a element and its child elements with the flexbox properties needed
2
2
  // to have the given number of columns with an optional gutter value.
3
- $mobile-breakpoint: 768px !default;
3
+ $mobile-breakpoint: 767px !default;
4
4
 
5
5
  @mixin has-columns($columns, $gutter: 0) {
6
6
  @include align-content(stretch);
@@ -10,8 +10,6 @@ $mobile-breakpoint: 768px !default;
10
10
  @include flex-wrap(wrap);
11
11
  @include justify-content(space-around);
12
12
  column-count: $columns; // Used as a reference for JavaScript functions
13
- margin: 0;
14
- padding: 0;
15
13
 
16
14
  > * {
17
15
  @include flex(1 1 auto);
@@ -1,3 +1,4 @@
1
+ require "bourbon"
1
2
  require "rails/engine"
2
3
 
3
4
  module CodelationAssets
@@ -1,3 +1,3 @@
1
1
  module CodelationAssets
2
- VERSION = "0.0.1"
2
+ VERSION = "0.1.0".freeze
3
3
  end
metadata CHANGED
@@ -1,15 +1,29 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: codelation_assets
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.1
4
+ version: 0.1.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Brian Pattison
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2016-01-18 00:00:00.000000000 Z
11
+ date: 2016-01-20 00:00:00.000000000 Z
12
12
  dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: bourbon
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - "~>"
18
+ - !ruby/object:Gem::Version
19
+ version: '4.2'
20
+ type: :runtime
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - "~>"
25
+ - !ruby/object:Gem::Version
26
+ version: '4.2'
13
27
  - !ruby/object:Gem::Dependency
14
28
  name: rails
15
29
  requirement: !ruby/object:Gem::Requirement
@@ -52,6 +66,7 @@ files:
52
66
  - app/assets/javascripts/codelation.js
53
67
  - app/assets/javascripts/codelation/app.js
54
68
  - app/assets/javascripts/codelation/components/columns.js
69
+ - app/assets/stylesheets/_normalize.scss
55
70
  - app/assets/stylesheets/codelation.scss
56
71
  - app/assets/stylesheets/codelation/functions/color.scss
57
72
  - app/assets/stylesheets/codelation/functions/text-color.scss