Dynamic CSS
Dynamic CSS allows you to use semantic utility classes directly in HTML, automatically transforming them into valid CSS at both server-side (SSR) and runtime (client-side).
General Rules
| What I want | Class | CSS generated |
|---|---|---|
| Width 200 pixels | width-200px | width: 200px; |
| Height 50 pixels | height-50px | height: 50px; |
| Border radius 16 pixels | borderRadius-16px | border-radius: 16px; |
| Border 1 pixel solid blue | border-1px__solid__blue | border: 1px solid blue; |
| Padding 8 pixels 4 pixels | padding-8px__4px | padding: 8px 4px; |
| Font size 16px | fontSize-16px | font-size: 16px; |
| Font weight 600 | fontWeight-600 | font-weight: 600; |
- is used to separate the property and the value.
__ adds a space between values.
Media Queries
| What I want | Class | CSS generated |
|---|---|---|
| Width 200 pixels on mobile, 400 pixels on desktop | width-200px md_width-400px | .element { width: 200px; }@media (min-width: 960px) { .element { width: 400px; } } |
md_ is used to add a media query for the medium screen size.
Media Query List
Info
If you don't specify a media query, the class will be applied to all screen sizes.| Prefix | Name | Min width |
|---|---|---|
xxs_ | Extra extra small | 0px |
xs_ | Extra small | 300px |
sm_ | Small | 600px |
md_ | Medium | 960px |
lg_ | Large | 1264px |
xl_ | Extra large | 1904px |
xxl_ | Extra extra large | 2544px |