ezy 0.2.6.alpha → 0.2.7.alpha

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 (28) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +22 -69
  3. data/VERSION +1 -1
  4. data/ezy.gemspec +3 -3
  5. data/sass/ezy/_functions.scss +1 -1
  6. data/sass/ezy/_grid.scss +10 -6
  7. data/sass/ezy/_media.scss +8 -0
  8. data/sass/ezy/_settings.scss +5 -0
  9. data/sass/ezy/grid/_helpers.scss +2 -2
  10. data/test/css/grid/elastic.css +2 -0
  11. data/test/css/grid/fluid.css +2 -0
  12. data/test/css/grid/layout/fluid.css +121 -0
  13. data/test/css/grid/layout/responsive.css +182 -0
  14. data/test/css/grid/layout.css +8 -0
  15. data/test/css/grid/responsive.css +2 -0
  16. data/test/css/sprites/layout.css +2 -2
  17. data/test/css/sprites/position.css +4 -4
  18. data/test/css/sprites/repeat.css +2 -2
  19. data/test/css/sprites/resolution.css +2 -2
  20. data/test/css/sprites/retina.css +2 -2
  21. data/test/css/sprites/simple.css +1 -1
  22. data/test/css/sprites/spacing.css +2 -2
  23. data/test/html/grid/fluid.html +105 -0
  24. data/test/html/grid/responsive.html +63 -0
  25. data/test/scss/grid/layout/fluid.scss +41 -0
  26. data/test/scss/grid/layout/responsive.scss +100 -0
  27. metadata +10 -5
  28. data/test/html/grid/layout-1.html +0 -74
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 150e5ad3b59fb4f46ae274647edc755e8e69bafa
4
- data.tar.gz: 5b9411e323d5f38f110be02cd32cc8372c59c538
3
+ metadata.gz: bf66ced2ef96ce7a564935a3ebad6f4270378cbb
4
+ data.tar.gz: a352feb1613a56e2ac6cb03ac8f6c9c8f025a0a9
5
5
  SHA512:
6
- metadata.gz: b0bd3eb1dd5e750585513adbc7d265fcaf336c9fead365cb43b99ea683fd8d276391ee363e8092494a8ab9e53a9b2671a5ee5318dae094aabb69d5402b1472b3
7
- data.tar.gz: 06e0a26007226fdf805c87c48bed85a2e7f2bc11bc8da53aa7b91b52f0dcdc9b0d4991b9f167a1a95ff6c8879116d6078911a2259cba4eaa5f4d882c0f7c5b08
6
+ metadata.gz: bd0c5a9b126f17c6040793b8751314d2fe2a4d31f3c093274147bd493755ef97da2bad58125fdcf49e54eef92564935fc531cee34c2d94387d64436827182d30
7
+ data.tar.gz: 16522622fe31ebc16935aeb9d91c39681917bbaccfa932f3cca73f60107b4b78a8510870bfc9e598f03887a8548a6ae511319509c30180b6b4bb7f2d9efb0454
data/README.md CHANGED
@@ -1,12 +1,24 @@
1
- Ezy: The developer's toolbox for responsive websites
2
- ====================================================
1
+ Ezy: Responsive website toolbox
2
+ ===============================
3
3
 
4
- My attempt to create a collection of simple-to-use grid helpers and other tools with SCSS and Ruby
4
+ Ezy is a SCSS framwork for building responsive websites. It's targeting experienced frontend developers who know the principles of responsive design and development.
5
+
6
+ Ezy so far contains:
7
+
8
+ * Grid framework
9
+ * Media query helpers
10
+ * Sprite helpers
11
+
12
+ View all documentation here: [raahede.github.io/ezy](http://raahede.github.io/ezy/)
5
13
 
6
14
  Installing Ezy
7
15
  --------------
8
16
 
9
- #### 1) Install the gem (This is an alpha release!)
17
+ #### 1) Install the gem
18
+
19
+ `gem install ezy`
20
+
21
+ Or install the latest alpha release:
10
22
 
11
23
  `gem install ezy --pre`
12
24
 
@@ -32,78 +44,19 @@ Import sprites only:
32
44
 
33
45
  `@import "ezy/sprites";`
34
46
 
35
- Using Ezy
36
- ---------
37
-
38
- ### Sprites
39
-
40
- #### 1) Create sprite
41
-
42
- Simple use without retina:
43
-
44
- @include make-sprite(
45
- $name: "icons", // (required) your name to use when calling sprites
46
- $folder: "icon-images" // (required) folder path relative to image folder
47
- );
48
-
49
- Simple use with retina:
50
-
51
- @include make-sprite(
52
- $name: "icons", // (required) your name to use when calling sprites
53
- $folder: "icon-images", // (required) folder path relative to image folder
54
- $folder-retina: "icon-images@2x" // (optional) folder path relative to image folder
55
- );
56
-
57
- Advanced use:
58
-
59
- @include make-sprite(
60
- $name: "icons", // (required) your name to use when calling sprites
61
- $folder: "icon-images", // (required) folder path relative to image folder
62
- $folder-retina: "icon-images@2x", // (optional) folder path relative to image folder
63
- $spacing: 20px, // (optional) [default: 0px] spacing between images in compiled sprite
64
- $layout: vertical, // (optional) [default: vertical] vertical, horizontal, diagonal
65
- $position: 0%, // (optional) [default: 0%] alignment of images in the sprite
66
- $spacing-retina: 40px, // (optional) [default: $spacing x 2]
67
- $layout-retina: diagonal, // (optional) [default: $layout]
68
- $position-retina: 100% // (optional) [default: $position]
69
- );
70
-
71
- #### 2) Use sprite
72
-
73
- Simple use: (if a sprite has a retina version, it uses retina as a default)
74
-
75
- .icon-git-fork {
76
- @include background-sprite( "icons", "git-fork" ); // using image git-fork.png from images/icon-images/
77
- }
78
-
79
- Simple use, force no retina:
80
-
81
- .icon-git-fork {
82
- @include background-sprite( "icons", "git-fork", $use-retina: false );
83
- }
84
-
85
- Advanced use:
86
-
87
- .icon-git-fork {
88
- @include background-sprite(
89
- $name: "icons", // (required) sprite name
90
- $image: "git-fork", // (required) image to use
91
- $offset-x: 10px, // (optional) [default: 0] background offset x
92
- $offset-y: 20px, // (optional) [default: 0] background offset y
93
- $use-retina: true // (optional) [default: true] wether to use retina on hi-res screens
94
- );
95
- }
96
47
 
97
48
  Building and testing local gem
98
49
  ------------------------------
99
50
 
51
+ If you've cloned my project and want to test your code with a local gem.
52
+
53
+ #### Switch to project folder ###
54
+ `cd [folder path]`
55
+
100
56
  #### Build gem ###
101
57
  `gem build ezy.gemspec`
102
58
 
103
59
  #### Install local gem ###
104
60
  `gem install --local ezy-[build version].gem`
105
61
 
106
- #### Open installed gem location (Mac) ###
107
- `open /Users/[username]/.rvm/gems/`
108
- or
109
- `open /Library/Ruby/Gems/[version]/gems/`
62
+
data/VERSION CHANGED
@@ -1 +1 @@
1
- 0.2.6.alpha
1
+ 0.2.7.alpha
data/ezy.gemspec CHANGED
@@ -2,8 +2,8 @@
2
2
 
3
3
  Gem::Specification.new do |s|
4
4
  # Release Specific Information
5
- s.version = "0.2.6.alpha"
6
- s.date = "2013-12-03"
5
+ s.version = "0.2.7.alpha"
6
+ s.date = "2013-12-11"
7
7
 
8
8
  # Gem Details
9
9
  s.name = "ezy"
@@ -11,7 +11,7 @@ Gem::Specification.new do |s|
11
11
  s.summary = "The developer's toolbox for responsive websites"
12
12
  s.description = "A collection of SCSS tools for creating responsive websites. Includes a simple but powerful grid framework, media query helpers and sprite helpers."
13
13
  s.email = "frejraahede@gmail.com"
14
- s.homepage = "http://github.com/raahede/"
14
+ s.homepage = "http://raahede.github.io/ezy/"
15
15
  s.license = "MIT"
16
16
 
17
17
  # Gem Files
data/sass/ezy/_functions.scss CHANGED
@@ -8,4 +8,4 @@
8
8
 
9
9
  @function percentage-round( $value ) {
10
10
  @return floor( percentage( $value ) * 100 ) / 100;
11
- }
11
+ }
data/sass/ezy/_grid.scss CHANGED
@@ -7,12 +7,12 @@
7
7
  // ---------------------------------------------------------------------------
8
8
  // Grid defaults: can be overridden
9
9
 
10
- $column-width : 4em !default;
11
- $gutter-width : 1em !default;
12
- $gutter-property : "margin" !default;
13
- $total-columns : 12 !default;
14
- $is-fluid : true !default;
15
- $grid-padding : 0 !default;
10
+ $column-width : 60px !default;
11
+ $gutter-width : 20px !default;
12
+ $gutter-property : "margin" !default;
13
+ $total-columns : 12 !default;
14
+ $is-fluid : true !default;
15
+ $grid-padding : 0 !default;
16
16
 
17
17
  // ---------------------------------------------------------------------------
18
18
  // Variables used in grid context
@@ -58,6 +58,10 @@ $init-gutter-property: $gutter-property;
58
58
  ) {
59
59
  @if $is-fluid {
60
60
  max-width: layout-width( $context );
61
+ @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
62
+ /* Forcing static grid on IE6 and IE7 */
63
+ *width: layout-width( $context );
64
+ }
61
65
  } @else {
62
66
  width: layout-width( $context );
63
67
  }
data/sass/ezy/_media.scss CHANGED
@@ -33,6 +33,11 @@
33
33
  $breakpoint,
34
34
  $legacy-support: false
35
35
  ) {
36
+
37
+ // Setting variable for reference
38
+ // in the content of the mixin call
39
+ $at-breakpoint: true;
40
+
36
41
  @media #{ nth( $breakpoint, 1 ) } {
37
42
  @content;
38
43
  }
@@ -42,6 +47,9 @@
42
47
  @content;
43
48
  }
44
49
  }
50
+
51
+ // Reset reference
52
+ $at-breakpoint: false;
45
53
  }
46
54
 
47
55
 
data/sass/ezy/_settings.scss CHANGED
@@ -16,3 +16,8 @@ $legacy-support-for-ie8 : $legacy-support-for-ie !default;
16
16
  // Selector used for legacy support in media queries
17
17
 
18
18
  $legacy-selector: ".no-media-queries" !default;
19
+
20
+ // ---------------------------------------------------------------------------
21
+ // Setting reference value for $at-breakpoint
22
+
23
+ $at-breakpoint: false !default;
data/sass/ezy/grid/_helpers.scss CHANGED
@@ -28,8 +28,8 @@
28
28
  // @return : Width in the same unit as $column-width, $gutter-width and $grid-padding
29
29
 
30
30
  @function grid-width(
31
- $columns,
32
- $grid-padding: $grid-padding
31
+ $columns : $total-columns,
32
+ $grid-padding : $grid-padding
33
33
  ) {
34
34
  @if type-of( $grid-padding ) == "list" {
35
35
  // If grid padding is set as 2 values (in case left
data/test/css/grid/elastic.css CHANGED
@@ -34,6 +34,8 @@
34
34
 
35
35
  .page {
36
36
  max-width: 70em;
37
+ /* Forcing static grid on IE6 and IE7 */
38
+ *width: 70em;
37
39
  padding-left: 0;
38
40
  padding-right: 0;
39
41
  font-size: 14px;
data/test/css/grid/fluid.css CHANGED
@@ -34,6 +34,8 @@
34
34
 
35
35
  .page {
36
36
  max-width: 1050px;
37
+ /* Forcing static grid on IE6 and IE7 */
38
+ *width: 1050px;
37
39
  padding-left: 0;
38
40
  padding-right: 0;
39
41
  }
data/test/css/grid/layout/fluid.css ADDED
@@ -0,0 +1,121 @@
1
+ /* ------------------------------------------------- *
2
+ * Ezy Grid by Frej Raahede Nielsen
3
+ * http://github.com/raahede/ezy
4
+ * ------------------------------------------------- *
5
+ */
6
+ /* ------------------------------------------------- *
7
+ * Micro Clearfix
8
+ * http://nicolasgallagher.com/micro-clearfix-hack/
9
+ */
10
+ .page:before, .grid:before,
11
+ .page:after,
12
+ .grid:after {
13
+ content: " ";
14
+ display: table;
15
+ }
16
+
17
+ .page:after, .grid:after {
18
+ clear: both;
19
+ }
20
+
21
+ .page, .grid {
22
+ /**
23
+ * For IE 6/7 only
24
+ * Include this rule to trigger hasLayout and contain floats.
25
+ */
26
+ *zoom: 1;
27
+ }
28
+
29
+ /* --- End clearfix --- */
30
+ .page {
31
+ margin-left: auto;
32
+ margin-right: auto;
33
+ }
34
+
35
+ .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12 {
36
+ /* Grid column base at a 12-column context */
37
+ margin-left: 1.04%;
38
+ margin-right: 1.04%;
39
+ float: left;
40
+ /* Fixing double margin on IE6 */
41
+ _display: inline;
42
+ }
43
+
44
+ .page {
45
+ max-width: 940px;
46
+ /* Forcing static grid on IE6 and IE7 */
47
+ *width: 940px;
48
+ padding-left: 10px;
49
+ padding-right: 10px;
50
+ }
51
+
52
+ .grid {
53
+ margin-left: -1.06%;
54
+ margin-right: -1.06%;
55
+ }
56
+
57
+ .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12 {
58
+ background: hotpink;
59
+ text-align: center;
60
+ zoom: 1;
61
+ }
62
+
63
+ .span-1 {
64
+ /* Spanning 1 of 12 columns */
65
+ width: 6.25%;
66
+ }
67
+
68
+ .span-2 {
69
+ /* Spanning 2 of 12 columns */
70
+ width: 14.58%;
71
+ }
72
+
73
+ .span-3 {
74
+ /* Spanning 3 of 12 columns */
75
+ width: 22.91%;
76
+ }
77
+
78
+ .span-4 {
79
+ /* Spanning 4 of 12 columns */
80
+ width: 31.25%;
81
+ }
82
+
83
+ .span-5 {
84
+ /* Spanning 5 of 12 columns */
85
+ width: 39.58%;
86
+ }
87
+
88
+ .span-6 {
89
+ /* Spanning 6 of 12 columns */
90
+ width: 47.91%;
91
+ }
92
+
93
+ .span-7 {
94
+ /* Spanning 7 of 12 columns */
95
+ width: 56.25%;
96
+ }
97
+
98
+ .span-8 {
99
+ /* Spanning 8 of 12 columns */
100
+ width: 64.58%;
101
+ }
102
+
103
+ .span-9 {
104
+ /* Spanning 9 of 12 columns */
105
+ width: 72.91%;
106
+ }
107
+
108
+ .span-10 {
109
+ /* Spanning 10 of 12 columns */
110
+ width: 81.25%;
111
+ }
112
+
113
+ .span-11 {
114
+ /* Spanning 11 of 12 columns */
115
+ width: 89.58%;
116
+ }
117
+
118
+ .span-12 {
119
+ /* Spanning 12 of 12 columns */
120
+ width: 97.91%;
121
+ }
data/test/css/grid/layout/responsive.css ADDED
@@ -0,0 +1,182 @@
1
+ /* ------------------------------------------------- *
2
+ * Ezy Grid by Frej Raahede Nielsen
3
+ * http://github.com/raahede/ezy
4
+ * ------------------------------------------------- *
5
+ */
6
+ /* ------------------------------------------------- *
7
+ * Micro Clearfix
8
+ * http://nicolasgallagher.com/micro-clearfix-hack/
9
+ */
10
+ .page:before, .grid:before,
11
+ .page:after,
12
+ .grid:after {
13
+ content: " ";
14
+ display: table;
15
+ }
16
+
17
+ .page:after, .grid:after {
18
+ clear: both;
19
+ }
20
+
21
+ .page, .grid {
22
+ /**
23
+ * For IE 6/7 only
24
+ * Include this rule to trigger hasLayout and contain floats.
25
+ */
26
+ *zoom: 1;
27
+ }
28
+
29
+ /* --- End clearfix --- */
30
+ .page {
31
+ margin-left: auto;
32
+ margin-right: auto;
33
+ }
34
+
35
+ .small, .medium, .large {
36
+ /* Grid column base at a 4-column context */
37
+ margin-left: 3.125%;
38
+ margin-right: 3.125%;
39
+ float: left;
40
+ /* Fixing double margin on IE6 */
41
+ _display: inline;
42
+ }
43
+
44
+ .page {
45
+ max-width: 300px;
46
+ /* Forcing static grid on IE6 and IE7 */
47
+ *width: 300px;
48
+ padding-left: 10px;
49
+ padding-right: 10px;
50
+ }
51
+ @media (min-width: 321px) {
52
+ .page {
53
+ max-width: 620px;
54
+ /* Forcing static grid on IE6 and IE7 */
55
+ *width: 620px;
56
+ }
57
+ }
58
+ @media (min-width: 641px) {
59
+ .page {
60
+ max-width: 940px;
61
+ /* Forcing static grid on IE6 and IE7 */
62
+ *width: 940px;
63
+ }
64
+ }
65
+ .no-media-queries .page {
66
+ /* Fallback for browsers not supporting media queries */
67
+ max-width: 940px;
68
+ /* Forcing static grid on IE6 and IE7 */
69
+ *width: 940px;
70
+ }
71
+
72
+ .grid {
73
+ margin-left: -3.33%;
74
+ margin-right: -3.33%;
75
+ }
76
+ @media (min-width: 321px) {
77
+ .grid {
78
+ margin-left: -1.61%;
79
+ margin-right: -1.61%;
80
+ }
81
+ }
82
+ @media (min-width: 641px) {
83
+ .grid {
84
+ margin-left: -1.06%;
85
+ margin-right: -1.06%;
86
+ }
87
+ }
88
+ .no-media-queries .grid {
89
+ /* Fallback for browsers not supporting media queries */
90
+ margin-left: -1.06%;
91
+ margin-right: -1.06%;
92
+ }
93
+
94
+ .small, .medium, .large {
95
+ background: hotpink;
96
+ text-align: center;
97
+ zoom: 1;
98
+ }
99
+
100
+ .small {
101
+ /* Spanning 2 of 4 columns */
102
+ width: 43.75%;
103
+ }
104
+ @media (min-width: 321px) {
105
+ .small {
106
+ /* Spanning 2 of 8 columns */
107
+ width: 21.87%;
108
+ margin-left: 1.56%;
109
+ margin-right: 1.56%;
110
+ }
111
+ }
112
+ @media (min-width: 641px) {
113
+ .small {
114
+ /* Spanning 3 of 12 columns */
115
+ width: 22.91%;
116
+ margin-left: 1.04%;
117
+ margin-right: 1.04%;
118
+ }
119
+ }
120
+ .no-media-queries .small {
121
+ /* Fallback for browsers not supporting media queries */
122
+ /* Spanning 3 of 12 columns */
123
+ width: 22.91%;
124
+ margin-left: 1.04%;
125
+ margin-right: 1.04%;
126
+ }
127
+
128
+ .medium {
129
+ /* Spanning 4 of 4 columns */
130
+ width: 93.75%;
131
+ }
132
+ @media (min-width: 321px) {
133
+ .medium {
134
+ /* Spanning 4 of 8 columns */
135
+ width: 46.87%;
136
+ margin-left: 1.56%;
137
+ margin-right: 1.56%;
138
+ }
139
+ }
140
+ @media (min-width: 641px) {
141
+ .medium {
142
+ /* Spanning 6 of 12 columns */
143
+ width: 47.91%;
144
+ margin-left: 1.04%;
145
+ margin-right: 1.04%;
146
+ }
147
+ }
148
+ .no-media-queries .medium {
149
+ /* Fallback for browsers not supporting media queries */
150
+ /* Spanning 6 of 12 columns */
151
+ width: 47.91%;
152
+ margin-left: 1.04%;
153
+ margin-right: 1.04%;
154
+ }
155
+
156
+ .large {
157
+ /* Spanning 4 of 4 columns */
158
+ width: 93.75%;
159
+ }
160
+ @media (min-width: 321px) {
161
+ .large {
162
+ /* Spanning 8 of 8 columns */
163
+ width: 96.87%;
164
+ margin-left: 1.56%;
165
+ margin-right: 1.56%;
166
+ }
167
+ }
168
+ @media (min-width: 641px) {
169
+ .large {
170
+ /* Spanning 12 of 12 columns */
171
+ width: 97.91%;
172
+ margin-left: 1.04%;
173
+ margin-right: 1.04%;
174
+ }
175
+ }
176
+ .no-media-queries .large {
177
+ /* Fallback for browsers not supporting media queries */
178
+ /* Spanning 12 of 12 columns */
179
+ width: 97.91%;
180
+ margin-left: 1.04%;
181
+ margin-right: 1.04%;
182
+ }
data/test/css/grid/layout.css CHANGED
@@ -43,12 +43,16 @@
43
43
 
44
44
  .page {
45
45
  max-width: 330px;
46
+ /* Forcing static grid on IE6 and IE7 */
47
+ *width: 330px;
46
48
  padding-left: 1em;
47
49
  padding-right: 1em;
48
50
  }
49
51
  @media (min-width: 990px) {
50
52
  .page {
51
53
  max-width: 690px;
54
+ /* Forcing static grid on IE6 and IE7 */
55
+ *width: 690px;
52
56
  padding-left: 50px;
53
57
  padding-right: 100px;
54
58
  }
@@ -56,6 +60,8 @@
56
60
  @media (min-width: 1250px) {
57
61
  .page {
58
62
  max-width: 1050px;
63
+ /* Forcing static grid on IE6 and IE7 */
64
+ *width: 1050px;
59
65
  padding-left: 100px;
60
66
  padding-right: 100px;
61
67
  }
@@ -63,6 +69,8 @@
63
69
  .no-media-queries .page {
64
70
  /* Fallback for browsers not supporting media queries */
65
71
  max-width: 1050px;
72
+ /* Forcing static grid on IE6 and IE7 */
73
+ *width: 1050px;
66
74
  padding-left: 100px;
67
75
  padding-right: 100px;
68
76
  }
data/test/css/grid/responsive.css CHANGED
@@ -43,6 +43,8 @@
43
43
 
44
44
  .page {
45
45
  max-width: 1050px;
46
+ /* Forcing static grid on IE6 and IE7 */
47
+ *width: 1050px;
46
48
  padding-left: 0;
47
49
  padding-right: 0;
48
50
  }
data/test/css/sprites/layout.css CHANGED
@@ -1,12 +1,12 @@
1
1
  .classic {
2
- background-image: url('../../img/test-layout.png?22091386277782');
2
+ background-image: url('../../img/test-layout.png?17551386780919');
3
3
  background-repeat: no-repeat;
4
4
  }
5
5
 
6
6
  @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
7
7
  .classic {
8
8
  /* Retina sprite */
9
- background-image: url('../../img/test-layout@2x.png?22091386277782');
9
+ background-image: url('../../img/test-layout@2x.png?17551386780919');
10
10
  background-size: 718px auto;
11
11
  }
12
12
  }
data/test/css/sprites/position.css CHANGED
@@ -3,14 +3,14 @@
3
3
  * Compiled 2x sprite has all images aligned to the right
4
4
  */
5
5
  .vertical {
6
- background-image: url('../../img/test-position.png?22091386277782');
6
+ background-image: url('../../img/test-position.png?17551386780922');
7
7
  background-repeat: no-repeat;
8
8
  }
9
9
 
10
10
  @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
11
11
  .vertical {
12
12
  /* Retina sprite */
13
- background-image: url('../../img/test-position@2x.png?22091386277782');
13
+ background-image: url('../../img/test-position@2x.png?17551386780922');
14
14
  background-size: 281px auto;
15
15
  }
16
16
  }
@@ -20,14 +20,14 @@
20
20
  * Compiled 2x sprite has all images aligned to the bottom
21
21
  */
22
22
  .horizontal {
23
- background-image: url('../../img/test-position-alt.png?22091386277782');
23
+ background-image: url('../../img/test-position-alt.png?17551386780922');
24
24
  background-repeat: no-repeat;
25
25
  }
26
26
 
27
27
  @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
28
28
  .horizontal {
29
29
  /* Retina sprite */
30
- background-image: url('../../img/test-position-alt@2x.png?22091386277782');
30
+ background-image: url('../../img/test-position-alt@2x.png?17551386780922');
31
31
  background-size: 421px auto;
32
32
  }
33
33
  }
data/test/css/sprites/repeat.css CHANGED
@@ -1,12 +1,12 @@
1
1
  .meassure-1, .meassure-2, .meassure-3 {
2
- background-image: url('../../img/test-repeat.png?22091386277782');
2
+ background-image: url('../../img/test-repeat.png?17551386780925');
3
3
  background-repeat: repeat-x;
4
4
  }
5
5
 
6
6
  @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
7
7
  .meassure-1, .meassure-2, .meassure-3 {
8
8
  /* Retina sprite */
9
- background-image: url('../../img/test-repeat@2x.png?22091386277782');
9
+ background-image: url('../../img/test-repeat@2x.png?17551386780925');
10
10
  background-size: 378px auto;
11
11
  background-repeat: no-repeat;
12
12
  }
data/test/css/sprites/resolution.css CHANGED
@@ -2,14 +2,14 @@
2
2
  * Min device pixel ratio changed to 1.7
3
3
  */
4
4
  .classic {
5
- background-image: url('../../img/test-retina.png?22091386277782');
5
+ background-image: url('../../img/test-retina.png?17551386780926');
6
6
  background-repeat: no-repeat;
7
7
  }
8
8
 
9
9
  @media only screen and (-webkit-min-device-pixel-ratio: 1.7), only screen and (min--moz-device-pixel-ratio: 1.7), only screen and (-moz-min-device-pixel-ratio: 1.7), only screen and (-ms-min-device-pixel-ratio: 1.7), only screen and (-o-min-device-pixel-ratio: 1.7 / 1), only screen and (min-device-pixel-ratio: 1.7), only screen and (min-resolution: 163.2dpi), only screen and (min-resolution: 1.7dppx) {
10
10
  .classic {
11
11
  /* Retina sprite */
12
- background-image: url('../../img/test-retina@2x.png?22091386277782');
12
+ background-image: url('../../img/test-retina@2x.png?17551386780926');
13
13
  background-size: 152px auto;
14
14
  }
15
15
  }
data/test/css/sprites/retina.css CHANGED
@@ -1,12 +1,12 @@
1
1
  .classic, .indy, .alien {
2
- background-image: url('../../img/test-retina.png?22091386277782');
2
+ background-image: url('../../img/test-retina.png?17551386780928');
3
3
  background-repeat: no-repeat;
4
4
  }
5
5
 
6
6
  @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
7
7
  .classic, .indy {
8
8
  /* Retina sprite */
9
- background-image: url('../../img/test-retina@2x.png?22091386277782');
9
+ background-image: url('../../img/test-retina@2x.png?17551386780928');
10
10
  background-size: 152px auto;
11
11
  }
12
12
  }
data/test/css/sprites/simple.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .classic, .indy {
2
- background-image: url('../../img/test-simple.png?22091386277783');
2
+ background-image: url('../../img/test-simple.png?17551386780929');
3
3
  background-repeat: no-repeat;
4
4
  }
5
5
 
data/test/css/sprites/spacing.css CHANGED
@@ -1,12 +1,12 @@
1
1
  .classic {
2
- background-image: url('../../img/test-spacing.png?22091386277783');
2
+ background-image: url('../../img/test-spacing.png?17551386780933');
3
3
  background-repeat: no-repeat;
4
4
  }
5
5
 
6
6
  @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
7
7
  .classic {
8
8
  /* Retina sprite */
9
- background-image: url('../../img/test-spacing@2x.png?22091386277783');
9
+ background-image: url('../../img/test-spacing@2x.png?17551386780933');
10
10
  background-size: 159px auto;
11
11
  }
12
12
  }
data/test/html/grid/fluid.html ADDED
@@ -0,0 +1,105 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8">
5
+
6
+ <title>Sprite: repeat</title>
7
+
8
+ <meta name="description" content="Ezy Grid Demo">
9
+ <meta name="viewport" content="width=device-width">
10
+
11
+ <link href="../../css/grid/layout/fluid.css" rel="stylesheet">
12
+
13
+ </head>
14
+ <body>
15
+ <div class="page">
16
+ <div class="grid">
17
+ <div class="span-1">
18
+ <p>1</p>
19
+ </div>
20
+ <div class="span-1">
21
+ <p>1</p>
22
+ </div>
23
+ <div class="span-1">
24
+ <p>1</p>
25
+ </div>
26
+ <div class="span-1">
27
+ <p>1</p>
28
+ </div>
29
+ <div class="span-1">
30
+ <p>1</p>
31
+ </div>
32
+ <div class="span-1">
33
+ <p>1</p>
34
+ </div>
35
+ <div class="span-1">
36
+ <p>1</p>
37
+ </div>
38
+ <div class="span-1">
39
+ <p>1</p>
40
+ </div>
41
+ <div class="span-1">
42
+ <p>1</p>
43
+ </div>
44
+ <div class="span-1">
45
+ <p>1</p>
46
+ </div>
47
+ <div class="span-1">
48
+ <p>1</p>
49
+ </div>
50
+ <div class="span-1">
51
+ <p>1</p>
52
+ </div>
53
+
54
+ <div class="span-2">
55
+ <p>2</p>
56
+ </div>
57
+ <div class="span-2">
58
+ <p>2</p>
59
+ </div>
60
+ <div class="span-2">
61
+ <p>2</p>
62
+ </div>
63
+ <div class="span-2">
64
+ <p>2</p>
65
+ </div>
66
+ <div class="span-2">
67
+ <p>2</p>
68
+ </div>
69
+ <div class="span-2">
70
+ <p>2</p>
71
+ </div>
72
+
73
+ <div class="span-3">
74
+ <p>3</p>
75
+ </div>
76
+ <div class="span-3">
77
+ <p>3</p>
78
+ </div>
79
+ <div class="span-3">
80
+ <p>3</p>
81
+ </div>
82
+ <div class="span-3">
83
+ <p>3</p>
84
+ </div>
85
+
86
+ <div class="span-4">
87
+ <p>4</p>
88
+ </div>
89
+ <div class="span-4">
90
+ <p>4</p>
91
+ </div>
92
+ <div class="span-4">
93
+ <p>4</p>
94
+ </div>
95
+
96
+ <div class="span-6">
97
+ <p>6</p>
98
+ </div>
99
+ <div class="span-6">
100
+ <p>6</p>
101
+ </div>
102
+ </div>
103
+ </div>
104
+ </body>
105
+ </html>
data/test/html/grid/responsive.html ADDED
@@ -0,0 +1,63 @@
1
+ <!doctype html>
2
+ <!--[if lt IE 9]> <html class="no-media-queries"> <![endif]-->
3
+ <!--[if gte IE 9]><!--> <html> <!--<![endif]-->
4
+ <head>
5
+ <meta charset="utf-8">
6
+
7
+ <title>Sprite: repeat</title>
8
+
9
+ <meta name="description" content="Ezy Grid Demo">
10
+ <meta name="viewport" content="width=device-width">
11
+
12
+ <link href="../../css/grid/layout/responsive.css" rel="stylesheet">
13
+
14
+ </head>
15
+ <body>
16
+ <div class="page">
17
+ <div class="grid">
18
+ <div class="small">
19
+ <p>Small</p>
20
+ </div>
21
+ <div class="small">
22
+ <p>Small</p>
23
+ </div>
24
+ <div class="small">
25
+ <p>Small</p>
26
+ </div>
27
+ <div class="small">
28
+ <p>Small</p>
29
+ </div>
30
+ <div class="small">
31
+ <p>Small</p>
32
+ </div>
33
+ <div class="small">
34
+ <p>Small</p>
35
+ </div>
36
+ <div class="medium">
37
+ <p>Medium</p>
38
+ </div>
39
+ <div class="large">
40
+ <p>Large</p>
41
+ </div>
42
+ <div class="medium">
43
+ <p>Medium</p>
44
+ </div>
45
+ <div class="small">
46
+ <p>Small</p>
47
+ </div>
48
+ <div class="small">
49
+ <p>Small</p>
50
+ </div>
51
+ <div class="medium">
52
+ <p>Medium</p>
53
+ </div>
54
+ <div class="medium">
55
+ <p>Medium</p>
56
+ </div>
57
+ <div class="large">
58
+ <p>Large</p>
59
+ </div>
60
+ </div>
61
+ </div>
62
+ </body>
63
+ </html>
data/test/scss/grid/layout/fluid.scss ADDED
@@ -0,0 +1,41 @@
1
+ // ------------------------------------
2
+ // Imports
3
+
4
+ @import "../../../../sass/ezy/grid";
5
+
6
+ // ------------------------------------
7
+ // Grid settings
8
+
9
+ $column-width : 60px;
10
+ $gutter-width : 20px;
11
+ $grid-padding : 10px;
12
+ $total-columns : 12;
13
+
14
+ // ------------------------------------
15
+ // Initializing grid for cleaner output
16
+
17
+ @include grid-init();
18
+
19
+ // ------------------------------------
20
+ // Grid layouts
21
+
22
+ .page {
23
+ @include master;
24
+ }
25
+
26
+ .grid {
27
+ @include container;
28
+ }
29
+
30
+ %column {
31
+ background: hotpink;
32
+ text-align: center;
33
+ zoom: 1;
34
+ }
35
+
36
+ @for $i from 1 through $total-columns {
37
+ .span-#{$i} {
38
+ @include span-columns( $i );
39
+ @extend %column;
40
+ }
41
+ }
data/test/scss/grid/layout/responsive.scss ADDED
@@ -0,0 +1,100 @@
1
+ // ------------------------------------
2
+ // Imports
3
+
4
+ @import "../../../../sass/ezy/grid";
5
+
6
+ // ------------------------------------
7
+ // Number of columns on different screen sizes
8
+
9
+ $columns-mobile : 4;
10
+ $columns-tablet : 8;
11
+ $columns-desktop : 12;
12
+
13
+ // ------------------------------------
14
+ // Grid settings
15
+
16
+ $column-width : 60px;
17
+ $gutter-width : 20px;
18
+ $grid-padding : 10px;
19
+ $total-columns : $columns-mobile; // mobile first
20
+ $is-fluid : true;
21
+
22
+ // ------------------------------------
23
+ // Breakpoint settings
24
+
25
+ // Selector for browsers not supporting media queries
26
+ // (IE8 and down)
27
+ $legacy-selector: ".no-media-queries";
28
+
29
+ // ------------------------------------
30
+ // Defining media query breakpoints
31
+
32
+ $breakpoint-tablet : set-breakpoint( $min: grid-width( $columns-mobile ) + 1 );
33
+ $breakpoint-desktop : set-breakpoint( $min: grid-width( $columns-tablet ) + 1, $legacy-support: true ); // Default for old IE
34
+
35
+ // ------------------------------------
36
+ // Defining grid layouts
37
+
38
+ $mobile : set-layout( $total-columns, $grid-padding ); // mobile first
39
+ $tablet : set-layout( $columns-tablet, $at-breakpoint: $breakpoint-tablet );
40
+ $desktop : set-layout( $columns-desktop, $at-breakpoint: $breakpoint-desktop );
41
+
42
+ // ------------------------------------
43
+ // Initializing grid for cleaner output
44
+
45
+ @include grid-init();
46
+
47
+ // ------------------------------------
48
+ // Grid layouts
49
+
50
+ .page {
51
+ @include each-layout {
52
+ @include master;
53
+ }
54
+ }
55
+
56
+ .grid {
57
+ @include each-layout {
58
+ @include container;
59
+ }
60
+ }
61
+
62
+ %column {
63
+ background: hotpink;
64
+ text-align: center;
65
+ zoom: 1;
66
+ }
67
+
68
+ .small {
69
+ @extend %column;
70
+ @include span-columns( 2 ); // 2 of 4 columns on mobile
71
+ @include at-layout( $tablet ) {
72
+ @include span-columns( 2 ); // 2 of 8 columns on tablet
73
+ }
74
+ @include at-layout( $desktop ) {
75
+ @include span-columns( 3 ); // 3 of 12 columns on desktop
76
+ }
77
+ }
78
+
79
+ .medium {
80
+ @extend %column;
81
+ @include span-columns( 4 ); // 4 of 4 columns on mobile
82
+ @include at-layout( $tablet ) {
83
+ @include span-columns( 4 ); // 4 of 8 columns on tablet
84
+ }
85
+ @include at-layout( $desktop ) {
86
+ @include span-columns( 6 ); // 6 of 12 columns on desktop
87
+ }
88
+ }
89
+
90
+ .large {
91
+ @extend %column;
92
+ @include span-columns( 4 ); // 4 of 4 columns on mobile
93
+ @include at-layout( $tablet ) {
94
+ @include span-columns( 8 ); // 8 of 8 columns on tablet
95
+ }
96
+ @include at-layout( $desktop ) {
97
+ @include span-columns( 12 ); // 12 of 12 columns on desktio
98
+ }
99
+ }
100
+
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: ezy
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.2.6.alpha
4
+ version: 0.2.7.alpha
5
5
  platform: ruby
6
6
  authors:
7
7
  - Frej Raahede Nielsen
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2013-12-03 00:00:00.000000000 Z
11
+ date: 2013-12-11 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: compass
@@ -67,6 +67,8 @@ files:
67
67
  - test/css/grid/elastic.css
68
68
  - test/css/grid/fluid.css
69
69
  - test/css/grid/gutter.css
70
+ - test/css/grid/layout/fluid.css
71
+ - test/css/grid/layout/responsive.css
70
72
  - test/css/grid/layout.css
71
73
  - test/css/grid/offset.css
72
74
  - test/css/grid/responsive.css
@@ -83,6 +85,8 @@ files:
83
85
  - test/scss/grid/elastic.scss
84
86
  - test/scss/grid/fluid.scss
85
87
  - test/scss/grid/gutter.scss
88
+ - test/scss/grid/layout/fluid.scss
89
+ - test/scss/grid/layout/responsive.scss
86
90
  - test/scss/grid/layout.scss
87
91
  - test/scss/grid/offset.scss
88
92
  - test/scss/grid/responsive.scss
@@ -96,7 +100,8 @@ files:
96
100
  - test/scss/sprites/simple.scss
97
101
  - test/scss/sprites/size.scss
98
102
  - test/scss/sprites/spacing.scss
99
- - test/html/grid/layout-1.html
103
+ - test/html/grid/fluid.html
104
+ - test/html/grid/responsive.html
100
105
  - test/html/sprites/repeat.html
101
106
  - test/html/sprites/retina.html
102
107
  - test/html/sprites/simple.html
@@ -138,7 +143,7 @@ files:
138
143
  - test/img/test-spacing@2x/alien.png
139
144
  - test/img/test-spacing@2x/classic.png
140
145
  - test/img/test-spacing@2x/indy.png
141
- homepage: http://github.com/raahede/
146
+ homepage: http://raahede.github.io/ezy/
142
147
  licenses:
143
148
  - MIT
144
149
  metadata: {}
@@ -158,7 +163,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
158
163
  version: 1.3.1
159
164
  requirements: []
160
165
  rubyforge_project:
161
- rubygems_version: 2.1.11
166
+ rubygems_version: 2.1.10
162
167
  signing_key:
163
168
  specification_version: 4
164
169
  summary: The developer's toolbox for responsive websites
data/test/html/grid/layout-1.html DELETED
@@ -1,74 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8">
5
-
6
- <title>Sprite: repeat</title>
7
-
8
- <meta name="description" content="Ezy Grid Demo">
9
- <meta name="viewport" content="width=device-width">
10
-
11
- <link href="../../css/grid/layout-1.css" rel="stylesheet">
12
-
13
- </head>
14
- <body>
15
- <div class="page">
16
- <div class="grid">
17
- <div class="column pullout">
18
- Test
19
- </div>
20
- <div class="column">
21
- Test
22
- </div>
23
- <div class="column">
24
- Test
25
- </div>
26
- <div class="column offset">
27
- Test
28
- </div>
29
- <div class="column pullout">
30
- Test
31
- </div>
32
- <div class="column">
33
- Test
34
- </div>
35
- <div class="column">
36
- Test
37
- </div>
38
- <div class="column">
39
- Test
40
- </div>
41
- <div class="column">
42
- Test
43
- </div>
44
- <div class="column">
45
- Test
46
- </div>
47
- <div class="column">
48
- Test
49
- </div>
50
- <div class="column">
51
- Test
52
- </div>
53
- <div class="column">
54
- Test
55
- </div>
56
- <div class="column">
57
- Test
58
- </div>
59
- <div class="column">
60
- Test
61
- </div>
62
- <div class="column">
63
- Test
64
- </div>
65
- <div class="column">
66
- Test
67
- </div>
68
- <div class="column">
69
- Test
70
- </div>
71
- </div>
72
- </div>
73
- </body>
74
- </html>