KSS Notation for Style Guide Automation in SuiteCommerce

KSS notation is a powerful tool for automating the creation of Sass style guides in SuiteCommerce Advanced. It serves as a human-readable syntax for documenting CSS, enabling developers and designers to maintain a consistent visual style and best practices across web pages.

What is KSS Notation?

KSS, or Knyle Style Sheets, is a documentation syntax that helps to define and visualize user interface elements in Sass files. By employing KSS notation, developers can create an organized style guide that effectively communicates design specifications to multiple contributors, ensuring consistency in design implementation.

Benefits of Using KSS Notation

• Consistency: Helps maintain a uniform style across the site.
• Collaboration: A well-documented style guide allows for better teamwork among developers and designers.
• Best Practices: Encourages following established design conventions.

How to Create a Style Guide Using Developer Tools

To harness KSS notation for generating a style guide:

1. Open a terminal in your local development environment.
2. Access your top-level development directory.
3. Execute the following command:
   bashCopy

   gulp theme:local styleguide

4. Open your web browser and navigate to localhost:3000 to view your generated style guide.

KSS Notation Structure

KSS notation includes several essential components:

• Title: A clear and descriptive name for the element.
• Description: A brief explanation of the element's purpose and how it should be utilized.
• Markup: HTML code that illustrates how the element is rendered.
• Index: A reference point for where the element appears in the style guide.

Example of KSS Notation in Action

The following is an example from the _buttons.scss Sass file:

1// Primary buttons
2(This is an example of the Title element)
3 
4// The primary action is generally a crucial task. 
5// Primary buttons use bright colors for strong visual weight.
6(This is an example of the Description element)
7 
8// Markup:
9// <button class='button-primary button-medium'>Button Primary</button>
10(This is an example of the Markup element)
11 
12// Styleguide 2.1.1
13(This is an example of the Index element)
14 
15.button-primary {
16   background: $sc-button-primary-background-color;
17   color: $sc-button-primary-text-color;
18   font-weight: $sc-font-weight-normal;
19   border: 1px solid $sc-button-primary-border-color;
20   border-radius: $sc-button-primary-border-radius;
21   text-transform: $sc-button-primary-text-transform;
22   display: inline-block;
23}  

Conclusion

Utilizing KSS notation is a best practice within SuiteCommerce development, helping ensure that the style guide effectively documents and visualizes the styles applied across various web elements.

Key Takeaways

• KSS notation automates style guide creation from Sass.
• A well-structured style guide enhances collaboration.
• Implementing KSS ensures best practices in site design.

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