@fiad/scss-responsive-context

CONCEPT

In responsive development there's often a very common and annoying problem: you receive a single layout artboard for mobile and a single one for desktop, but you have to guarantee the application to be optimized across a wider range of device scenarios. Moreover, the natural sizes of layout artboards are usually bigger than the smallest breakpoint they're served from, and this may cause rendering issues, lot of reworks and... headache!

So, the idea is to provide an auto-scaling system that, starting from layout natural sizes, applies automatic proportions over a larger range of breakpoints in order to preserve layout ratios without introducing new specific rules.

USAGE

The system is based on font-size context and you can easily implement it by following two simple steps:

1. CREATE THE CONTEXT

A global responsive context can be implemented like follows:

html {
    @include responsiveContext(
        $mobileSize,
        $desktopSize,
        $mobileBreakpoints,
        $desktopBreakpoints
    );
}

where $mobileSize and $desktopSize are the natural widths of mobile and desktop layout boards, while $mobileBreakpoints and $desktopBreakpoints are the lists of supported breakpoints for each layout target.

By including the mixin with no arguments, it will falls back to the following default values:

$mobileSize: 320,
$desktopSize: 1024,
$mobileBreakpoints: (320, 375, 414, 640, 768),
$desktopBreakpoints: (1024, 1280, 1366, 1440, 1600, 1920, 2560)

The code above produces the output below:

@media screen and (min-width: 320px) {
    html {
        font-size: 100%;
    }
}

@media screen and (min-width: 375px) {
    html {
        font-size: 117%;
    }
}

@media screen and (min-width: 414px) {
    html {
        font-size: 129%;
    }
}

@media screen and (min-width: 640px) {
    html {
        font-size: 200%;
    }
}

@media screen and (min-width: 768px) {
    html {
        font-size: 240%;
    }
}

@media screen and (min-width: 1024px) {
    html {
        font-size: 100%;
    }
}

@media screen and (min-width: 1280px) {
    html {
        font-size: 125%;
    }
}

@media screen and (min-width: 1366px) {
    html {
        font-size: 133%;
    }
}

@media screen and (min-width: 1440px) {
    html {
        font-size: 140%;
    }
}

@media screen and (min-width: 1600px) {
    html {
        font-size: 156%;
    }
}

@media screen and (min-width: 1920px) {
    html {
        font-size: 187%;
    }
}

@media screen and (min-width: 2560px) {
    html {
        font-size: 250%;
    }
}

2. APPLY RESPONSIVE RULES

In order to make your elements auto-scalable, you have to set their sizes and measures using rem units instead of pixel. You can use the provided rem function to convert your sizes from pixel to rem as you can see below:

.my-element {
    width: rem(240);

    @media screen and (min-width: 1024px) {
        width: rem(480);
    }
}

Now, as rem unit refers to html font-size, your element will scale automatically and proportionally every time a new media query is matched in the global responsive context.

"LOCAL" SCOPE

If you need to limit your responsive context to a single application's area or to implement multiple contexts, don't include the mixin in html css block, but create a container and apply the mixin to it. Then, use the provided em function instead of the rem one to convert and set child elements' measures so they will be related to the parent context, like follows:

.my-wrapper {
    @include responsiveContext();
}

.my-element {
    .my-wrapper & {
        width: em(240);

        @media screen and (min-width: 1024px) {
            width: em(480);
        }
    }
}

CUSTOM SCENARIO EXAMPLE

Assume that the designer sent to you a PSD file for mobile layout with an artboard of 375x560 px and another one for desktop layout with an artboard of 1440x900 px, but in the project's specifications you have the requirement of serving the mobile layout from 320px and switching to the desktop one from 1024px. There are two main problems:

• both for mobile and desktop, you need to force a bigger layout to stay inside a smaller screen
• in terms of proportions, the rendered result will probably be different from designed layout wherever the device width is different from artboards size

In this complex scenario, you can easily solve these issues by applying the system as follows:

html {
    @include responsiveContext(375, 1440);
}

// e.g.
h1.title {
    font-size: rem(36); // 36px at 375px; proportionally scaled at 320, 414, 640 and 768

    @media screen and (min-width: 1024px) {
        font-size: rem(48); // 48px at 1440px; proportionally scaled at 1024, 1280, 1366, 1600, 1920 and 2560
    }
}

TIPS

Since the system is based on font-size context, you might come across conflicts when you size your typography. To minimize risks, apply your typography rules directly to text wrappers instead of upper containers, so text-related font-size rules won't affect other discendant elements.

You may also encounter subpixel issues when you try to scale very small elements or when px-to-(r)em convertion produces many decimal places, for example because of odd values. As a best practice, try to round your sizes to multiples of 4, expecially for horizontal sizes (e.g. margin, padding, width, etc), and avoid to apply the system to elements large less than 8px or to thin borders.