Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

npm version CircleCI

Documentation

You can find documentation and examples on our docs page.

Quick start guide

Add BigDesign and styled-components@5 to your project using npm:

npm install @bigcommerce/big-design styled-components@5

or with yarn:

yarn add @bigcommerce/big-design styled-components@5

Add the font as a <link> in your index.html/<head> element.

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600&display=swap" rel="stylesheet" />
</head>

Import the GlobalStyles component and use it once in your app. This will set a few styles globally and add normalize.css. We recommend placing it close to your root component. Then import any component, such as Button, to use it anywhere in your app.

import { Button, GlobalStyles } from '@bigcommerce/big-design';

...

<App>
  <GlobalStyles />
  <Button>Click me</Button>
</App>

Monorepo

This is a monorepo that uses Lerna and Yarn Workspaces.

Workspaces are inside the packages directory.

Changelogs

As this is a monorepo, each package has it's own Changelog. Links for each can be found below

Contributing

To contribute, please read our Contributing guidelines and Code of Conduct first.

Development

Running the following commands will run big-design and docs in watch mode.

yarn
yarn run build:icons
yarn run start

Run tests with:

yarn run test

Run linter with:

yarn run lint

Releasing

This is for releasing new versions of all the packages.

GH_TOKEN=<token> yarn lerna publish <patch/minor/major> --sign-git-commit --sign-git-tag --create-release github --git-remote upstream

Prereleases

GH_TOKEN=<token> yarn lerna publish prerelease --pre-dist-tag next --conventional-prerelease --sign-git-commit --sign-git-tag --create-release github --git-remote upstream

To promote a prerelease add the --conventional-graduate flag to release command.

GH_TOKEN=<token> yarn lerna publish <patch/minor/major> --conventional-graduate --sign-git-commit --sign-git-tag --create-release github --git-remote upstream

from-package

from-package allows you to release what's on upstream/master if the publish script failed. By default the lerna publish command will push commits and tags before running through the build. This is a just-in-case command.

GH_TOKEN=<token> yarn lerna publish from-package --git-remote upstream

BigDesign Documentation Release

yarn run build
cd packages/docs
GTM_ID=<gtm-id> yarn run deploy --remote upstream

License

Big Design is licensed under MIT and CC BY 3.0. See LICENSE.md for more details.