Media queries
To assist with creating scalable, responsive layouts, SFUMATO provides a media query mixin. This mixin provides a simple way to wrap blocks of SCSS code in conditional statements that allow you to easily specify SFUMATO media breakpoints.
@include sf-media( {options} ) {
// Your styles rendered only
// on the specified breakpoints
}
Media query options
-
$feature — default: false
Use a specific media query feature, to target very specific situations like portrait orientation.
Note: only one feature can be used at a time.
- portrait — target portrait orientation devices
- landscape — target landscape orientation devices
- at2x — target 2x screen resolution
- at3x — target 3x screen resolution
-
$from — default: false
Styles will be used for this breakpoint and wider.
-
$upto — default: false
Styles will be used for screen sizes up to but not including this breakpoint.
-
$type — default: screen
Styles will be used for this type of output device. These are standard CSS device type values (e.g. screen).
Media breakpoints
Media breakpoints are defined in the _config-media-breakpoints.scss file. You can edit this file to adjust the pixel measurements used for the breakpoints.
The media breakpoints codes (4-letter shortcuts) included with SFUMATO include:
-
zero— All device widths from 0px and up. -
phab— Large mobile phones; starts at 400px in width. -
tabp— Tablets in portrait orientation; starts at 540px in width. -
tabl— Tablets in landscape orientation; starts at 800px in width. -
note— Notbook-sized computers; starts at 1,152px in width. -
desk— Desktop-sized computers; starts at 1,280px in width. -
elas— Wide displays; starts at 1,440px in width; your web page will stop scaling at this width.
Examples
The following are some examples of how to implement various media query wrappers.
Standard mobile-first
This example shows a simple mobile-first scenario where mobile styles cascade until changed at wider breakpoints.
div {
padding: 1rem;
@include sf-media($from: tabp) {
padding: 1.5rem;
@include sf-media($from: tabl) {
padding: 2rem;
}
}
}
Target only mobile
This example shows a simple mobile-first scenario where mobile styles do not cascade up to wider breakpoints.
div {
@include sf-media($upto: tabp) {
padding: 1rem;
}
@include sf-media($from: tabp) {
padding: 1.5rem;
@include sf-media($from: tabl) {
padding: 2rem;
}
}
}
Target specific breakpoints
This example shows how to target a specific breakpoint without styles cascading to wider ones.
div {
@include sf-media($from: tabp, $upto: tabl) {
padding: 1.5rem;
}
@include sf-media($from: tabl, $upto: note) {
padding: 2rem;
}
@include sf-media($from: note) {
padding: 3rem;
}
}
Target hi-dpi displays
This example shows how to target a hi-dpi (e.g. Retina) display over a standard one.
div {
// Mobile devices in portrait mode
@include sf-media($feature: portrait, $upto: tabl) {
font-size: 1rem;
// Only 2x or higher dpi
@include sf-media($feature: at2x) {
font-size: 0.5rem;
}
}
}
Target printers
This example shows how to target a printer for great looking printed pages.
div {
@include sf-media($type: print) {
// Print styles here
}
}