Table of contents

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 (zero)

    All device widths from 0 and up.

  • phablet (phab)

    Typically 400px in width; used for large phones.

  • tablet-portrait (tabp)

    Typically 540px in width; used for tablets held in portrait orientation.

  • tablet-landscape (tabl)

    Typically 800px in width; used for tablets held in landscape orientation.

  • notebook (note)

    Typically 1,050px in width; used for notebook size displays.

  • desktop (desk)

    Typically 1,152px in width; used for desktop size displays.

  • elastic (elas)

    Typically 1,200px in width; used for large desktop displays; your web page will stop scaling at this width.

Target IE 11

We figured out a bullet-proof way to target Microsoft Internet Explorer 11 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-internet-explorer-11 {

                                        // IE11-specific styles here
                                    }
                                
                            

Target Microsoft Edge

As with Internet Explorer 11, we also figured out a bullet-proof way to target Microsoft Edge (all versions) 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
                                        }
                                    }