Global Styles

While each component may have its own styles, some styles are globally defined

ScandiPWA defines certain global styles. These are defined in SCSS in the style directory, which contains 3 subdirectories, as well as a file that imports all the styles from them.

Directories in style

abstract

The abstract subdirectory includes SCSS definitions that do not directly affect any element. Instead, they define utilities such as media selectors (_media.scss), SCSS variable declarations (_variables.scss) and some generic styles that could be used to style an element (_loader.scss, _button.scss).

base

This directory defines the base styles for various HTML elements, such as tables, links, buttons and lists. In _breakpoints.scss, it defines classes that can be added to elements to easily hide them on some devices (mobile/tablet/desktop)

cms

This directory contains styles for defining the look of various content inserted through a content management system (typically Magento CMS). Currently, it styles various promotion blocks, as well as sliders.

Breakpoints

Selector

Visible on Mobile

Visible on Tablet

Visible on Desktop

desktop

✔️

before-desktop

✔️

✔️

tablet

✔️

tablet-landscape

landscape only

after-mobile

✔️

mobile

✔️

To use a breakpoint, use include:

@include mobile {
// your styles
}