codelation_assets 0.2.2 → 0.3.0
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.
- checksums.yaml +4 -4
- data/README.md +110 -29
- data/app/assets/javascripts/codelation/components/{has_columns.js → has_grid.js} +1 -1
- data/app/assets/stylesheets/codelation/functions/{text-color.scss → text_color.scss} +0 -0
- data/app/assets/stylesheets/codelation/mixins/col_span.scss +14 -0
- data/app/assets/stylesheets/codelation/mixins/has_cards.scss +0 -2
- data/app/assets/stylesheets/codelation/mixins/has_columns.scss +18 -16
- data/app/assets/stylesheets/codelation/mixins/has_grid.scss +70 -0
- data/app/assets/stylesheets/codelation.scss +1 -0
- data/lib/codelation_assets/version.rb +1 -1
- metadata +6 -4
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 93b9982fe8dba044d6f5c8d98fdba106bae98808
|
4
|
+
data.tar.gz: e7897b29408785550feaa738b9b35f0e12055f2e
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 6456d7aa5eee3f8cb9334cb5e7d186d9e293dc9c65aaf1cb46be47d7f00fc527257ba6da613e1315cc3011d99bf9d8c2dd004f885ece3529343cdebd90b489be
|
7
|
+
data.tar.gz: 3948158982df39b3f5c9a46807e052e42976e31fd5e63048b651885da3184c0544cd4970dd77ad9269f8b7c7bc38d5e6aa6dfd92c4a5fbf6d1d9b4392d61df66
|
data/README.md
CHANGED
@@ -17,9 +17,7 @@ Install the Codelation Assets gem with Bundler:
|
|
17
17
|
bundle install
|
18
18
|
```
|
19
19
|
|
20
|
-
##
|
21
|
-
|
22
|
-
### JavaScript
|
20
|
+
## JavaScript
|
23
21
|
|
24
22
|
Add to `application.js`:
|
25
23
|
|
@@ -27,12 +25,12 @@ Add to `application.js`:
|
|
27
25
|
//= require codelation
|
28
26
|
```
|
29
27
|
|
30
|
-
|
28
|
+
### App Functions
|
31
29
|
|
32
30
|
The `App` object is used in Codelation's Rails projects to register components that
|
33
31
|
need to be initialized on every page and to sprinkle in JavaScript on specific pages.
|
34
32
|
|
35
|
-
|
33
|
+
#### Registering JavaScript Components
|
36
34
|
|
37
35
|
By using `App.register('component')`, you can fire some JavaScript on every page load.
|
38
36
|
|
@@ -69,11 +67,14 @@ Example:
|
|
69
67
|
})();
|
70
68
|
```
|
71
69
|
|
72
|
-
|
70
|
+
#### Registering Per Page JavaScript Snippets
|
73
71
|
|
74
72
|
You can use `App.register('[controller-name].[action-name]')` to fire some JavaScript any time
|
75
73
|
that page is loaded and unloaded. The `enter` and `exit` functions work the same as components.
|
76
74
|
|
75
|
+
This assumes you are using a helper to set the body class to include the dasherized controller
|
76
|
+
name and dasherized action.
|
77
|
+
|
77
78
|
Example:
|
78
79
|
|
79
80
|
```javascript
|
@@ -96,7 +97,7 @@ Example:
|
|
96
97
|
You can also use `App.register('[controller-name]')` to fire JavaScript on all pages
|
97
98
|
for the given controller name.
|
98
99
|
|
99
|
-
|
100
|
+
## Sass
|
100
101
|
|
101
102
|
Add to `application.scss`:
|
102
103
|
|
@@ -104,18 +105,18 @@ Add to `application.scss`:
|
|
104
105
|
@include "codelation";
|
105
106
|
```
|
106
107
|
|
107
|
-
|
108
|
+
### Included Sass/CSS Libraries
|
108
109
|
|
109
110
|
- [Bourbon](http://bourbon.io) - A simple and lightweight mixin library for Sass.
|
110
111
|
- [Normalize.css](https://necolas.github.io/normalize.css/) - A modern, HTML5-ready alternative to CSS resets
|
111
112
|
|
112
|
-
|
113
|
+
### Additional Functions and Mixins
|
113
114
|
|
114
115
|
A handful of useful Sass functions and mixins written by Codelation are also included.
|
115
116
|
|
116
|
-
|
117
|
+
#### Sass Functions
|
117
118
|
|
118
|
-
|
119
|
+
##### color($color, $number: 500)
|
119
120
|
|
120
121
|
The [Google Material Design Colors](https://www.google.com/design/spec/style/color.html) come in handy when you
|
121
122
|
need a color for creating application interfaces. They are a much better alternative to CSS's named colors
|
@@ -131,34 +132,34 @@ Examples:
|
|
131
132
|
|
132
133
|
// You can also use the different shades available
|
133
134
|
.error {
|
134
|
-
color: ($red, 700);
|
135
|
+
color: color($red, 700);
|
135
136
|
}
|
136
137
|
|
137
138
|
// @see https://www.google.com/design/spec/style/color.html
|
138
139
|
.success {
|
139
|
-
color: ($green, 600);
|
140
|
+
color: color($green, 600);
|
140
141
|
}
|
141
142
|
```
|
142
143
|
|
143
|
-
|
144
|
+
##### text-color($color)
|
144
145
|
|
145
146
|
This function is useful for creating mixins where you have a background color as a variable
|
146
147
|
and need to display either black or white text on top of the given color.
|
147
148
|
|
148
|
-
|
149
|
+
#### Sass Mixins
|
149
150
|
|
150
|
-
|
151
|
+
##### button($background-color: color($grey, 100), $color: color($grey, 800), $active-background-color: $accent-color, $active-color: text-color($accent-color))
|
151
152
|
|
152
|
-
By default,
|
153
|
-
|
154
|
-
a button looking like a button.
|
153
|
+
By default, `@include button;` will create a plain grey button. It looks a lot like the default button in some
|
154
|
+
browsers, but it will be rendered to look the same across all browsers. Useful for applications that need to
|
155
|
+
be obvious about a button looking like a button.
|
155
156
|
|
156
|
-
|
157
|
+
##### center-children
|
157
158
|
|
158
159
|
This mixin uses flexbox to center the child elements horizontally and vertically inside the element.
|
159
160
|
A good use case is centering an image of unknown height inside a container with a fixed height.
|
160
161
|
|
161
|
-
|
162
|
+
##### has-cards($columns, $margin: 0)
|
162
163
|
|
163
164
|
This mixin uses flexbox to create a cards layout like that used by Google Material Design. The
|
164
165
|
mixin is used on the container element. This will create a fixed margin between each card element
|
@@ -166,6 +167,8 @@ and adds padding around the outside of the cards. Useful for creating a dashboar
|
|
166
167
|
|
167
168
|
Example:
|
168
169
|
|
170
|
+
**HTML**
|
171
|
+
|
169
172
|
```html
|
170
173
|
<div class="dashboard">
|
171
174
|
<div class="card"><div>
|
@@ -175,6 +178,8 @@ Example:
|
|
175
178
|
</div>
|
176
179
|
```
|
177
180
|
|
181
|
+
**SCSS**
|
182
|
+
|
178
183
|
```scss
|
179
184
|
// This will create a cards layout with two cards per row.
|
180
185
|
// There will be a fixed margin of 1em between and around the cards.
|
@@ -191,23 +196,27 @@ Example:
|
|
191
196
|
}
|
192
197
|
```
|
193
198
|
|
194
|
-
|
199
|
+
##### has-columns($columns, $gutter: 0)
|
195
200
|
|
196
|
-
This mixin uses flexbox to create a layout with the specified number of columns
|
197
|
-
|
198
|
-
|
199
|
-
|
201
|
+
This mixin uses flexbox to create a layout with the specified number of columns that
|
202
|
+
stretch to fill the container's height. The given gutter size will the margin between
|
203
|
+
the columns. The container should be a single row with a known number of child
|
204
|
+
elements. Use `has-grid` if there is an unknown number of child elements.
|
200
205
|
|
201
206
|
Example:
|
202
207
|
|
208
|
+
**HTML**
|
209
|
+
|
203
210
|
```html
|
204
211
|
<div class="row">
|
205
|
-
<div
|
206
|
-
<div
|
207
|
-
<div
|
212
|
+
<div>Column 1<div>
|
213
|
+
<div>Column 2<div>
|
214
|
+
<div>Column 3<div>
|
208
215
|
</div>
|
209
216
|
```
|
210
217
|
|
218
|
+
**SCSS**
|
219
|
+
|
211
220
|
```scss
|
212
221
|
// This will create a layout with three columns.
|
213
222
|
// The columns will all fill the container height.
|
@@ -217,6 +226,78 @@ Example:
|
|
217
226
|
}
|
218
227
|
```
|
219
228
|
|
229
|
+
###### col-span($columns of $container-columns, $gutter: 0)
|
230
|
+
|
231
|
+
When the `has-columns` mixin is used properly, you can create columns in a row that
|
232
|
+
span the width of multiple columns in another row. In order to use the `col-span`
|
233
|
+
mixin, you must use a percentage value or zero for your gutter width. There is no way
|
234
|
+
to have a fixed gutter width, flexible column widths, and match up with the columns
|
235
|
+
in another row.
|
236
|
+
|
237
|
+
Example:
|
238
|
+
|
239
|
+
**HTML**
|
240
|
+
|
241
|
+
```html
|
242
|
+
<div class="row">
|
243
|
+
<div>Column 1<div>
|
244
|
+
<div>Column 2<div>
|
245
|
+
<div>Column 3<div>
|
246
|
+
</div>
|
247
|
+
<div class="row">
|
248
|
+
<div class="wide-column">Column 4<div>
|
249
|
+
<div>Column 5<div>
|
250
|
+
</div>
|
251
|
+
```
|
252
|
+
|
253
|
+
**SCSS**
|
254
|
+
|
255
|
+
```scss
|
256
|
+
.row {
|
257
|
+
@include has-columns(3, 3%);
|
258
|
+
}
|
259
|
+
|
260
|
+
// Column 4 will span across two columns. Its left side will match up with
|
261
|
+
// column 1's left side, and its right side will match up with column 2's right
|
262
|
+
// side. Column 5's right margin will be set to 0 without any extra SCSS.
|
263
|
+
.wide-column {
|
264
|
+
@include col-span(2 of 3, 3%)
|
265
|
+
}
|
266
|
+
```
|
267
|
+
|
268
|
+
##### has-grid($columns, $gutter: 0)
|
269
|
+
|
270
|
+
This mixin uses flexbox to create a grid layout with an unknown number of child elements.
|
271
|
+
Each child element will have the same width and they will stretch to be the same height.
|
272
|
+
The gutter size is the width between each column and the height between each row. Unlike
|
273
|
+
the `has-cards` mixin, there will not be a margin around the child elements, only between.
|
274
|
+
This mixin is perfect for a product category page.
|
275
|
+
|
276
|
+
Example:
|
277
|
+
|
278
|
+
**HTML**
|
279
|
+
|
280
|
+
```html
|
281
|
+
<div class="products">
|
282
|
+
<div>Product 1<div>
|
283
|
+
<div>Product 2<div>
|
284
|
+
<div>Product 3<div>
|
285
|
+
<div>Product 4<div>
|
286
|
+
<div>Product 5<div>
|
287
|
+
</div>
|
288
|
+
```
|
289
|
+
|
290
|
+
**SCSS**
|
291
|
+
|
292
|
+
```scss
|
293
|
+
// Products 1 - 3 will be on the first row and there will be a margin of 1em between them.
|
294
|
+
// Products 4 & 5 will be on the second row and will match up with products 1 & 2.
|
295
|
+
// There will be a margin of 1em between the rows.
|
296
|
+
.products {
|
297
|
+
@include has-grid(3, 1em);
|
298
|
+
}
|
299
|
+
```
|
300
|
+
|
220
301
|
## Contributing
|
221
302
|
|
222
303
|
1. Fork it
|
@@ -1,7 +1,7 @@
|
|
1
1
|
(function() {
|
2
2
|
"use strict";
|
3
3
|
|
4
|
-
// Used with the `has-
|
4
|
+
// Used with the `has-grid` and `has-cards` Sass mixins,
|
5
5
|
// it appends an extra span element for each missing column
|
6
6
|
// based on the number of columns defined in the CSS.
|
7
7
|
App.register('component').enter(function() {
|
File without changes
|
@@ -0,0 +1,14 @@
|
|
1
|
+
@mixin col-span($span: $columns of $total-columns, $gutter: 0) {
|
2
|
+
$columns: nth($span, 1);
|
3
|
+
$container-columns: nth($span, 3);
|
4
|
+
|
5
|
+
@if ($gutter != 0 and unit($gutter) != "%") {
|
6
|
+
@error "The col-span mixin can only be used if there is no gutter or the gutter's unit is %";
|
7
|
+
}
|
8
|
+
|
9
|
+
$single-column-width: (100% - ($gutter * ($container-columns - 1))) / $container-columns;
|
10
|
+
$spanned-width: $single-column-width * $columns;
|
11
|
+
$spanned-gutters-width: $gutter * ($columns - 1);
|
12
|
+
|
13
|
+
width: $spanned-width + $spanned-gutters-width;
|
14
|
+
}
|
@@ -1,7 +1,5 @@
|
|
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: 767px !default;
|
4
|
-
|
5
3
|
@mixin has-cards($columns, $margin: 0) {
|
6
4
|
@include align-content(flex-start);
|
7
5
|
@include align-items(stretch);
|
@@ -1,7 +1,5 @@
|
|
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: 767px !default;
|
4
|
-
|
5
3
|
@mixin has-columns($columns, $gutter: 0) {
|
6
4
|
@include align-content(stretch);
|
7
5
|
@include align-items(stretch);
|
@@ -9,40 +7,44 @@ $mobile-breakpoint: 767px !default;
|
|
9
7
|
@include flex-direction(row);
|
10
8
|
@include flex-wrap(wrap);
|
11
9
|
@include justify-content(space-around);
|
12
|
-
column-count: $columns; // Used as a reference for JavaScript functions
|
13
10
|
|
14
11
|
> * {
|
15
12
|
@include flex(1 1 auto);
|
16
|
-
|
13
|
+
|
14
|
+
@if $gutter == 0 {
|
15
|
+
// If there is no gutter, we don't need to do anything other
|
16
|
+
// than split up the columns evenly.
|
17
|
+
width: 100% / $columns;
|
18
|
+
} @else if unit($gutter) == "px" or unit($gutter) == "em" {
|
19
|
+
// If there is a fixed gutter size, we need to trick the columns into
|
20
|
+
// being close to the right width and stretching to fill in the rest.
|
21
|
+
width: 85% / $columns;
|
22
|
+
} @else if unit($gutter) == "%" {
|
23
|
+
// If the gutter size is a percentage of the width, we can use the percentage
|
24
|
+
// to calculate the width of the columns as a percentage as well.
|
25
|
+
width: (100% - ($gutter * ($columns - 1))) / $columns;
|
26
|
+
}
|
17
27
|
|
18
28
|
@if $gutter > 0 {
|
19
29
|
margin-right: $gutter;
|
20
30
|
|
21
|
-
|
31
|
+
// Remove the right margin for the last column in a row
|
32
|
+
&:last-child {
|
22
33
|
margin-right: 0;
|
23
34
|
}
|
24
35
|
}
|
25
|
-
|
26
|
-
&:empty {
|
27
|
-
margin-bottom: 0;
|
28
|
-
margin-top: 0;
|
29
|
-
visibility: hidden;
|
30
|
-
}
|
31
36
|
}
|
32
37
|
|
38
|
+
// Stack columns when the mobile breakpoint is set
|
33
39
|
@media (max-width: $mobile-breakpoint) {
|
34
40
|
> * {
|
35
41
|
margin-bottom: $gutter;
|
36
42
|
margin-right: 0;
|
37
43
|
width: 100%;
|
38
44
|
|
39
|
-
&:last-
|
45
|
+
&:last-child {
|
40
46
|
margin-bottom: 0;
|
41
47
|
}
|
42
|
-
|
43
|
-
&:empty {
|
44
|
-
display: none;
|
45
|
-
}
|
46
48
|
}
|
47
49
|
}
|
48
50
|
}
|
@@ -0,0 +1,70 @@
|
|
1
|
+
// Sets up a element and its child elements with the flexbox properties needed
|
2
|
+
// to have the given number of columns per row with multiple rows in the container
|
3
|
+
// and an optional gutter value that will be used between columns and rows.
|
4
|
+
@mixin has-grid($columns, $gutter: 0) {
|
5
|
+
@include align-content(stretch);
|
6
|
+
@include align-items(stretch);
|
7
|
+
@include display(flex);
|
8
|
+
@include flex-direction(row);
|
9
|
+
@include flex-wrap(wrap);
|
10
|
+
@include justify-content(space-around);
|
11
|
+
column-count: $columns; // Used as a reference for JavaScript functions
|
12
|
+
|
13
|
+
> * {
|
14
|
+
@include flex(1 1 auto);
|
15
|
+
|
16
|
+
@if $gutter == 0 {
|
17
|
+
// If there is no gutter, we don't need to do anything other
|
18
|
+
// than split up the columns evenly.
|
19
|
+
width: 100% / $columns;
|
20
|
+
} @else if unit($gutter) == "px" or unit($gutter) == "em" {
|
21
|
+
// If there is a fixed gutter size, we need to trick the columns into
|
22
|
+
// being close to the right width and stretching to fill in the rest.
|
23
|
+
width: 85% / $columns;
|
24
|
+
} @else if unit($gutter) == "%" {
|
25
|
+
// If the gutter size is a percentage of the width, we can use the percentage
|
26
|
+
// to calculate the width of the columns as a percentage as well.
|
27
|
+
width: (100% - ($gutter * ($columns - 1))) / $columns;
|
28
|
+
}
|
29
|
+
|
30
|
+
// Remove the right margin for the last column in a row
|
31
|
+
// and the top margin for each column in the first row
|
32
|
+
@if $gutter > 0 {
|
33
|
+
margin-right: $gutter;
|
34
|
+
margin-top: $gutter;
|
35
|
+
|
36
|
+
@for $i from 1 through $columns {
|
37
|
+
&:nth-child(#{$i}) {
|
38
|
+
margin-top: 0;
|
39
|
+
}
|
40
|
+
}
|
41
|
+
|
42
|
+
&:nth-child(#{$columns}n) {
|
43
|
+
margin-right: 0;
|
44
|
+
}
|
45
|
+
}
|
46
|
+
|
47
|
+
// The JavaScript component will add empty spans to keep a uniform column width
|
48
|
+
&:empty {
|
49
|
+
margin-bottom: 0;
|
50
|
+
margin-top: 0;
|
51
|
+
visibility: hidden;
|
52
|
+
}
|
53
|
+
}
|
54
|
+
|
55
|
+
@media (max-width: $mobile-breakpoint) {
|
56
|
+
> * {
|
57
|
+
margin-bottom: $gutter;
|
58
|
+
margin-right: 0;
|
59
|
+
width: 100%;
|
60
|
+
|
61
|
+
&:last-of-type {
|
62
|
+
margin-bottom: 0;
|
63
|
+
}
|
64
|
+
|
65
|
+
&:empty {
|
66
|
+
display: none;
|
67
|
+
}
|
68
|
+
}
|
69
|
+
}
|
70
|
+
}
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: codelation_assets
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.3.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-
|
11
|
+
date: 2016-01-28 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: bourbon
|
@@ -65,15 +65,17 @@ files:
|
|
65
65
|
- Rakefile
|
66
66
|
- app/assets/javascripts/codelation.js
|
67
67
|
- app/assets/javascripts/codelation/app.js
|
68
|
-
- app/assets/javascripts/codelation/components/
|
68
|
+
- app/assets/javascripts/codelation/components/has_grid.js
|
69
69
|
- app/assets/stylesheets/_normalize.scss
|
70
70
|
- app/assets/stylesheets/codelation.scss
|
71
71
|
- app/assets/stylesheets/codelation/functions/color.scss
|
72
|
-
- app/assets/stylesheets/codelation/functions/
|
72
|
+
- app/assets/stylesheets/codelation/functions/text_color.scss
|
73
73
|
- app/assets/stylesheets/codelation/mixins/button.scss
|
74
74
|
- app/assets/stylesheets/codelation/mixins/center_children.scss
|
75
|
+
- app/assets/stylesheets/codelation/mixins/col_span.scss
|
75
76
|
- app/assets/stylesheets/codelation/mixins/has_cards.scss
|
76
77
|
- app/assets/stylesheets/codelation/mixins/has_columns.scss
|
78
|
+
- app/assets/stylesheets/codelation/mixins/has_grid.scss
|
77
79
|
- lib/codelation_assets.rb
|
78
80
|
- lib/codelation_assets/version.rb
|
79
81
|
homepage: https://github.com/codelation/codelation_assets
|