Atomic CSS - AT Grid: A Flexbox Grid System using Webpack and CSS variables

One Column

at-col-12

Two Column

at-col-1

at-col-11

at-col-2

at-col-10

at-col-3

at-col-9

at-col-4

at-col-8

at-col-5

at-col-7

at-col-6

at-col-7

at-col-5

at-col-8

at-col-4

at-col-9

at-col-3

at-col-10

at-col-2

at-col-11

at-col-1

Three Column

at-col-1

at-col-10

at-col-1

at-col-10

at-col-2

at-col-8

at-col-2

at-col-8

at-col-3

at-col-6

at-col-3

at-col-6

at-col-4

at-col-6

at-col-3

at-col-8

at-col-2

at-col-10

at-col-1

Four Column

at-col-2

at-col-6

at-col-3

at-col-6

at-col-2

Five Column

at-col-1

at-col-8

at-col-2

at-col-4

at-col-2m3

at-col-4

at-col-2

at-col-8

at-col-1

Six Column

at-col-2

Twelve Column

at-col-1

Order

Change the visual order of specific flex items with a handful of order utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As order takes any integer value from 0 to 5, add custom CSS for any additional values needed.

First : `.at-ord-first`

First flex item

Second flex item

Third flex item

Last : `at-ord-last`

First flex item

Second flex item

Third flex item

Order 1 to 12: `.at-ord-*`

Flex item 1

Flex item 2

Flex item 3

Flex item 4

Flex item 5

Flex item 6

Flex item 7

Flex item 8

Flex item 9

Flex item 10

Flex item 11

Flex item 12

Flex item 13

Offset Column

at-col-1

at-col-2

at-col-3

at-col-4

at-col-5

at-col-6

at-col-7

at-col-8

at-col-9

at-col-10

at-col-11

Flex Row/Column

Flex Row : `.at-flx-row`

First flex item

Second flex item

Third flex item

Flex Row Reverse : `.at-flx-row-rev`

First flex item

Second flex item

Third flex item

Flex Column : `.at-flx-column`

First flex item

Second flex item

Third flex item

Flex Column Reverse : `.at-flx-col-rev`

First flex item

Second flex item

Third flex item

Wrap

Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with .at-flx-nowrp , wrapping with .at-flx-wrp , or reverse wrapping with .at-flx-wrp-rev .

Start : `.at-flx-nowrp`

Flex item

End : `.at-flx-wrp`

Flex item

Center : `.at-flx-wrp-rev`

Flex item

Fill

Fill : `.at-flx-fil`

Flex item

Grow and srnk

Grow : `.at-flx-grw-1`

Flex item

Shrink : `.at-flx-srnk-1`

Flex item

Flexbox options

Use .at-jfy-cont utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column). Choose from start (browser default), end, center, between, around, or evenly.

Start : `.at-jfy-cont-st`

Flex item

End : `.at-jfy-cont-end`

Flex item

Center : `.at-jfy-cont-ctr`

Flex item

Between : `.at-jfy-cont-btw`

Flex item

Around : `.at-jfy-cont-ard`

Flex item

Evenly : `.at-jfy-cont-evnly`

Flex item

Align items

Use at-al-itm utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from start, end, center, baseline, or stretch (browser default).

Start : `.at-al-itm-st`

Flex item

End : `.at-al-itm-end`

Flex item

Center : `.at-al-itm-ctr`

Flex item

Baseline : `.at-al-itm-bsln`

Flex item

Stretch : `.at-al-itm-strh`

Flex item

Align Content

Use at-al-cont utilities on flexbox containers to align flex items together on the cross axis. Choose from start (browser default), end, center, between, around, or stretch. To demonstrate these utilities, we’ve enforced flex-wrap: wrap and increased the number of flex items.

Start : `.at-al-cont-st`

Flex item

End : `.at-al-cont-end`

Flex item

Center : `.at-al-cont-ctr`

Flex item

Between : `.at-al-cont-btw`

Flex item

Around : `.at-al-cont-ard`

Flex item

Stretch : `.at-al-cont-strh`

Flex item

Align Self

Use .at-al-slf utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from start, end, center, baseline, or stretch (browser default).

Start : `.at-al-slf-st`

Flex item

Aligned Flex item

Flex item

End : `.at-al-slf-end`

Flex item

Aligned Flex item

Flex item

Center : `.at-al-slf-ctr`

Flex item

Aligned Flex item

Flex item

Baseline : `.at-al-slf-bsln`

Flex item

Aligned Flex item

Flex item

Stretch : `.at-al-slf-strh`

Flex item

Aligned Flex item

Flex item

Display

Display : `.at-blk, .at-d-non (i.e. dispaly:none;), .at-inl, .at-inl-blk`

Lorem Ipsum is simply dummy text display: inline of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy display: inline-block text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, display: block but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

Display : `.at-tbl, .at-tbl-row, .at-tbl-cell`

Example Example Example Example

Atomic CSS - AT Grid

A Flexbox Grid System using Webpack and CSS variables

One Column

Two Column

Three Column

Four Column

Five Column

Six Column

Twelve Column

Order

First : .at-ord-first

Last : at-ord-last

Order 1 to 12: .at-ord-*

Offset Column

Flex Row/Column

Flex Row : .at-flx-row

Flex Row Reverse : .at-flx-row-rev

Flex Column : .at-flx-column

Flex Column Reverse : .at-flx-col-rev

Wrap

Start : .at-flx-nowrp

End : .at-flx-wrp

Center : .at-flx-wrp-rev

Fill

Fill : .at-flx-fil

Grow and srnk

Grow : .at-flx-grw-1

Shrink : .at-flx-srnk-1

Flexbox options

Start : .at-jfy-cont-st

End : .at-jfy-cont-end

Center : .at-jfy-cont-ctr

Between : .at-jfy-cont-btw

Around : .at-jfy-cont-ard

Evenly : .at-jfy-cont-evnly

Align items

Start : .at-al-itm-st

End : .at-al-itm-end

Center : .at-al-itm-ctr

Baseline : .at-al-itm-bsln

Stretch : .at-al-itm-strh

Align Content

Start : .at-al-cont-st

End : .at-al-cont-end

Center : .at-al-cont-ctr

Between : .at-al-cont-btw

Around : .at-al-cont-ard

Stretch : .at-al-cont-strh

Align Self

Start : .at-al-slf-st

End : .at-al-slf-end

Center : .at-al-slf-ctr

Baseline : .at-al-slf-bsln

Stretch : .at-al-slf-strh

Display

Display : .at-blk, .at-d-non (i.e. dispaly:none;), .at-inl, .at-inl-blk

Display : .at-tbl, .at-tbl-row, .at-tbl-cell

First : `.at-ord-first`

Last : `at-ord-last`

Order 1 to 12: `.at-ord-*`

Flex Row : `.at-flx-row`

Flex Row Reverse : `.at-flx-row-rev`

Flex Column : `.at-flx-column`

Flex Column Reverse : `.at-flx-col-rev`

Start : `.at-flx-nowrp`

End : `.at-flx-wrp`

Center : `.at-flx-wrp-rev`

Fill : `.at-flx-fil`

Grow : `.at-flx-grw-1`

Shrink : `.at-flx-srnk-1`

Start : `.at-jfy-cont-st`

End : `.at-jfy-cont-end`

Center : `.at-jfy-cont-ctr`

Between : `.at-jfy-cont-btw`

Around : `.at-jfy-cont-ard`

Evenly : `.at-jfy-cont-evnly`

Start : `.at-al-itm-st`

End : `.at-al-itm-end`

Center : `.at-al-itm-ctr`

Baseline : `.at-al-itm-bsln`

Stretch : `.at-al-itm-strh`

Start : `.at-al-cont-st`

End : `.at-al-cont-end`

Center : `.at-al-cont-ctr`

Between : `.at-al-cont-btw`

Around : `.at-al-cont-ard`

Stretch : `.at-al-cont-strh`

Start : `.at-al-slf-st`

End : `.at-al-slf-end`

Center : `.at-al-slf-ctr`

Baseline : `.at-al-slf-bsln`

Stretch : `.at-al-slf-strh`

Display : `.at-blk, .at-d-non (i.e. dispaly:none;), .at-inl, .at-inl-blk`

Display : `.at-tbl, .at-tbl-row, .at-tbl-cell`