Global Margin

The Frankie UI Framework uses the lobotomized owl CSS selector to set global margin between two sibling HTML elements. The margin is set using margin-top with the default size of 1rem. Example:

I am the first sibling. I do not have margin-top.

I am a sibling. I have margin-top applied to me from * + * { margin-top: 1rem; }.

Margin On Sibling Elements

If the global margin-top needs to be adjusted to be smaller or larger, use the margin-top--sibling CSS classes to do this. Size classes start from margin-top--sibling--smallest through margin-top--sibling--largest.

One use case for these classes is on a label element, where the label should be closer to the input.

Sizes

Margin Auto

Use these CSS classes in conjunction with flexbox to position children items to the left, right, and bottom within the parent container that has display: flex applied. Classes include margin-left--auto, margin-right--auto, and margin-top--auto. You can also append classes with breakpoints --xxs through --xxl to control positioning at different screen sizes.

Note that there is no margin-bottom--auto because there is no need for such a declaration.

Margin None

The margin--none CSS class sets margin: 0 on an element to remove any margin from all sizes of the element. Appending --xxs to --xxl at breakpoints from to set margin--none at different screen sizes.

Base

I am the first sibling. I will never have margin-top applied.

I am a sibling with the margin--none CSS class. I will also never have any margin applied.

Breakpoints

Margin Off

If all child elements under a parent should have their margin-top set to zero, then the margin--off CSS class should be used. This lets the designer/developer write only one CSS class instead of many single elements, saving time. Child element margins can also be turned off at breakpoints by appending --xxs to --xxl to margin--off.

Base

Breakpoints