Frames
When designing a layout, frames are the outermost layer that holds all the contents together. The Spark Design System offers grid styles for both fluid and fixed frames. A fluid frame occupies the entire width of the screen across all breakpoints. On the other hand, a fixed frame has a maximum width set to contain designs on larger screens and becomes fluid as the screen size reduces. It's essential always to use frames and layout grids for optimal results.
Responsive Layout Grids
To maintain usability, layout grids must be responsive, scale up and down, and display information on various screen sizes. This is accomplished by establishing a consistent layout grid behavior and setting determined breakpoints to support your designs.
Below are two examples showing how a layout would respond and adapt to different screen sizes using the Flare 4.0 Grid styles.
Fluid Behavior
Fluid layouts are measured in percentages rather than pixels, so the container width increases and decreases as the screen size changes. The container width adjusts by keeping the margin and gutter widths constant while the column size increases or decreases. This behavior utilizes available screen space but can cause elements to appear stretched out.
Fixed Behavior
This behavior has a “fixed” container width and position. As the screen size changes, the container maintains its exact measurements while the margin size increases or decreases. This allows all elements to stay proportional but can result in too much space in margins on extra-large device sizes.
