api.md

API

The complete API provided by official SUIT CSS packages. See the README of individual packages for details of their API.

Utilities

After

Classes

• u-afterXof2
• u-afterXof3
• u-afterXof4
• u-afterXof5
• u-afterXof6
• u-afterXof8
• u-afterXof10
• u-afterXof12

...and responsive variants u-sm-*, u-md-*, and u-lg-*.

Align

Classes

• u-alignTop
• u-alignMiddle
• u-alignBaseline
• u-alignBottom

Before

Classes

• u-beforeXof2
• u-beforeXof3
• u-beforeXof4
• u-beforeXof5
• u-beforeXof6
• u-beforeXof8
• u-beforeXof10
• u-beforeXof12

...and responsive variants u-sm-*, u-md-*, and u-lg-*.

Display

Classes

• u-block
• u-hidden
• u-hiddenVisually
• u-inline
• u-inlineBlock
• u-table
• u-tableCell
• u-tableRow

Layout

Classes

• u-cf
• u-nbfc
• u-nbfcAlt
• u-floatLeft
• u-floatRight

Link

Classes

• u-linkBlock
• u-linkClean
• u-linkComplex / u-linkComplexTarget

Position

Classes

• u-posAbsolute
• u-posAbsoluteCenter
• u-posFixed
• u-posRelative
• u-posStatic

Size

Classes

• u-sizeFill
• u-sizeFillAlt
• u-sizeFit
• u-sizeFull
• u-sizeXof2
• u-sizeXof3
• u-sizeXof4
• u-sizeXof5
• u-sizeXof6
• u-sizeXof8
• u-sizeXof10
• u-sizeXof12

...and responsive variants u-sm-*, u-md-*, and u-lg-*.

Flex

Classes

flex-container

• u-flex
• u-flexInline

flex-direction

• u-flexRow
• u-flexRowReverse
• u-flexCol
• u-flexColReverse

flex-wrap

• u-flexWrap
• u-flexNoWrap
• u-flexWrapReverse

justify-content

• u-flexJustifyStart
• u-flexJustifyEnd
• u-flexJustifyCenter
• u-flexJustifyBetween
• u-flexJustifyAround

align-items

• u-flexAlignItemsStretch
• u-flexAlignItemsStart
• u-flexAlignItemsEnd
• u-flexAlignItemsCenter
• u-flexAlignItemsBaseline

align-content

• u-flexAlignContentStart
• u-flexAlignContentEnd
• u-flexAlignContentCenter
• u-flexAlignContentStretch
• u-flexAlignContentBetween
• u-flexAlignContentAround

align-self

• u-flexAlignSelfStart
• u-flexAlignSelfEnd
• u-flexAlignSelfCenter
• u-flexAlignSelfStretch
• u-flexAlignSelfAuto

order

• u-flexOrderFirst
• u-flexOrderLast
• u-flexOrderNone

flex-grow

• u-flexGrow1
• u-flexGrow2
• u-flexGrow3
• u-flexGrow4
• u-flexGrow5

Aligning with auto margins

• u-flexExpand
• u-flexExpandTop
• u-flexExpandRight
• u-flexExpandBottom
• u-flexExpandLeft

Text

Classes

• u-textBreak
• u-textCenter
• u-textColorInherit
• u-textLeft
• u-textKren
• u-textNoWrap
• u-textRight
• u-textTruncate

Components

Arrange

Classes

• Arrange
• Arrange--bottom
• Arrange--equal
• Arrange--middle
• Arrange--withGutter
• Arrange-sizeFill
• Arrange-sizeFit

Variables

• --Arrange-gutter-size

Button

Classes

• Button
• Button.is-disabled

Variables

• --Button-border-color
• --Button-border-width
• --Button-color
• --Button-disabled-opacity
• --Button-font
• --Button-padding

Flexible embeds

Classes

• FlexEmbed
• FlexEmbed--2by1
• FlexEmbed--3by1
• FlexEmbed--4by3
• FlexEmbed--16by9
• FlexEmbed-item

Grid

Classes

• Grid
• Grid--alignBottom
• Grid--alignCenter
• Grid--alignMiddle
• Grid--fit
• Grid--equalHeight
• Grid--alignRight
• Grid-cell
• Grid-cell--center

Variables

• --Grid-font-size
• --Grid-gutter-size

Test

Classes

• Test
• Test-describe
• Test-it
• Test-title