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; | |