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
Node 16 is not supported by fractal (at the time of this writing).
public/css/theme.css
fileImport 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
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';
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