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
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: ecc5a657ba9ce7ab7a6b85269db4ff0ca3f8ffe9
4
- data.tar.gz: 8f348367ead3da3f9165770262ffd30dfb24e45d
3
+ metadata.gz: 150e5ad3b59fb4f46ae274647edc755e8e69bafa
4
+ data.tar.gz: 5b9411e323d5f38f110be02cd32cc8372c59c538
5
5
  SHA512:
6
- metadata.gz: dba7608afd2431e094919d09201ea90044dcabde24febff0fe8cdacb05b10c0dedd287073b047c1dc8ae0e3875a66c285a056622d8e35a8ec6d97ac8c7ab69cc
7
- data.tar.gz: 0c5d73d8dc8f025b14488a25532c89dd71c161583f2ce81809a5cb939d7b593dd47cb7f677463ab857b6bcdabaad0c3e1fc6315bd637614022f0c88114278e26
6
+ metadata.gz: b0bd3eb1dd5e750585513adbc7d265fcaf336c9fead365cb43b99ea683fd8d276391ee363e8092494a8ab9e53a9b2671a5ee5318dae094aabb69d5402b1472b3
7
+ data.tar.gz: 06e0a26007226fdf805c87c48bed85a2e7f2bc11bc8da53aa7b91b52f0dcdc9b0d4991b9f167a1a95ff6c8879116d6078911a2259cba4eaa5f4d882c0f7c5b08
data/README.md CHANGED
@@ -3,12 +3,107 @@ Ezy: The developer's toolbox for responsive websites
3
3
 
4
4
  My attempt to create a collection of simple-to-use grid helpers and other tools with SCSS and Ruby
5
5
 
6
- > NOTE: Ezy is now in beta, with only sprites out-of-the-box.
7
- > Stand by for release of the grid.
6
+ Installing Ezy
7
+ --------------
8
8
 
9
- > If you can't wait, you can check out the progress [here](https://github.com/raahede/ezy/tree/grid-alpha).
9
+ #### 1) Install the gem (This is an alpha release!)
10
10
 
11
- Documentation
12
- -------------
11
+ `gem install ezy --pre`
13
12
 
14
- View documentation here: [raahede.github.io/ezy](http://raahede.github.io/ezy/)
13
+ #### 2) Require Ezy in your config.rb
14
+
15
+ `require "ezy"`
16
+
17
+ #### 3) Import the part you need in your SCSS
18
+
19
+ Import all features:
20
+
21
+ `@import "ezy";`
22
+
23
+ Import grid only:
24
+
25
+ `@import "ezy/grid";`
26
+
27
+ Import media queries only:
28
+
29
+ `@import "ezy/media";`
30
+
31
+ Import sprites only:
32
+
33
+ `@import "ezy/sprites";`
34
+
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
+
97
+ Building and testing local gem
98
+ ------------------------------
99
+
100
+ #### Build gem ###
101
+ `gem build ezy.gemspec`
102
+
103
+ #### Install local gem ###
104
+ `gem install --local ezy-[build version].gem`
105
+
106
+ #### Open installed gem location (Mac) ###
107
+ `open /Users/[username]/.rvm/gems/`
108
+ or
109
+ `open /Library/Ruby/Gems/[version]/gems/`
data/VERSION CHANGED
@@ -1 +1 @@
1
- 0.2.0
1
+ 0.2.6.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.0"
6
- s.date = "2013-12-08"
5
+ s.version = "0.2.6.alpha"
6
+ s.date = "2013-12-03"
7
7
 
8
8
  # Gem Details
9
9
  s.name = "ezy"
@@ -19,9 +19,7 @@ Gem::Specification.new do |s|
19
19
  s.files += %w(ezy.gemspec)
20
20
  s.files += %w(VERSION)
21
21
  s.files += Dir.glob("lib/**/*.*")
22
- # s.files += Dir.glob("sass/**/*.*")
23
- s.files += Dir.glob("sass/_ezy.scss")
24
- s.files += Dir.glob("sass/ezy/_sprites.scss")
22
+ s.files += Dir.glob("sass/**/*.*")
25
23
  s.files += Dir.glob("templates/**/*.*")
26
24
  s.files += Dir.glob("test/config.rb")
27
25
  s.files += Dir.glob("test/css/**/*.*")
data/sass/_ezy.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  // ---------------------------------------------------------------------------
2
2
  // Partials
3
3
 
4
- // @import "ezy/media";
5
- // @import "ezy/grid";
6
- @import "ezy/sprites";
4
+ @import "ezy/media";
5
+ @import "ezy/grid";
6
+ @import "ezy/sprites";
@@ -0,0 +1,25 @@
1
+ /* ------------------------------------------------- *
2
+ * Micro Clearfix
3
+ * http://nicolasgallagher.com/micro-clearfix-hack/
4
+ */
5
+
6
+ %clearfix:before,
7
+ %clearfix:after {
8
+ content: " ";
9
+ display: table;
10
+ }
11
+
12
+ %clearfix:after {
13
+ clear: both;
14
+ }
15
+
16
+
17
+ %clearfix {
18
+ /**
19
+ * For IE 6/7 only
20
+ * Include this rule to trigger hasLayout and contain floats.
21
+ */
22
+ *zoom: 1;
23
+ }
24
+
25
+ /* --- End clearfix --- */
@@ -0,0 +1,11 @@
1
+
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
8
+
9
+ @function percentage-round( $value ) {
10
+ @return floor( percentage( $value ) * 100 ) / 100;
11
+ }
@@ -0,0 +1,250 @@
1
+ /* ------------------------------------------------- *
2
+ * Ezy Grid by Frej Raahede Nielsen
3
+ * http://github.com/raahede/ezy
4
+ * ------------------------------------------------- *
5
+ */
6
+
7
+ // ---------------------------------------------------------------------------
8
+ // Grid defaults: can be overridden
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;
16
+
17
+ // ---------------------------------------------------------------------------
18
+ // Variables used in grid context
19
+
20
+ $grid-init : false;
21
+ $at-breakpoint : false;
22
+ $grid-init-index : 0; // Prevents columns defined before grid-init() from extending new placeholder selectors
23
+ $context-warn : "You must set $context if $is-fluid is set to true.";
24
+ $init-gutter-property: $gutter-property;
25
+
26
+ // ---------------------------------------------------------------------------
27
+ // Importing dependencies
28
+
29
+ @import "settings";
30
+ @import "functions";
31
+ @import "clearfix";
32
+ @import "grid/debug";
33
+ @import "grid/helpers";
34
+ @import "grid/layout";
35
+
36
+ // ---------------------------------------------------------------------------
37
+ // Grid master placeholder selector
38
+ // Adds cleafix and centers page in browser
39
+
40
+ %ezy-master {
41
+ @extend %clearfix;
42
+ margin: {
43
+ left: auto;
44
+ right: auto;
45
+ }
46
+ }
47
+
48
+ // ---------------------------------------------------------------------------
49
+ // @mixin master
50
+ //
51
+ // Sets width on page. If the grid is fluid, it's set as a max-width
52
+ // Extends the grid master placeholder selector
53
+ // $context : Number of columns in the current context.
54
+
55
+ @mixin master(
56
+ $context : $total-columns,
57
+ $at-breakpoint : $at-breakpoint
58
+ ) {
59
+ @if $is-fluid {
60
+ max-width: layout-width( $context );
61
+ } @else {
62
+ width: layout-width( $context );
63
+ }
64
+
65
+ $grid-padding-left : $grid-padding;
66
+ $grid-padding-right : $grid-padding;
67
+
68
+ @if type-of( $grid-padding ) == "list" {
69
+ // If grid padding is set as 2 values
70
+ $grid-padding-left : nth( $grid-padding, 1 );
71
+ $grid-padding-right : nth( $grid-padding, 2 );
72
+ }
73
+
74
+ @if $grid-padding-left { padding-left: $grid-padding-left; }
75
+ @if $grid-padding-right { padding-right: $grid-padding-right; }
76
+
77
+ @if ( not $at-breakpoint ) {
78
+ @extend %ezy-master;
79
+ }
80
+ }
81
+
82
+ // ---------------------------------------------------------------------------
83
+ // Grid container placeholder selector
84
+ // Adds cleafix
85
+
86
+ %ezy-container {
87
+ @extend %clearfix;
88
+ }
89
+
90
+ // ---------------------------------------------------------------------------
91
+ // @mixin container
92
+ //
93
+ // Sets width on page. If the grid is fluid, it's set as a max-width
94
+ // Extends the grid master placeholder selector
95
+ // $context : Number of columns in the current context
96
+ // : Only mandatory if grid is fluid
97
+ // $at-breakpoint : Set to true if mixin is called within a media query
98
+ // : Avoids SASS compillation errors from extending within
99
+ // : a media query
100
+
101
+ @mixin container(
102
+ $context : $total-columns,
103
+ $at-breakpoint : $at-breakpoint
104
+ ) {
105
+ $pullout: -( $gutter-width )/2;
106
+ @if $is-fluid and $context {
107
+ $pullout: -( percentage-round( $gutter-width / layout-width( $context ) ) )/2;
108
+ } @else if $is-fluid {
109
+ @warn $context-warn;
110
+ }
111
+ margin: {
112
+ left: $pullout;
113
+ right: $pullout;
114
+ }
115
+ @if (not $at-breakpoint) {
116
+ @extend %ezy-container;
117
+ }
118
+ }
119
+
120
+ // ---------------------------------------------------------------------------
121
+ // @mixin column-base
122
+ // Common styles for grid columns
123
+
124
+ @mixin column-base {
125
+ float: left;
126
+ @if $legacy-support-for-ie6 {
127
+ /* Fixing double margin on IE6 */
128
+ _display: inline;
129
+ }
130
+ // Inserting debug styles
131
+ @if $debug {
132
+ @include debug-styles;
133
+ }
134
+ }
135
+
136
+ // ---------------------------------------------------------------------------
137
+ // @mixin grid-init
138
+ //
139
+ // Prints out placeholder selectors used with columns. Helps reduce the CSS output.
140
+ //
141
+ // Should be called after setting grid variables:
142
+ // ----------------
143
+ // $column-width
144
+ // $gutter-width
145
+ // $gutter-property
146
+ // $total-columns
147
+ // ----------------
148
+
149
+ @mixin grid-init( $columns: $total-columns ) {
150
+ $grid-init : true;
151
+ $grid-init-index : $grid-init-index + 1;
152
+ $init-gutter-property : $gutter-property;
153
+
154
+ // Placeholder selector for fluid grid columns
155
+ @for $i from 1 through $columns {
156
+ %ezy-column-#{ $grid-init-index }-#{ $i } {
157
+ /* Grid column base at a #{ $i }-column context */
158
+ @include gutters( $i );
159
+ @include column-base;
160
+ }
161
+ }
162
+
163
+ // Placeholder selector for non-fluid grid columns
164
+ %ezy-column-#{ $grid-init-index } {
165
+ /* Grid column base */
166
+ #{ $gutter-property }: {
167
+ left: $gutter-width / 2;
168
+ right: $gutter-width / 2;
169
+ }
170
+ @include column-base;
171
+ }
172
+
173
+ }
174
+
175
+ // ---------------------------------------------------------------------------
176
+ // @mixin span-columns
177
+ //
178
+ // Sets width and gutter on columns
179
+ // Uses @extend for gutters outside media queries if grid-init() has been called
180
+ // $columns : Number of columns to span
181
+ // $context : Number of columns in the current context
182
+ // : Only mandatory if grid is fluid
183
+ // $at-breakpoint : Set to true if mixin is called within a media query
184
+ // : Avoids SASS compillation errors from extending within
185
+ // : a media query
186
+ // $gutter-property : Overrides the global $gutter-property
187
+
188
+ @mixin span-columns(
189
+ $columns,
190
+ $context : $total-columns,
191
+ $at-breakpoint : $at-breakpoint,
192
+ $gutter-property : $gutter-property
193
+ ) {
194
+ $width: span-column-width( $columns );
195
+ @if $is-fluid and $context {
196
+ /* Spanning #{ $columns } of #{ $context } columns */
197
+ $context-width: context-width( $context );
198
+ $pct-width: percentage-round( $width / $context-width );
199
+ width: $pct-width;
200
+ } @else {
201
+ /* Spanning #{ $columns } columns */
202
+ width: $width;
203
+ }
204
+
205
+ // Inserting debug text
206
+ @if $debug {
207
+ @include debug-info( $columns, $context );
208
+ }
209
+
210
+ // Setting base column styles when a column can't
211
+ // have extended the base columns placeholder selector
212
+ @if ( not $grid-init ) {
213
+ @include column-base;
214
+ }
215
+
216
+ // Some crazy logic to set gutter or
217
+ // extend column placeholder selectors
218
+
219
+ @if $grid-init and ( not $at-breakpoint ) {
220
+ // Those are the conditions for using @extend
221
+ @if $context {
222
+ @if ( $total-columns < $context ) {
223
+ @include gutters( $context );
224
+ @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.";
225
+
226
+ } @else {
227
+ @extend %ezy-column-#{ $grid-init-index }-#{ $context };
228
+ }
229
+
230
+ } @else {
231
+ @extend %ezy-column-#{ $grid-init-index };
232
+ }
233
+
234
+ }
235
+ @if ( $gutter-property and $gutter-property != $init-gutter-property )
236
+ or ( not $grid-init )
237
+ or $at-breakpoint {
238
+
239
+ @if $is-fluid and $context {
240
+ @include gutters( $context, $gutter-property );
241
+
242
+ } @else if $is-fluid and ( not $context ) {
243
+ @warn $context-warn;
244
+ } @else {
245
+ @include gutters( $gutter-property: $gutter-property );
246
+ }
247
+
248
+ }
249
+ }
250
+
@@ -0,0 +1,47 @@
1
+ @import "settings";
2
+
3
+ @function set-breakpoint(
4
+ $min : false,
5
+ $max : false,
6
+ $custom : false,
7
+ $legacy-support : false
8
+ ) {
9
+
10
+ @if (not $min) and (not $max) and (not $custom) {
11
+ @warn "Either $min, $max, or $custom must be defined for set-breakpoint to work.";
12
+ }
13
+
14
+ @if $min and $max {
15
+ // Both $min and $max
16
+ @return "(min-width: #{ $min }) and (max-width: #{ $max })", $legacy-support;
17
+ } @else {
18
+ @if $min and (not $max) {
19
+ // Min only:
20
+ @return "(min-width: #{ $min })", $legacy-support;
21
+ }
22
+ @if $max and (not $min) {
23
+ // Max only:
24
+ @return "(max-width: #{ $max })", $legacy-support;
25
+ } @else {
26
+ // Custom:
27
+ @return $custom, $legacy-support;
28
+ }
29
+ }
30
+ }
31
+
32
+ @mixin at-breakpoint(
33
+ $breakpoint,
34
+ $legacy-support: false
35
+ ) {
36
+ @media #{ nth( $breakpoint, 1 ) } {
37
+ @content;
38
+ }
39
+ @if $legacy-support or nth( $breakpoint, 2 ) {
40
+ #{ $legacy-selector } & {
41
+ /* Fallback for browsers not supporting media queries */
42
+ @content;
43
+ }
44
+ }
45
+ }
46
+
47
+
@@ -0,0 +1,18 @@
1
+ // ---------------------------------------------------------------------------
2
+ // Debug mode
3
+
4
+ $debug : false !default;
5
+
6
+ // ---------------------------------------------------------------------------
7
+ // Cross-browser support configuration
8
+ // Using same naming convension as Compass
9
+
10
+ $legacy-support-for-ie : true !default;
11
+ $legacy-support-for-ie6 : $legacy-support-for-ie !default;
12
+ $legacy-support-for-ie7 : $legacy-support-for-ie !default;
13
+ $legacy-support-for-ie8 : $legacy-support-for-ie !default;
14
+
15
+ // ---------------------------------------------------------------------------
16
+ // Selector used for legacy support in media queries
17
+
18
+ $legacy-selector: ".no-media-queries" !default;