Skip to content

Instantly share code, notes, and snippets.

@jongacnik
Last active October 7, 2018 03:13
Show Gist options
  • Save jongacnik/84ac687af90ee1b50a1833c50276fddf to your computer and use it in GitHub Desktop.
Save jongacnik/84ac687af90ee1b50a1833c50276fddf to your computer and use it in GitHub Desktop.
.db{display:block}
.dib{display:inline-block}
.di{display:inline}
.dt{display:table}
.dtr{display:table-row}
.dtc{display:table-cell}
.df{display:flex}
.dif{display:inline-flex}
.fl{float:left}
.fr{float:right}
.oh{overflow:hidden}
.c0{width:0}
.c1{width:8.333333333333332%}
.c2{width:16.666666666666664%}
.c3{width:25%}
.c4{width:33.33333333333333%}
.c5{width:41.66666666666667%}
.c6{width:50%}
.c7{width:58.333333333333336%}
.c8{width:66.66666666666666%}
.c9{width:75%}
.c10{width:83.33333333333334%}
.c11{width:91.66666666666666%}
.c12{width:100%}
.xc{display:flex;align-items:center;justify-content:center}
.xac{align-items:center}
.xab{align-items:baseline}
.xas{align-items:stretch}
.xafs{align-items:flex-start}
.xafe{align-items:flex-end}
.xdr{flex-direction:row}
.xdrr{flex-direction:row-reverse}
.xdc{flex-direction:column}
.xdcr{flex-direction:column-reverse}
.xjc{justify-content:center}
.xjsb{justify-content:space-between}
.xjsa{justify-content:space-around}
.xjfs{justify-content:flex-start}
.xjfe{justify-content:flex-end}
.xw{flex-wrap:wrap}
.xwr{flex-wrap:wrap-reverse}
.xwn{flex-wrap:nowrap}
.xi{flex:initial}
.xx{flex:1}
.xa{flex:auto}
.xn{flex:none}
.xo0{order:0}
.xo1{order:1}
.xo2{order:2}
.xo3{order:3}
.xo4{order:4}
.xot{order:-1}
.xob{order:99}
.psa{position:absolute}
.psr{position:relative}
.psf{position:fixed}
.pss{position:static}
.psst{position:sticky}
.t0{top:0}
.r0{right:0}
.b0{bottom:0}
.l0{left:0}
.z0{z-index:0}
.z1{z-index:1}
.z2{z-index:2}
.z3{z-index:3}
.z4{z-index:4}
.tal{text-align:left}
.tac{text-align:center}
.tar{text-align:right}
.taj{text-align:justify}
.bgsc{background:center cover no-repeat}
.bgsct{background:center contain no-repeat}
.dev{outline:1px solid #912eff}
.dev > * {outline:1px solid #5497ff}
.dev > * > * {outline:1px solid #51feff}
.dev > * > * > * {outline:1px solid #ff0000}
.dev > * > * > * * {outline:1px solid #00ff00}
:root {
--s1: 1rem;
--s2: 2rem;
--s3: 3rem;
--s4: 4rem;
}
.m0{margin:0}
.m1{margin:var(--s1)}
.m2{margin:var(--s2)}
.m3{margin:var(--s3)}
.m4{margin:var(--s4)}
.mt0{margin-top:0}
.mt1{margin-top:var(--s1)}
.mt2{margin-top:var(--s2)}
.mt3{margin-top:var(--s3)}
.mt4{margin-top:var(--s4)}
.mr0{margin-right:0}
.mr1{margin-right:var(--s1)}
.mr2{margin-right:var(--s2)}
.mr3{margin-right:var(--s3)}
.mr4{margin-right:var(--s4)}
.mb0{margin-bottom:0}
.mb1{margin-bottom:var(--s1)}
.mb2{margin-bottom:var(--s2)}
.mb3{margin-bottom:var(--s3)}
.mb4{margin-bottom:var(--s4)}
.ml0{margin-left:0}
.ml1{margin-left:var(--s1)}
.ml2{margin-left:var(--s2)}
.ml3{margin-left:var(--s3)}
.ml4{margin-left:var(--s4)}
.p0{padding:0}
.p1{padding:var(--s1)}
.p2{padding:var(--s2)}
.p3{padding:var(--s3)}
.p4{padding:var(--s4)}
.pt0{padding-top:0}
.pt1{padding-top:var(--s1)}
.pt2{padding-top:var(--s2)}
.pt3{padding-top:var(--s3)}
.pt4{padding-top:var(--s4)}
.pr0{padding-right:0}
.pr1{padding-right:var(--s1)}
.pr2{padding-right:var(--s2)}
.pr3{padding-right:var(--s3)}
.pr4{padding-right:var(--s4)}
.pb0{padding-bottom:0}
.pb1{padding-bottom:var(--s1)}
.pb2{padding-bottom:var(--s2)}
.pb3{padding-bottom:var(--s3)}
.pb4{padding-bottom:var(--s4)}
.pl0{padding-left:0}
.pl1{padding-left:var(--s1)}
.pl2{padding-left:var(--s2)}
.pl3{padding-left:var(--s3)}
.pl4{padding-left:var(--s4)}
.db{display:block}
.dib{display:inline-block}
.di{display:inline}
.dt{display:table}
.dtr{display:table-row}
.dtc{display:table-cell}
.df{display:flex}
.dif{display:inline-flex}
.fl{float:left}
.fr{float:right}
.oh{overflow:hidden}
.c0{width:0}
.c1{width:8.333333333333332%}
.c2{width:16.666666666666664%}
.c3{width:25%}
.c4{width:33.33333333333333%}
.c5{width:41.66666666666667%}
.c6{width:50%}
.c7{width:58.333333333333336%}
.c8{width:66.66666666666666%}
.c9{width:75%}
.c10{width:83.33333333333334%}
.c11{width:91.66666666666666%}
.c12{width:100%}
.xc{display:flex;align-items:center;justify-content:center}
.xac{align-items:center}
.xab{align-items:baseline}
.xas{align-items:stretch}
.xafs{align-items:flex-start}
.xafe{align-items:flex-end}
.xdr{flex-direction:row}
.xdrr{flex-direction:row-reverse}
.xdc{flex-direction:column}
.xdcr{flex-direction:column-reverse}
.xjc{justify-content:center}
.xjsb{justify-content:space-between}
.xjsa{justify-content:space-around}
.xjfs{justify-content:flex-start}
.xjfe{justify-content:flex-end}
.xw{flex-wrap:wrap}
.xwr{flex-wrap:wrap-reverse}
.xwn{flex-wrap:nowrap}
.xi{flex:initial}
.xx{flex:1}
.xa{flex:auto}
.xn{flex:none}
.xo0{order:0}
.xo1{order:1}
.xo2{order:2}
.xo3{order:3}
.xo4{order:4}
.xot{order:-1}
.xob{order:99}
.psa{position:absolute}
.psr{position:relative}
.psf{position:fixed}
.pss{position:static}
.psst{position:sticky}
.t0{top:0}
.r0{right:0}
.b0{bottom:0}
.l0{left:0}
.z0{z-index:0}
.z1{z-index:1}
.z2{z-index:2}
.z3{z-index:3}
.z4{z-index:4}
.tal{text-align:left}
.tac{text-align:center}
.tar{text-align:right}
.taj{text-align:justify}
.bgsc{background:center cover no-repeat}
.bgsct{background:center contain no-repeat}
.dev{outline:1px solid #912eff}
.dev > * {outline:1px solid #5497ff}
.dev > * > * {outline:1px solid #51feff}
.dev > * > * > * {outline:1px solid #ff0000}
.dev > * > * > * * {outline:1px solid #00ff00}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment