Built-in classes

Famiq provides built-in classes to save your time for color, size, alignment, border radius and spacing.

Color

primary | secondary | success | danger | info | warning |

primary-dark | success-dark | danger-dark | info-dark | warning-dark |

dark.

Size

small | large

Spacing

Margin

x is a number * 5px

• mt-x | mb-x | ml-x | mr-x: margin top, bottom, left and right at x * 5px.
• mt-auto | mb-auto | ml-auto | mr-auto: margin auto for top, bottom, left and right.
• my-x: margin top and bottom at x * 5px.
• my-auto: margin auto for top and bottom.
• mx-x: margin left and right at x * 5px.
• mx-auto: margin auto for left and right.

Padding

x is a number * 5px

• pt-x | pb-x | pl-x | pr-x: padding top, bottom, left and right at x * 5px.
• pt-auto | pb-auto | pl-auto | pr-auto: padding auto for top, bottom, left and right.
• py-x: padding top and bottom at x * 5px.
• py-auto: padding auto for top and bottom.
• px-x: padding left and right at x * 5px.
• px-auto: padding auto for left and right.

Border radius

• rounded-0: 0px for all corners.
• rounded-sm: 2px for all corners.
• rounded-lg: 8px for all corners.
• rounded-xl: 24px for all corners.
• rounded-pill: 9999px for all corners.
• rounded-circle: 50% for all corners.

default is 5px for all corners.

Alignment

JustifyContent

jc-start | jc-end | jc-flex-start | jc-flex-end | jc-center | jc-stretch | jc-space-between | jc-space-evenly | jc-space-around.

JustifyItems

ji-start | ji-end | ji-center | ji-stretch | ji-base-line.

JustifySelf

js-start | js-end | js-center | js-stretch | js-base-line.

AlignContent

ac-start | ac-end | ac-flex-start | ac-flex-end | ac-center | ac-stretch | ac-space-between | ac-space-evenly | ac-space-around.

AlignItems

ai-start | ai-end | ai-center | ai-stretch | ai-base-line ai-flex-start | ai-flex-end.

AlignSelf

as-start | as-end | as-center | as-stretch | as-base-line as-flex-start | as-flex-end.