ezy 0.0.2 → 0.0.3
Sign up to get free protection for your applications and to get access to all the features.
- 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
|