Permalink
Browse files

Adds media types support for media queries.

This enables the possibility to target different media platforms (e.g. screen | print).
  • Loading branch information...
gnpfonseca committed Jun 5, 2014
1 parent 53905b3 commit 0bf08b641fbfc0951e4b857214fc19b0cb684a30
Showing with 99 additions and 46 deletions.
  1. +6 −5 src/sass/config/_grid.scss
  2. +44 −17 src/sass/mixins/_flex-grid.scss
  3. +49 −24 src/sass/mixins/_grid.scss
View
@@ -12,6 +12,7 @@ $grid-max-width: 1440px !default;
*
* Here's an example: ( class-name-prefix, minimum-width, maximum-width, gutter-width, no-media-query).
*
* media: media type.
* class-name-prefix: this is the prefix used in tons of inks classes i.e.: large-100, small-40, etc.
* minimum-width: (pixels|null) the minimum width for the breakpoint
* maximum-width: (pixels|null) the maximum width for the breakpoint
@@ -23,9 +24,9 @@ $grid-max-width: 1440px !default;
*/
$grid-breakpoints: (
('xlarge', 1261px, null, 2em, 1.08em, false),
('large', 961px, 1260px, 1.75em, 1.05em, true),
('medium', 641px, 960px, 1.5em, 1em, false),
('small', 321px, 640px, 1.25em, .98em, false),
('tiny', null, 320px, 1em, .97em, false)
('screen', 'xlarge', null, null, 2em, 1.08em, false),
('screen', 'large', 961px, 1260px, 1.75em, 1.05em, true),
('screen', 'medium', 641px, 960px, 1.5em, 1em, false),
('screen', 'small', 321px, 640px, 1.25em, .98em, false),
('screen', 'tiny', null, 320px, 1em, .97em, false)
);
@@ -639,15 +639,16 @@
@each $breakpoint in $breakpoints {
$class-name: nth($breakpoint,1);
$minimum-width: nth($breakpoint,2);
$maximum-width: nth($breakpoint,3);
$gutter-width: nth($breakpoint,4);
$base-font-size: nth($breakpoint,5);
$no-media-query: nth($breakpoint,6);
$media: nth($breakpoint,1);
$class-name: nth($breakpoint,2);
$minimum-width: nth($breakpoint,3);
$maximum-width: nth($breakpoint,4);
$gutter-width: nth($breakpoint,5);
$base-font-size: nth($breakpoint,6);
$no-media-query: nth($breakpoint,7);
@if $minimum-width and not $maximum-width {
@media screen and (min-width: $minimum-width) {
@media #{$media} and (min-width: $minimum-width) {
html {
&:after {
content: '{"name":"#{$class-name}", "size":{"min":"#{$minimum-width}","max":"#{$maximum-width}"}}';
@@ -659,7 +660,7 @@
}
@if $minimum-width and $maximum-width {
@media screen and (min-width: $minimum-width) and (max-width: $maximum-width) {
@media #{$media} and (min-width: $minimum-width) and (max-width: $maximum-width) {
html {
&:after {
content: '{"name":"#{$class-name}", "size":{"min":"#{$minimum-width}","max":"#{$maximum-width}"}}';
@@ -671,7 +672,19 @@
}
@if not $minimum-width and $maximum-width {
@media screen and (max-width: $maximum-width) {
@media #{$media} and (max-width: $maximum-width) {
html {
&:after {
content: '{"name":"#{$class-name}", "size":{"min":"#{$minimum-width}","max":"#{$maximum-width}"}}';
display: none;
}
font-size: $base-font-size;
}
}
}
@if not $minimum-width and not $maximum-width {
@media #{$media} {
html {
&:after {
content: '{"name":"#{$class-name}", "size":{"min":"#{$minimum-width}","max":"#{$maximum-width}"}}';
@@ -806,15 +819,16 @@
@each $breakpoint in $breakpoints {
$class-name: nth($breakpoint,1);
$minimum-width: nth($breakpoint,2);
$maximum-width: nth($breakpoint,3);
$gutter-width: nth($breakpoint,4);
$no-media-query: nth($breakpoint,6);
$media: nth($breakpoint,1);
$class-name: nth($breakpoint,2);
$minimum-width: nth($breakpoint,3);
$maximum-width: nth($breakpoint,5);
$gutter-width: nth($breakpoint,6);
$no-media-query: nth($breakpoint,7);
$all-class-names: ".#{$class-name}, #{$all-class-names}";
@if $minimum-width and not $maximum-width {
@media screen and (min-width: $minimum-width) {
@media #{$media} and (min-width: $minimum-width) {
@include generate-grid-container($grid-class-name, $gutter-width);
@include generate-flex-column-group-gutters($class-name,$gutter-width);
@include generate-flex-grid-divisions($class-name);
@@ -827,7 +841,7 @@
}
@if $minimum-width and $maximum-width {
@media screen and (min-width: $minimum-width) and (max-width: $maximum-width) {
@media #{$media} and (min-width: $minimum-width) and (max-width: $maximum-width) {
@include generate-grid-container($grid-class-name, $gutter-width);
@include generate-flex-column-group-gutters($class-name,$gutter-width);
@include generate-flex-grid-divisions($class-name);
@@ -840,7 +854,20 @@
}
@if not $minimum-width and $maximum-width {
@media screen and (max-width: $maximum-width) {
@media #{$media} and (max-width: $maximum-width) {
@include generate-grid-container($grid-class-name, $gutter-width);
@include generate-flex-column-group-gutters($class-name,$gutter-width);
@include generate-flex-grid-divisions($class-name);
@include generate-flex-column-group($class-name);
@include grid-flex-order($class-name);
@include generate-flex-grid-utils($class-name);
@include generate-grid-helper-classes($class-name,$gutter-width);
@include generate-visibility-classes($class-name);
}
}
@if not $minimum-width and not $maximum-width {
@media #{$media} {
@include generate-grid-container($grid-class-name, $gutter-width);
@include generate-flex-column-group-gutters($class-name,$gutter-width);
@include generate-flex-grid-divisions($class-name);
View
@@ -623,15 +623,16 @@
@each $breakpoint in $breakpoints {
$class-name: nth($breakpoint,1);
$minimum-width: nth($breakpoint,2);
$maximum-width: nth($breakpoint,3);
$gutter-width: nth($breakpoint,4);
$base-font-size: nth($breakpoint,5);
$no-media-query: nth($breakpoint,6);
$media: nth($breakpoint,1);
$class-name: nth($breakpoint,2);
$minimum-width: nth($breakpoint,3);
$maximum-width: nth($breakpoint,4);
$gutter-width: nth($breakpoint,5);
$base-font-size: nth($breakpoint,6);
$no-media-query: nth($breakpoint,7);
@if $minimum-width and not $maximum-width {
@media screen and (min-width: $minimum-width) {
@media #{$media} and (min-width: $minimum-width) {
html {
&:after {
content: '{"name":"#{$class-name}", "size":{"min":"#{$minimum-width}","max":"#{$maximum-width}"}}';
@@ -643,7 +644,7 @@
}
@if $minimum-width and $maximum-width {
@media screen and (min-width: $minimum-width) and (max-width: $maximum-width) {
@media #{$media} and (min-width: $minimum-width) and (max-width: $maximum-width) {
html {
&:after {
content: '{"name":"#{$class-name}", "size":{"min":"#{$minimum-width}","max":"#{$maximum-width}"}}';
@@ -655,7 +656,19 @@
}
@if not $minimum-width and $maximum-width {
@media screen and (max-width: $maximum-width) {
@media #{$media} and (max-width: $maximum-width) {
html {
&:after {
content: '{"name":"#{$class-name}", "size":{"min":"#{$minimum-width}","max":"#{$maximum-width}"}}';
display: none;
}
font-size: $base-font-size;
}
}
}
@if not $minimum-width and not $maximum-width {
@media #{$media} {
html {
&:after {
content: '{"name":"#{$class-name}", "size":{"min":"#{$minimum-width}","max":"#{$maximum-width}"}}';
@@ -678,12 +691,13 @@
@each $breakpoint in $breakpoints {
$class-name: nth($breakpoint,1);
$minimum-width: nth($breakpoint,2);
$maximum-width: nth($breakpoint,3);
$gutter-width: nth($breakpoint,4);
$base-font-size: nth($breakpoint,5);
$no-media-query: nth($breakpoint,6);
$media: nth($breakpoint,1);
$class-name: nth($breakpoint,2);
$minimum-width: nth($breakpoint,3);
$maximum-width: nth($breakpoint,4);
$gutter-width: nth($breakpoint,5);
$base-font-size: nth($breakpoint,6);
$no-media-query: nth($breakpoint,7);
@if $no-media-query {
@include generate-grid-container($grid-class-name, $gutter-width);
@@ -707,15 +721,16 @@
@each $breakpoint in $breakpoints {
$class-name: nth($breakpoint,1);
$minimum-width: nth($breakpoint,2);
$maximum-width: nth($breakpoint,3);
$gutter-width: nth($breakpoint,4);
$base-font-size: nth($breakpoint,5);
$no-media-query: nth($breakpoint,6);
$media: nth($breakpoint,1);
$class-name: nth($breakpoint,2);
$minimum-width: nth($breakpoint,3);
$maximum-width: nth($breakpoint,4);
$gutter-width: nth($breakpoint,5);
$base-font-size: nth($breakpoint,6);
$no-media-query: nth($breakpoint,7);
@if $minimum-width and not $maximum-width {
@media screen and (min-width: $minimum-width) {
@media #{$media} and (min-width: $minimum-width) {
@include generate-grid-container($grid-class-name, $gutter-width);
@include generate-grid-divisions($class-name);
@include generate-column-group-container($gutter-width,$class-name);
@@ -725,7 +740,7 @@
}
@if $minimum-width and $maximum-width {
@media screen and (min-width: $minimum-width) and (max-width: $maximum-width) {
@media #{$media} and (min-width: $minimum-width) and (max-width: $maximum-width) {
@include generate-grid-container($grid-class-name, $gutter-width);
@include generate-grid-divisions($class-name);
@include generate-column-group-container($gutter-width,$class-name);
@@ -735,7 +750,17 @@
}
@if not $minimum-width and $maximum-width {
@media screen and (max-width: $maximum-width) {
@media #{$media} and (max-width: $maximum-width) {
@include generate-grid-container($grid-class-name, $gutter-width);
@include generate-grid-divisions($class-name);
@include generate-column-group-container($gutter-width,$class-name);
@include generate-grid-helper-classes($class-name,$gutter-width);
@include generate-visibility-classes($class-name);
}
}
@if not $minimum-width and not $maximum-width {
@media #{$media} {
@include generate-grid-container($grid-class-name, $gutter-width);
@include generate-grid-divisions($class-name);
@include generate-column-group-container($gutter-width,$class-name);

0 comments on commit 0bf08b6

Please sign in to comment.