Content
-
Check out version 4
This is the previous version of SFUMATO. Check out the latest!
-
What is SFUMATO?
-
Get started
-
Color
-
Form elements
-
CSS grid
-
Helpers
-
Media
-
Media queries
-
Typography
-
Unit layouts
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 enable or disable any of the pre-defined breakpoints. Fewer enabled breakpoints will yield a smaller CSS file.
The media breakpoints (and 4-letter shortcuts) included with SFUMATO include:
-
zero
zeroAll device widths from 0 and up.
-
phablet
phabTypically 400px in width; used for large phones.
-
tablet-portrait
tabpTypically 540px in width; used for tablets held in portrait orientation.
-
tablet-landscape
tablTypically 800px in width; used for tablets held in landscape orientation.
-
notebook
noteTypically 1,050px in width; used for notebook size displays.
-
desktop
deskTypically 1,152px in width; used for desktop size displays.
-
elastic
elasTypically 1,200px in width; used for large desktop displays; your web page will stop scaling at this width.
Target Microsoft Edge
SFUMATO provides a bullet-proof way to target Microsoft Edge (all versions prior to Chromium releases) with just SCSS code. So if you have to support that browser, you can style it without Javascript and perhaps even without vendor prefixes.
@include sf-microsoft-edge {
// Microsoft Edge-specific styles here
}
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: tablet-portrait) {
padding: 1.5rem;
@include sf-media($from: tablet-landscape) {
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: tablet-portrait) {
padding: 1rem;
}
@include sf-media($from: tablet-portrait) {
padding: 1.5rem;
@include sf-media($from: tablet-landscape) {
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: tablet-portrait, $upto: tablet-landscape) {
padding: 1.5rem;
}
@include sf-media($from: tablet-landscape, $upto: notebook) {
padding: 2rem;
}
@include sf-media($from: notebook) {
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: tablet-landscape) {
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
}
}