diff --git a/README.md b/README.md index 9575c1f..688adcb 100644 --- a/README.md +++ b/README.md @@ -1,18 +1,94 @@ -# 🎨 Cunningham, the best OpenSource Design System +
+ +
-[![CircleCI](https://circleci.com/gh/openfun/cunningham/tree/master.svg?style=svg)](https://circleci.com/gh/openfun/richie/tree/master) +
-

- 📚  Documentation • - 🖌️  Figma -

+# Cunningham -## Getting started +**A design system and a components library.** -Everything is detailed on our [documentation](https://openfun.github.io/cunningham). 📚 +📚  Documentation • +🖌️  Figma +
+ +- **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/?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) ! + +
+ +[![CircleCI](https://circleci.com/gh/openfun/cunningham/tree/main.svg?style=svg)](https://circleci.com/gh/openfun/cunningham/tree/main) + +
+ +## 🔎 Preview + +Here are some examples of real life usage of Cunningham components. + + + +
+ +See the [documentation](https://openfun.github.io/cunningham) 📚 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/?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/?path=/docs/components-button--docs) for example. + +Now please see the [documentation](https://openfun.github.io/cunningham) 📚 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 diff --git a/resources/banner.png b/resources/banner.png new file mode 100644 index 0000000..f47282a Binary files /dev/null and b/resources/banner.png differ diff --git a/resources/examples.png b/resources/examples.png new file mode 100644 index 0000000..22ad210 Binary files /dev/null and b/resources/examples.png differ