Beginner’s Guide to Layout

Sections, Columns, and Divs

In Breakdance, the primary layout elements are Section, Column, and Div.

These elements are containers, which means other elements can be placed inside of them.

These elements can also be placed inside of each other.

Each of these elements serves a distinct purpose in structuring and organizing content on a web page, and understanding when and how to use each element is key to effective web design.

• Section: The Section element acts as the top-level layout component, essentially serving as a row on a web page. All elements in Breakdance must be placed inside a Section.
• Columns: Best for organizing content side-by-side. Columns are typically used within sections to create structured, multi-column layouts.
• Div: A versatile container for more granular layout control. Use divs for complex designs that require nested structures or precise positioning of elements.

Basic Layout Controls

By default, Breakdance’s layout elements use flexbox and stack vertically.

The basic layout controls are available in the Layout section of the design tab. They are the go-to tool for laying out elements on your page, and covering almost all layout needs.

These controls are responsive, meaning you can set different alignments for different screen sizes.

• Align – Choose how to horizontally align content within the container.
• Vertical Align – Adjust the vertical alignment of content within the container.
• Gap – Set the space between items in the container.
• Horizontal – Set child elements to stack horizontally.
  • Align – Specify the horizontal alignment of items.
  • Vertical Align – Choose the vertical alignment for items when in horizontal layout.
  • Vertical At – Set a breakpoint for when the layout becomes vertical again.

Advanced Layout Controls

For more complex layouts, elements in Breakdance support advanced flexbox configurations. This includes settings like flex direction, justify content, and align items, offering intricate control over the layout.

It is advised to use these settings on a Div element. They won’t work as expected on a Section element, since they apply to the section’s outer wrapper, not the HTML element that wraps the children.

Accessing Flexbox Controls

• Navigate to Settings > Advanced > Wrapper.
• Set Display to Flex in the Layout section to access flexbox properties like flex-direction, align-items, and justify-content.

Flex Child Controls

Located in the advanced panel, these controls include align-self, order, flex-grow, flex-shrink, and flex-basis.