About The Project

Symphony is the shared visual and interactive language that guides how we build high-quality lender, broker, and borrower experiences. It’s intended for use both internally at FOA and externally by third-party developers and designers.

The goals of our DS helps us achieve customer-centricity through an investment in design and technology. #OneFOA

More specifically, we aim to:

• Make it easier for our customers and partners to do business with us by obscuring organizational boundaries, channels and technology stacks.
• Save time and money during the design and delivery phase.
• Ease collaboration and align teams.

Built With

Getting Started

Prerequisites

The design system has a few dependencies that you will need to install before you can use it.

• Bootstrap 5
• Sass (Optional: If you want to compile the Sass files yourself.)

Symphony also requires you to have Bootstrap 5 installed in your project as a peer-dependency. If you do not have Bootstrap 5 installed, you can install it with the following command:

npm install bootstrap@5

Optional: This project utilizes sass and requires you to have sass to compile our sources. Alternatively, you can use the compiled CSS files in the dist folder. If you do not have sass installed, you can install it with the following command:

// locally
npm install --save-dev sass


// or globally
npm install -g sass

Installation

To install @foa-companies/symphony in your project with npm, run the following command:

npm install @foa-companies/symphony

Usage

To use the symphony design system, you will need to import the scss file into your project. This will import all of symphony's styles and variables into your project.

@import '@foa-companies/symphony/scss/symphony.scss';

Alternatively, if you want to use the precompiled css, you can import the compiled css file into your project.

@import '@foa-companies/symphony/dist/css/symphony.css';

You will also need to import the symphony's javascript dependencies into your project.

import '@foa-companies/symphony/js/bootstrap.js';