Developing with Scandi
Structure
Tutorials
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
styleabstract
abstractThe
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
baseThis 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
cmsThis 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:1
@include mobile {
2
// your styles
3
}
Copied!
Last modified 1yr ago
Copy link