The styling and layout system is based on CSS, presenting familiar properties in an intuitive UI panel. This approach lets you style elements visually without writing code while preserving traditional CSS flexibility. For more precise control, the CSS editor is available.

Styling panel

Live

The UI panel provides a user-friendly interface for applying styles without needing to write CSS directly:

• Properties are logically grouped by categories ( Size, Layout, Text, etc.)
• Appropriate controls for each property (color pickers, dropdowns, etc.)
• You can easily find properties using the search field
  • Type any property name in the search field
  • Select the property from the search results
  • You will be navigated to that property, ready to enter a value
• No CSS coding required, but possible in the Advanced section at the bottom

CSS editor

Live

For those who prefer working directly with CSS code:

• Access the CSS editor by clicking the { } button at the bottom of the styling panel
• Write traditional CSS syntax for complete control over styling
• View all defined styles and their properties in one place
• Switch seamlessly between the UI panel and CSS editor views

You can easily transfer styling between elements:

1. 1

   Select the element with the styling you want to copy
2. 2

   Click the Copy styles button at the bottom of the styling panel
3. 3

   Select the target element where you want to apply these styles
4. 4

   Paste the styles

By default, Nordcraft uses the flexbox layout algorithm:

• Flexbox is a powerful layout system that enables complex arrangements
• It allows for flexible distribution of space among elements
• Elements can be aligned and distributed along both main and cross axes
• Direction, wrapping, and spacing can be precisely controlled

When working with text content, Nordcraft defaults to Text layout:

• In CSS, this is called flow layout
• Text flows naturally from left to right (in left-to-right languages)
• Words wrap to the next line when they reach the container's edge
• This layout is optimized for reading and text-heavy content