Appearance
Understanding the aeppic default HTML Layout Hierarchy
When working with aeppic, you're not confined to the default HTML layout hierarchy. You have the freedom to configure a different root layout. However, understanding the default layouting hierarchy can be beneficial. It can help you make informed decisions about preserving certain elements, or understand the tradeoffs when making changes.
Web applications differ significantly from longform content, especially when it comes to dealing with overflow rules in HTML. While CSS Grid provides a robust solution for creating complex layouts, it isn't always the perfect answer to all layout problems. The dynamic nature of aeppic - where all elements can be redefined at runtime - can further complicate things, especially when it comes to filling up remaining space.
Our primary goal is to create a classic layout with optional left and right bars, a top bar, and a central content area (which we refer to as page). These left and right bars should always remain in view, never scrolling away, while the central page area should take up the remaining height of the viewport.
Our current solution (which is not yet fully implemented with CSS Grid) relies on a global variable var(--ae-max-top-content). This variable represents the exact pixel height of any content above the main page content.
Recursive forms
The rendering pipeline below can contain other forms recursivley as content of a form. In that case the sub forms use the same layout templates, but do NOT limit the vertical height.
Key Considerations When Changing Layouts
When making changes to the layout, here are a few key points to consider:
Maintain the Role of the
var(--ae-max-top-content)Variable: This variable is crucial for maintaining the layout's structure. It is used to calculate the maximum height of the main content area, ensuring it doesn't overflow the viewport. If you need to adjust the height of the top content, be sure to update this variable accordingly.Understanding Overflow Rules: Overflow rules are essential for managing the display of content that exceeds its container's size. In our layout, the central page area is designed to be scrollable if the content overflows its height. If you're making changes to the structure, be mindful of how overflow rules may affect the display of content.
Managing Dynamic Content: In aeppic, all elements can be redefined at runtime, which can complicate layout management. When making changes, consider how dynamic content may affect the layout, especially when it comes to maintaining the fixed position of the left and right bars and managing the height of the central content area.
Transitioning to CSS Grid: CSS Grid offers a powerful and flexible solution for creating complex layouts. However, transitioning from a non-grid layout can require substantial changes to both the HTML structure and the CSS. Be sure to thoroughly test your layout after making any changes to ensure it behaves as expected.
In conclusion, the layout in aeppic is designed to provide a robust and flexible structure for a web application. It's designed to handle dynamic content, manage overflow effectively, and provide a consistent user experience. When making changes to this structure, consider how these changes may affect these key areas.
CSS Structure Explanation
Leaving out some parts (right side bar etc) the basic layout on a conceptual level looks like this:
Open the layout in a new window here
An alternate example with a few more responsive tweaks is here
Diagram
Classes in the example
1. Root Styles
html, body, and div are given basic styles to reset margins, padding, and to use border-box sizing.
2. Main Layout
.main: It's a flex container with 100vh height and contains all elements..navbar: A fixed-width navigation bar..center: This flex item grows to take up all remaining horizontal space in the.main.
3. Toolbar
.toolbar: A toolbar with a fixed height set by a CSS variable.
4. Page and ae-form
.page: Container for the.ae-form..ae-form: Container for the.form-main-layout. Renders in place no extra DOM element
5. Form Layout
.form-layout: A grid container with two columns in our example. The first column is for the sidebar, and the second column grows to take up the remaining space to show the form..form-sidebar: An optional fixed-size sidebar for a form .
6. Form Section Root Layout
.form-section-root-layout: A flex container set to stack its children in a column. Its children have a minimum height of 0 to allow them to shrink as needed. When using tabs and the form isn't nested in another form the last element (the tab content) is set toflex:1and use the remaining space.
7. Form Before Sections Content
.form-paragraphs-before-sections: A container for all content of the section before any subsections are defined..form-tabs-container: A grid container for the content to limit the tabs from overflowing..form-section-tabs: A container for the form tabs representing the level 1 sub sections. It can scroll horizontally if the tabs overflow its width. The container itself is in a grid to ensure proper space usage.
8 Form Tab Content
This part is most often another section, but in this example we use:
.form-tab-content: The container for the form content. It is set to grow and take up the remaining space in the.form-section-root-layout. It has a vertical scrollbar if the content overflows its height..header: Headers within the form content. They are positioned as sticky at the top of their parent..spacer: A spacer between headers, with a fixed height..footer: The footer of the form content.