Prospect.io Design System

Our big box of Lego™ pieces

Think about a design system as a big box of Lego™ pieces that you can combine in infinite ways, except that here, Lego™ pieces are UI elements, like buttons and forms, used to build web applications.

Having our own design system allows us to build consistent user interfaces and to gain lots of time when doing some templating.

prospectio-design repository

It comprehends all the CSS and assets (images and fonts) of our design system, organized by the IT convention. In this repository, you will find all the settings of the design system (colors, spacing rules, fonts definition, etc.), some objects (grid, page layout, etc.), components and some utilities.

Each component is styled by following BEM conventions.

ember-cli-prospectio-design repository

This addon implements all UI components of the design system as Ember components, meaning that it has the prospectio-design repository as dependancy.

How to modify and test those repositories?

First copy each repository on your local machine, then link/unlink them with yarn as follow to use them in other repositories:

cd prospectio-design
yarn link // register the local copy
cd ../prospectio/front
yarn link prospectio-design // replace remote version with the local copy

When we don't want to use local copy anymore, use: yarn unlink prospectio-design

Once you are done with desired changes, simply commit those to the master branch and update dependencies of the app you want it to benefit from changes.

Because sometimes you need your own Lego™

From time to time, you will want to create a new UI component that is too specific to be put into the design system. In this case, go ahead and write your CSS directly into the repo you are working on. Don't forget to follow IT and BEM conventions for your custom app CSS as well.

Same rules apply if you want to override some style, such as the colors settings by choosing a new primary or brand color for a new app.