Introduction to the Breakdance Layout Engine
The layout engine is available for most Container elements, such as the Section, Div, Columns and Wrapper Link elements. You’ll find the layout tab in the properties panel on the left side of your screen.
Understanding The Layout Options
Breakdance offers four distinct layout options to control the display of your child elements within a parent container. Each layout option provides a set of customizable settings, allowing you to fine-tune the appearance and behavior of your elements.
- Vertical Layout: This layout is particularly useful for mobile-friendly designs. It stacks elements vertically, making content easily scrollable on smaller screens. It is also the default layout.
- Horizontal Layout: The horizontal layout is ideal for creating row-based designs, where elements are aligned next to each other, providing a clean and organized look.
- Grid Layout: The grid layout offers a powerful way to display items in a structured yet flexible manner, making it perfect for galleries, product listings, and more.
- Advanced Layout: For those who need even more control over their layouts, Breakdance provides advanced layout options. These options include features that allow for a higher degree of customization, catering to specific design requirements and complex layouts. There are two different advanced layouts available.
- Flex: This allows you to customize every aspect of the flex layout.
- Grid: This option allows you to customize the grid layout and fine-tune it further.
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 and inside of each other.
Each element 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.
Additional Notes
The layout options in Breakdance are designed to offer flexibility and control over how your content is presented. By understanding and utilizing these options, you can create responsive, visually appealing designs that look great on any device. Remember, each layout option comes with its own set of customizable settings, so don’t hesitate to experiment with different configurations to achieve the best results for your project.
