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 repocd 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