Contributing

Creating

Contributions to the Sage Design System are done by utilizing one of the many generators built to ensure that code is introduced in a simple and consistent way. Each generator will create the desired element and wire up all the necessary files to properly document it.

Paths

All generators in the sage design system must be run from the <root directory>/docs folder.

Tokens

Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.

Generate a Token

rails generate sage_token <MY_TOKEN_NAME>

Elements

Elements are the basic building blocks of the system. These pieces of UI can be used independently or combined to create more complex items called objects. (Button, Loader, Switch)

Generate an Element

rails generate sage_element <MY_ELEMENT_NAME>

Objects

Objects are groups of elements bonded together to create more complex stand-alone pieces of UI. These objects take on their own properties and serve as the backbone of the design system. (alert, banner, panel)

Generate a Object

rails generate sage_object <MY_OBJECT_NAME>

Utilities

Utilities are classes be used to accomplish specific styling needs and should be used sparingly, these limited use classes are designed to give the system flexibility but not meant to contribute to inconsistency. (text-left, text-center, text-right)

Generate a Utility

rails generate sage_utility <MY_UTILITY_NAME>

Pages

Pages refer to the pages of the Sage Design System Gem. Before creating a new page make sure that what you are documenting would not be a better fit in the gem wiki.

Generate a Page

rails generate sage_page <MY_PAGE_NAME>

Reviewing

All Changes made to the Sage Design System will be reflected as you work and should not be merged until they have been reviewed by another member of the UX Development team.

To keep code moving in the system, it is key that every member of the team prioritizes reviewing code as much as the prioritize creating code. It is a goal of the team that reviews be completed within a day or two of when it is requested.

Versioning

Once you have approval to merge, follow the steps in the Updating and Integrating instructions to integrate into Kajabi.