Skip to content

Latest commit

 

History

History
122 lines (85 loc) · 4.31 KB

README.md

File metadata and controls

122 lines (85 loc) · 4.31 KB

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 pnpm:

pnpm 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 monorepo uses Turborepo and pnpm 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.

pnpm
pnpm run build:icons
pnpm run start

Run tests with:

pnpm run test

Update snapshots with:

pnpm build
cd packages/big-design
pnpm run test --update-snapshot

Run linter with:

pnpm run lint

Optional: If you use VS Code, use the following command to configure VSCode with the project-specific settings:

cp .vscode/settings.example.json .vscode/settings.json

Releasing

Project maintainers should release through the Changesets Pull Request. To do this, go to the Pull Request tab, approve, and merge it. The release will then be automatically published to npm, and the documentation will be deployed.

License

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