Getting Started

Location

The GrowPath UI system is used in the Core application.

Design System materials are stored in the Growpath Design System Figma project.

File Structure

GrowPath currently has two user interface paradigms. The UI for the original application is no longer under active development. It’s entry point within the application is app/assets/stylesheets/application.scss. The new UI which is under develpment has the entrypoint app/assets/stylesheets/growpath.scss.

While these two systems share some of the same design tokens such as colors and typography, they are completely separate in terms of code and dependencies. Any change to the CSS of one system should not affect the other. Look at the imports of both application.scss and growpath.scssto see the differences.

stylesheets/
├── application.scss (Old)
├── ts_variables.scss
├── components/
│   └── ...
├── pages/
│   └── ...
│
│
├── growpath.scss (New)
├── base/
│   ├── variables.scss
│   └── ...
├── utilities/
│   └── ...
├── mixins/
│   └── ...
└── firm_admin_components/
    └── ...

Creating pages and using components

The goal of this system is to allow developers to create new pages quickly while writing minimal amounts of CSS/Sass. However, there will always be features that require some amount of new styles to be written. With an understanding of the conventions that the GrowPath UI follows, writing new components should be straightforward.

Code conventions

You can learn more about the projects’ code conventions here.

Contributing

You can learn more about contributing to the style guide here.