breakpoint 0.1 → 0.2

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 (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