blocks-docs v0.1.22

blocks

CBRE Blocks design system repository

Getting started

Using Blocks

If you just want to use Blocks styles, you can copy the blocks-base/dist/blocks.css file along with the fonts/ and svgs/ folders.

To include Blocks as a node module, add the following to your package.json, ending in whichever version tag you want:

"blocks-base": "https://github.com/floored/blocks-base@X.X.X"

or

"blocks-react": "https://github.com/floored/blocks-react@X.X.X"

If you are using React components, you can access them by pointing to the react-index, ex:

const Checkbox = require('blocks-react').Input.Checkbox;

Developing Blocks

Changes made to the blocks-base or blocks-react directories need to be rebuilt (via gulp build to update the generated files in their respective dist/ directories).

You can set up a git pre-commit hook to remind you of this by running

ln -s -f ../../hooks/pre-commit .git/hooks/pre-commit

Install lerna (the tool we use to manage multiple packages):

npm install -g lerna

Use lerna to install package dependencies and interdependencies:

lerna bootstrap

To build the blocks-base or blocks-react packages, run:

npm run build:base

or

npm run build:react

from the root directory.

To build the blocks-docs (or documentation) package for development, run:

npm run dev:docs

from the root directory.

If this is your first time trying to build the site, you might also have to run npm install from within the blocks-docs directory.

Note: if you update the blocks-base or blocks-react packages and want those local changes reflected locally, you'll need to rerun npm run dev:docs to pick them up.

You can navigate to the documentation site at http://localhost:8080.

To serve the documentation site for production, run:

npm run serve:docs

from the root directory.