Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Add support for using both min- and max- in breakpoint()

  • Loading branch information...
commit 929246723657c0b84d314e2d710310e613cb30b0 1 parent de31a9d
@kaishin kaishin authored
Showing with 41 additions and 2 deletions.
  1. +23 −1 README.md
  2. +18 −1 grid/_grid.scss
View
24 README.md
@@ -238,19 +238,41 @@ For convenience, you can create a list variable to hold your media context (brea
}
}
+##### Example 5
+
+ .my-class {
+ @include breakpoint(min-width 481px max-width 761px) {
+ font-size: 1.2em;
+ }
+ }
+
+ // Compiled CSS
+
+ @media screen and (min-width: 481px) and (max-width: 761px) {
+ .my-class {
+ font-size: 1.2em;
+ }
+ }
+
+You can also use two ```@media``` features at the same time.
+
Here is a summary of possible argument combinations:
// YAY
@include breakpoint(480px);
@include breakpoint(max-width 480px);
+ @include breakpoint(min-width 320px max-width 480px);
@include breakpoint(480px, 4);
@include breakpoint(max-width 480px, 4);
+ @include breakpoint(min-width 320px max-width 480px, 4);
@include breakpoint(max-width 480px 4); // Shorthand syntax
+ @include breakpoint(min-width 3200px max-width 480px 4); // Shorthand syntax
// NAY
@include breakpoint(480px 4);
@include breakpoint(max-width 4);
@include breakpoint(max-width, 4);
+ @include breakpoint(320px max-width 480px);
### Changing the defaults
@@ -275,7 +297,7 @@ Credits
![thoughtbot](http://thoughtbot.com/images/tm/logo.png)
-Bourbon is maintained and funded by [thoughtbot, inc](http://thoughtbot.com/community). Tweet your questions or suggestions at [Kyle](https://twitter.com/kylefiedler) / [Reda](https://twitter.com/kaishin).
+Bourbon is maintained and funded by [thoughtbot, inc](http://thoughtbot.com/community). Tweet your questions or suggestions at [@kaishin](https://twitter.com/kaishin) and [@kylefiedler](https://twitter.com/kylefiedler).
License
===
View
19 grid/_grid.scss
@@ -145,8 +145,25 @@ $fg-max-width: $max-width;
}
}
+ @else if length($query) == 4 {
+ @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
+ $default-grid-columns: $grid-columns;
+ $grid-columns: $total-columns;
+ @content;
+ $grid-columns: $default-grid-columns;
+ }
+ }
+
+ @else if length($query) == 5 {
+ @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
+ $default-grid-columns: $grid-columns;
+ $grid-columns: nth($query, 5);
+ @content;
+ $grid-columns: $default-grid-columns;
+ }
+ }
+
@else {
@warn "Wrong number of arguments for breakpoint(). Read the documentation for more details.";
}
}
-
Please sign in to comment.
Something went wrong with that request. Please try again.