compass-respond 0.1.0 → 0.2.0

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
@@ -60,6 +60,7 @@ Options:
60
60
  * m
61
61
  * l
62
62
  * xl
63
+ * xxl
63
64
 
64
65
  SASS:
65
66
 
@@ -76,6 +77,8 @@ SASS:
76
77
  column-count: 5
77
78
  +respond-above(xl)
78
79
  column-count: 6
80
+ +respond-above(xxl)
81
+ column-count: 7
79
82
 
80
83
  CSS:
81
84
 
@@ -85,6 +88,7 @@ CSS:
85
88
  @media only screen and (min-width: 768px) { .charts { column-count: 4; } }
86
89
  @media only screen and (min-width: 992px) { .charts { column-count: 5; } }
87
90
  @media only screen and (min-width: 1382px) { .charts { column-count: 6; } }
91
+ @media only screen and (min-width: 1824px) { .charts { column-count: 7; } }
88
92
 
89
93
  +respond-below
90
94
  --------------
@@ -96,12 +100,15 @@ Options:
96
100
  * m
97
101
  * l
98
102
  * xl
103
+ * xxl
99
104
 
100
105
  SASS:
101
106
 
102
107
  @import "respond-below"
103
108
  .charts
104
- column-count: 6
109
+ column-count: 7
110
+ +respond-below(xxl)
111
+ column-count: 6
105
112
  +respond-below(xl)
106
113
  column-count: 5
107
114
  +respond-below(l)
@@ -115,7 +122,8 @@ SASS:
115
122
 
116
123
  CSS:
117
124
 
118
- .charts { column-count: 6; }
125
+ .charts { column-count: 7; }
126
+ @media only screen and (max-width: 1824px) { .charts { column-count: 6; } }
119
127
  @media only screen and (max-width: 1382px) { .charts { column-count: 5; } }
120
128
  @media only screen and (min-width: 992px) { .charts { column-count: 4; } }
121
129
  @media only screen and (min-width: 768px) { .charts { column-count: 3; } }
@@ -142,8 +150,8 @@ Then you can import the mixin you want into your .sass file:
142
150
  Contributors
143
151
  ------------
144
152
 
145
- @mikesten
146
- @mavilein
153
+ * [mikesten](https://github.com/mikesten)
154
+ * [mavilein](https://github.com/mavilein)
147
155
 
148
156
  Credit
149
157
  ------
@@ -156,4 +164,4 @@ respond-below() is the work of [mavilein](https://github.com/mavilein).
156
164
 
157
165
  I'm fully expecting Compass to add something like this in the near future.
158
166
 
159
- Many thanks to Brandon Mathis and his [Fancy Buttons](https://github.com/imathis/fancy-buttons), which I used as a template for this gem.
167
+ Many thanks to Brandon Mathis and his [Fancy Buttons](https://github.com/imathis/fancy-buttons), which I used as a template for this gem.
data/VERSION.yml CHANGED
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  :major: 0
3
- :minor: 1
3
+ :minor: 2
4
4
  :patch: 0
5
5
  :state:
6
6
  :build:
@@ -1,10 +1,12 @@
1
1
  // https://github.com/malarkey/320andup/
2
+ // and http://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints
2
3
 
3
- $respond-above-xs: 480px !default
4
- $respond-above-s: 600px !default
5
- $respond-above-m: 768px !default
6
- $respond-above-l: 992px !default
7
- $respond-above-xl: 1382px !default
4
+ $respond-above-xs: 480px !default
5
+ $respond-above-s: 600px !default
6
+ $respond-above-m: 768px !default
7
+ $respond-above-l: 992px !default
8
+ $respond-above-xl: 1382px !default
9
+ $respond-above-xxl: 1824px !default
8
10
 
9
11
  =respond-above($screen-size)
10
12
  @if $screen-size == xs
@@ -22,4 +24,7 @@ $respond-above-xl: 1382px !default
22
24
  @else if $screen-size == xl
23
25
  @media only screen and (min-width: $respond-above-xl)
24
26
  @content
27
+ @else if $screen-size == xxl
28
+ @media only screen and (min-width: $respond-above-xxl)
29
+ @content
25
30
 
@@ -1,8 +1,9 @@
1
- $respond-below-xs: 480px !default
2
- $respond-below-s: 600px !default
3
- $respond-below-m: 768px !default
4
- $respond-below-l: 992px !default
5
- $respond-below-xl: 1382px !default
1
+ $respond-below-xs: 480px !default
2
+ $respond-below-s: 600px !default
3
+ $respond-below-m: 768px !default
4
+ $respond-below-l: 992px !default
5
+ $respond-below-xl: 1382px !default
6
+ $respond-below-xxl: 1824px !default
6
7
 
7
8
  =respond-below($screen-size)
8
9
  @if $screen-size == xs
@@ -19,4 +20,7 @@ $respond-below-xl: 1382px !default
19
20
  @content
20
21
  @else if $screen-size == xl
21
22
  @media only screen and (max-width: $respond-below-xl)
23
+ @content
24
+ @else if $screen-size == xxl
25
+ @media only screen and (max-width: $respond-below-xxl)
22
26
  @content
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: compass-respond
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.0
4
+ version: 0.2.0
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2013-09-02 00:00:00.000000000 Z
12
+ date: 2014-07-24 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: sass