🎉 Welcome to the Mobify DevCenter, our new home for v2.0 documentation and developer resources! (For now, the site is desktop-only.) Switch to old site
close
Mobify DevCenter
DocumentationAPI & SDK ReferenceHow-To Guides
search_icon_focus

Styling Your App

This guide explores using Sass to style Mobify’s fictional app, Merlin’s Potions.

PreloaderContainerContainer with DataContainer with HeroComplete

| Preloader | Container | Container with data | Container with hero | Complete |

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 app 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 app!

Component styles

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

The SCSS files for our components are in web/app/styles/themes/pw-components. For styling 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 app 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 app.

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');
}
}