Using Custom CSS

NUI supports adding Custom CSS in various places. A common syntax is used everywhere

NUI offers a simpler syntax for defining CSS. This syntax avoids the base selector (handled automatically by the library). Using semicolon ; and curly braces {} is optional (but can still be used).

Basic Example

font-size: 20px
color: red

This example can also be written as

{
   font-size: 20px;
   color: red;
}

Using Anvil Theme Colors

You can also use Anvil theme colors in your CSS similar to how you use them in code.

font-size: 20px
color: theme:Primary

If your color name has a space in it (like Primary 500), use an underscore _ instead of the space in the custom CSS. It will find the matching color name with spaces

font-size: 20px
border: solid theme:Primary_500 2px /* Will set the border color to Primary 500 */

Support for CSS selectors

You can use any CSS selector just as you normally use them. The only difference is the omit of the main selector

font-size: 20px
color: red

:hover
font-size: 25px

::placeholder
color: #ccc

@media (max-width: 768px)
font-size: 20px

.some-class
margin: 5px

 .some-child-class
padding:5px

CSS for Icons

You can write CSS for icons by using the selector

>[nui-icon="true"]
color: green

Components have an Icon CSS property already. You only need this in presets