Atomic utilities: alignment

Utilities for alignment. Currently only applicable to flex layout. See other utilities.

Read more about Atomic framework.

Installation

• Bower: bower install --save atomic-css-utils-alignment
• Component(1): component install atomic-css/utils-alignment
• Download: zip, tar.gz
• Git: git clone https://github.com/atomic-css/utils-alignment.git

Available classes

All classes follow the same pattern: u-<justify|align><C|I|S><Direction>. C, I and S stand for 'content', 'items' and 'self', respectively.

Inline axis

• .u-justifyCStart
• .u-justifyCCenter
• .u-justifyCEnd
• .u-justifyCBetween
• .u-justifyCAround

Stacking (block) axis

• .u-alignCStart
• .u-alignCCenter
• .u-alignCEnd
• .u-alignCBetween
• .u-alignCAround
• .u-alignCStretch
• .u-alignIStart
• .u-alignICenter
• .u-alignIEnd
• .u-alignIStretch
• .u-alignSStart
• .u-alignSCenter
• .u-alignSEnd
• .u-alignSStretch

Margin distribution

• .u-sendLeft
• .u-sendRight
• .u-sendTop
• .u-sendBottom
• .u-centerize
• .u-centerizeHorizontally
• .u-centerizeVertically

Browser support

• Google Chrome (latest)
• Opera (latest)
• Firefox (latest)
• Safari 6.1+
• Internet Explorer 10+