| grid | class | |
| .c--gd | display: grid; | |
| .c--igd | display: inline-grid; | |
| align | class | Positional alignment |
| .c__as--c | align-self: center; | |
| .c__as--s | align-self: start; | |
| .c__as--e | align-self: end; | |
| .c__as--fs | align-self: flex-start; | Pack flex items from the start |
| .c__as--fe | align-self: flex-end; | Pack flex items from the start |
| .c__as--b | align-self: baseline; | |
| .c__as--st | align-self: stretch; | |
| .c__ai--c | align-items: center; | |
| .c__ai--s | align-items: start; | |
| .c__ai--e | align-items: end; | |
| .c__ai--fs | align-items: flex-start; | Pack flex items from the start |
| .c__ai--fe | align-items: flex-end; | Pack flex items from the start |
| .c__ai--b | align-items: baseline; | |
| .c__ai--st | align-items: stretch; | |
| .c__ac--c | align-content: center; | |
| .c__ac--s | align-content: start; | |
| .c__ac--e | align-content: end; | |
| .c__ac--fs | align-content: flex-start; | Pack flex items from the start |
| .c__ac--fe | align-content: flex-end; | Pack flex items from the start |
| .c__ac--b | align-content: baseline; | |
| .c__ac--st | align-content: stretch; | |
| justify | class | Positional alignment |
| .c__js--c | justify-self: center; | |
| .c__js--s | justify-self: start; | |
| .c__js--e | justify-self: end; | |
| .c__js--fs | justify-self: flex-start; | Pack flex items from the start |
| .c__js--fe | justify-self: flex-end; | Pack flex items from the start |
| .c__js--sb | justify-self: space-between; | |
| .c__js--sa | justify-self: space-around; | |
| .c__js--se | justify-self: space-evenly; | |
| .c__js--st | justify-self: stretch; | |
| .c__ji--c | justify-items: center; | |
| .c__ji--s | justify-items: start; | |
| .c__ji--e | justify-items: end; | |
| .c__ji--fs | justify-items: flex-start; | Pack flex items from the start |
| .c__ji--fe | justify-items: flex-end; | Pack flex items from the start |
| .c__ji--sb | justify-items: space-between; | |
| .c__ji--sa | justify-items: space-around; | |
| .c__ji--se | justify-items: space-evenly; | |
| .c__ji--st | justify-items: stretch; | |
| .c__jc--c | justify-content: center; | |
| .c__jc--s | justify-content: start; | |
| .c__jc--e | justify-content: end; | |
| .c__jc--fs | justify-content: flex-start; | Pack flex items from the start |
| .c__jc--fe | justify-content: flex-end; | Pack flex items from the start |
| .c__jc--sb | justify-content: space-between; | |
| .c__jc--sa | justify-content: space-around; | |
| .c__jc--se | justify-content: space-evenly; | |
| .c__jc--st | justify-content: stretch; | |
| grid-column | class | {n} = -1,1,2,3,4,5,6,7,8,9,10 |
| .c__gc--{n} | grid-column: {n}; | |
| .c__gc--{n}-{n} | grid-column: {n} / {n}; | |
| grid-row | class | {n} = -1,1,2,3,4,5,6,7,8,9,10 |
| .c__gr--{n} | grid-row: {n}; | |
| .c__gr--{n}-{n} | grid-row: {n} / {n}; | |
| grid-gap | class | |
| .c__gap--{n} | grid-gap: {spacer}; | {n} = 025, 05, 075, 1, 15, 2, 225, 25, 3, 35, 4, 5 |
| grid-column-gap | class | |
| .c__gap-c--{n} | grid-column-gap: {spacer}; | {n} = 025, 05, 075, 1, 15, 2, 225, 25, 3, 35, 4, 5 |
| grid-row-gap | class | |
| .c__gap-r--{n} | grid-row-gap: {spacer}; | {n} = 025, 05, 075, 1, 15, 2, 225, 25, 3, 35, 4, 5 |
| grid-template-columns | class | |
| repeat | | |
| .c__gtc--r{n} | grid-template-columns: repeat({n}, 1fr); | {n} = 1,2,3,4,5,6,7,8,9,10,11,12 |
| custom | | {n} = 1,2,3,auto |
| .c__gtc--{n}{n} | grid-template-columns: {n} {n}; | |
| .c__gtc--{n}{n}{n} | grid-template-columns: {n} {n} {n}; | |
| .c__gtc--{n}{n}{n}{n} | grid-template-columns: {n} {n} {n} {n}; | |
| flex | class | |
| .c--fx | display: flex; | |
| .c--ifx | display: inline-flex; | |
| flex-direction | class | |
| .c__fd--c | flex-direction: column; | |
| .c__fd--cr | flex-direction: column-reverse; | |
| .c__fd--r | flex-direction: row; | |
| .c__fd--rr | flex-direction: row-reverse; | |
| flex-grow | class | |
| .c__fg--1 | flex-grow: 1; | |
| flex-shrink | class | |
| .c__fs--0 | flex-shrink: 0; | |
| flex-wrap | class | |
| .c__fw--w | flex-wrap: wrap; | |
| .c__fw--n | flex-wrap: nowrap; | |
| stacked | class | |
| .c__skd | width: 100% !important; | |
| between | class | |
| .c__fx-gap--{n} | margin: calc({spacer} * -1); | {n} = 025, 05, 075, 1, 125, 15, 175, 2, 225, 25, 3, 35, 4, 5 |
| .c--bet-{n} > .c-fx__item {margin: {spacer};} | |
| flex column | class | |
| .c__col--{n} | width: {flex-column}; | {n} = 2, a3, 4, 6, a2, 8, 10, 12, 14, 16 |
| responsive | class | |
| .c__m-xx | @media (\$mobile) | |
| .c__om-xx | @media (\$over-mobile) | |
| .c__it-xx | @media (\$into-tablet) | |
| .c__t-xx | @media (\$tablet) | |
| .c__ot-xx | @media (\$over-tablet) | |
| .c__id-xx | @media (\$into-desktop) | |
| .c__d-xx | @media (\$desktop) | |
| .c__od-xx | @media (\$over-desktop) | |