Theme

This repository provides theme guidelines and plug-n-play style components for all Resonance properties (websites, apps and other projects).

Visit Style Documentation: https://style.resonancehealth.net

Use Node 14 LTS

Node 16 is not supported by fractal (at the time of this writing).

TODO

• [x] Autogenate public/css/theme.css file
• [ ] Document minimum requirements (like bootstrap5 etc)
• [x] Abstracted use of variables and theme code separation
• [ ] Fractal component to document these colors @Nasr
• [x] Document an example of how to apply this project to other projects (i.e. yarn add @resonance/theme + import commands)
• [ ] Add Patient Center components (like vertical navbar and others)

Getting Started

Import the project as a dependency. You might need a project access token. Ask an admin for this information

yarn add "https://anonymous:[email protected]/resonance/theme.git#master",

NOTE: The #master at the end will peg the project to whatever is the currently release theme.

If you don't wish to customize anything, simply add this to your SCSS loader:

@import 'resonance-theme/src/app.scss';

If you wish to customize colors for the bootstrap (other than what resonance theme recommends), use the following snippet

// CUSTOMIZE YOUR VARIABLES HERE (follow whats in resonance-theme/src/variables.scss)

// User variables
@import 'resonance-theme/src/variables';

// Configuration & utilities
@import 'resonance-theme/src/theme/variables';
@import 'resonance-theme/src/theme/mixins';
@import 'resonance-theme/src/theme/utilities';

// Bootstrap
@import 'bootstrap/scss/bootstrap';

// Layout & components
@import 'resonance-theme/src/theme/reboot';
@import 'resonance-theme/src/theme/components';

// User custom styles
// Good place to @import your own styles

Fonts and Images

To correctly include font families for a project as well as images, override the default $resonance-sans-font-path and $resonance-images-path variable.

Development

Install dependencies, and start watcher:

yarn
yarn serve

Remember the yarn serve command will start two processes: gulp watch, which is responsible for compiling the sass code in to css files. And it starts the fractal dev server. The gulp watch command is backgrounded so you might have to kill that at end of development. If you don't like this behavior simply start the two processes separately:

./node_modules/.bin/gulp watch
yarn fractal:start