menu
Menu
Mobify DevCenter
search_icon_focus

Styling Your App

The project scaffold includes a stylesheet main.css in <PROJECT_DIR>/app.

On npm start, webpack creates main.css by applying Sass and PostCSS to <PROJECT_DIR>/app/stylesheet.scss.

It also watches for changes, so you can refresh to see them.

You can style your app by changing the following types of imports in stylesheet.scss:

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

Let’s look at each type of styling in more detail…

SCSS variables

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

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

Component styles

Local components SCSS files are in <PROJECT_DIR>/app/components/*. Local components use the class name prefix c-.

The SCSS files for our components are in <PROJECT_DIR>/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 <PROJECT_DIR>/app/styles/themes/_pw-components.scss.

Page components SCSS files are in <PROJECT_DIR>/app/pages/*. Page components use the class name prefix t-. (Pages were formerly called “templates,” but the prefix remains unchanged.)

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 <PROJECT_DIR>/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 <PROJECT_DIR>/app regardless of where the source file is located.

For example, to reference <PROJECT_DIR>/app/static/img/global/image.png:

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