API

May 5, 2016 · View on GitHub

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