@sprucelabs/heartwood-components

Heartwood Components

Heartwood is a design system made of foundational decisions that ensure cohesion, allow for flexibility, and enable a smooth workflow.

Goals

• Translate static designs into live components built with HTML, CSS, and client-side JS
• Generate styles to be used by React components in React Sprucebot

Setup

• git clone this repo
• cd sprucebot-heartwood
• Install node modules: nvm use && yarn
• Install Gulp and Fractal CLI tools installed globally: yarn global @frctl/fractal && yarn global gulp-cli

Running the project locally

• Start Fractal with fractal start --sync
• Run Gulp to compile Sass to CSS: gulp watch

If you're running this project with react-sprucebot, you can pull in the local stylesheet by adding its url to .env, i.e. STYLESHEETS=http://xxx.xxx.xxx:3000/stylesheets/heartwood-components.css.

Contributing

• New components should be added on feature branches, i.e. feature/my-new-component
• Documentation updates (anything in the doc directory) should be added to feature/documentation
• Open pull requests against master

Deploying to Github Pages

• Build Fractal as a static site: fractal build
• Compile styles and js: gulp styles && gulp js
• Run the deploy script: yarn deploy

Usage

Install the node module: yarn add @sprucelabs/heartwood-components

As Sass import (Recommended)

Import in Sass file:

@import ~@sprucelabs / heartwood-components/stylesheets/global.scss;

Default variables can be overriden when the stylesheet is compiled. For example, to use red as a primary color:

$c-primary: red;

@import ~@sprucelabs / heartwood-components/stylesheets/global.scss;

You can also selectively import parts of this library to keep your generated stylesheets smaller, i.e.

@import ~@sprucelabs / heartwood-components/stylesheets/core/core-styles;

@import ~@sprucelabs / heartwood-components/stylesheets/base/normalize;
@import ~@sprucelabs / heartwood-components/stylesheets/base/reset;
@import ~@sprucelabs / heartwood-components/stylesheets/base/base;
@import ~@sprucelabs / heartwood-components/stylesheets/base/utilities;
@import ~@sprucelabs / heartwood-components/stylesheets/base/type;

@import ~@sprucelabs / heartwood-components/components/01-button/button;

Note that when using this approach, you must import stylesheets/core/core-styles in order to import any component stylesheets.

With Webpack

Import all styles: import '@sprucelabs/heartwood-components/stylesheets/global.scss'

Additional Info

• Heartwood Components in Figma
• Fractal Docs
• Gulp Docs