Style

Styles control the visual appearance of HTML blocks. Each HTML block has a style socket on the right side for connecting style blocks. Style blocks can be connected in a chain, and the chained style blocks will work together on the connected HTML block.

For example, a text paragraph is connected to 3 styles: background color, border, and padding.

The 3 styles will work together on the text paragraph:

Paragraph

Inline elements and block-level elements handle styles differently, see the HTML section for more details.

Style blocks use a size index of 0~5 to represent spacing. This index is defined based on the root element's font-size (rem), which is 16px by default. The relationship between the index number and pixel value is as follows:

Index	Ratio	Pixels
0	0	0
1	rem x 0.25	4px
2	rem x 0.5	8px
3	rem x 1	16px
4	rem x 1.5	24px
5	rem x 3	48px

gutters

Gutters are the gaps between columns within a row, which are implemented by adding padding to column blocks. The gutters style can only be applied to HTML row blocks.

Attributes

• direction - Spacing direction:
  • all - Horizontal and vertical direction.
  • x - Horizontal direction.
  • y - Vertical direction.
• size - Size index 0~5.

Example

The example row block has 4 column blocks, and the column width is set to 1/2 of the row width. Therefore, the 4 column elements will be split into two lines. The column content is a text paragraph, with 0 margin and a border to show the effect. Note the gutters style connected to the row block, which has its spacing set to size index 3 (16px) in all directions. Therefore, there will be a 16px gap between the 4 text paragraphs.

column width

The column width style uses a grid system and supports responsive layouts. The grid divides the row's width into 12 equal parts. You set each column's width by specifying how many parts it takes up. When the total column width adds up to more than 1, the columns will automatically wrap to the next line within the row.

The column width style supports responsive layouts. You can set different column width ratios for different viewport widths and chain them together to adjust column widths dynamically.

The column width styles can only be applied to HTML column blocks.

Attributes

• width - Column width ratio 1/12~1.
• breakpoint - Responsive breakpoint:
  • default - The column width ratio is the default and applies to all viewport widths.
  • when vw ≥ - The column width ratio applies when the viewport is greater than or equal to the specified width. The style block will show extra options for specifying the viewport width, including the following predefined values:
    • 576px
    • 768px
    • 992px
    • 1200px
    • 1400px

Example

1/6

1/3

1/2

size

The size style is used to set an element's width or height.

Attributes

• option - Width/Height options:
  • width - Width.
  • min-width - Minimum width.
  • max-width - Maximum width.
  • height - Height.
  • min-height - Minimum height.
  • max-height - Maximum height.
• value - Size value. Set the value based on the selected unit.
• unit - Size unit:
  • px - Pixels. The size takes an integer value.
  • rem - Ratio relative to the root element's font-size. The size value is a multiple of rem (decimal allowed), the default root element's font-size is 16px.
  • % - Percentage based on the parent element's size. For example, 50 means half the parent's size.
  • vw - Percentage based on the viewport width.
  • vh - Percentage based on the viewport height.

Example

spacing

The spacing style is used to set the padding or margin of an element. Padding is the space within the border and is part of the element's size; margin is the space outside the border and is not included in the element's size.

Attributes

• type - Type of spacing:
  • margin - Outer margin.
  • padding - Inner padding.
• side - Side of spacing:
  • all - All sides.
  • top - Top.
  • bottom - Bottom.
  • start - Start (left) side.
  • end - End (right) side.
  • x - Horizontal (left and right) sides.
  • y - Vertical (top and bottom) sides.
• size - Size index: 0~5, auto.

Example

Apply outer margin (yellow) and inner padding (green) to the innermost group.

flex

The flex style turns an HTML container block (row, column, group) into a flex container and specifies the layout direction and gaps between inner elements.

Attributes

• direction - Layout direction of inner elements:
  • horizontal - Horizontal layout.
  • vertical - Vertical layout.
• gap - Gap between inner elements. Takes size index values: 0~5.

Example

Text 1Text 2Text 3

flex align

The flex align style can only be applied to flex containers. There are two alignment directions for inner elements within a flex container:

• Main axis - the layout direction of the inner elements (axial).
• Cross axis - the direction perpendicular to the main axis (radial).

Attributes

• axis - Select the alignment axis:
  • main - Main axis.
  • cross - Cross axis.
• align - Alignment options. Options depend on the selected axis:
  • main - Main axis options:
    • start - Aligned to the start of the container.
    • end - Aligned to the end of the container.
    • center - Aligned to the center of the container.
    • between - Evenly distributed, with the same spacing between elements. The first element aligns to the start, and the last to the end.
    • around - Evenly distributed, with the same spacing between elements. The space before the first and after the last element is half the space between elements.
    • evenly - Evenly distributed along the main axis, with the same space between elements and at the start and end.
  • cross - Cross axis options:
    • start - Aligned to the start of the cross axis.
    • end - Aligned to the end of the cross axis.
    • center - Centered on the cross axis.
    • baseline - All elements aligned to the baseline.
    • stretch - Stretches elements to fill the cross axis of the container.

Examples

1. Horizontal layout, main axis centered.

   
   Text 1Text 2
   Text 2Text 3
   Text 3
   Text 3

2. Horizontal layout, cross axis centered.

   
   Text 1Text 2
   Text 2Text 3
   Text 3
   Text 3

text align

The text align style sets the alignment of inline elements within a container or the text alignment of block-level elements.

Attributes

• align - Alignment options:
  • start - Aligned to the start side.
  • center - Align to the center.
  • end - Aligned to the end side.

Example

1. Applying style to an inline element in a container.

   

   Inline Text

2. Applying style directly to a block-level element.

   

   Paragraph

position

The position style specifies how an element is positioned within the document. It works with positioning parameters (position inset) to determine the final location of the element.

Attributes

• position - Positioning method:
  • static - Normal positioning (system default). The element is positioned according to the normal document flow, i.e., the element's current position in the document. Positioning parameters are invalid.
  • relative - Relative positioning. The element is positioned according to the normal document flow, then offset relative to itself based on the positioning parameter values. The offset doesn't affect other elements, and the element still takes up the same space in the layout as it would with static positioning.
  • absolute - Absolute positioning. The element is removed from the normal document flow and takes up no space. Positioning parameters specify the offset of this element relative to the closest positioned (non-static) ancestor element.
  • fixed - Fixed positioning. The element is removed from the normal document flow and takes up no space. Positioning parameters specify the element's offset relative to the viewport. The element's position doesn't change when the screen is scrolled.
  • sticky - Sticky positioning. The element is positioned according to the normal document flow, then offset relative to the nearest scrolling ancestor and nearest block-level ancestor, based on the positioning parameter values. The offset doesn't affect other elements. A sticky element will be fixed to its closest ancestor that can be scrolled.

Example

1. The relative positioning of group doesn't change its own layout behavior, but makes it the positioning reference (non-static positioned parent) for child elements.
2. Button A uses absolute positioning, and the positioning parameter right:0 indicates that the right edge of the button is offset by 0 relative to the right boundary of the reference element (group). Therefore, Button A is positioned against the right boundary of the group element.
3. Button B maintains normal layout behavior, and is laid out sequentially to the left within group.

position inset

Positioning parameters specify an element's positioning offset using four CSS inset properties: top, left, bottom, and right. These properties only work with non-static positioning methods, and their effect depends on the chosen positioning method (position):

• relative - With relative positioning, inset specifies the offset relative to the element's default outer boundary.
• absolute - With absolute positioning, inset specifies the offset relative to the element's closest positioned (non-static) parent.
• fixed - With fixed positioning, inset specifies the offset relative to the viewport.
• sticky - With sticky positioning, inset specifies the offset relative to the boundary of the scrolling container.

Attributes

• inset - Offset properties:
  • top - The offset of the top edge of the positioned element relative to the top edge of the reference element.
  • left - The offset of the left edge of the positioned element relative to the left edge of the reference element.
  • bottom - The offset of the bottom edge of the positioned element relative to the bottom edge of the reference element.
  • right - The offset of the right edge of the positioned element relative to the right edge of the reference element.
• value - Percentage offset. The percentage of the height (top/bottom) or width (left/right) of the reference element:
  • 0 - No offset.
  • 50 - The offset is half (50%) of the reference element's size.
  • 100 - The offset is 100% of the reference element's size.

You can use styles to set the offset in pixels or font-relative units, e.g., top:10px; left:1rem;.

color

The color style allows you to set the foreground or background color of an element.

Attributes

• option - Select foreground or background color:
  • color - Foreground color.
  • bgcolor - Background color.
• color - The specified color.

Example

Paragraph

border

The border style adds a border to an element. You can specify the desired sides, thickness, and color.

Attributes

• side - Select border side:
  • all - All sides.
  • top - Top side.
  • bottom - Bottom side.
  • left - Left side.
  • right - Right side.
  • x - Horizontal (left and right) sides.
  • y - Vertical (top and bottom) sides.
• px - The border thickness in pixels.
• color - The color of the border.

Example

round

The round style makes the edges of elements rounded (including borders).

Attributes

• radius - The radius of the rounded corner.
• unit - The unit of the rounded corner radius:
  • px - Pixels.
  • % - The percentage relative to the side length of the element.

Example

font size

The font size style sets the size and weight of an element's font.

Attributes

• size - The font-size value.
• unit - The font-size unit:
  • rem - The ratio relative to the root element's font-size.
  • px - Pixels.
• weight - The font weight:
  • normal - Normal (regular).
  • bold - Bold.

Example

1.5x font-size.

Text

classes

Users familiar with CSS can use this block to set an element's CSS class names. Node-App builds applications based on the Bootstrap style library and supports all CSS class names defined by Bootstrap. Refer to Bootstrap.

Attributes

• classes - CSS class names. Click to open the class selection dialog, where you can select preset Bootstrap classes or manually enter your own.

Example

Bootstrap class names: text-bg-info (info text), p-3 (padding), shadow (shadow effect).

Paragraph

styles

Users familiar with CSS can use this block to set the CSS properties of an element, with multiple properties separated by a semicolon ;. Refer to CSS Cascading Style Sheets.

Attributes

• styles - CSS properties separated by semicolons ;.

Example

font-size:1.5rem; (1.5x font-size), padding:.5em; (padding), background:linear-gradient(45deg, bisque, orchid); (gradient background color).

Paragraph

Y connector

The Y connector converts chained style blocks into a parallel form, shortening the total length of chained blocks. When an element has multiple styles in a chain, it may occupy too much space in the workspace, affecting readability. Using the Y connector to split chained styles into a parallel form can improve readability.

Example

Equivalent form using the Y connector: