Initial commit

Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com>
Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com>
Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com>
Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>
This commit is contained in:
Eric Tuvesson
2023-09-05 12:08:55 +02:00
commit 53f0d6320e
2704 changed files with 76354 additions and 0 deletions

View File

@@ -0,0 +1,37 @@
---
hide_title: true
hide_table_of_contents: true
title: CSS Definition
---
<##head##>
# CSS Definition
This node lets you write your own global custom CSS. It outputs your style definitions in a style tag at the top of your web app.
<div className="ndl-image-with-background l">
![](/nodes/utilities/css-definition/preview.png)
</div>
The Visual nodes all have built in Visual Properties. They feature all the styling options needed for the majority of apps. The CSS Definition node is used whenever those properties are not enough: if you want to use experimental or advanced CSS features, hacks or workarounds. It is written like plain CSS:
<div className="ndl-image-with-background l">
![](/nodes/utilities/css-definition/css-example.png)
</div>
Classes can be attached to the Visual nodes in the Property Panel:
<div className="ndl-image-with-background l">
![](/nodes/utilities/css-definition/class-example.png)
</div>
The CSS Definition is best used if a style class will be reused on multiple different Visual nodes. If you're only styling one Visual node you should do it in the CSS Style editor at the bottom of the Property Panel.
<##head##>