diff --git a/src/docs/getting-started/usage.md b/src/docs/getting-started/usage.md index 2c6a505e..62d98074 100644 --- a/src/docs/getting-started/usage.md +++ b/src/docs/getting-started/usage.md @@ -26,31 +26,39 @@ Google Fonts in your `` element: Remember to include all necessary font weights (and only them — for better performance). -## Foundation CSS +## CSS React UI honors [ITCSS][itcss] principles to make sure that its CSS code base -will work and perform well even in large scale. There are two global CSS layers: +will work and perform well even in large scale. There are three global CSS +layers: + +1. **Theme:** a collection of hundreds of CSS custom properties that define the + look of your app. See [Theming][theming] for more. +2. **Foundation:** mandatory ground-zero CSS for React UI components. Includes + global resets and fixes rendering inconsistencies across browsers with + `normalize.css`. (Not to be confused with the Foundation CSS framework.) +3. **CSS helpers:** tiny CSS classes that can handle details like + [typography][typography], [spacing][spacing], [colors][colors], etc. Class + name notation is [inspired by Bootstrap][bootstrap-utilities], so if you are + familiar with Bootstrap, you will feel at home here. + +All layers are written in Sass and compiled to CSS. You can import them in a +**ready-to-use CSS bundle** like this: -- **Theme:** a collection of hundreds of CSS custom properties that define the - look of your app. See [Theming][theming] for more. -- **Foundation:** the ground-zero CSS for React UI components. Includes global - resets and fixes rendering inconsistencies across browsers with - `normalize.css`. Not to be confused with the Foundation CSS framework. +```js +import '@react-ui-org/react-ui/dist/react-ui.css'; +``` -Import the two global CSS layers as early as possible in your document: +### Sass + +Alternatively, you can import the Sass source files directly: ```js import '@react-ui-org/react-ui/src/theme.scss'; import '@react-ui-org/react-ui/src/foundation.scss'; +import '@react-ui-org/react-ui/src/helpers.scss'; ``` -⚠️ As of now, you will need **working SASS pipeline** for this to work. This is -to be changed to a ready-to-use CSS in the future. - -️👉️ Because of using CSS custom properties, it is technically possible to import -the theme layer anywhere later in the app. But it's a nice habit to declare -variables before using them. - ## Components Import and use any of React UI components in your app: @@ -61,6 +69,9 @@ import { Button } from '@react-ui-org/react-ui';