/reflow

reflow is a responsive design library that makes it easy to build UI that flows across any device 📱 ✨

Primary LanguageTypeScript

reflow

  • Abstracts away the complexity of media queries
  • Bring your own framework
  • Very little overhead
  • Zero configuration, just use it
  • Does one thing and does it well

Installation

You can install reflow on the JS side or SCSS side. You might want one or both depending on how complex your frontend app is.

JavaScript

On the JS side of things, you can install via npm or just add a script tag.

With a bundler:
npm install reflow-breakpoints

And then import it at some root-level file in your project. Make sure this file runs in the browser and not in node.

import 'reflow-breakpoints'

For example, in a Vue project you could import reflow in the main.js file.

No bundler:
You can also simply add a script tag to your HTML to load it from a CDN or your own server. For script tags, don't load it as an ES module because you'll want the reflow object to be available globally.

SCSS

Using reflow in SCSS requires that the _variables.scss and _mixins.scss files get imported wherever you want to use the reflow SCSS mixin. Make sure to import variables first, and then mixins

// In webpack you might need to prepend a ~ (tilde) to indicate reflow is a module
@import 'reflow-breakpoints/scss/variables';
@import 'reflow-breakpoints/scss/mixins';

Depending on your project, you might be able to do these imports globally, or might need to prepend these imports to every file. If you are using SvelteKit for example, you can prepend the above snippet into every <style lang="scss"> block automatically using svelte-preprocess.

Check your framework's and/or bundler's docs to see how preprocessing can be done in your project, if you don't have a way of importing SCSS files globally.

Usage

Now, time for the easy part.

Breakpoint Thresholds

Device Code Type Range
Extra small xs Small to large phone < 600px
Small sm Small to medium tablet 600px > < 960px
Medium md Large tablet to laptop 960px > < 1280px
Large lg Desktops and most laptops 1280px > < 1920px
Extra large xl 4k and ultra-wide > 1920px

JavaScript

reflow will declare a reflow object globally. For something as core to your app as responsive breakpoints, you'll want reflow accessible from anywhere.

// 👇 These are all the same
reflow
window.reflow
globalThis.reflow

You get to import once, and use everywhere. Normally you'd want code-splitting to use a module only where necesarry, but again responsive breakpoints will be used throughout your entire app so the global var will come in handy.

// TODO: Add more JS examples, especially for reacting to resizes


// If mobile set width to 100px else 200px.
myElement.style.width = `${ reflow.mobile ? 100 : 200 }px`


// If tablet, else if desktop.
if (reflow.md) {
    // Code for 'md' width screens
}
else if (reflow.lg) {
    // Code for 'lg' width screens
}

SCSS

@import 'reflow-breakpoints/scss/variables';
@import 'reflow-breakpoints/scss/mixins';

.my-div-element {
    /* Base styles go here */
    height: 200px;

    /* Overrides for if the device has an 'lg' screen */
    @include reflow('lg-only') {
        height: 150px;
    }

    /* Overrides for if the device is considered as 'mobile'. Same as md-and-down */
    @include reflow('mobile') {
        height: 100px;
    }
}

Available breakpoints for the reflow SCSS mixin:

  • print-only
  • screen-only
  • mobile (same as md-and-down)
  • xs-only
  • sm-only
  • sm-and-down
  • sm-and-up
  • md-only
  • md-and-down
  • md-and-up
  • lg-only
  • lg-and-down
  • lg-and-up
  • xl-only