#Foundation responsive columns full
This is useful when you want to combine a piece of long form text with a code block that would be the full width of the screen.īoth layouts are adaptive. You can combine multiple blocks of fixed and fluid layout underneath each other on a single screen.
The fluid layout full-screen works better for screens that are data or interaction heavy. The fixed-width layout has a max-width of 960px and is useful for long form content. You can apply a fixed width or a fluid grid layout. In our grid system we reserve space for the navigation on the left, and apply a center-aligned 12-column adaptive layout to the content. Global navigation: Minimum width of 60px.Ĭontainer navigation: Minimum width of 240px.Ĭolumn: Guides what the content aligns to. We believe that the user's content should be the main focus of a page, so we reduce all unnecessary distractions. We prefer this over relying heavily on boxes and lines around content as it reduces the amount of elements a user needs to scan in order to digest what they see. We define a horizontal grid for content and UI elements to align to, creating a visual structure with content. Whenever possible, make sure that objects line up, both vertically and horizontally.Īlign your bounding box to the grid, not the baseline of your text. When necessary use 4px to make more fine tuned adjustments. Use multiples of 8px when defining measurements, spacing, and positioning elements. The 4px baseline is there to allow more flexibility for line heights and smaller adjustments. Always try to align objects on the 8px grid, but where necessary use good judgement to fine tune your designs to 4px. This baseline convention naturally flows on to the rest of the grid system, which includes icons, components, and layout dimensions. This rhythm is created by the line height between each line of text and the margin between elements. All text flows vertically along this baseline, creating a similar rhythm across all screens. The x-height is halved to produce a 4px baseline. The Atlassian type stack specifies 14px for the base font size, which produces an 8px x-height.
The grid can be applied through the page component in the Atlaskit library. Designing to the grid helps create an experience that facilitates understanding and brings order to the page. Consistent use of a grid system provides the foundation for harmoniously and consistently positioning elements onscreen.