ezy 0.0.2 → 0.0.3
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/VERSION +1 -1
- data/ezy.gemspec +2 -1
- data/sass/ezy/_functions.scss +7 -55
- data/sass/ezy/_grid.scss +118 -17
- data/test/css/grid/elastic.css +59 -0
- data/test/scss/grid/elastic.scss +37 -0
- metadata +6 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: f56303dd08e2d83f79d822e6b629bb580810dd2c
|
|
4
|
+
data.tar.gz: 14a17341df94f13dac8ca5f95b0ab5e399a94baa
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: c40dbc90d9e844f620d3026ca2c84a6f9d3c2cfd7f5d2f757234edccca6a49835b81a00ea0d9e87ec110d08ba2dcd42614b4cef15c3e34c8114c593bf6454451
|
|
7
|
+
data.tar.gz: 42dc596c398a17b1c9516b7623c988f34ed162c263737699145e389180e1d736dff633fc4a08f99119dd0238fa55b690d590aa5c960ae28237a625c45026a0dc
|
data/VERSION
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
0.0.
|
|
1
|
+
0.0.3
|
data/ezy.gemspec
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Gem::Specification.new do |s|
|
|
4
4
|
# Release Specific Information
|
|
5
|
-
s.version = "0.0.
|
|
5
|
+
s.version = "0.0.3"
|
|
6
6
|
s.date = "2013-11-10"
|
|
7
7
|
|
|
8
8
|
# Gem Details
|
|
@@ -12,6 +12,7 @@ Gem::Specification.new do |s|
|
|
|
12
12
|
s.description = "Ezy Grid is a light weight grid framework for use with SASS. It's simple, but smart and will allow you to create even the most complex responsive layouts."
|
|
13
13
|
s.email = "frejraahede@gmail.com"
|
|
14
14
|
s.homepage = "http://github.com/raahede/"
|
|
15
|
+
s.license = "MIT"
|
|
15
16
|
|
|
16
17
|
# Gem Files
|
|
17
18
|
s.files = %w(README.md)
|
data/sass/ezy/_functions.scss
CHANGED
|
@@ -1,59 +1,11 @@
|
|
|
1
1
|
|
|
2
|
-
//
|
|
3
|
-
//
|
|
4
|
-
//
|
|
5
|
-
//
|
|
6
|
-
//
|
|
7
|
-
//
|
|
8
|
-
// Example use:
|
|
9
|
-
// -------------------
|
|
10
|
-
// .selector{
|
|
11
|
-
// width: percentage-round( 2/3 ); // returns 66.66%
|
|
12
|
-
// }
|
|
13
|
-
//
|
|
14
|
-
// ------------------------------------------------------------- *
|
|
2
|
+
// ---------------------------------------------------------------------------
|
|
3
|
+
// @function percentage-round
|
|
4
|
+
//
|
|
5
|
+
// Similar to the SASS percentage() function, but rounds down to 2 decimals
|
|
6
|
+
// $columns : Fraction to convert to percentage
|
|
7
|
+
// @return : Percentage value rounded down to 2 decimals
|
|
15
8
|
|
|
16
9
|
@function percentage-round( $value ) {
|
|
17
10
|
@return floor( percentage( $value ) * 100 ) / 100;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
@function return-key( $key, $array ) {
|
|
22
|
-
@each $item in $array {
|
|
23
|
-
@if ( nth( $item, 1 ) == $key ){
|
|
24
|
-
@return nth( $item, 2 );
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
@function comparable-multiple( $array ) {
|
|
30
|
-
$prev: false;
|
|
31
|
-
|
|
32
|
-
@if length( $array ) < 2 {
|
|
33
|
-
@warn "You need at least two values in order to do a comparison!";
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
@each $item in $array {
|
|
37
|
-
@if $prev {
|
|
38
|
-
@if not comparable( $prev, $item ) {
|
|
39
|
-
@return false;
|
|
40
|
-
}
|
|
41
|
-
} @else {
|
|
42
|
-
$prev: $item;
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
@return true;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
@function remove-units( $value ) {
|
|
49
|
-
$units: "%" 1%, "in" 1in, "cm" 1cm, "mm" 1mm, "em" 1em, "rem" 1rem, "ch" 1ch, "ex" 1ex, "pt" 1pt, "pc" 1pc, "px" 1px, "vw" 1vw, "vh" 1vh, "vmin" 1vmin, "vmax" 1vmax;
|
|
50
|
-
@each $unit in $units {
|
|
51
|
-
@if unit($value) == nth( $unit, 1 ) {
|
|
52
|
-
@return $value / nth( $unit, 2 );
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
// @return $value / unit($value);
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
11
|
+
}
|
data/sass/ezy/_grid.scss
CHANGED
|
@@ -1,13 +1,26 @@
|
|
|
1
|
+
// ---------------------------------------------------------------------------
|
|
2
|
+
// Mandatory grid settings
|
|
3
|
+
// Defaults: can be overridden
|
|
1
4
|
|
|
2
|
-
$column-width:
|
|
3
|
-
$gutter-width:
|
|
4
|
-
$
|
|
5
|
-
$
|
|
5
|
+
$column-width: 4em !default;
|
|
6
|
+
$gutter-width: 1em !default;
|
|
7
|
+
$gutter-property: "margin" !default;
|
|
8
|
+
$total-columns: 12 !default;
|
|
9
|
+
$is-fluid: true !default;
|
|
6
10
|
|
|
7
|
-
|
|
11
|
+
// ---------------------------------------------------------------------------
|
|
12
|
+
// Variables used in grid context
|
|
8
13
|
|
|
14
|
+
$grid-init: false;
|
|
9
15
|
$context-warn: "You must set $context if $is-fluid is set to true.";
|
|
10
16
|
|
|
17
|
+
// ---------------------------------------------------------------------------
|
|
18
|
+
// @function layout-width
|
|
19
|
+
//
|
|
20
|
+
// Returns width based on given number of culumns
|
|
21
|
+
// $columns : Number of columns to calculate width from
|
|
22
|
+
// @return : Width in the same unit as $column-width and $gutter-width
|
|
23
|
+
|
|
11
24
|
@function layout-width( $columns ) {
|
|
12
25
|
@if comparable( $column-width, $gutter-width ) {
|
|
13
26
|
@return $columns * ( $column-width + $gutter-width ) - $gutter-width;
|
|
@@ -16,14 +29,36 @@ $context-warn: "You must set $context if $is-fluid is set to true.";
|
|
|
16
29
|
}
|
|
17
30
|
}
|
|
18
31
|
|
|
32
|
+
// ---------------------------------------------------------------------------
|
|
33
|
+
// @function context-width
|
|
34
|
+
//
|
|
35
|
+
// Returns width based on given number of culumns, plus an extra gutter
|
|
36
|
+
// Used for % calculations in the grid
|
|
37
|
+
// $columns : Number of columns to calculate width from
|
|
38
|
+
// @return : Width in the same unit as $column-width and $gutter-width
|
|
39
|
+
|
|
19
40
|
@function context-width( $columns ) {
|
|
20
41
|
@return layout-width( $columns ) + $gutter-width;
|
|
21
42
|
}
|
|
22
43
|
|
|
44
|
+
// ---------------------------------------------------------------------------
|
|
45
|
+
// @function span-column-width
|
|
46
|
+
//
|
|
47
|
+
// Same as layout-width( $columns ), but renamed for better context awareness
|
|
48
|
+
|
|
23
49
|
@function span-column-width( $columns ) {
|
|
24
50
|
@return layout-width( $columns );
|
|
25
51
|
}
|
|
26
52
|
|
|
53
|
+
// ---------------------------------------------------------------------------
|
|
54
|
+
// @function gutter
|
|
55
|
+
//
|
|
56
|
+
// Returns gutter in the same unit as $gutter-width if grid is static
|
|
57
|
+
// Returns gutter as a percentage of the context if grid is fluid
|
|
58
|
+
// $context : Number of columns in the current context.
|
|
59
|
+
// : If set to false, the returned value is as in static grid
|
|
60
|
+
// @return : Width as $gutter-width or as a percentage of the context
|
|
61
|
+
|
|
27
62
|
@function gutter(
|
|
28
63
|
$context: false
|
|
29
64
|
) {
|
|
@@ -36,15 +71,32 @@ $context-warn: "You must set $context if $is-fluid is set to true.";
|
|
|
36
71
|
}
|
|
37
72
|
}
|
|
38
73
|
|
|
74
|
+
// ---------------------------------------------------------------------------
|
|
75
|
+
// @mixin gutters
|
|
76
|
+
//
|
|
77
|
+
// Sets gutters using the gutter( $context ) function
|
|
78
|
+
// $context : Number of columns in the current context.
|
|
79
|
+
// : Only mandatory if grid is fluid
|
|
80
|
+
// $gutter-property : Set to "margin" or "padding"
|
|
81
|
+
|
|
39
82
|
@mixin gutters(
|
|
40
|
-
$context: false
|
|
83
|
+
$context: false,
|
|
84
|
+
$gutter-property: $gutter-property
|
|
41
85
|
) {
|
|
42
|
-
margin
|
|
43
|
-
|
|
44
|
-
|
|
86
|
+
@if $gutter-property == "margin" or $gutter-property == "padding" {
|
|
87
|
+
#{ $gutter-property }: {
|
|
88
|
+
left: gutter( $context );
|
|
89
|
+
right: gutter( $context );
|
|
90
|
+
}
|
|
91
|
+
} @else {
|
|
92
|
+
@warn "$gutter-property must be set to either 'margin' or 'padding'";
|
|
45
93
|
}
|
|
46
94
|
}
|
|
47
95
|
|
|
96
|
+
// ---------------------------------------------------------------------------
|
|
97
|
+
// Grid master placeholder selector
|
|
98
|
+
// Adds cleafix and centers page in browser
|
|
99
|
+
|
|
48
100
|
%ezy-master {
|
|
49
101
|
@extend %clearfix;
|
|
50
102
|
margin: {
|
|
@@ -53,21 +105,43 @@ $context-warn: "You must set $context if $is-fluid is set to true.";
|
|
|
53
105
|
}
|
|
54
106
|
}
|
|
55
107
|
|
|
108
|
+
// ---------------------------------------------------------------------------
|
|
109
|
+
// @mixin master
|
|
110
|
+
//
|
|
111
|
+
// Sets width on page. If the grid is fluid, it's set as a max-width
|
|
112
|
+
// Extends the grid master placeholder selector
|
|
113
|
+
// $context : Number of columns in the current context.
|
|
114
|
+
|
|
56
115
|
@mixin master(
|
|
57
|
-
$
|
|
116
|
+
$context
|
|
58
117
|
) {
|
|
59
118
|
@if $is-fluid {
|
|
60
|
-
max-width: layout-width( $
|
|
119
|
+
max-width: layout-width( $context );
|
|
61
120
|
} @else {
|
|
62
|
-
width: layout-width( $
|
|
121
|
+
width: layout-width( $context );
|
|
63
122
|
}
|
|
64
123
|
@extend %ezy-master;
|
|
65
124
|
}
|
|
66
125
|
|
|
126
|
+
// ---------------------------------------------------------------------------
|
|
127
|
+
// Grid container placeholder selector
|
|
128
|
+
// Adds cleafix
|
|
129
|
+
|
|
67
130
|
%ezy-container {
|
|
68
131
|
@extend %clearfix;
|
|
69
132
|
}
|
|
70
133
|
|
|
134
|
+
// ---------------------------------------------------------------------------
|
|
135
|
+
// @mixin container
|
|
136
|
+
//
|
|
137
|
+
// Sets width on page. If the grid is fluid, it's set as a max-width
|
|
138
|
+
// Extends the grid master placeholder selector
|
|
139
|
+
// $context : Number of columns in the current context
|
|
140
|
+
// : Only mandatory if grid is fluid
|
|
141
|
+
// $at-breakpoint : Set to true if mixin is called within a media query
|
|
142
|
+
// : Avoids SASS compillation errors from extending within
|
|
143
|
+
// : a media query
|
|
144
|
+
|
|
71
145
|
@mixin container(
|
|
72
146
|
$context: false,
|
|
73
147
|
$at-breakpoint: false
|
|
@@ -87,6 +161,19 @@ $context-warn: "You must set $context if $is-fluid is set to true.";
|
|
|
87
161
|
}
|
|
88
162
|
}
|
|
89
163
|
|
|
164
|
+
// ---------------------------------------------------------------------------
|
|
165
|
+
// @mixin grid-init
|
|
166
|
+
//
|
|
167
|
+
// Prints out placeholder selectors used with columns. Helps reduce the CSS output.
|
|
168
|
+
//
|
|
169
|
+
// Should be called after setting grid variables:
|
|
170
|
+
// ----------------
|
|
171
|
+
// $column-width
|
|
172
|
+
// $gutter-width
|
|
173
|
+
// $gutter-property
|
|
174
|
+
// $total-columns
|
|
175
|
+
// ----------------
|
|
176
|
+
|
|
90
177
|
@mixin grid-init() {
|
|
91
178
|
$grid-init: true;
|
|
92
179
|
@if $is-fluid {
|
|
@@ -104,10 +191,24 @@ $context-warn: "You must set $context if $is-fluid is set to true.";
|
|
|
104
191
|
}
|
|
105
192
|
}
|
|
106
193
|
|
|
194
|
+
// ---------------------------------------------------------------------------
|
|
195
|
+
// @mixin span-columns
|
|
196
|
+
//
|
|
197
|
+
// Sets width and gutter on columns
|
|
198
|
+
// Uses @extend for gutters outside media queries if grid-init() has been called
|
|
199
|
+
// $columns : Number of columns to span
|
|
200
|
+
// $context : Number of columns in the current context
|
|
201
|
+
// : Only mandatory if grid is fluid
|
|
202
|
+
// $at-breakpoint : Set to true if mixin is called within a media query
|
|
203
|
+
// : Avoids SASS compillation errors from extending within
|
|
204
|
+
// : a media query
|
|
205
|
+
// $gutter-property : Overrides the global $gutter-property
|
|
206
|
+
|
|
107
207
|
@mixin span-columns(
|
|
108
208
|
$columns,
|
|
109
209
|
$context: false,
|
|
110
|
-
$at-breakpoint: false
|
|
210
|
+
$at-breakpoint: false,
|
|
211
|
+
$gutter-property: $gutter-property
|
|
111
212
|
) {
|
|
112
213
|
$width: span-column-width( $columns );
|
|
113
214
|
/* Spanning #{ $columns } of #{ $context } columns */
|
|
@@ -122,15 +223,15 @@ $context-warn: "You must set $context if $is-fluid is set to true.";
|
|
|
122
223
|
@if (not $at-breakpoint) {
|
|
123
224
|
@if $total-columns < $context {
|
|
124
225
|
@warn "Please check if $total-columns is set. $total-columns should be the highest number of columns occuring in your layout. This error will not break your layout, but will increase the CSS output.";
|
|
125
|
-
@include gutters( $context );
|
|
226
|
+
@include gutters( $context, $gutter-property );
|
|
126
227
|
} @else if (not $grid-init) {
|
|
127
228
|
@warn "Include grid-init() after setting $total-columns for cleaner CSS output.";
|
|
128
|
-
@include gutters( $context );
|
|
229
|
+
@include gutters( $context, $gutter-property );
|
|
129
230
|
} @else {
|
|
130
231
|
@extend %ezy-column-#{ $context };
|
|
131
232
|
}
|
|
132
233
|
} @else {
|
|
133
|
-
@include gutters( $context );
|
|
234
|
+
@include gutters( $context, $gutter-property );
|
|
134
235
|
}
|
|
135
236
|
@if $columns > $context {
|
|
136
237
|
@warn "You are trying to span #{ $columns } columns, but your layout only has #{ $context } columns.";
|
|
@@ -140,7 +241,7 @@ $context-warn: "You must set $context if $is-fluid is set to true.";
|
|
|
140
241
|
}
|
|
141
242
|
} @else if (not $grid-init) {
|
|
142
243
|
@warn "Include grid-init() after setting $gutter-width for cleaner CSS output.";
|
|
143
|
-
@include gutters( $context );
|
|
244
|
+
@include gutters( $context, $gutter-property );
|
|
144
245
|
} @else {
|
|
145
246
|
@extend %ezy-column;
|
|
146
247
|
}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
/* -------------------------------------------------------------------- *
|
|
2
|
+
* Micro Clearfix
|
|
3
|
+
* http://nicolasgallagher.com/micro-clearfix-hack/
|
|
4
|
+
*/
|
|
5
|
+
.page:before, .grid:before,
|
|
6
|
+
.page:after,
|
|
7
|
+
.grid:after {
|
|
8
|
+
content: " ";
|
|
9
|
+
display: table;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.page:after, .grid:after {
|
|
13
|
+
clear: both;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.page, .grid {
|
|
17
|
+
/**
|
|
18
|
+
* For IE 6/7 only
|
|
19
|
+
* Include this rule to trigger hasLayout and contain floats.
|
|
20
|
+
*/
|
|
21
|
+
*zoom: 1;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* -------------------------------------------------------------------- */
|
|
25
|
+
.page {
|
|
26
|
+
margin-left: auto;
|
|
27
|
+
margin-right: auto;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.page {
|
|
31
|
+
max-width: 70em;
|
|
32
|
+
font-size: 14px;
|
|
33
|
+
}
|
|
34
|
+
@media (min-width: 20.1em) {
|
|
35
|
+
.page {
|
|
36
|
+
font-size: 16px;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
@media (min-width: 30em) {
|
|
40
|
+
.page {
|
|
41
|
+
font-size: 18px;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
.no-media-queries .page {
|
|
45
|
+
/* Fallback for browsers not supporting media queries */
|
|
46
|
+
font-size: 18px;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.grid {
|
|
50
|
+
margin-left: -1.425%;
|
|
51
|
+
margin-right: -1.425%;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.column {
|
|
55
|
+
/* Spanning 4 of 12 columns */
|
|
56
|
+
width: 30.55%;
|
|
57
|
+
margin-left: 1.38%;
|
|
58
|
+
margin-right: 1.38%;
|
|
59
|
+
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
// ---------------------------------------------------------------------------
|
|
2
|
+
// Imports
|
|
3
|
+
|
|
4
|
+
@import "../../../sass/ezy";
|
|
5
|
+
|
|
6
|
+
$column-width: 4em;
|
|
7
|
+
$gutter-width: 2em;
|
|
8
|
+
$total-columns: 12;
|
|
9
|
+
|
|
10
|
+
// Widths for use in media queries
|
|
11
|
+
$width-small: context-width( 4 );
|
|
12
|
+
$width-medium: context-width( 8 );
|
|
13
|
+
$width-large: context-width( $total-columns );
|
|
14
|
+
|
|
15
|
+
// Defining media query breakpoints
|
|
16
|
+
$breakpoint-small: set-breakpoint( $max: 20em );
|
|
17
|
+
$breakpoint-medium: set-breakpoint( $min: 20.1em );
|
|
18
|
+
$breakpoint-large: set-breakpoint( $min: 30em, $legacy-support: true ); // Support for legacy browsers
|
|
19
|
+
|
|
20
|
+
.page {
|
|
21
|
+
@include master( $total-columns ); // Sets max-width
|
|
22
|
+
font-size: 14px;
|
|
23
|
+
@include at-breakpoint( $breakpoint-medium ) {
|
|
24
|
+
font-size: 16px;
|
|
25
|
+
}
|
|
26
|
+
@include at-breakpoint( $breakpoint-large ) {
|
|
27
|
+
font-size: 18px;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.grid {
|
|
32
|
+
@include container( $total-columns );
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.column {
|
|
36
|
+
@include span-columns( 4, $context: $total-columns );
|
|
37
|
+
}
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: ezy
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0.
|
|
4
|
+
version: 0.0.3
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Frej Raahede Nielsen
|
|
@@ -59,16 +59,19 @@ files:
|
|
|
59
59
|
- templates/project/manifest.rb
|
|
60
60
|
- templates/project/screen.scss
|
|
61
61
|
- test/config.rb
|
|
62
|
+
- test/css/grid/elastic.css
|
|
62
63
|
- test/css/grid/fluid.css
|
|
63
64
|
- test/css/grid/responsive.css
|
|
64
65
|
- test/css/grid/static.css
|
|
65
66
|
- test/css/media.css
|
|
67
|
+
- test/scss/grid/elastic.scss
|
|
66
68
|
- test/scss/grid/fluid.scss
|
|
67
69
|
- test/scss/grid/responsive.scss
|
|
68
70
|
- test/scss/grid/static.scss
|
|
69
71
|
- test/scss/media.scss
|
|
70
72
|
homepage: http://github.com/raahede/
|
|
71
|
-
licenses:
|
|
73
|
+
licenses:
|
|
74
|
+
- MIT
|
|
72
75
|
metadata: {}
|
|
73
76
|
post_install_message:
|
|
74
77
|
rdoc_options: []
|
|
@@ -86,7 +89,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
86
89
|
version: '0'
|
|
87
90
|
requirements: []
|
|
88
91
|
rubyforge_project:
|
|
89
|
-
rubygems_version: 2.
|
|
92
|
+
rubygems_version: 2.1.10
|
|
90
93
|
signing_key:
|
|
91
94
|
specification_version: 4
|
|
92
95
|
summary: Responsive grid framework for SASS
|