@choiceform/common-styles

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;