Resonance 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

• Autogenate public/css/theme.css file
• Document minimum requirements (like bootstrap5 etc)
• Abstracted use of variables and theme code separation
• Fractal component to document these colors @Nasr
• 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 for the theme repo. Ask an admin for this information.

yarn add "https://anonymous:PROJECT_ACCESS_TOKEN@gitlab.resonancehealth.net/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)

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

// Get font awesome (because our theme uses its variables)
@import 'resonance-theme/src/fontawesome/fontawesome.scss';
@import 'resonance-theme/src/fontawesome/solid.scss';
@import 'resonance-theme/src/fontawesome/brands.scss';

// 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';

// Finally resonance specific styles
@import './scss/resonance.scss'; // User custom styles
// Good place to @import your own styles

Fonts and Images

This project assumes you are using font-awesome. You need to configure the fa-font-path to point to a folder where all font (woffo, ttf, woff2) files are located (usually in public/fonts/ directory).

$fa-font-path: '../fonts/font-awesome';

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