ezy 0.1.1 → 0.2.0.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.
data/README.md CHANGED
@@ -3,9 +3,6 @@ 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.
8
-
9
6
  Installing Ezy
10
7
  --------------
11
8
 
@@ -19,7 +16,11 @@ Installing Ezy
19
16
 
20
17
  #### 3) Import the part you need in your SCSS
21
18
 
22
- Import sprites: (only option ATM)
19
+ Import all features:
20
+
21
+ `@import "ezy";`
22
+
23
+ Import sprites only:
23
24
 
24
25
  `@import "ezy/sprites";`
25
26
 
data/VERSION CHANGED
@@ -1 +1 @@
1
- 0.1.0
1
+ 0.2.0.alpha
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.1.1"
5
+ s.version = "0.2.0.alpha"
6
6
  s.date = "2013-11-13"
7
7
 
8
8
  # Gem Details
@@ -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/**/*.*")
@@ -33,4 +31,4 @@ Gem::Specification.new do |s|
33
31
  s.rubygems_version = %q{1.3.6}
34
32
  s.add_dependency(%q<compass>, [">= 0.12.2"])
35
33
  s.add_dependency(%q<sass>, [">= 3.2.0"])
36
- end
34
+ end
data/sass/_ezy.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  // ---------------------------------------------------------------------------
2
2
  // Partials
3
3
 
4
- // @import "ezy/media";
5
- // @import "ezy/grid";
4
+ @import "ezy/media";
5
+ @import "ezy/grid";
6
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
+ /* -------------------------------------------------------------------- */
@@ -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,279 @@
1
+ // ---------------------------------------------------------------------------
2
+ // Importing dependencies
3
+
4
+ @import "functions";
5
+ @import "clearfix";
6
+
7
+ // ---------------------------------------------------------------------------
8
+ // Mandatory grid settings
9
+ // Defaults: can be overridden
10
+
11
+ $column-width: 4em !default;
12
+ $gutter-width: 1em !default;
13
+ $default-gutter-property: "margin" !default;
14
+ $total-columns: 12 !default;
15
+ $is-fluid: true !default;
16
+
17
+ // ---------------------------------------------------------------------------
18
+ // Variables used in grid context
19
+
20
+ $grid-init: false;
21
+ $context-warn: "You must set $context if $is-fluid is set to true.";
22
+ $init-gutter-property: $default-gutter-property;
23
+
24
+ // ---------------------------------------------------------------------------
25
+ // @function layout-width
26
+ //
27
+ // Returns width based on given number of culumns
28
+ // $columns : Number of columns to calculate width from
29
+ // @return : Width in the same unit as $column-width and $gutter-width
30
+
31
+ @function layout-width( $columns ) {
32
+ @if comparable( $column-width, $gutter-width ) {
33
+ @return $columns * ( $column-width + $gutter-width ) - $gutter-width;
34
+ } @else {
35
+ @warn "$column-width and $gutter-width must have the same unit set. #{ unit($column-width) }'s and #{ unit($gutter-width) }'s are not comparable.";
36
+ }
37
+ }
38
+
39
+ // ---------------------------------------------------------------------------
40
+ // @function context-width
41
+ //
42
+ // Returns width based on given number of culumns, plus an extra gutter
43
+ // Used for % calculations in the grid
44
+ // $columns : Number of columns to calculate width from
45
+ // @return : Width in the same unit as $column-width and $gutter-width
46
+
47
+ @function context-width( $columns ) {
48
+ @return layout-width( $columns ) + $gutter-width;
49
+ }
50
+
51
+ // ---------------------------------------------------------------------------
52
+ // @function span-column-width
53
+ //
54
+ // Same as layout-width( $columns ), but renamed for better context awareness
55
+
56
+ @function span-column-width( $columns ) {
57
+ @return layout-width( $columns );
58
+ }
59
+
60
+ // ---------------------------------------------------------------------------
61
+ // @function gutter
62
+ //
63
+ // Returns gutter in the same unit as $gutter-width if grid is static
64
+ // Returns gutter as a percentage of the context if grid is fluid
65
+ // $context : Number of columns in the current context.
66
+ // : If set to false, the returned value is as in static grid
67
+ // @return : Width as $gutter-width or as a percentage of the context
68
+
69
+ @function gutter(
70
+ $context: false
71
+ ) {
72
+ @if $is-fluid and $context {
73
+ @return ( percentage-round( ( $gutter-width / 2 ) / context-width( $context ) ) );
74
+ } @else if $is-fluid {
75
+ @warn $context-warn;
76
+ } @else {
77
+ @return $gutter-width / 2;
78
+ }
79
+ }
80
+
81
+ // ---------------------------------------------------------------------------
82
+ // @mixin gutters
83
+ //
84
+ // Sets gutters using the gutter( $context ) function
85
+ // $context : Number of columns in the current context.
86
+ // : Only mandatory if grid is fluid
87
+ // $gutter-property : Set to "margin" or "padding"
88
+
89
+ @mixin gutters(
90
+ $context: false,
91
+ $property: false
92
+ ) {
93
+ @if (not $property) {
94
+ $property: $default-gutter-property;
95
+ }
96
+ @if $property == "margin" or $property == "padding" {
97
+ float: left;
98
+ #{ $property }: {
99
+ left: gutter( $context );
100
+ right: gutter( $context );
101
+ }
102
+ } @else {
103
+ @warn "$gutter-property must be set to either 'margin' or 'padding'";
104
+ }
105
+ }
106
+
107
+ // ---------------------------------------------------------------------------
108
+ // Grid master placeholder selector
109
+ // Adds cleafix and centers page in browser
110
+
111
+ %ezy-master {
112
+ @extend %clearfix;
113
+ margin: {
114
+ left: auto;
115
+ right: auto;
116
+ }
117
+ }
118
+
119
+ // ---------------------------------------------------------------------------
120
+ // @mixin master
121
+ //
122
+ // Sets width on page. If the grid is fluid, it's set as a max-width
123
+ // Extends the grid master placeholder selector
124
+ // $context : Number of columns in the current context.
125
+
126
+ @mixin master(
127
+ $context
128
+ ) {
129
+ @if $is-fluid {
130
+ max-width: layout-width( $context );
131
+ } @else {
132
+ width: layout-width( $context );
133
+ }
134
+ @extend %ezy-master;
135
+ }
136
+
137
+ // ---------------------------------------------------------------------------
138
+ // Grid container placeholder selector
139
+ // Adds cleafix
140
+
141
+ %ezy-container {
142
+ @extend %clearfix;
143
+ }
144
+
145
+ // ---------------------------------------------------------------------------
146
+ // @mixin container
147
+ //
148
+ // Sets width on page. If the grid is fluid, it's set as a max-width
149
+ // Extends the grid master placeholder selector
150
+ // $context : Number of columns in the current context
151
+ // : Only mandatory if grid is fluid
152
+ // $at-breakpoint : Set to true if mixin is called within a media query
153
+ // : Avoids SASS compillation errors from extending within
154
+ // : a media query
155
+
156
+ @mixin container(
157
+ $context: false,
158
+ $at-breakpoint: false
159
+ ) {
160
+ $pullout: -( $gutter-width )/2;
161
+ @if $is-fluid and $context {
162
+ $pullout: -( percentage-round( $gutter-width / layout-width( $context ) ) )/2;
163
+ } @else if $is-fluid {
164
+ @warn $context-warn;
165
+ }
166
+ margin: {
167
+ left: $pullout;
168
+ right: $pullout;
169
+ }
170
+ @if (not $at-breakpoint) {
171
+ @extend %ezy-container;
172
+ }
173
+ }
174
+
175
+ // ---------------------------------------------------------------------------
176
+ // @mixin grid-init
177
+ //
178
+ // Prints out placeholder selectors used with columns. Helps reduce the CSS output.
179
+ //
180
+ // Should be called after setting grid variables:
181
+ // ----------------
182
+ // $column-width
183
+ // $gutter-width
184
+ // $gutter-property
185
+ // $total-columns
186
+ // ----------------
187
+
188
+ @mixin grid-init() {
189
+ $grid-init: true;
190
+ $init-gutter-property: $default-gutter-property;
191
+ @if $is-fluid {
192
+ @for $i from 1 through $total-columns {
193
+ %ezy-column-#{ $i } {
194
+ @include gutters( $i );
195
+ }
196
+ }
197
+ } @else {
198
+ %ezy-column {
199
+ @include gutters;
200
+ }
201
+ }
202
+ }
203
+
204
+ // ---------------------------------------------------------------------------
205
+ // @mixin span-columns
206
+ //
207
+ // Sets width and gutter on columns
208
+ // Uses @extend for gutters outside media queries if grid-init() has been called
209
+ // $columns : Number of columns to span
210
+ // $context : Number of columns in the current context
211
+ // : Only mandatory if grid is fluid
212
+ // $at-breakpoint : Set to true if mixin is called within a media query
213
+ // : Avoids SASS compillation errors from extending within
214
+ // : a media query
215
+ // $gutter-property : Overrides the global $gutter-property
216
+
217
+ @mixin span-columns(
218
+ $columns,
219
+ $context: false,
220
+ $at-breakpoint: false,
221
+ $gutter-property: false
222
+ ) {
223
+ $width: span-column-width( $columns );
224
+ @if $is-fluid and $context {
225
+ /* Spanning #{ $columns } of #{ $context } columns */
226
+ $context-width: context-width( $context );
227
+ $pct-width: percentage-round( $width / $context-width );
228
+ width: $pct-width;
229
+ } @else {
230
+ /* Spanning #{ $columns } columns */
231
+ width: $width;
232
+ }
233
+
234
+ @if $gutter-property and $gutter-property != $default-gutter-property {
235
+
236
+ @if $is-fluid and $context {
237
+ @include gutters( $context, $gutter-property );
238
+
239
+ } @else if ( not $is-fluid ) {
240
+ @include gutters( $property: $gutter-property );
241
+
242
+ } @else if $is-fluid and ( not $context ) {
243
+ @warn $context-warn;
244
+ }
245
+
246
+ } @else if $is-fluid and $context {
247
+
248
+ @if $at-breakpoint or $init-gutter-property != $default-gutter-property {
249
+ @include gutters( $context );
250
+
251
+ } @else if ( $total-columns < $context ) {
252
+ @include gutters( $context );
253
+ @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.";
254
+
255
+ } @else if ( not $grid-init ) {
256
+ @include gutters( $context );
257
+ @warn "Include grid-init() after setting $total-columns for cleaner CSS output.";
258
+
259
+ } @else {
260
+ @extend %ezy-column-#{ $context };
261
+ }
262
+
263
+
264
+ } @else if $is-fluid { // $context not set
265
+
266
+ @warn $context-warn;
267
+
268
+ } @else if $grid-init and $init-gutter-property == $default-gutter-property { // Grid is static
269
+ @extend %ezy-column;
270
+
271
+ } @else {
272
+ @include gutters( $context );
273
+
274
+ @if (not $grid-init) {
275
+ @warn "Include grid-init() after setting $gutter-width for cleaner CSS output.";
276
+ }
277
+ }
278
+ }
279
+
@@ -0,0 +1,48 @@
1
+
2
+ $legacy-selector: ".no-media-queries" !default;
3
+
4
+ @function set-breakpoint(
5
+ $min: false,
6
+ $max: false,
7
+ $custom: false,
8
+ $legacy-support: false
9
+ ) {
10
+
11
+ @if (not $min) and (not $max) and (not $custom) {
12
+ @warn "Either $min, $max, or $custom must be defined for set-breakpoint to work.";
13
+ }
14
+
15
+ @if $min and $max {
16
+ // Both $min and $max
17
+ @return "(min-width: #{ $min }) and (max-width: #{ $max })", $legacy-support;
18
+ } @else {
19
+ @if $min and (not $max) {
20
+ // Min only:
21
+ @return "(min-width: #{ $min })", $legacy-support;
22
+ }
23
+ @if $max and (not $min) {
24
+ // Max only:
25
+ @return "(max-width: #{ $max })", $legacy-support;
26
+ } @else {
27
+ // Custom:
28
+ @return $custom, $legacy-support;
29
+ }
30
+ }
31
+ }
32
+
33
+ @mixin at-breakpoint(
34
+ $breakpoint,
35
+ $legacy-support: false
36
+ ) {
37
+ @media #{ nth( $breakpoint, 1 ) } {
38
+ @content;
39
+ }
40
+ @if $legacy-support or nth( $breakpoint, 2 ) {
41
+ #{ $legacy-selector } & {
42
+ /* Fallback for browsers not supporting media queries */
43
+ @content;
44
+ }
45
+ }
46
+ }
47
+
48
+
metadata CHANGED
@@ -1,55 +1,73 @@
1
- --- !ruby/object:Gem::Specification
1
+ --- !ruby/object:Gem::Specification
2
2
  name: ezy
3
- version: !ruby/object:Gem::Version
4
- version: 0.1.1
3
+ version: !ruby/object:Gem::Version
4
+ hash: -933531639
5
+ prerelease: 6
6
+ segments:
7
+ - 0
8
+ - 2
9
+ - 0
10
+ - alpha
11
+ version: 0.2.0.alpha
5
12
  platform: ruby
6
- authors:
13
+ authors:
7
14
  - Frej Raahede Nielsen
8
15
  autorequire:
9
16
  bindir: bin
10
17
  cert_chain: []
11
- date: 2013-11-13 00:00:00.000000000 Z
12
- dependencies:
13
- - !ruby/object:Gem::Dependency
18
+
19
+ date: 2013-11-13 00:00:00 Z
20
+ dependencies:
21
+ - !ruby/object:Gem::Dependency
14
22
  name: compass
15
- requirement: !ruby/object:Gem::Requirement
16
- requirements:
17
- - - '>='
18
- - !ruby/object:Gem::Version
19
- version: 0.12.2
20
- type: :runtime
21
23
  prerelease: false
22
- version_requirements: !ruby/object:Gem::Requirement
23
- requirements:
24
- - - '>='
25
- - !ruby/object:Gem::Version
24
+ requirement: &id001 !ruby/object:Gem::Requirement
25
+ none: false
26
+ requirements:
27
+ - - ">="
28
+ - !ruby/object:Gem::Version
29
+ hash: 43
30
+ segments:
31
+ - 0
32
+ - 12
33
+ - 2
26
34
  version: 0.12.2
27
- - !ruby/object:Gem::Dependency
28
- name: sass
29
- requirement: !ruby/object:Gem::Requirement
30
- requirements:
31
- - - '>='
32
- - !ruby/object:Gem::Version
33
- version: 3.2.0
34
35
  type: :runtime
36
+ version_requirements: *id001
37
+ - !ruby/object:Gem::Dependency
38
+ name: sass
35
39
  prerelease: false
36
- version_requirements: !ruby/object:Gem::Requirement
37
- requirements:
38
- - - '>='
39
- - !ruby/object:Gem::Version
40
+ requirement: &id002 !ruby/object:Gem::Requirement
41
+ none: false
42
+ requirements:
43
+ - - ">="
44
+ - !ruby/object:Gem::Version
45
+ hash: 15
46
+ segments:
47
+ - 3
48
+ - 2
49
+ - 0
40
50
  version: 3.2.0
41
- description: A collection of SCSS tools for creating responsive websites. Includes
42
- a simple but powerful grid framework, media query helpers and sprite helpers.
51
+ type: :runtime
52
+ version_requirements: *id002
53
+ description: A collection of SCSS tools for creating responsive websites. Includes a simple but powerful grid framework, media query helpers and sprite helpers.
43
54
  email: frejraahede@gmail.com
44
55
  executables: []
56
+
45
57
  extensions: []
58
+
46
59
  extra_rdoc_files: []
47
- files:
60
+
61
+ files:
48
62
  - README.md
49
63
  - ezy.gemspec
50
64
  - VERSION
51
65
  - lib/ezy.rb
52
66
  - sass/_ezy.scss
67
+ - sass/ezy/_clearfix.scss
68
+ - sass/ezy/_functions.scss
69
+ - sass/ezy/_grid.scss
70
+ - sass/ezy/_media.scss
53
71
  - sass/ezy/_sprites.scss
54
72
  - templates/project/_settings.scss
55
73
  - templates/project/index.html
@@ -126,27 +144,39 @@ files:
126
144
  - test/img/test-spacing@2x/classic.png
127
145
  - test/img/test-spacing@2x/indy.png
128
146
  homepage: http://github.com/raahede/
129
- licenses:
147
+ licenses:
130
148
  - MIT
131
- metadata: {}
132
149
  post_install_message:
133
150
  rdoc_options: []
134
- require_paths:
151
+
152
+ require_paths:
135
153
  - lib
136
- required_ruby_version: !ruby/object:Gem::Requirement
137
- requirements:
138
- - - '>='
139
- - !ruby/object:Gem::Version
140
- version: '0'
141
- required_rubygems_version: !ruby/object:Gem::Requirement
142
- requirements:
143
- - - '>='
144
- - !ruby/object:Gem::Version
145
- version: '0'
154
+ required_ruby_version: !ruby/object:Gem::Requirement
155
+ none: false
156
+ requirements:
157
+ - - ">="
158
+ - !ruby/object:Gem::Version
159
+ hash: 3
160
+ segments:
161
+ - 0
162
+ version: "0"
163
+ required_rubygems_version: !ruby/object:Gem::Requirement
164
+ none: false
165
+ requirements:
166
+ - - ">"
167
+ - !ruby/object:Gem::Version
168
+ hash: 25
169
+ segments:
170
+ - 1
171
+ - 3
172
+ - 1
173
+ version: 1.3.1
146
174
  requirements: []
175
+
147
176
  rubyforge_project:
148
- rubygems_version: 2.1.10
177
+ rubygems_version: 1.8.25
149
178
  signing_key:
150
- specification_version: 4
179
+ specification_version: 3
151
180
  summary: The developer's toolbox for responsive websites
152
181
  test_files: []
182
+
checksums.yaml DELETED
@@ -1,7 +0,0 @@
1
- ---
2
- SHA1:
3
- metadata.gz: c356c1caf87fa968c18eba1c4debaa02fb79fbf6
4
- data.tar.gz: 959c46bdca6bb477dbd11d1a1b5e305ef4bfb1a8
5
- SHA512:
6
- metadata.gz: 707af3feea4008b898da3f1eb310f0d0bccaa55f0274d11c24ace8111bd3afca55fa8abe5e782a4e1ccd69f3b09d98b38f14e2551ebae86237082156502ca24c
7
- data.tar.gz: ca508a57002f5b0aa204ebb5f5d4a4074086cfcd724fea664b77741ab89207114ecce8f8f8f5a7eee939bc5941fc941e5cd1ebac3f0037bf3a09a1d41841f57e