Styles and layout

The style panel in Nordcraft helps you write CSS code for your website in a visual interface. This approach lets you style elements on the canvas in real time without writing code, all while generating pure CSS. For more precise control, you can also edit CSS code directly in the CSS editor.

Styling panel

Live

• Properties are grouped by category (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
• You can add CSS properties and values not currently supported by the style panel in the Advanced section

Enable youtube videosPrivacy policy

If you prefer writing CSS code:

• Access the CSS editor by clicking the { } button at the bottom of the style panel
• View all defined styles and their properties in one place, including CSS keyframe animations
• Write traditional CSS syntax
• Switch between the style panel and CSS editor view, where your CSS will be automatically updated between the different views

CSS editor

Live

You can copy and paste CSS between elements:

1. 1

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

   Click the Copy properties button at the bottom of the style panel
3. 3

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

   Click the Paste properties button at the bottom of the style panel

By default, Nordcraft uses the flexbox system for layout. Flexbox is a layout system that allows control over the layout of child elements, referred to as flex items. Using flexbox, space between and alignment of child elements can be automatically distributed, all without margins or media queries.

Enable youtube videosPrivacy policy

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