Clay CSS v3.4.0

Utilities

Autofit Row

Make content expand to fill remaining space or create equally spaced content with .autofit-row, .autofit-col, and .autofit-col-expand.

.autofit-row, .autofit-col, .autofit-col-expand shouldn't be used for laying out site pages, rather it's most useful for small chunks of content inside other components e.g. cards or list-groups.
Direct descendants of .autofit-col are flex-direction: column; (IE 10-11 workaround because they don't respect min/max width or min/max height in flex items) become block level elements by default, see https://www.w3.org/TR/css-flexbox-1/#flex-items. If you want to display content inside .autofit-col using floats, inline, or inline-block wrap the content with <div class="autofit-section"></div>.
Alberto Calvo, modified 2 hours ago.

ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual

Alberto Calvo, modified 2 hours ago.

ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual

Approved Pending Rejected
Alberto Calvo, modified 2 hours ago.

ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual

Approved Pending Rejected
Alberto Calvo, modified 2 hours ago.

ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual

Approved Pending Rejected

ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual

Sept 25 - 3 Views

Autofit Spacing

The class autofit-padded should be added to autofit-row to give padding to all autofit-col that are direct children of autofit-row.

The class autofit-padded-no-gutters-x gives padding to all autofit-col that are direct children of autofit-row and has negative margins on the left and right to offset the padding (similar to Bootstrap's row class).

The class autofit-padded-no-gutters-y gives padding to all autofit-col that are direct children of autofit-row and has negative margins on the top and bottom to offset the padding (Generally used if nesting .autofit-row).

The class autofit-padded-no-gutters gives padding to all autofit-col that are direct children of autofit-row and has negative margins on the top, right, bottom, and left to offset the padding (Generally used if nesting .autofit-row).

Autofit Row Vertical Alignment

Autofit Row vertically aligns to the top by default.

The class autofit-row-center will vertically align items in autofit-row to the middle.

The class autofit-row-end will vertically align items in autofit-row to the bottom.

Autofit Float

The component autofit-float or .autofit-float-{sm|md}-down simulates the behavior of floated elements on .autofit-row. Items that break to a new line will be aligned to the left.

This pattern provides the benefit of aligning content via flexbox without losing the behavior of floated elements at the expense of extra markup.

ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual

ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWord

Autofit Float End

Mimic "right floated" elements.

The component .autofit-float-end or .autofit-float-end-{sm|md}-down simulates the behavior of "right floated" elements on .autofit-row. Items that break to a new line will be aligned right.

Aligning items to the left will require nesting autofit-float autofit-row inside an autofit-col autofit-col-expand with the use of helper classes.

ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual

ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWord

Nesting Autofit Rows

COMMENTS

LC
DA
David Aragones Otero
3 Hours Ago

Percolator beans french press extraction seasonal grinder plunger pot caramelization. Single origin, dark grinder cultivar aftertaste iced skinny cappuccino irish barista aftertaste fair trade.Sweet, carajillo decaffeinated, french press crema froth and organic a fair trade. In est cream brewed bar roast filter americano turkish.

LC
Laura Garcia Castano
2 Hours Ago

Percolator beans french press extraction seasonal grinder plunger pot caramelization. Single origin, dark grinder cultivar aftertaste iced skinny cappuccino irish barista aftertaste fair trade.Sweet, carajillo decaffeinated, french press crema froth and organic a fair trade. In est cream brewed bar roast filter americano turkish.

Inline Item

Use inline-item inline-item-before, inline-item inline-item-middle, and inline-item inline-item-after to provide consistent spacing between text and icons in elements such as links or buttons. This can also be used in other components that have inline content (e.g., badge and label).

For this component to function and space properly, white space between text and icons must be removed from the markup inside the component. It's generally easier to remove all white space inside the link, button, or component. In the examples below, whitespaces in button and link are slightly off and the link underline on hover is a bit wide.
Link without Whitespace
linkwhy, but ok.
Link with Whitespace
link
Button without Whitespace
Button with Whitespace

Close

Button or Link for closing stuff.

Anchor
Button