Design Hierarchy

This topic applies to

Applies to

SuiteCommerce Web Stores

Sass styles are organized in a hierarchy as follows:

  • Base Sass Styles: These are the basic components designed to be combined and reused across the site.

  • Template Specific Styles: Sass styles specific to a page or template are defined here. These are extensions and combinations of the base components.

  • Application Level Styles: Within the Base Sass Styles, you can define components that are referenced from a specific application: ShopFlow, My Account, or Checkout. This lets you define unique styling for each application experience.

Base Sass Styles

In SuiteCommerce Advanced core styles are defined as reusable components. Core reusable components can then be iteratively combined to create increasingly complex structures such as templates and pages. All basic components are defined within the BaseSassStyles folder at Modules > suitecommerce > BaseSassStyles. Components are categorized into three different types:

  • atoms: basic building blocks to be used within other structures. For example, buttons, messages, and forms.

  • molecules: simple combinations of atoms. Molecules are built for reuse but serve different purposes depending on the page context.

  • variables: basic styling rules such as spacing and typography, that are then referenced and extended in atoms and molecules.

Template Specific Styles

Each module contains a Sass folder that defines styling rules specific to the templates used for that module. Within these Sass files, the Base Sass Style components are used as the starting point and then extended as needed. There is generally a single Sass file corresponding to each template file within a module.

For example, the Address module has a address-details.tpl file in the Templates folder of the module with a corresponding _address-details.scss Sass file in the Sass folder of the module. Within the _address-details.tpl file the address-details-remove-address class is referenced. This class is defined in the _address-details.scss file where base classes are extended to add styles specific for this template.

Class Referenced in Template File:

{{#if showRemoveButton}}
   <button class="address-details-remove-address" data-action="remove" data-id="{{internalid}}" {{#if isInvalidAddressToRemove}}disabled{{/if}}>
      {{translate 'Remove'}}
   </button>
{{/if}}

Class Defined in Sass File:

.address-details-remove-address {
    @extend .button-edit;
    margin-right: $sc-base-margin-lvl2;
    cursor: pointer;
}

Application Level Styles

In addition to defining styles specific to a module using template-specific classes, you can define styles to be specific to each application. The ShopFlow, My Account, and Checkout experiences can all have a unique design.

By default, for each application module, there is a single layout Sass file with several application specific style extensions defined.

  • _shopping-layout.scss

  • _myaccount-layout.scss

  • _myaccount-layout-sb.scss

  • _checkout-layout.scss

Also, you can define application specific dependencies for base styles or customizations in the theme manifest file. Each file must also be added as a dependency to the appropriate application in the sass object before styles defined in those files can be included when you deploy. See Theme Manifest for details.