Saul Maddox poeticninja
poeticninja
/ example-media-query-scss-1-mixins.scss
Last active
December 19, 2015 20:09
The mixins below helps target small, medium, and large size screens for Zurb foundation 4. This also helps IE8 to be targeted. You can see IE8 being targeted in the large() mixin. It has .lt-ie9 being added on all specified large styling. This helped me a lot since IE 8 does not have media queries. Instead of targeting with a media query it targ…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @mixin small() { | |
| @media only screen and (max-width: 767px) { | |
| @content; | |
| } | |
| } | |
| @mixin medium() { | |
| @media only screen and (min-width: 768px) and (max-width: 1024px) { | |
| @content; | |
| } |
poeticninja
/ gist:5985220
Created
July 12, 2013 15:11
Here is how to add Medium to the Zurb Foundation 4 CSS framework. This makes the grid change on any html with the medium-$ class. Great for iPad and more custom sizing of website. Make sure you add this after the @import "foundation/components/global", "foundation/components/grid";.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @if $include-html-grid-classes != false { | |
| /* Styles for screens that are atleast 768px and max width 1024px */ | |
| @media #{$small} and (max-width: 1024px) { | |
| @for $i from 1 through $total-columns { | |
| .medium#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); } | |
| } | |
| @for $i from 0 through $total-columns - 1 { |
NewerOlder