Skip to content

Instantly share code, notes, and snippets.

@jofralogo
Last active January 1, 2016 00:39
Show Gist options
  • Save jofralogo/8067716 to your computer and use it in GitHub Desktop.
Save jofralogo/8067716 to your computer and use it in GitHub Desktop.
Mixins for responsive properties for Foundation 5: Like a shorthand to play with media-queries.
/*
++ MIXIN: Zurb Foundation 5 Responsive CSS Property ++
Define any CSS property and their values for phone, tablet and desktop.
i.e.:
@include rprop(margin-top,10px,20px,30px);
Will render:
Mobile => margin-top: 10px
Tablet => margin-top: 20px
Desktop => margin-top: 30px
Note: The property (obviously) and the three values are required.
*/
/* FROM FOUNDATION 5 _settings.scss:
// $small-range: (0em, 40em); /* 0, 640px */
// $medium-range: (40.063em, 64em); /* 641px, 1024px */
// $large-range: (64.063em, 90em); /* 1025px, 1440px */
// $xlarge-range: (90.063em, 120em); /* 1441px, 1920px */
// $xxlarge-range: (120.063em); /* 1921px */
@import "foundation/components/grid";
@mixin rprop(
$prop,$phone-value:"",
$tablet-value:"",
$desktop-value:""
)
{
#{$prop}: $phone-value;
@media #{$medium-up} {#{$prop}: $tablet-value;}
@media #{$large-up} {#{$prop}: $desktop-value;}
}
/*
I've been using 'rprop' for a while and it cover most cases that I needed but I created another mixin called 'rpropX' for an extended control and play with longest screen size ranges.
*/
@function nullCheck ($value) {
@if $value == n or $value == _ {
@return null;
}
@else {
@return $value;
}
}
@mixin rpropX($prop,$small-value,$medium-value,$large-value,$xlarge-value,$xxlarge-value){
@if nullCheck($small-value) != null { #{$prop}: $small-value; }
@if nullCheck($medium-value) != null { @media #{$medium-up} {#{$prop}: $medium-value;}}
@if nullCheck($large-value) != null { @media #{$large-up} {#{$prop}: $large-value;}}
@if nullCheck($xlarge-value) != null { @media #{$xlarge-up} {#{$prop}: $xlarge-value;}}
@if nullCheck($xxlarge-value) != null { @media #{$xxlarge-up} {#{$prop}: $xxlarge-value;}}
}
/*
"Who is who" in 'rpropX':
- $prop = The CSS property [REQUIRED, obviously]
- $small-value = Value from 0px.
- $medium-value = Value for at least 641px (40.063em).
- $large-value = Value for at least 1025px (64.063em).
- $xlarge-value = Value for at least 1441px (90.063em) .
- $xxlarge-value = Value for at least 1921px (120.063em).
Example:
p.test{
@include rpropX(font-size,10px,20px,30px,40px,50px)
}
This will produce a large set of CSS Media-Queries that, in short will render:
- font-size: 10px for small
- font-size: 20px for medium
- font-size: 30px for large
- font-size: 40px for xlarge
- font-size: 50px for xxlarge
- If you don't want to set a value for a specific media-query screen range you can set it to "null", "_" or "n" (it must have a value, don't leave it empty). In that case, that screen range will inherit the property of its closest smaller range.
Example:
p.test{
@include rpropX(font-size,10px,_,30px,_,_) // you can use "null" or "n" (without quotation) too.
}
This time, the mixin will produce this lean CSS:
p.test{font-size:10px} // for every screen size range
@media only screen and (min-width: 64.063em){ // overrides for large scren size range and up
p.test{
font-size:30px
}
}
*/
/*
Do you want to define a property for a specific screen size only? No problem
Example:
#example-block{
font-size: 22px; // 22px for every screen-size
@mixin smallprop(font-size,16px); // 16px for medium-range screens
}
Note: Maybe obvious but remember to place the mixin AFTER the "all-screen-sizes-value" (font-size: 22px) in order to override it.
*/
@mixin smallprop($prop,$value:""){
@media #{$small-only} {#{$prop}: $value;}
}
@mixin mediumprop($prop,$value:""){
@media #{$medium-only} {#{$prop}: $value;}
}
@mixin largeprop($prop,$value:""){
@media #{$large-only} {#{$prop}: $value;}
}
@mixin xlargeprop($prop,$value:""){
@media #{$xlarge-only} {#{$prop}: $value;}
}
@mixin xxlargeprop($prop,$value:""){
@media #{$xxlarge-only} {#{$prop}: $value;}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment