longitude 0.1.1 → 0.1.2
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +11 -0
- data/lib/longitude/version.rb +1 -1
- data/spec/integration/steps_spec.rb +33 -0
- data/stylesheets/longitude.scss +7 -0
- metadata +10 -8
data/README.md
CHANGED
@@ -150,6 +150,17 @@ pixel perfectness when the largest breakpoint is used.
|
|
150
150
|
Return true or false depending on if the current breakpoint is the extra
|
151
151
|
breakpoint mentioned above.
|
152
152
|
|
153
|
+
### steps(...)
|
154
|
+
|
155
|
+
Steps through a list of values for each breakpoint. If there are fewer
|
156
|
+
steps then breakpoints, the last step will be used for padding. Example that will change color for every step and all larger breakpoints will be green:
|
157
|
+
|
158
|
+
```scss
|
159
|
+
section {
|
160
|
+
color: steps(red blue green);
|
161
|
+
}
|
162
|
+
```
|
163
|
+
|
153
164
|
Compatibility mode (dealing with Internet Explorer)
|
154
165
|
---------------------------------------------------
|
155
166
|
|
data/lib/longitude/version.rb
CHANGED
@@ -0,0 +1,33 @@
|
|
1
|
+
require 'spec_helper'
|
2
|
+
|
3
|
+
describe 'Steps' do
|
4
|
+
describe 'with all columns' do
|
5
|
+
before :each do
|
6
|
+
@css = render """
|
7
|
+
@include longitude(2 4) {
|
8
|
+
p { width: steps(10px 20px 30px); }
|
9
|
+
}
|
10
|
+
"""
|
11
|
+
end
|
12
|
+
|
13
|
+
it 'sets width according to the given steps' do
|
14
|
+
@css.should include("width: 10px;")
|
15
|
+
@css.should include("width: 20px;")
|
16
|
+
@css.should include("width: 30px;")
|
17
|
+
end
|
18
|
+
end
|
19
|
+
|
20
|
+
describe 'with to few columns' do
|
21
|
+
before :each do
|
22
|
+
@css = render """
|
23
|
+
@include longitude(2 4 6) {
|
24
|
+
p { width: steps(10px 20px); }
|
25
|
+
}
|
26
|
+
"""
|
27
|
+
end
|
28
|
+
|
29
|
+
it 'sets the last value as the default if it is missing' do
|
30
|
+
@css.should match(/@media \(min-width: 481px\).* width: 20px;/m)
|
31
|
+
end
|
32
|
+
end
|
33
|
+
end
|
data/stylesheets/longitude.scss
CHANGED
@@ -3,6 +3,7 @@ $longitude-column-width: 60px !default;
|
|
3
3
|
$longitude-compatibility-mode: false !default;
|
4
4
|
|
5
5
|
$longitude-column-count: 0;
|
6
|
+
$longitude-column-index: 0;
|
6
7
|
$longitude-base-width: 100%;
|
7
8
|
|
8
9
|
@function absolute-width($columns) {
|
@@ -50,10 +51,15 @@ $longitude-base-width: 100%;
|
|
50
51
|
@return $longitude-base-width == 100%;
|
51
52
|
}
|
52
53
|
|
54
|
+
@function steps($list){
|
55
|
+
@return nth($list, min($longitude-column-index, length($list)));
|
56
|
+
}
|
57
|
+
|
53
58
|
@mixin longitude($breakpoints) {
|
54
59
|
$prev-column-count: 0;
|
55
60
|
$max-width: 0;
|
56
61
|
@each $column-count in $breakpoints {
|
62
|
+
$longitude-column-index: $longitude-column-index + 1;
|
57
63
|
$longitude-column-count: $column-count;
|
58
64
|
@if $longitude-compatibility-mode == false {
|
59
65
|
$min-width: absolute-width($prev-column-count);
|
@@ -70,6 +76,7 @@ $longitude-base-width: 100%;
|
|
70
76
|
}
|
71
77
|
// Last step, use pixels
|
72
78
|
$longitude-base-width: absolute-width(column-count());
|
79
|
+
$longitude-column-index: $longitude-column-index + 1;
|
73
80
|
@if $longitude-compatibility-mode {
|
74
81
|
@content;
|
75
82
|
} @else {
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: longitude
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.1.
|
4
|
+
version: 0.1.2
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -9,11 +9,11 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2012-
|
12
|
+
date: 2012-04-20 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: rake
|
16
|
-
requirement: &
|
16
|
+
requirement: &70286896851340 !ruby/object:Gem::Requirement
|
17
17
|
none: false
|
18
18
|
requirements:
|
19
19
|
- - ! '>='
|
@@ -21,10 +21,10 @@ dependencies:
|
|
21
21
|
version: '0'
|
22
22
|
type: :development
|
23
23
|
prerelease: false
|
24
|
-
version_requirements: *
|
24
|
+
version_requirements: *70286896851340
|
25
25
|
- !ruby/object:Gem::Dependency
|
26
26
|
name: rspec
|
27
|
-
requirement: &
|
27
|
+
requirement: &70286896850900 !ruby/object:Gem::Requirement
|
28
28
|
none: false
|
29
29
|
requirements:
|
30
30
|
- - ! '>='
|
@@ -32,10 +32,10 @@ dependencies:
|
|
32
32
|
version: '0'
|
33
33
|
type: :development
|
34
34
|
prerelease: false
|
35
|
-
version_requirements: *
|
35
|
+
version_requirements: *70286896850900
|
36
36
|
- !ruby/object:Gem::Dependency
|
37
37
|
name: sass
|
38
|
-
requirement: &
|
38
|
+
requirement: &70286896849980 !ruby/object:Gem::Requirement
|
39
39
|
none: false
|
40
40
|
requirements:
|
41
41
|
- - =
|
@@ -43,7 +43,7 @@ dependencies:
|
|
43
43
|
version: 3.2.0.alpha.94
|
44
44
|
type: :runtime
|
45
45
|
prerelease: false
|
46
|
-
version_requirements: *
|
46
|
+
version_requirements: *70286896849980
|
47
47
|
description: ! 'Lets you easily using SCSS create responsive, mobile first layouts
|
48
48
|
with minimal footprint in an unobtrusive way!
|
49
49
|
|
@@ -71,6 +71,7 @@ files:
|
|
71
71
|
- spec/integration/full_width_spec.rb
|
72
72
|
- spec/integration/gutters_spec.rb
|
73
73
|
- spec/integration/media_queries_spec.rb
|
74
|
+
- spec/integration/steps_spec.rb
|
74
75
|
- spec/spec_helper.rb
|
75
76
|
- stylesheets/longitude.scss
|
76
77
|
homepage: http://github.com/jede/longitude
|
@@ -104,4 +105,5 @@ test_files:
|
|
104
105
|
- spec/integration/full_width_spec.rb
|
105
106
|
- spec/integration/gutters_spec.rb
|
106
107
|
- spec/integration/media_queries_spec.rb
|
108
|
+
- spec/integration/steps_spec.rb
|
107
109
|
- spec/spec_helper.rb
|