Styles and layout

The styling and layout system in Nordcraft helps you write CSS visually, presenting the most commonly used CSS properties in the style panel. This approach lets you style elements visually without writing code while preserving traditional CSS flexibility. For more precise control, the CSS editor is also available.

Styling panel

Live

The style panel provides an interface for applying styles without needing to write CSS directly:

• Properties are logically grouped by categories ( Size, Layout, Text, etc.)
• Each group contains specific controls for each property (color pickers, dropdowns, etc.)
• You can find properties using the search field at the top of the style panel
  • 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
• If needed, you can write CSS in the Advanced section

CSS editor

Live

If you prefer writing CSS:

• Access the CSS editor by clicking the { } button at the bottom of the style panel
• Write traditional CSS syntax for complete control over styling
• View all defined styles and their properties in one place
• Switch seamlessly between the style panel and CSS editor view, where your CSS will be reflected in the style panel properties

You can transfer styling between elements:

1. 1

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

   Click the Copy styles button at the bottom of the style 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 system for layout:

• 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 according to the writing mode of the document (e.g. the direction such as left-to-right or right-to-left, the text-orientation, and more)
• Words wrap to the next line when they reach the container's edge
• This layout is optimized for reading and text-heavy content