Skip to content

Commit 423f953

Browse files
nielslyngsoenielslyngsoe
authored
Added uui-css documentation (#206)
2 parents 0b3980a + a912210 commit 423f953

File tree

2 files changed

+172
-8
lines changed

2 files changed

+172
-8
lines changed

‎packages/uui-css/README.md

Lines changed: 111 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,12 @@ UUI-CSS package contains css files which can be included in your project or comp
66

77
- **custom-properties.css** — use this if you like to include our custom properties in your project.
88
- **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.
9-
- **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.
9+
- **uui-text.css** — use this if you like to declare styles for typography for tags such as h1, h2. This is used in companionship with `uui-font`. Set the `uui-text` class on the element covering the scope of interest, this can be your root element. And if you want to use the styling inside a Shadow dom, that will have to have the `uui-text` class as well. See Applying the uui-css styling in the root.
10+
[See examples](#Usage)
1011

1112
Bundle:
1213

13-
- **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.
14+
- **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.
1415

1516
### See it in action
1617

@@ -59,3 +60,111 @@ Or you can just import the compiled bundle at once:
5960
// app.ts
6061
import '@umbraco-ui/uui-css/dist/uui-css.css';
6162
```
63+
64+
### Applying the uui-css styling in the root
65+
66+
Using the `uui-font` and `uui-text`
67+
68+
```html
69+
<body class="uui-font uui-text">
70+
<div id="app">
71+
<h1>Hello uui-css!</h1>
72+
<p>
73+
Everything inside my app will now use the font from uui-font and tag
74+
styling from uui-text because the root(body) has the uui-font and uui-text
75+
classes.
76+
</p>
77+
</div>
78+
</body>
79+
```
80+
81+
Using the custom properties:
82+
83+
```html
84+
<p style="background: var(--uui-interface-surface-alt);">
85+
I will now have a background color from the custom properties.
86+
</p>
87+
```
88+
89+
Full example:
90+
91+
```html
92+
<!DOCTYPE html>
93+
<html>
94+
<head>
95+
<link
96+
rel="stylesheet"
97+
href="https://cdn.jsdelivr.net/npm/@umbraco-ui/uui-css@latest/dist/uui-css.css" />
98+
</head>
99+
<body class="uui-font uui-text">
100+
<div id="app">
101+
<h1>Hello uui-css!</h1>
102+
<p>
103+
Everything inside my app will now use the font from uui-font and tag
104+
styling from uui-text because the root(body) has the uui-font and
105+
uui-text classes.
106+
</p>
107+
<p style="background: var(--uui-interface-surface-alt);">
108+
I will have a background color from the custom properties.
109+
</p>
110+
</div>
111+
</body>
112+
</html>
113+
```
114+
115+
### Applying uui-text in a component
116+
117+
Import the text css from uui-css
118+
119+
```js
120+
import { UUITextStyles } from '@umbraco-ui/uui-css';
121+
```
122+
123+
Add the css to the component styles
124+
125+
```js
126+
static styles = [
127+
UUITextStyles,
128+
css`
129+
/* your css goes here */
130+
`,
131+
];
132+
```
133+
134+
Add the `uui-text` class to the root of the component
135+
136+
```html
137+
<div class="uui-text">This is my custom element</div>
138+
```
139+
140+
Full example:
141+
142+
```js
143+
import { html, css, LitElement } from 'lit';
144+
import { customElement } from 'lit/decorators.js';
145+
import { UUITextStyles } from '@umbraco-ui/uui-css';
146+
147+
@customElement('my-element')
148+
export class MyElement extends LitElement {
149+
static styles = [
150+
UUITextStyles,
151+
css`
152+
/* your css goes here */
153+
`,
154+
];
155+
156+
render() {
157+
return html`
158+
<div class="uui-text">
159+
This is my custom element
160+
</div>
161+
`;
162+
}
163+
}
164+
165+
declare global {
166+
interface HTMLElementTagNameMap {
167+
'my-element': MyElement;
168+
}
169+
}
170+
```

‎packages/uui-css/lib/uui-css.story.ts

Lines changed: 61 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@ export default {
99
docs: {
1010
source: {
1111
code: `
12-
// Include each of the following:
13-
import '@umbraco-ui/uui-css/dist/custom-properties.css';
14-
import '@umbraco-ui/uui-css/dist/uui-font.css';
15-
import '@umbraco-ui/uui-css/dist/uui-text.css';
12+
// Include each of the following:
13+
import '@umbraco-ui/uui-css/dist/custom-properties.css';
14+
import '@umbraco-ui/uui-css/dist/uui-font.css';
15+
import '@umbraco-ui/uui-css/dist/uui-text.css';
1616
17-
// Alternatively include the compiled bundle
18-
import '@umbraco-ui/uui-css/dist/uui-css.css';
17+
// Alternatively include the compiled bundle
18+
import '@umbraco-ui/uui-css/dist/uui-css.css';
1919
`,
2020
},
2121
},
@@ -48,3 +48,58 @@ export const Overview: Story = () => html` <article style="max-width:580px;">
4848
</li>
4949
</ul>
5050
</article>`;
51+
52+
export const Usage: Story = () => html`
53+
<div class="uui-text">
54+
<h1>Hello uui-css!</h1>
55+
<p>
56+
This component will now use the styling from uui-text because the root of
57+
the component has the uui-text class.
58+
</p>
59+
<p style="background: var(--uui-interface-surface-alt);">
60+
this paragraph uses a custom property from the uui custom properties to
61+
set its background color.
62+
</p>
63+
</div>
64+
`;
65+
Usage.parameters = {
66+
docs: {
67+
source: {
68+
code: `
69+
import { html, css, LitElement } from 'lit';
70+
import { customElement } from 'lit/decorators.js';
71+
import { UUITextStyles } from '@umbraco-ui/uui-css';
72+
73+
@customElement('my-element')
74+
export class MyElement extends LitElement {
75+
static styles = [
76+
UUITextStyles,
77+
css\`
78+
/* your css goes here */
79+
\`,
80+
];
81+
82+
render() {
83+
return html\`
84+
<div class="uui-text">
85+
<h1>Hello uui-css!</h1>
86+
<p>
87+
This component will now use the styling from uui-text because the root of the component has the uui-text class.
88+
</p>
89+
<p style="background: var(--uui-interface-surface-alt);">
90+
this paragraph uses a custom property from the uui custom properties to set its background color.
91+
</p>
92+
</div>
93+
\`;
94+
}
95+
}
96+
97+
declare global {
98+
interface HTMLElementTagNameMap {
99+
'my-element': MyElement;
100+
}
101+
}
102+
`,
103+
},
104+
},
105+
};

0 commit comments

Comments
 (0)