Menu
Menu Sheet Overlay
Search
Search Sheet

Styling your PWA

    This guide explores using SCSS to style the PWA.

    Generated projects include styling for Mobify’s fictional PWA Merlins Potions.

    You can change its styles to better represent your brand.

    Progressive Web Apps bring app-like experiences to the web. Create fast, fluid, frictionless experiences that are indistinguishable from native apps. This includes styling transitions between pages while data is loading!

    Preloader Container Container with Data Container with Hero Complete
    Image Image Image Image Image

    The generated project includes a stylesheet main.css in web/app/loader.js.

    On npm start, webpack creates main.css by applying Sass and PostCSS to web/app/stylesheet.scss. It also watches for changes and you can refresh to see.

    Style the PWA by changing its imports:

    1. SCSS variables
    2. Component styles
    3. Preloader styles

    SCSS Variables

    Colors, fonts, weights, breakpoints and shared values are set in web/app/styles/_variables.scss.

    Changing this file is the best way to start branding your PWA!

    Component styles

    Local component SCSS files are in web/app/components. Local components use the class name prefix c-.

    SDK components SCSS files are in web/app/styles/themes/pw-components. SDK components use the class name prefix pw-.

    Some SDK components do not have an SCSS file. Customize them by creating one and importing it in web/app/styles/themes/_pw-components.scss.

    Container component SCSS files are in web/app/containers. Container components use the class name prefix t-.

    Preloader styles

    The Preloader is shown while the PWA starts.

    It should be light-weight, both visually and in file-size.

    The Preloader CSS file is web/app/preloader/preloader.css.

    The Preloader uses CSS, not SCSS like the rest of the PWA.

    Referencing assets in SCSS

    To reference images in SCSS, use a path relative to web/app regardless of where the source file is located.

    For example, to reference web/app/static/img/global/image.png:

    .c-banner {
        .c--free-ship {
            background-image: url('./static/img/global/free-shipping-banner.png');
        }
    }