Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bigcommerce/big-design
Design system that powers the BigCommerce ecosystem.
https://github.com/bigcommerce/big-design
bigcommerce design-system react
Last synced: 5 days ago
JSON representation
Design system that powers the BigCommerce ecosystem.
- Host: GitHub
- URL: https://github.com/bigcommerce/big-design
- Owner: bigcommerce
- License: other
- Created: 2019-01-13T21:09:40.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2024-04-17T00:15:46.000Z (7 months ago)
- Last Synced: 2024-04-17T14:00:55.484Z (7 months ago)
- Topics: bigcommerce, design-system, react
- Language: TypeScript
- Homepage: https://bigcommerce.github.io/big-design
- Size: 15.9 MB
- Stars: 43
- Watchers: 42
- Forks: 61
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/@bigcommerce/big-design) [](https://circleci.com/gh/bigcommerce/big-design)
### Documentation
You can find documentation and examples on our [docs page](https://bigcommerce.github.io/big-design).
### 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 `` in your `index.html`/`` element.
```html
```
Import the `GlobalStyles` component and use it once in your app. This will set a few styles globally
and add [normalize.css](https://github.com/necolas/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.
```jsx
import { Button, GlobalStyles } from '@bigcommerce/big-design';
...
Click me
```
### Monorepo
This monorepo uses [Turborepo](https://turbo.build/repo/docs) and [pnpm Workspaces](https://pnpmpkg.com/lang/en/docs/workspaces/).
Workspaces are inside the [packages](https://github.com/bigcommerce/big-design/blob/main/packages) directory.
- [big-design](https://github.com/bigcommerce/big-design/blob/main/packages/big-design): React component library.
- [big-design-theme](https://github.com/bigcommerce/big-design/blob/main/packages/big-design-theme): Default Theme.
- [big-design-icons](https://github.com/bigcommerce/big-design/blob/main/packages/big-design-icons): Icons library.
- [big-design-patterns](https://github.com/bigcommerce/big-design/tree/main/packages/big-design-patterns): Pattern library.
- [docs](https://github.com/bigcommerce/big-design/blob/main/packages/docs): Documentation live here.
- [configs](https://github.com/bigcommerce/big-design/blob/main/packages/configs): (internal) Shared configs between packages.
### Changelogs
As this is a monorepo, each package has it's own Changelog. Links for each can be found below
- [big-design](https://github.com/bigcommerce/big-design/blob/main/packages/big-design/CHANGELOG.md)
- [big-design-theme](https://github.com/bigcommerce/big-design/blob/main/packages/big-design-theme/CHANGELOG.md)
- [big-design-icons](https://github.com/bigcommerce/big-design/blob/main/packages/big-design-icons/CHANGELOG.md)
- [big-design-patterns](https://github.com/bigcommerce/big-design/blob/main/packages/big-design-patterns/CHANGELOG.md)
- [configs](https://github.com/bigcommerce/big-design/tree/main/packages/configs)
- [docs](https://github.com/bigcommerce/big-design/blob/main/packages/docs/CHANGELOG.md)
### Contributing
To contribute, please read our [Contributing](https://github.com/bigcommerce/big-design/blob/main/CONTRIBUTING.md) guidelines
and [Code of Conduct](https://github.com/bigcommerce/big-design/blob/main/CODE_OF_CONDUCT.md) 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:
```shell copy
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](./LICENSE.md) for more details.