Responsive Grid Styles

Layout helper based on CSS grid and flexbox specification

Responsive Layout

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive grid & flexbox utilities.

| position | class | |
| :------------------------ | :---------------------------------------------- | :----------------------------------------------------------- |
| 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) | |

{spacer}

| short | spacer | value |
| :-------- | :------------ | :------------------------- |
| | \$spacer: | 1rem !default; |
| | \$spacer-0: | 0 !default; |
| 025 | \$spacer-025: | \$spacer \* 0.25 !default; |
| 05 | \$spacer-05: | \$spacer \* 0.5 !default; |
| 075 | \$spacer-075: | \$spacer \* 0.75 !default; |
| 1 | \$spacer-1: | \$spacer !default; |
| 125 | \$spacer-125: | \$spacer \* 1.25 !default; |
| 15 | \$spacer-15: | \$spacer \* 1.5 !default; |
| 175 | \$spacer-175: | \$spacer \* 1.75 !default; |
| 2 | \$spacer-2: | \$spacer \* 2 !default; |
| 225 | \$spacer-225: | \$spacer \* 2.25 !default; |
| 25 | \$spacer-25: | \$spacer \* 2.5 !default; |
| 3 | \$spacer-3: | \$spacer \* 3 !default; |
| 35 | \$spacer-35: | \$spacer \* 3.5 !default; |
| 4 | \$spacer-4: | \$spacer \* 4 !default; |
| 5 | \$spacer-5: | \$spacer \* 5 !default; |

{flex-column}

| short | value |
| :-------- | :----------- |
| 2 | 12.5% |
| a3 | 33.33333333% |
| 4 | 25% |
| 6 | 37.5% |
| a2 | 50% |
| 8 | 50% |
| 10 | 62.5% |
| 12 | 75% |
| 14 | 87.5% |
| 16 | 100% |

Spacing

c includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.

- m - for classes that set margin
- p - for classes that set padding

| position | class | |
| :------------ | :----------------------------------------------- | :---------------------------------------------------- |
| padding | | {n} = a, 025, 05, 075, 1, 15, 2, 225, 25, 3, 35, 4, 5 |
| .c\_\_p--{n} | padding: {spacer}; | a = auto |
| .c\_\_px--{n} | padding-right: {spacer}; padding-left: {spacer}; |
| .c\_\_py--{n} | padding-top: {spacer}; padding-bottom: {spacer}; |
| .c\_\_pt--{n} | padding-top: {spacer} |
| .c\_\_pr--{n} | padding-right: {spacer} |
| .c\_\_pb--{n} | padding-bottom: {spacer} |
| .c\_\_pl--{n} | padding-left: {spacer} |
| margin | |
| .c\_\_m--{n} | margin: {spacer}; |
| .c\_\_mx--{n} | margin-right: {spacer}; padding-left: {spacer}; |
| .c\_\_my--{n} | margin-top: {spacer}; padding-bottom: {spacer}; |
| .c\_\_mt--{n} | margin-top: {spacer} |
| .c\_\_mr--{n} | margin-right: {spacer} |
| .c\_\_mb--{n} | margin-bottom: {spacer} |
| .c\_\_ml--{n} | margin-left: {spacer} |

border

Use border utilities to quickly style the border of an element.

| | | |
| :----------------- | :---------------------------------------------------- | :---------------------------------------- |
| position | class | {c} = d, l |
| .c\_\_bd | border-width: 1px; border-style: solid; | {n} = 04,08,16,24,32 |
| .c\_\_bdt | border-top-width: 1px; border-top-style: solid; | {color} = \$fade-(black, light)-(01 ~ 05) |
| .c\_\_bdr | border-right-width: 1px; border-right-style: solid; | |
| .c\_\_bdb | border-bottom-width: 1px; border-bottom-style: solid; | |
| .c\_\_bdl | border-left-width: 1px; border-left-style: solid; | |
| color | class | |
| .c\_\_bdc--{c}-{n} | border-color: {color}; | |
| radius | class | {n} = xs,sm,md,lg,xl,c |
| .c\_\_bdrs--{n} | border-radius: {radius}; | {radius} = \$border-radius-{n}, c = 50% |

| | | |
| :------------ | :-------------------------- | :-- |
| position | class | |
| .c\_\_ta--l | text-align: left; | |
| .c\_\_ta--c | text-align: center; | |
| .c\_\_ta--r | text-align: right; | |
| .c\_\_tt--l | text-transform: lowercase; | |
| .c\_\_tt--u | text-transform: uppercase; | |
| .c\_\_tt--c | text-transform: capitalize; | |
| .c\_\_fw--l | font-weight: 200; | |
| .c\_\_fw--n | font-weight: 400; | |
| .c\_\_fw--b | font-weight: 600; | |
| .c\_\_fs--i | font-style: italic; | |
| .c\_\_va--m | vertical-align: middle; | |
| .c\_\_va--bl | vertical-align: baseline; | |
| .c\_\_wob--k | word-break: keep-all; | |
| .c\_\_wob--ba | word-break: break-all; | |