Spacing Variables for Structure in SuiteCommerce

TL;DR

Spacing variables in SuiteCommerce provide a systematic way to define padding and margin for elements, enhancing control over layout structure. These variables use a simple, human-readable format that aligns with design principles, allowing for better maintenance and consistency across web pages.

Understanding Spacing Variables

In SuiteCommerce, spacing variables are crucial for managing the layout of your website by defining the structural height, width, and spacing of various elements, primarily through padding and margins. The intuitive naming convention makes it easy for developers to implement these variables uniformly across the site.

How Are Spacing Variables Declared?

The spacing variables use levels to specify the amount of space relative to a base style. Each level designation corresponds to its multiplier. For example, a variable named lv2 indicates a multiplier of 2, thus offering scalable spacing options.

Example of Spacing Variable Declaration

Below is a sample from the BaseSassStyles/Sass/variables/_spacing.scss file, illustrating how spacing variables are declared:

1//...
2$sc-padding-base: 5px;
3$sc-padding-lv1: $sc-padding-base;
4$sc-padding-lv2: $sc-padding-base * 2;
5$sc-padding-lv3: $sc-padding-base * 3;
6$sc-padding-lv4: $sc-padding-base * 4;
7$sc-padding-lv5: $sc-padding-base * 5;
8$sc-padding-lv6: $sc-padding-base * 6;
9$sc-padding-lv7: $sc-padding-base * 7;
10$sc-padding-lv8: $sc-padding-base * 8;
11//...

In this example, $sc-padding-base establishes a fundamental padding of 5 pixels. Consequently, $sc-padding-lv2 represents 10 pixels (5px * 2), while $sc-padding-lv8 equals 40 pixels (5px * 8). This method allows for clear scalability and adaptability when adjusting the spacing across the web pages, making layout adjustments more manageable.

Who This Affects

This information is particularly relevant for:

• Web Developers: Implementing and customizing styling for SuiteCommerce websites.
• UI/UX Designers: Working on the layout and design aspects of commerce websites.
• Theme Developers: Creating or modifying themes based on SuiteCommerce.

Key Takeaways

• Spacing variables facilitate consistent layout control in SuiteCommerce.
• They follow an intuitive naming convention for ease of understanding and maintenance.
• Developers can leverage multipliers for scalable design.

Source: This article is based on Oracle's official NetSuite documentation.