Skip to content

Commit e953c97

Browse files
JesmoDevJesmoDev
committed
doc
1 parent 366ba61 commit e953c97

File tree

1 file changed

+74
-17
lines changed

1 file changed

+74
-17
lines changed

‎packages/uui-css/README.md

Lines changed: 74 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -60,28 +60,28 @@ Or you can just import the compiled bundle at once:
6060
import '@umbraco-ui/uui-css/dist/uui-css.css';
6161
```
6262

63-
### Applying the uui-css styling
63+
### Applying the uui-css styling in the root
6464

6565
Using the `uui-font` and `uui-text`
6666

6767
```html
68-
<div id="app" class="uui-font uui-text">
69-
<h1>Hello uui-css!</h1>
70-
<p>
71-
Everything inside my app will now use the font from uui-font and tag styling
72-
from uui-text because the app root has the uui-font and uui-text classes.
73-
</p>
74-
<p style="background: var(--uui-interface-surface-alt);">
75-
I will have a background color from the custom properties.
76-
</p>
77-
</div>
68+
<body class="uui-font uui-text">
69+
<div id="app">
70+
<h1>Hello uui-css!</h1>
71+
<p>
72+
Everything inside my app will now use the font from uui-font and tag
73+
styling from uui-text because the root(body) has the uui-font and uui-text
74+
classes.
75+
</p>
76+
</div>
77+
</body>
7878
```
7979

80-
using the custom properties
80+
Using the custom properties:
8181

8282
```html
8383
<p style="background: var(--uui-interface-surface-alt);">
84-
I will have a background color from the custom properties.
84+
I will now have a background color from the custom properties.
8585
</p>
8686
```
8787

@@ -95,13 +95,13 @@ Full example:
9595
rel="stylesheet"
9696
href="https://cdn.jsdelivr.net/npm/@umbraco-ui/uui-css@latest/dist/uui-css.css" />
9797
</head>
98-
<body>
99-
<div id="app" class="uui-font uui-text">
98+
<body class="uui-font uui-text">
99+
<div id="app">
100100
<h1>Hello uui-css!</h1>
101101
<p>
102102
Everything inside my app will now use the font from uui-font and tag
103-
styling from uui-text because the app root has the uui-font and uui-text
104-
classes.
103+
styling from uui-text because the root(body) has the uui-font and
104+
uui-text classes.
105105
</p>
106106
<p style="background: var(--uui-interface-surface-alt);">
107107
I will have a background color from the custom properties.
@@ -110,3 +110,60 @@ Full example:
110110
</body>
111111
</html>
112112
```
113+
114+
### Applying uui-text in a component
115+
116+
Import the text css from uui-css
117+
118+
```js
119+
import { UUITextStyles } from '@umbraco-ui/uui-css';
120+
```
121+
122+
Add the css to the component styles
123+
124+
```js
125+
static styles = [
126+
UUITextStyles,
127+
css`
128+
/* your css goes here */
129+
`,
130+
];
131+
```
132+
133+
Add the `uui-text` class to the root of the component
134+
135+
```html
136+
<div class="uui-text">This is my custom element</div>
137+
```
138+
139+
Full example:
140+
141+
```js
142+
import { html, css, LitElement } from 'lit';
143+
import { customElement } from 'lit/decorators.js';
144+
import { UUITextStyles } from '@umbraco-ui/uui-css';
145+
146+
@customElement('my-element')
147+
export class MyElement extends LitElement {
148+
static styles = [
149+
UUITextStyles,
150+
css`
151+
/* your css goes here */
152+
`,
153+
];
154+
155+
render() {
156+
return html`
157+
<div class="uui-text">
158+
This is my custom element
159+
</div>
160+
`;
161+
}
162+
}
163+
164+
declare global {
165+
interface HTMLElementTagNameMap {
166+
'my-element': MyElement;
167+
}
168+
}
169+
```

0 commit comments

Comments
 (0)