doc

JesmoDev · JesmoDev · commit c1d54bc1d8fe · 2022-05-02T10:58:38.000+02:00
diff --git a/packages/uui-css/README.md b/packages/uui-css/README.md
@@ -6,11 +6,11 @@ UUI-CSS package contains css files which can be included in your project or comp
 
 - **custom-properties.css** — use this if you like to include our custom properties in your project.
 - **uui-font.css** — use this if you like to import our font in your project. You must set the `uui-font` class on your root element.
-- **uui-text.css** — use this if you like to declare styles for typography, this is needed when using ex.: H1 in a Shadow DOM. You must set the `uui-text` class in your root element.
+- **uui-text.css** — use this if you like to declare styles for typography for tags such as h1, h2. You must set the `uui-text` class on your root element. And if you wan't to use the styling inside a Shadow dom, that will have to have the `uui-text` class as well.
 
 Bundle:
 
-- **uui-css.css** — If you like your project to be styled for Umbraco UI, then include this in the root of your project. This contains all the previous files, so make sure to only include this file in your project if you need to style your project.
+- **uui-css.css** — If you like your project to be styled for Umbraco UI, then include this in the root of your project. This contains all the previous files, so make sure to only include this file in your project if you need to style your project. You will still have to apply the `uui-font` and `uui-text` classes.
 
 ### See it in action
 
@@ -59,3 +59,54 @@ Or you can just import the compiled bundle at once:
 // app.ts
 import '@umbraco-ui/uui-css/dist/uui-css.css';
 ```
+
+### Applying the uui-css styling
+
+Using the `uui-font` and `uui-text`
+
+```html
+<div id="app" class="uui-font uui-text">
+  <h1>Hello uui-css!</h1>
+  <p>
+    Everything inside my app will now use the font from uui-font and tag styling
+    from uui-text because the app root has the uui-font and uui-text classes.
+  </p>
+  <p style="background: var(--uui-interface-surface-alt);">
+    I will have a background color from the custom properties.
+  </p>
+</div>
+```
+
+using the custom properties
+
+```html
+<p style="background: var(--uui-interface-surface-alt);">
+  I will have a background color from the custom properties.
+</p>
+```
+
+Full example:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@umbraco-ui/uui-css@latest/dist/uui-css.css" />
+  </head>
+  <body>
+    <div id="app" class="uui-font uui-text">
+      <h1>Hello uui-css!</h1>
+      <p>
+        Everything inside my app will now use the font from uui-font and tag
+        styling from uui-text because the app root has the uui-font and uui-text
+        classes.
+      </p>
+      <p style="background: var(--uui-interface-surface-alt);">
+        I will have a background color from the custom properties.
+      </p>
+    </div>
+  </body>
+</html>
+```
