Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/openfun/cunningham
🎨 The Open FUN Design System
https://github.com/openfun/cunningham
accessibility atomic-design components-library css design-system design-systems figma frontend html reactjs storybook ui-components
Last synced: 2 months ago
JSON representation
🎨 The Open FUN Design System
- Host: GitHub
- URL: https://github.com/openfun/cunningham
- Owner: openfun
- License: mit
- Created: 2022-11-14T15:25:54.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-29T14:01:16.000Z (2 months ago)
- Last Synced: 2024-08-29T18:13:15.978Z (2 months ago)
- Topics: accessibility, atomic-design, components-library, css, design-system, design-systems, figma, frontend, html, reactjs, storybook, ui-components
- Language: TypeScript
- Homepage: https://openfun.github.io/cunningham/
- Size: 22.4 MB
- Stars: 23
- Watchers: 8
- Forks: 2
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
- **Atomic**: We follow [atomic design principles](https://bradfrost.com/blog/post/atomic-web-design/).
- **Modular and Reusable**: Each component is designed to be self-contained and reusable across different projects, promoting consistency and saving development time.
- **Accessibility-focused**: Our components prioritize accessibility standards, making them usable and inclusive for all users.
- **Design tokens based**: We use [design tokens](https://openfun.github.io/cunningham/storybook/?path=/docs/getting-started-customization--docs#what-are-design-tokens-) to ensure consistency between design and code and allow high customization.
- **React** based: at the moment we only support React, but we are open to other frameworks, feel free to [contribute](./CONTRIBUTING.md) !
[](https://circleci.com/gh/openfun/cunningham/tree/main)
[](https://discord.gg/TXPSCMeDzd)
## 🔎 Preview
Here are some examples of real life usage of Cunningham components.
See the [documentation](https://openfun.github.io/cunningham/storybook) 📚 to learn more about customization, typography, spacings and available components!
## ⚡️ Getting started
➡️ First, install the library
```
yarn add @openfun/cunningham-react
```
➡️ Then, add this script to your `package.json` file
```json
{
"scripts": {
"build-theme": "cunningham -g css -o src"
}
}
```
➡️ Then, in order to generate the css file, run
```
yarn build-theme
```
It will generate a file named `cunningham-tokens.css`.
➡️ Then, add these lines at the top of your main stylesheet file:
```
@import "@openfun/cunningham-react/fonts"; // Imports default fonts ( Roboto ). You can also import fonts by yourself.
@import "@openfun/cunningham-react/icons"; // Imports icons ( Material Icons ).
@import "@openfun/cunningham-react/style"; // Imports the default theme.
@import "cunningham-tokens"; // Imports the file you just generated.
```
> Please take a look at [customization documentation](https://openfun.github.io/cunningham/storybook/?path=/docs/getting-started-customization--docs) for more informations about the `cunningham` command line tool and to customize your local theme.
We're done! 🎉
To ensure everything works well, let's test rendering a component, such as the [Button](https://openfun.github.io/cunningham/storybook/?path=/docs/components-button--docs) for example.
Now please see the [documentation](https://openfun.github.io/cunningham/storybook) 📚 to learn more about customization, typography, spacings and available components!
## Contributors
## Contributing
This project is intended to be community-driven, so please, do not hesitate to get in touch if you have any question related to our implementation or design decisions.
Please see our [contributing guidelines](./CONTRIBUTING.md).
## License
This work is released under the MIT License (see [LICENSE](./LICENSE)).