Skip to content

Commit b65338a

Browse files
committed
Move Postcss back since Storybook needs it
1 parent b822212 commit b65338a

File tree

2 files changed

+40
-4
lines changed

2 files changed

+40
-4
lines changed

packages/uui-css/README.md

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,53 @@
55
UUI-CSS package contains css files which can be included in your project or components if needed
66

77
- **custom-properties.css** — use this if you like to include our custom properties in your project.
8-
- **local-typography.css** — use this if you like to declare styles for typography, this is needed when using ex.: H1 in a Shadow DOM.
9-
- **root.css** — If you like your project to be styled for Umbraco UI, then include this in the root of your project.
8+
- **uui-font.css** — use this if you like to import our font in your project. You must set the `uui-root` 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.
10+
11+
Bundle:
12+
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+
15+
# Usage in your project
16+
17+
## CDN
18+
19+
For the best results you should include the `uui-css.css` bundle in your project, which contains all the css files and custom variables:
20+
21+
```html
22+
<!-- Latest Version -->
23+
<link
24+
rel="stylesheet"
25+
href="https://cdn.jsdelivr.net/npm/@umbraco-ui/uui-css@latest/dist/uui-css.css" />
26+
27+
<!-- Specific version -->
28+
<link
29+
rel="stylesheet"
30+
href="https://cdn.jsdelivr.net/npm/@umbraco-ui/[email protected]/dist/uui-css.css" />
31+
```
1032

1133
## Installation
1234

35+
If you want to have fine-grained control over the CSS files, you can install the `@umbraco-ui/uui-css` package.
36+
1337
```zsh
1438
npm i @umbraco-ui/uui-css
1539
```
1640

1741
## Usage
1842

19-
```html
20-
<style src="@umbraco-ui/uui-css/root.css"></style>
43+
For a build system like _Vite_, the styling could be included like this if you want to control the styling and variables with the build system:
44+
45+
```ts
46+
// app.ts
47+
import '@umbraco-ui/uui-css/dist/custom-properties.css';
48+
import '@umbraco-ui/uui-css/dist/uui-font.css';
49+
import '@umbraco-ui/uui-css/dist/uui-text.css';
50+
```
51+
52+
Or you can just import the compiled bundle at once:
53+
54+
```ts
55+
// app.ts
56+
import '@umbraco-ui/uui-css/dist/uui-css.css';
2157
```
File renamed without changes.

0 commit comments

Comments
 (0)