Example Page
This page demonstrates incorporating Tidy Columns into your flexbox layout. Toggle a grid overlay with the button in the header, and view the CSS file for additional context.
On desktop, this title holder is absolutely-positioned, which means it's out of document flow, so the image caption can't naturally sit next to it. Use Tidy Columns to add a left offset to the caption to correct maintain alignment and spacing.
On desktop, this image caption is nestled alongside the absolutely-positioned title wrapper.Benjamin Voros / Unsplash
Tidy Columns sets widths and margins, based on your configuration, with the goal that any elements along the vertical axis that should be aligned, are. This plugin will not set layout for you. Layout is your job.
See the Tidy Columns README or Wiki for more about configuring the plugin.
The width of the elements within this content area are set using Tidy Columns. The content area itself is six columns wide and one column left of center.
The design calls for floated images to be three-columns wide and be pulled exactly one column outside of the content parent to align with the article header. Using a negative right offset we can ensure disconnected elements remain vertically aligned.
Tidy Columns makes it dead simple to maintain alignment and spacing of elements down the page.
The full-width image above should max out at the site’s max-width. Using Tidy Columns to pull the image in-line with the edge of the site means no more magic numbers, or fudging with the developer tools. This demonstrates the following features:
- Using a negative value for with
tidy-offset - Using Tidy Columns functions within a css
calc()function - Using
tidy-var()to retrieve a configuration value
Just for kicks, the content in the site footer should align halfway through the second column. This demonstrates the ability to span and offset by a fraction of a column.