@choiceform/common-styles

Layout helper based on CSS grid and flexbox specification.

Usage no npm install needed!

<script type="module">
  import choiceformCommonStyles from 'https://cdn.skypack.dev/@choiceform/common-styles';
</script>

README

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;