ezy 0.2.0 → 0.2.6.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 (41) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +101 -6
  3. data/VERSION +1 -1
  4. data/ezy.gemspec +3 -5
  5. data/sass/_ezy.scss +3 -3
  6. data/sass/ezy/_clearfix.scss +25 -0
  7. data/sass/ezy/_functions.scss +11 -0
  8. data/sass/ezy/_grid.scss +250 -0
  9. data/sass/ezy/_media.scss +47 -0
  10. data/sass/ezy/_settings.scss +18 -0
  11. data/sass/ezy/_sprites.scss +29 -82
  12. data/sass/ezy/grid/_debug.scss +22 -0
  13. data/sass/ezy/grid/_helpers.scss +249 -0
  14. data/sass/ezy/grid/_layout.scss +78 -0
  15. data/test/css/grid/elastic.css +13 -4
  16. data/test/css/grid/fluid.css +26 -10
  17. data/test/css/grid/gutter.css +42 -35
  18. data/test/css/grid/layout.css +118 -0
  19. data/test/css/grid/offset.css +51 -0
  20. data/test/css/grid/responsive.css +22 -12
  21. data/test/css/grid/static.css +19 -3
  22. data/test/css/sprites/layout.css +2 -2
  23. data/test/css/sprites/position.css +4 -4
  24. data/test/css/sprites/repeat.css +2 -2
  25. data/test/css/sprites/resolution.css +2 -2
  26. data/test/css/sprites/retina.css +2 -2
  27. data/test/css/sprites/simple.css +1 -1
  28. data/test/css/sprites/spacing.css +2 -2
  29. data/test/html/grid/layout-1.html +74 -0
  30. data/test/html/sprites/repeat.html +1 -1
  31. data/test/html/sprites/retina.html +1 -1
  32. data/test/html/sprites/simple.html +1 -1
  33. data/test/scss/grid/elastic.scss +1 -2
  34. data/test/scss/grid/gutter.scss +5 -5
  35. data/test/scss/grid/layout.scss +49 -0
  36. data/test/scss/grid/offset.scss +29 -0
  37. data/test/scss/grid/responsive.scss +2 -2
  38. metadata +17 -7
  39. data/test/css/sprites/responsive.css +0 -69
  40. data/test/html/sprites/responsive.html +0 -19
  41. data/test/scss/sprites/responsive.scss +0 -52
@@ -0,0 +1,74 @@
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>
@@ -5,7 +5,7 @@
5
5
 
6
6
  <title>Sprite: repeat</title>
7
7
 
8
- <meta name="description" content="Ezy Grid Demo">
8
+ <meta name="description" content="Ezy Sprite Demo">
9
9
  <meta name="viewport" content="width=device-width">
10
10
 
11
11
  <link href="../../css/sprites/repeat.css" rel="stylesheet">
@@ -5,7 +5,7 @@
5
5
 
6
6
  <title>Sprite: retina</title>
7
7
 
8
- <meta name="description" content="Ezy Grid Demo">
8
+ <meta name="description" content="Ezy Sprite Demo">
9
9
  <meta name="viewport" content="width=device-width">
10
10
 
11
11
  <link href="../../css/sprites/retina.css" rel="stylesheet">
@@ -5,7 +5,7 @@
5
5
 
6
6
  <title>Sprite: simple</title>
7
7
 
8
- <meta name="description" content="Ezy Grid Demo">
8
+ <meta name="description" content="Ezy Sprite Demo">
9
9
  <meta name="viewport" content="width=device-width">
10
10
 
11
11
  <link href="../../css/sprites/simple.css" rel="stylesheet">
@@ -2,7 +2,6 @@
2
2
  // Imports
3
3
 
4
4
  @import "../../../sass/ezy/grid";
5
- @import "../../../sass/ezy/media";
6
5
 
7
6
  $column-width: 4em;
8
7
  $gutter-width: 2em;
@@ -35,4 +34,4 @@ $breakpoint-large: set-breakpoint( $min: 30em, $legacy-support: true ); // Supp
35
34
 
36
35
  .column {
37
36
  @include span-columns( 4, $context: $total-columns );
38
- }
37
+ }
@@ -40,7 +40,7 @@ $is-fluid: false;
40
40
  * Setting default gutter property to padding
41
41
  */
42
42
 
43
- $default-gutter-property: "padding";
43
+ $gutter-property: "padding";
44
44
 
45
45
  .gutter-default-a-3 {
46
46
  @include span-columns( 1 );
@@ -66,7 +66,7 @@ $default-gutter-property: "padding";
66
66
  * Trying again, using grid-init()
67
67
  * -------------------------------------------------------------------- */
68
68
 
69
- $default-gutter-property: "margin";
69
+ $gutter-property: "margin";
70
70
  @include grid-init();
71
71
 
72
72
  /* -------------------------------------------------------------------- *
@@ -97,7 +97,7 @@ $default-gutter-property: "margin";
97
97
  * Setting default gutter property to padding after grid-init()
98
98
  */
99
99
 
100
- $default-gutter-property: "padding";
100
+ $gutter-property: "padding";
101
101
 
102
102
  .gutter-default-a-7 {
103
103
  @include span-columns( 1 );
@@ -123,7 +123,7 @@ $default-gutter-property: "padding";
123
123
  * Again, now with a fluid grid
124
124
  * -------------------------------------------------------------------- */
125
125
 
126
- $default-gutter-property: "margin";
126
+ $gutter-property: "margin";
127
127
  $is-fluid: true;
128
128
  $total-columns: 6; // resetting column count to create new set of placeholder selectors
129
129
  @include grid-init();
@@ -156,7 +156,7 @@ $total-columns: 6; // resetting column count to create new set of placeholder se
156
156
  * Setting default gutter property to padding after grid-init()
157
157
  */
158
158
 
159
- $default-gutter-property: "padding";
159
+ $gutter-property: "padding";
160
160
 
161
161
  .gutter-default-a-11 {
162
162
  @include span-columns( 3, $total-columns );
@@ -0,0 +1,49 @@
1
+ // ---------------------------------------------------------------------------
2
+ // Imports
3
+
4
+ @import "../../../sass/ezy/grid";
5
+
6
+ $columns-small: 4;
7
+ $columns-medium: 8;
8
+ $columns-large: 12;
9
+
10
+ $grid-padding-small: 1em;
11
+ $grid-padding-medium: 50px 100px;
12
+ $grid-padding-large: 100px;
13
+
14
+ $column-width: 60px;
15
+ $gutter-width: 30px;
16
+ $grid-padding: $grid-padding-small;
17
+ $total-columns: $columns-small;
18
+ @include grid-init();
19
+
20
+ // Defining media query breakpoints
21
+ $breakpoint-medium: set-breakpoint( $min: grid-width( $columns-medium, $grid-padding-medium ) );
22
+ $breakpoint-large: set-breakpoint( $min: grid-width( $columns-large, $grid-padding-large ), $legacy-support: true ); // Support for legacy browsers
23
+
24
+ // Defining layouts
25
+ $layout-small: set-layout( $total-columns, $grid-padding );
26
+ $layout-medium: set-layout( $columns-medium, $grid-padding-medium, $breakpoint-medium );
27
+ $layout-large: set-layout( $columns-large, $grid-padding-large, $breakpoint-large );
28
+
29
+ .page {
30
+ @include each-layout {
31
+ @include master;
32
+ }
33
+ }
34
+
35
+ .grid {
36
+ @include each-layout {
37
+ @include container;
38
+ }
39
+ }
40
+
41
+ .column {
42
+ @include span-columns( 4 );
43
+ @include at-layout( $layout-medium ) {
44
+ @include span-columns( 4 );
45
+ }
46
+ @include at-layout( $layout-large ) {
47
+ @include span-columns( 4 );
48
+ }
49
+ }
@@ -0,0 +1,29 @@
1
+ // ---------------------------------------------------------------------------
2
+ // Imports
3
+
4
+ @import "../../../sass/ezy/grid";
5
+
6
+ $column-width: 60px;
7
+ $gutter-width: 30px;
8
+ $total-columns: 12;
9
+ $is-fluid: false;
10
+
11
+ /* -------------------------------------------------------------------- *
12
+ * Grid columns with offset
13
+ */
14
+
15
+ .span-columns-2 {
16
+ @include span-columns( 2, $context: $total-columns );
17
+ @include offset( 'left', 1 );
18
+ }
19
+
20
+ .span-columns-4 {
21
+ @include span-columns( 4, $context: $total-columns );
22
+ @include offset( 'right', 2 );
23
+ }
24
+
25
+ .span-columns-6 {
26
+ @include span-columns( 6, $context: $total-columns );
27
+ @include offset( 'both', 3 );
28
+ @include remove-offset( 'left' );
29
+ }
@@ -2,11 +2,11 @@
2
2
  // Imports
3
3
 
4
4
  @import "../../../sass/ezy/grid";
5
- @import "../../../sass/ezy/media";
6
5
 
7
6
  $column-width: 60px;
8
7
  $gutter-width: 30px;
9
8
  $total-columns: 12;
9
+ @include grid-init();
10
10
 
11
11
  // Widths for use in media queries
12
12
  $width-small: context-width( 4 );
@@ -40,4 +40,4 @@ $breakpoint-large: set-breakpoint( $min: $width-medium+1, $legacy-support: true
40
40
  @include at-breakpoint( $breakpoint-large ) {
41
41
  @include span-columns( 4, $context: $total-columns, $at-breakpoint: true);
42
42
  }
43
- }
43
+ }
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.0
4
+ version: 0.2.6.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-08 00:00:00.000000000 Z
11
+ date: 2013-12-03 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: compass
@@ -50,7 +50,15 @@ files:
50
50
  - VERSION
51
51
  - lib/ezy.rb
52
52
  - sass/_ezy.scss
53
+ - sass/ezy/_clearfix.scss
54
+ - sass/ezy/_functions.scss
55
+ - sass/ezy/_grid.scss
56
+ - sass/ezy/_media.scss
57
+ - sass/ezy/_settings.scss
53
58
  - sass/ezy/_sprites.scss
59
+ - sass/ezy/grid/_debug.scss
60
+ - sass/ezy/grid/_helpers.scss
61
+ - sass/ezy/grid/_layout.scss
54
62
  - templates/project/_settings.scss
55
63
  - templates/project/index.html
56
64
  - templates/project/manifest.rb
@@ -59,6 +67,8 @@ files:
59
67
  - test/css/grid/elastic.css
60
68
  - test/css/grid/fluid.css
61
69
  - test/css/grid/gutter.css
70
+ - test/css/grid/layout.css
71
+ - test/css/grid/offset.css
62
72
  - test/css/grid/responsive.css
63
73
  - test/css/grid/static.css
64
74
  - test/css/media.css
@@ -66,7 +76,6 @@ files:
66
76
  - test/css/sprites/position.css
67
77
  - test/css/sprites/repeat.css
68
78
  - test/css/sprites/resolution.css
69
- - test/css/sprites/responsive.css
70
79
  - test/css/sprites/retina.css
71
80
  - test/css/sprites/simple.css
72
81
  - test/css/sprites/size.css
@@ -74,6 +83,8 @@ files:
74
83
  - test/scss/grid/elastic.scss
75
84
  - test/scss/grid/fluid.scss
76
85
  - test/scss/grid/gutter.scss
86
+ - test/scss/grid/layout.scss
87
+ - test/scss/grid/offset.scss
77
88
  - test/scss/grid/responsive.scss
78
89
  - test/scss/grid/static.scss
79
90
  - test/scss/media.scss
@@ -81,13 +92,12 @@ files:
81
92
  - test/scss/sprites/position.scss
82
93
  - test/scss/sprites/repeat.scss
83
94
  - test/scss/sprites/resolution.scss
84
- - test/scss/sprites/responsive.scss
85
95
  - test/scss/sprites/retina.scss
86
96
  - test/scss/sprites/simple.scss
87
97
  - test/scss/sprites/size.scss
88
98
  - test/scss/sprites/spacing.scss
99
+ - test/html/grid/layout-1.html
89
100
  - test/html/sprites/repeat.html
90
- - test/html/sprites/responsive.html
91
101
  - test/html/sprites/retina.html
92
102
  - test/html/sprites/simple.html
93
103
  - test/img/test-layout/alien.png
@@ -143,9 +153,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
143
153
  version: '0'
144
154
  required_rubygems_version: !ruby/object:Gem::Requirement
145
155
  requirements:
146
- - - '>='
156
+ - - '>'
147
157
  - !ruby/object:Gem::Version
148
- version: '0'
158
+ version: 1.3.1
149
159
  requirements: []
150
160
  rubyforge_project:
151
161
  rubygems_version: 2.1.11
@@ -1,69 +0,0 @@
1
- .classic, .no-media-queries .indy {
2
- background-image: url('../../img/test-retina.png?15511385736703');
3
- background-repeat: no-repeat;
4
- }
5
-
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
- .classic {
8
- /* Retina sprite */
9
- background-image: url('../../img/test-retina@2x.png?15511385736703');
10
- background-size: 152px auto;
11
- }
12
- }
13
-
14
- .classic {
15
- background-position: 0 -281px;
16
- width: 152px;
17
- height: 135px;
18
- }
19
- @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) {
20
- .classic {
21
- /* Retina sprite */
22
- background-position: 0 -140px;
23
- }
24
- }
25
-
26
- .indy {
27
- width: 128px;
28
- height: 140px;
29
- }
30
- @media (min-width: 400px) {
31
- .indy {
32
- background-position: 0 -141px;
33
- background-image: url('../../img/test-retina.png?15511385736703');
34
- background-repeat: no-repeat;
35
- }
36
- }
37
- @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 400px), only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 400px), only screen and (-moz-min-device-pixel-ratio: 2) and (min-width: 400px), only screen and (-ms-min-device-pixel-ratio: 2) and (min-width: 400px), only screen and (-o-min-device-pixel-ratio: 2 / 1) and (min-width: 400px), only screen and (min-device-pixel-ratio: 2) and (min-width: 400px), only screen and (min-resolution: 192dpi) and (min-width: 400px), only screen and (min-resolution: 2dppx) and (min-width: 400px) {
38
- .indy {
39
- /* Retina sprite */
40
- background-position: 0 0;
41
- background-image: url('../../img/test-retina@2x.png?15511385736703');
42
- background-size: 152px auto;
43
- }
44
- }
45
- @media (min-width: 960px) {
46
- .indy {
47
- background-position: 0 -281px;
48
- background-image: url('../../img/test-retina.png?15511385736703');
49
- background-repeat: no-repeat;
50
- }
51
- }
52
- @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 960px), only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 960px), only screen and (-moz-min-device-pixel-ratio: 2) and (min-width: 960px), only screen and (-ms-min-device-pixel-ratio: 2) and (min-width: 960px), only screen and (-o-min-device-pixel-ratio: 2 / 1) and (min-width: 960px), only screen and (min-device-pixel-ratio: 2) and (min-width: 960px), only screen and (min-resolution: 192dpi) and (min-width: 960px), only screen and (min-resolution: 2dppx) and (min-width: 960px) {
53
- .indy {
54
- /* Retina sprite */
55
- background-position: 0 -140px;
56
- background-image: url('../../img/test-retina@2x.png?15511385736703');
57
- background-size: 152px auto;
58
- }
59
- }
60
- @media (min-width: 1024px) {
61
- .indy {
62
- background-position: 0 0;
63
- background-image: url('../../img/test-retina.png?15511385736703');
64
- background-repeat: no-repeat;
65
- }
66
- }
67
- .no-media-queries .indy {
68
- background-position: 0 0;
69
- }
@@ -1,19 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8">
5
-
6
- <title>Sprite: responsive</title>
7
-
8
- <meta name="description" content="Ezy Grid Demo">
9
- <meta name="viewport" content="width=device-width">
10
-
11
- <link href="../../css/sprites/responsive.css" rel="stylesheet">
12
-
13
- </head>
14
- <body>
15
- <div class="classic">&nbsp;</div>
16
- <div class="indy">&nbsp;</div>
17
- <div class="alien">&nbsp;</div>
18
- </body>
19
- </html>
@@ -1,52 +0,0 @@
1
- // ---------------------------------------------------------------------------
2
- // Imports
3
-
4
- @import "../../../sass/ezy/media";
5
- @import "../../../sass/ezy/sprites";
6
-
7
- // ---------------------------------------------------------------------------
8
- // Defining media query breakpoints
9
-
10
- $breakpoint-small: set-breakpoint( $max: 580px );
11
- $breakpoint-medium: set-breakpoint( $min: 960px );
12
- $breakpoint-large: set-breakpoint( $min: 1024px, $legacy-support: true ); // Support for legacy browsers
13
-
14
-
15
- // ---------------------------------------------------------------------------
16
- // Create sprite
17
-
18
- @include make-sprite(
19
- $name: "base",
20
- $folder: "test-retina",
21
- $folder-retina: "test-retina@2x"
22
- );
23
-
24
- // ---------------------------------------------------------------------------
25
- // Use sprite
26
-
27
- .classic {
28
- @include background-sprite( "base", "classic" );
29
- width: 152px;
30
- height: 135px;
31
- }
32
-
33
- .indy {
34
- @include background-sprite(
35
- $name: "base",
36
- $image: "indy",
37
- $at-breakpoint: "(min-width: 400px)"
38
- );
39
- @include background-sprite(
40
- $name: "base",
41
- $image: "classic",
42
- $at-breakpoint: $breakpoint-medium
43
- );
44
- @include background-sprite(
45
- $name: "base",
46
- $image: "alien",
47
- $use-retina: false,
48
- $at-breakpoint: $breakpoint-large
49
- );
50
- width: 128px;
51
- height: 140px;
52
- }