breakpoint 0.1 → 0.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (6) hide show
  1. data/CHANGELOG.markdown +9 -0
  2. data/README.markdown +71 -36
  3. data/lib/breakpoint.rb +3 -2
  4. data/stylesheets/_breakpoint.scss +165 -0
  5. metadata +7 -5
  6. data/stylesheets/_breakpoint.sass +0 -68
data/CHANGELOG.markdown CHANGED
@@ -1,4 +1,13 @@
1
1
  # Changelog
2
2
 
3
+ ## 0.2 - May 24, 2012
4
+ * Converted from Sass to SCSS
5
+ * Converted README examples from Sass to SCSS
6
+ * Added ability to do min/max easily with any valid feature
7
+ * Added prefixing for "device-pixel-ratio" feature for the three implementations (-webkit, -moz, -o) as well as a standard version for future friendliness
8
+ * -moz's min/max is different than -webkit or -o, so prefixed differently
9
+ * Opera is strange and needs its DPR in a ratio instead of a floating point number, so requires the fraction rubygem and has a numerator/denominator function to accommodate.
10
+ * Added ability to have single feature/value input be either have feature first or second
11
+
3
12
  ## 0.1 - May 22, 2012
4
13
  * extract breakpoint from ssurvival kit to this gem
data/README.markdown CHANGED
@@ -6,20 +6,24 @@
6
6
  ## Setup
7
7
 
8
8
  ```sass
9
+ @import "breakpoint"
10
+
9
11
  // create $breakpoint variables like so
10
12
  // assume $breakpoint-default-feature if only a number
11
13
  $breakpoint1: 500px
12
14
  $breakpoint2: 30em
13
15
  // set min-width/max-width if both values are numbers
14
16
  $breakpoint3: 500px 700px
17
+ // set min/max of feature if there are two numbers and a feature
18
+ $breakpoint4: 300px 700px height
15
19
  // if one value is a string, assume a feature/value pair
16
- $breakpoint4: min-width 700px
17
- $breakpoint5: max-width 700px
20
+ $breakpoint5: min-width 700px
21
+ $breakpoint6: max-width 700px
18
22
  // for multidimensional lists, assume each item is a feature value pair
19
- $breakpoint6: max-width 700px, orientation portrait
23
+ $breakpoint7: max-width 700px, orientation portrait
20
24
  // handle one-sided features (ie. monochrome)
21
- $breakpoint7: max-width 700px, orientation portrait, monochrome
22
- $breakpoint8: monochrome
25
+ $breakpoint8: max-width 700px, orientation portrait, monochrome
26
+ $breakpoint9: monochrome
23
27
  ```
24
28
 
25
29
 
@@ -27,37 +31,62 @@ $breakpoint8: monochrome
27
31
 
28
32
  Call the mixin and pass one of your breakpoint variables. You can also call it with a la carte arguments.
29
33
 
30
- ```sass
31
- .foo
32
- +breakpoint($breakpoint1)
33
- content: 'foo'
34
- .bar
35
- +breakpoint($breakpoint2)
36
- content: 'bar'
37
- .baz
38
- +breakpoint($breakpoint3)
39
- content: 'baz'
40
- .omg
41
- +breakpoint($breakpoint4)
42
- content: 'omg'
43
- .wtf
44
- +breakpoint($breakpoint5)
45
- content: 'wtf'
46
- .bbq
47
- +breakpoint($breakpoint6)
48
- content: 'bbq'
49
- .zztop
50
- +breakpoint($breakpoint7)
51
- content: 'zztop'
52
- .elp
53
- +breakpoint($breakpoint1, print)
54
- content: 'elp'
55
- .csny
56
- +breakpoint($breakpoint8)
57
- content: 'csny'
58
- .rhcp
59
- +breakpoint(30em 40em)
60
- content: 'rhcp'
34
+ ```scss
35
+ .foo {
36
+ @include breakpoint($breakpoint1) {
37
+ content: 'foo';
38
+ }
39
+ }
40
+ .bar {
41
+ @include breakpoint($breakpoint2) {
42
+ content: 'bar';
43
+ }
44
+ }
45
+ .baz {
46
+ @include breakpoint($breakpoint3) {
47
+ content: 'baz';
48
+ }
49
+ }
50
+ .tgif {
51
+ @include breakpoint($breakpoint4) {
52
+ content: 'tgif';
53
+ }
54
+ }
55
+ .omg {
56
+ @include breakpoint($breakpoint5) {
57
+ content: 'omg';
58
+ }
59
+ }
60
+ .wtf {
61
+ @include breakpoint($breakpoint6) {
62
+ content: 'wtf';
63
+ }
64
+ }
65
+ .bbq {
66
+ @include breakpoint($breakpoint7) {
67
+ content: 'bbq';
68
+ }
69
+ }
70
+ .zztop {
71
+ @include breakpoint($breakpoint8) {
72
+ content: 'zztop';
73
+ }
74
+ }
75
+ .elp {
76
+ @include breakpoint($breakpoint1, print) {
77
+ content: 'elp';
78
+ }
79
+ }
80
+ .csny {
81
+ @include breakpoint($breakpoint9) {
82
+ content: 'csny';
83
+ }
84
+ }
85
+ .rhcp {
86
+ @include breakpoint(30em 40em) {
87
+ content: 'rhcp';
88
+ }
89
+ }
61
90
  ```
62
91
 
63
92
  Example generated CSS
@@ -81,6 +110,12 @@ Example generated CSS
81
110
  }
82
111
  }
83
112
 
113
+ @media screen and (min-height: 300px) and (max-height: 700px) {
114
+ .tgif {
115
+ content: "tgif";
116
+ }
117
+ }
118
+
84
119
  @media screen and (min-width: 700px) {
85
120
  .omg {
86
121
  content: "omg";
data/lib/breakpoint.rb CHANGED
@@ -1,9 +1,10 @@
1
1
  require 'compass'
2
+
2
3
  Compass::Frameworks.register("breakpoint", :path => "#{File.dirname(__FILE__)}/..")
3
4
 
4
5
  module Breakpoint
5
6
 
6
- VERSION = "0.1"
7
- DATE = "2012-05-22"
7
+ VERSION = "0.2"
8
+ DATE = "2012-05-24"
8
9
 
9
10
  end
data/stylesheets/_breakpoint.scss ADDED
@@ -0,0 +1,165 @@
1
+ // experimental - depends on Sass 3.2 or higher
2
+ // define your own breakpoints
3
+ // styles nested in the mixin will pass thru in @content
4
+ // resist the urge to settle on common device sizes
5
+ // http://marcdrummond.com/responsive-web-design/2011/12/29/default-breakpoints-are-dead
6
+
7
+ ////////////////////////////
8
+ // BREAKPOINT
9
+ // breakpoint($breakpoint, $media: 'screen')
10
+ //
11
+ // // create $breakpoint variables like so
12
+ // // assume $breakpoint-default-feature if only a number
13
+ // $breakpoint1: 500px
14
+ // $breakpoint2: 30em
15
+ // // set min-width/max-width if both values are numbers
16
+ // $breakpoint3: 500px 700px
17
+ // // set min/max of feature if there are two numbers
18
+ // $breakpoint4: 400px 700px 'height'
19
+ // // if one value is a string, assume a feature/value pair
20
+ // $breakpoint5: min-width 700px
21
+ // $breakpoint6: max-width 700px
22
+ // // for multidimensional lists, assume each item is a feature/value pair
23
+ // $breakpoint7: max-width 700px, orientation portrait
24
+ // // handle one-sided features (ie. monochrome)
25
+ // $breakpoint8: max-width 700px, orientation portrait, monochrome
26
+ // $breakpoint9: monochrome
27
+ ////////////////////////////
28
+
29
+ $breakpoint-default-feature: min-width !default;
30
+
31
+ @mixin breakpoint($breakpoint, $media: "screen") {
32
+ // Feature/Value Placeholders
33
+ $feature: false !default;
34
+ $value: false !default;
35
+ // Prefixed Queries
36
+ $webkit-query-string: false !default;
37
+ $moz-query-string: false !default;
38
+ $ms-query-string: false !default;
39
+ $o-query-string: false !default;
40
+ // @debug $breakpoint;
41
+ // initialize string
42
+ $query-string: "#{$media} ";
43
+ @if type-of($breakpoint) == number {
44
+ // assume max-width if only a number
45
+ $query-string: breakpoint-concatenate($query-string, $breakpoint);
46
+ }
47
+ @if type-of($breakpoint) == string {
48
+ // handle one-sided features (ie. monochrome)
49
+ $query-string: breakpoint-concatenate($query-string, $breakpoint, false);
50
+ }
51
+ @else if type-of($breakpoint) == list {
52
+ // set min/max if both values are numbers
53
+ @if type-of(nth($breakpoint, 1)) == number and type-of(nth($breakpoint, 2)) == number {
54
+ // Optionally pass in 3rd parameter
55
+ @if length($breakpoint) == 3 and breakpoint-min-max(nth($breakpoint, 3)) {
56
+ // Device Pixel Ratio is fracking weird, need to handle it three different ways
57
+ @if nth($breakpoint, 3) == 'device-pixel-ratio' {
58
+ // Webkit
59
+ $webkit-query-string: breakpoint-concatenate($query-string, nth($breakpoint, 1), "-webkit-min-#{nth($breakpoint, 3)}");
60
+ $webkit-query-string: breakpoint-concatenate($webkit-query-string, nth($breakpoint, 2), "-webkit-min-#{nth($breakpoint, 3)}");
61
+ // Mozilla
62
+ $moz-query-string: breakpoint-concatenate($query-string, nth($breakpoint, 1), "min--moz-#{nth($breakpoint, 3)}");
63
+ $moz-query-string: breakpoint-concatenate($moz-query-string, nth($breakpoint, 2), "max--moz-#{nth($breakpoint, 3)}");
64
+ // Opera
65
+ // remove opera support for now.
66
+ // $o-query-string: breakpoint-concatenate($query-string, '#{numerator(nth($breakpoint, 1))}/#{denominator(nth($breakpoint, 1))}', "-o-min-#{nth($breakpoint, 3)}");
67
+ // $o-query-string: breakpoint-concatenate($o-query-string, '#{numerator(nth($breakpoint, 2))}/#{denominator(nth($breakpoint, 2))}', "-o-max-#{nth($breakpoint, 3)}");
68
+ }
69
+ // Min/Max for given
70
+ $query-string: breakpoint-concatenate($query-string, nth($breakpoint, 1), "min-#{nth($breakpoint, 3)}");
71
+ $query-string: breakpoint-concatenate($query-string, nth($breakpoint, 2), "max-#{nth($breakpoint, 3)}");
72
+ }
73
+ @else {
74
+ @if length($breakpoint) == 3 and breakpoint-min-max(nth($breakpoint, 3)) != true {
75
+ @warn '#{nth($breakpoint, 3)} does not accept a min/max value.'
76
+ }
77
+ $query-string: breakpoint-concatenate($query-string, nth($breakpoint, 1), "min-width");
78
+ $query-string: breakpoint-concatenate($query-string, nth($breakpoint, 2), "max-width");
79
+ }
80
+
81
+
82
+ }
83
+ @else if type-of(nth($breakpoint, 1)) == string or type-of(nth($breakpoint, 2)) == string {
84
+ // if one value is a string, assume a feature/value pair
85
+ // Because we can have either the first or second option be the feature, we switch on it.
86
+ @if type-of(nth($breakpoint, 1)) == string {
87
+ $feature: nth($breakpoint, 1);
88
+ $value: nth($breakpoint, 2);
89
+ }
90
+ @else if type-of(nth($breakpoint, 2)) == string {
91
+ $feature: nth($breakpoint, 2);
92
+ $value: nth($breakpoint, 1);
93
+ }
94
+ // If the feature is device-pixel-ratio, it's gonna be weird
95
+ @if $feature == 'device-pixel-ratio' {
96
+ // Webkit
97
+ $webkit-query-string: breakpoint-concatenate($query-string, $value, "-webkit-#{$feature}");
98
+ // Mozilla
99
+ $moz-query-string: breakpoint-concatenate($query-string, $value, "-moz-#{$feature}");
100
+ // Opera
101
+ // remove opera support for now.
102
+ // $o-query-string: breakpoint-concatenate($query-string, '#{numerator($value)}/#{denominator($value)}', "-o-#{$feature}");
103
+ }
104
+ $query-string: breakpoint-concatenate($query-string, $value, $feature);
105
+ }
106
+ @else if type-of(nth($breakpoint, 1)) == list {
107
+ // for multidimensional lists, assume each item is a feature value pair
108
+ @each $item in $breakpoint {
109
+ @if type-of($item) == list {
110
+ // $query-string: #{$query-string}unquote("and (#{nth($item, 1)}: #{nth($item, 2)}) ")
111
+ $query-string: breakpoint-concatenate($query-string, nth($item, 2), nth($item, 1));
112
+ }
113
+ @else {
114
+ // handle one-sided features (ie. monochrome)
115
+ $query-string: breakpoint-concatenate($query-string, $item, false);
116
+ }
117
+ }
118
+ }
119
+ }
120
+ // write out the media query
121
+ @media #{$query-string} {
122
+ @content;
123
+ }
124
+ @if $webkit-query-string {
125
+ @media #{$webkit-query-string} {
126
+ @content;
127
+ }
128
+ }
129
+ @if $moz-query-string {
130
+ @media #{$moz-query-string} {
131
+ @content;
132
+ }
133
+ }
134
+ @if $ms-query-string {
135
+ @media #{$ms-query-string} {
136
+ @content;
137
+ }
138
+ }
139
+ // remove opera support for now.
140
+ // @if $o-query-string {
141
+ // @media #{$o-query-string} {
142
+ // @content;
143
+ // }
144
+ // }
145
+ }
146
+
147
+ @function breakpoint-concatenate($query-string, $new-value, $feature: $breakpoint-default-feature) {
148
+ $new-string: "";
149
+ @if $feature != false {
150
+ $new-string: #{$query-string}unquote("and (#{$feature}: #{$new-value}) ");
151
+ }
152
+ @else {
153
+ $new-string: #{$query-string}unquote("and (#{$new-value}) ");
154
+ }
155
+ @return $new-string;
156
+ }
157
+
158
+ @function breakpoint-min-max($feature) {
159
+ @if $feature == 'color' or $feature == 'color-index' or $feature == 'aspect-ratio' or $feature == 'device-height' or $feature == 'device-width' or $feature == 'height' or $feature == 'monochrome' or $feature == 'resolution' or $feature == 'width' or $feature == 'device-pixel-ratio' {
160
+ @return true;
161
+ }
162
+ @else {
163
+ @return false;
164
+ }
165
+ }
metadata CHANGED
@@ -1,20 +1,21 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: breakpoint
3
3
  version: !ruby/object:Gem::Version
4
- hash: 9
4
+ hash: 15
5
5
  prerelease:
6
6
  segments:
7
7
  - 0
8
- - 1
9
- version: "0.1"
8
+ - 2
9
+ version: "0.2"
10
10
  platform: ruby
11
11
  authors:
12
12
  - Mason Wendell
13
+ - Sam Richard
13
14
  autorequire:
14
15
  bindir: bin
15
16
  cert_chain: []
16
17
 
17
- date: 2012-05-22 00:00:00 Z
18
+ date: 2012-05-24 00:00:00 Z
18
19
  dependencies:
19
20
  - !ruby/object:Gem::Dependency
20
21
  name: compass
@@ -35,6 +36,7 @@ dependencies:
35
36
  description: Really simple media queries in Sass
36
37
  email:
37
38
  - mason@zivtech.com
39
+ - sam@snug.ug
38
40
  executables: []
39
41
 
40
42
  extensions: []
@@ -45,7 +47,7 @@ files:
45
47
  - README.markdown
46
48
  - CHANGELOG.markdown
47
49
  - lib/breakpoint.rb
48
- - stylesheets/_breakpoint.sass
50
+ - stylesheets/_breakpoint.scss
49
51
  homepage: http://thecodingdesigner.com
50
52
  licenses: []
51
53
 
data/stylesheets/_breakpoint.sass DELETED
@@ -1,68 +0,0 @@
1
- // experimental - depends on Sass 3.2 or higher
2
- define your own breakpoints
3
- styles nested in the mixin will pass thru in @content
4
- resist the urge to settle on common device sizes
5
- http://marcdrummond.com/responsive-web-design/2011/12/29/default-breakpoints-are-dead
6
-
7
-
8
- ////////////////////////////
9
- // BREAKPOINT
10
- // breakpoint($breakpoint, $media: 'screen')
11
- //
12
- // // create $breakpoint variables like so
13
- // // assume $breakpoint-default-feature if only a number
14
- // $breakpoint1: 500px
15
- // $breakpoint2: 30em
16
- // // set min-width/max-width if both values are numbers
17
- // $breakpoint3: 500px 700px
18
- // // if one value is a string, assume a feature/value pair
19
- // $breakpoint4: min-width 700px
20
- // $breakpoint5: max-width 700px
21
- // // for multidimensional lists, assume each item is a feature/value pair
22
- // $breakpoint6: max-width 700px, orientation portrait
23
- // // handle one-sided features (ie. monochrome)
24
- // $breakpoint7: max-width 700px, orientation portrait, monochrome
25
- // $breakpoint8: monochrome
26
- ////////////////////////////
27
-
28
- $breakpoint-default-feature: min-width !default
29
-
30
- @function breakpoint-concatenate($query-string, $new-value, $feature: $breakpoint-default-feature)
31
- $new-string: ''
32
- @if $feature != false
33
- $new-string: #{$query-string}unquote("and (#{$feature}: #{$new-value}) ")
34
- @else
35
- $new-string: #{$query-string}unquote("and (#{$new-value}) ")
36
- @return $new-string
37
-
38
- =breakpoint($breakpoint, $media: 'screen')
39
- // initialize string
40
- $query-string: '#{$media} '
41
- @if type-of($breakpoint) == number
42
- // assume max-width if only a number
43
- $query-string: breakpoint-concatenate($query-string, $breakpoint)
44
- @if type-of($breakpoint) == string
45
- // handle one-sided features (ie. monochrome)
46
- $query-string: breakpoint-concatenate($query-string, $breakpoint, false)
47
- @else if type-of($breakpoint) == list
48
- @if (type-of(nth($breakpoint, 1)) == number) and (type-of(nth($breakpoint, 2)) == number)
49
- // set min/max if both values are numbers
50
- // @if $modular-scale-loaded == true
51
- // $breakpoint: sort-list($breakpoint)
52
- $query-string: breakpoint-concatenate($query-string, nth($breakpoint, 1), 'min-width')
53
- $query-string: breakpoint-concatenate($query-string, nth($breakpoint, 2), 'max-width')
54
- @else if (type-of(nth($breakpoint, 1)) == string)
55
- // if one value is a string, assume a feature/value pair
56
- $query-string: breakpoint-concatenate($query-string, nth($breakpoint, 2), nth($breakpoint, 1))
57
- @else if (type-of(nth($breakpoint, 1)) == list)
58
- // for multidimensional lists, assume each item is a feature value pair
59
- @each $item in $breakpoint
60
- @if type-of($item) == list
61
- // $query-string: #{$query-string}unquote("and (#{nth($item, 1)}: #{nth($item, 2)}) ")
62
- $query-string: breakpoint-concatenate($query-string, nth($item, 2), nth($item, 1))
63
- @else
64
- // handle one-sided features (ie. monochrome)
65
- $query-string: breakpoint-concatenate($query-string, $item, false)
66
- // write out the media query
67
- @media #{$query-string}
68
- @content