Skip to content

Instantly share code, notes, and snippets.

@tttimur
Last active February 22, 2018 20:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tttimur/1b823886b21716462bacf86f8bea51b0 to your computer and use it in GitHub Desktop.
Save tttimur/1b823886b21716462bacf86f8bea51b0 to your computer and use it in GitHub Desktop.
gr9
/*!
* small changes on the base of gr8.
* to me it seems easier to edit this css file than create a gr8 browserify env
* gr8.css • v3.1.3
* github.com/jongacnik/gr8
*/
.c{top:50%;left:50%;transform:translate(-50%, -50%)}
.cy{top:50%;transform:translateY(-50%)}
.cx{left:50%;transform: translateX(-50%)}
.inv{filter:invert(100%)}
.c1{width:8.33333%}
.c2{width:16.66667%}
.c3{width:25%}
.c4{width:33.33333%}
.c5{width:41.66667%}
.c6{width:50%}
.c7{width:58.33333%}
.c8{width:66.66667%}
.c9{width:75%}
.c10{width:83.33333%}
.c11{width:91.66667%}
.c12{width:100%}
.s1{width:100%}
.s2{width:50%}
.s3{width:33.33333%}
.s4{width:25%}
.s5{width:20%}
.s6{width:16.66667%}
.s7{width:14.28571%}
.s8{width:12.5%}
.s9{width:11.11111%}
.s10{width:10%}
.s11{width:9.09091%}
.s12{width:8.33333%}
.co0{margin-left:0}
.co1{margin-left:8.33333%}
.co2{margin-left:16.66667%}
.co3{margin-left:25%}
.co4{margin-left:33.33333%}
.co5{margin-left:41.66667%}
.co6{margin-left:50%}
.co7{margin-left:58.33333%}
.co8{margin-left:66.66667%}
.co9{margin-left:75%}
.co10{margin-left:83.33333%}
.co11{margin-left:91.66667%}
.co12{margin-left:100%}
.m0{margin:0}
.m1{margin:1rem}
.m2{margin:2rem}
.m3{margin:3rem}
.m4{margin:4rem}
.mt0{margin-top:0}
.mt1{margin-top:1rem}
.mt2{margin-top:2rem}
.mt3{margin-top:3rem}
.mt4{margin-top:4rem}
.mr0{margin-right:0}
.mr1{margin-right:1rem}
.mr2{margin-right:2rem}
.mr3{margin-right:3rem}
.mr4{margin-right:4rem}
.mb0{margin-bottom:0}
.mb1{margin-bottom:1rem}
.mb2{margin-bottom:2rem}
.mb3{margin-bottom:3rem}
.mb4{margin-bottom:4rem}
.ml0{margin-left:0}
.ml1{margin-left:1rem}
.ml2{margin-left:2rem}
.ml3{margin-left:3rem}
.ml4{margin-left:4rem}
.mx0{margin-left:0;margin-right:0}
.mx1{margin-left:1rem;margin-right:1rem}
.mx2{margin-left:2rem;margin-right:2rem}
.mx3{margin-left:3rem;margin-right:3rem}
.mx4{margin-left:4rem;margin-right:4rem}
.my0{margin-top:0;margin-bottom:0}
.my1{margin-top:1rem;margin-bottom:1rem}
.my2{margin-top:2rem;margin-bottom:2rem}
.my3{margin-top:3rem;margin-bottom:3rem}
.my4{margin-top:4rem;margin-bottom:4rem}
.p0{padding:0}
.p1{padding:1rem}
.p2{padding:2rem}
.p3{padding:3rem}
.p4{padding:4rem}
.pt0{padding-top:0}
.pt1{padding-top:1rem}
.pt2{padding-top:2rem}
.pt3{padding-top:3rem}
.pt4{padding-top:4rem}
.pr0{padding-right:0}
.pr1{padding-right:1rem}
.pr2{padding-right:2rem}
.pr3{padding-right:3rem}
.pr4{padding-right:4rem}
.pb0{padding-bottom:0}
.pb1{padding-bottom:1rem}
.pb2{padding-bottom:2rem}
.pb3{padding-bottom:3rem}
.pb4{padding-bottom:4rem}
.pl0{padding-left:0}
.pl1{padding-left:1rem}
.pl2{padding-left:2rem}
.pl3{padding-left:3rem}
.pl4{padding-left:4rem}
.px0{padding-left:0;padding-right:0}
.px1{padding-left:1rem;padding-right:1rem}
.px2{padding-left:2rem;padding-right:2rem}
.px3{padding-left:3rem;padding-right:3rem}
.px4{padding-left:4rem;padding-right:4rem}
.py0{padding-top:0;padding-bottom:0}
.py1{padding-top:1rem;padding-bottom:1rem}
.py2{padding-top:2rem;padding-bottom:2rem}
.py3{padding-top:3rem;padding-bottom:3rem}
.py4{padding-top:4rem;padding-bottom:4rem}
.op0{opacity:0}
.op25{opacity:0.25}
.op50{opacity:0.5}
.op75{opacity:0.75}
.op100{opacity:1}
.bgsc{background-size:cover}
.bgsct{background-size:contain}
.bgpc{background-position:center}
.bgpt{background-position:top}
.bgpr{background-position:right}
.bgpb{background-position:bottom}
.bgpl{background-position:left}
.bgrn{background-repeat:no-repeat}
.bgrx{background-repeat:repeat-x}
.bgry{background-repeat:repeat-y}
.x{display:flex}
.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}
.xjb{justify-content:space-between}
.xja{justify-content:space-around}
.xjs{justify-content:flex-start}
.xje{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}
.df{display:flex}
.db{display:block}
.dib{display:inline-block}
.di{display:inline}
.dt{display:table}
.dtc{display:table-cell}
.dtr{display:table-row}
.dn{display:none}
.fl{float:left}
.fr{float:right}
.fn{float:none}
.cf:after{content:"";display:block;clear:both}
.oh{overflow:hidden}
.os{overflow:scroll}
.ov{overflow:visible}
.oxh{overflow-x:hidden}
.oxs{overflow-x:scroll}
.oxv{overflow-x:visible}
.oyh{overflow-y:hidden}
.oys{overflow-y:scroll}
.oyv{overflow-y:visible}
.psa{position:absolute}
.psr{position:relative}
.psf{position:fixed}
.pss{position:static}
.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}
.w0{width:0}
.w100{width:100%}
.h0{height:0}
.h100{height:100%}
.vw50{width:50vw}
.vw100{width:100vw}
.vwmn50{min-width:50vw}
.vwmn100{min-width:100vw}
.vwmx50{max-width:50vw}
.vwmx100{max-width:100vw}
.vh50{height:50vh}
.vh100{height:100vh}
.vhmn50{min-height:50vh}
.vhmn100{min-height:100vh}
.vhmx50{max-height:50vh}
.vhmx100{max-height:100vh}
.ar25:before{padding-top:25%;content:"";display:block}
.ar50:before{padding-top:50%;content:"";display:block}
.ar75:before{padding-top:75%;content:"";display:block}
.ar100:before{padding-top:100%;content:"";display:block}
.fs1{font-size:1rem}
.fs1-2{font-size:1.2rem}
.fs1-6{font-size:1.6rem}
.fs2-4{font-size:2.4rem}
.fs3-2{font-size:3.2rem}
.fs6-4{font-size:6.4rem}
.lh1{line-height:1}
.lh1-5{line-height:1.5}
.fsn{font-style:normal}
.fsi{font-style:italic}
.fwn{font-weight:normal}
.fwb{font-weight:bold}
.tal{text-align:left}
.tac{text-align:center}
.tar{text-align:right}
.taj{text-align:justify}
.toi{text-overflow:initial}
.toc{text-overflow:clip}
.toe{text-overflow:ellipsis}
.tdu{text-decoration:underline}
.tdo{text-decoration:overline}
.tdlt{text-decoration:line-through}
.tdn{text-decoration:none}
.ttu{text-transform:uppercase}
.ttl{text-transform:lowercase}
.ttc{text-transform:capitalize}
.ttn{text-transform:none}
.vabl{vertical-align:baseline}
.vat{vertical-align:top}
.vam{vertical-align:middle}
.vab{vertical-align:bottom}
.wsn{white-space:normal}
.wsnw{white-space:nowrap}
.wsp{white-space:pre}
.wsi{white-space:inherit}
.tc1{columns:1}
.tc2{columns:2}
.tc3{columns:3}
.tc4{columns:4}
.curp{cursor:pointer}
.curd{cursor:default}
.cura{cursor:alias}
.curzi{cursor:zoom-in}
.curzo{cursor:zoom-out}
.usn{user-select:none}
.usa{user-select:auto}
.ust{user-select:text}
.pen{pointer-events:none}
.pea{pointer-events:auto}
.vh{visibility:hidden}
.vv{visibility:visible}
.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}
@media (max-width:768px) {
[sm~="c1"]{width:8.33333%}
[sm~="c2"]{width:16.66667%}
[sm~="c3"]{width:25%}
[sm~="c4"]{width:33.33333%}
[sm~="c5"]{width:41.66667%}
[sm~="c6"]{width:50%}
[sm~="c7"]{width:58.33333%}
[sm~="c8"]{width:66.66667%}
[sm~="c9"]{width:75%}
[sm~="c10"]{width:83.33333%}
[sm~="c11"]{width:91.66667%}
[sm~="c12"]{width:100%}
[sm~="s1"]{width:100%}
[sm~="s2"]{width:50%}
[sm~="s3"]{width:33.33333%}
[sm~="s4"]{width:25%}
[sm~="s5"]{width:20%}
[sm~="s6"]{width:16.66667%}
[sm~="s7"]{width:14.28571%}
[sm~="s8"]{width:12.5%}
[sm~="s9"]{width:11.11111%}
[sm~="s10"]{width:10%}
[sm~="s11"]{width:9.09091%}
[sm~="s12"]{width:8.33333%}
[sm~="co0"]{margin-left:0}
[sm~="co1"]{margin-left:8.33333%}
[sm~="co2"]{margin-left:16.66667%}
[sm~="co3"]{margin-left:25%}
[sm~="co4"]{margin-left:33.33333%}
[sm~="co5"]{margin-left:41.66667%}
[sm~="co6"]{margin-left:50%}
[sm~="co7"]{margin-left:58.33333%}
[sm~="co8"]{margin-left:66.66667%}
[sm~="co9"]{margin-left:75%}
[sm~="co10"]{margin-left:83.33333%}
[sm~="co11"]{margin-left:91.66667%}
[sm~="co12"]{margin-left:100%}
[sm~="m0"]{margin:0}
[sm~="m1"]{margin:1rem}
[sm~="m2"]{margin:2rem}
[sm~="m3"]{margin:3rem}
[sm~="m4"]{margin:4rem}
[sm~="mt0"]{margin-top:0}
[sm~="mt1"]{margin-top:1rem}
[sm~="mt2"]{margin-top:2rem}
[sm~="mt3"]{margin-top:3rem}
[sm~="mt4"]{margin-top:4rem}
[sm~="mr0"]{margin-right:0}
[sm~="mr1"]{margin-right:1rem}
[sm~="mr2"]{margin-right:2rem}
[sm~="mr3"]{margin-right:3rem}
[sm~="mr4"]{margin-right:4rem}
[sm~="mb0"]{margin-bottom:0}
[sm~="mb1"]{margin-bottom:1rem}
[sm~="mb2"]{margin-bottom:2rem}
[sm~="mb3"]{margin-bottom:3rem}
[sm~="mb4"]{margin-bottom:4rem}
[sm~="ml0"]{margin-left:0}
[sm~="ml1"]{margin-left:1rem}
[sm~="ml2"]{margin-left:2rem}
[sm~="ml3"]{margin-left:3rem}
[sm~="ml4"]{margin-left:4rem}
[sm~="mx0"]{margin-left:0;margin-right:0}
[sm~="mx1"]{margin-left:1rem;margin-right:1rem}
[sm~="mx2"]{margin-left:2rem;margin-right:2rem}
[sm~="mx3"]{margin-left:3rem;margin-right:3rem}
[sm~="mx4"]{margin-left:4rem;margin-right:4rem}
[sm~="my0"]{margin-top:0;margin-bottom:0}
[sm~="my1"]{margin-top:1rem;margin-bottom:1rem}
[sm~="my2"]{margin-top:2rem;margin-bottom:2rem}
[sm~="my3"]{margin-top:3rem;margin-bottom:3rem}
[sm~="my4"]{margin-top:4rem;margin-bottom:4rem}
[sm~="p0"]{padding:0}
[sm~="p1"]{padding:1rem}
[sm~="p2"]{padding:2rem}
[sm~="p3"]{padding:3rem}
[sm~="p4"]{padding:4rem}
[sm~="pt0"]{padding-top:0}
[sm~="pt1"]{padding-top:1rem}
[sm~="pt2"]{padding-top:2rem}
[sm~="pt3"]{padding-top:3rem}
[sm~="pt4"]{padding-top:4rem}
[sm~="pr0"]{padding-right:0}
[sm~="pr1"]{padding-right:1rem}
[sm~="pr2"]{padding-right:2rem}
[sm~="pr3"]{padding-right:3rem}
[sm~="pr4"]{padding-right:4rem}
[sm~="pb0"]{padding-bottom:0}
[sm~="pb1"]{padding-bottom:1rem}
[sm~="pb2"]{padding-bottom:2rem}
[sm~="pb3"]{padding-bottom:3rem}
[sm~="pb4"]{padding-bottom:4rem}
[sm~="pl0"]{padding-left:0}
[sm~="pl1"]{padding-left:1rem}
[sm~="pl2"]{padding-left:2rem}
[sm~="pl3"]{padding-left:3rem}
[sm~="pl4"]{padding-left:4rem}
[sm~="px0"]{padding-left:0;padding-right:0}
[sm~="px1"]{padding-left:1rem;padding-right:1rem}
[sm~="px2"]{padding-left:2rem;padding-right:2rem}
[sm~="px3"]{padding-left:3rem;padding-right:3rem}
[sm~="px4"]{padding-left:4rem;padding-right:4rem}
[sm~="py0"]{padding-top:0;padding-bottom:0}
[sm~="py1"]{padding-top:1rem;padding-bottom:1rem}
[sm~="py2"]{padding-top:2rem;padding-bottom:2rem}
[sm~="py3"]{padding-top:3rem;padding-bottom:3rem}
[sm~="py4"]{padding-top:4rem;padding-bottom:4rem}
[sm~="op0"]{opacity:0}
[sm~="op25"]{opacity:0.25}
[sm~="op50"]{opacity:0.5}
[sm~="op75"]{opacity:0.75}
[sm~="op100"]{opacity:1}
[sm~="bgsc"]{background-size:cover}
[sm~="bgsct"]{background-size:contain}
[sm~="bgpc"]{background-position:center}
[sm~="bgpt"]{background-position:top}
[sm~="bgpr"]{background-position:right}
[sm~="bgpb"]{background-position:bottom}
[sm~="bgpl"]{background-position:left}
[sm~="bgrn"]{background-repeat:no-repeat}
[sm~="bgrx"]{background-repeat:repeat-x}
[sm~="bgry"]{background-repeat:repeat-y}
[sm~="x"]{display:flex}
[sm~="xac"]{align-items:center}
[sm~="xab"]{align-items:baseline}
[sm~="xas"]{align-items:stretch}
[sm~="xafs"]{align-items:flex-start}
[sm~="xafe"]{align-items:flex-end}
[sm~="xdr"]{flex-direction:row}
[sm~="xdrr"]{flex-direction:row-reverse}
[sm~="xdc"]{flex-direction:column}
[sm~="xdcr"]{flex-direction:column-reverse}
[sm~="xjc"]{justify-content:center}
[sm~="xjb"]{justify-content:space-between}
[sm~="xja"]{justify-content:space-around}
[sm~="xjs"]{justify-content:flex-start}
[sm~="xje"]{justify-content:flex-end}
[sm~="xw"]{flex-wrap:wrap}
[sm~="xwr"]{flex-wrap:wrap-reverse}
[sm~="xwn"]{flex-wrap:nowrap}
[sm~="xi"]{flex:initial}
[sm~="xx"]{flex:1}
[sm~="xa"]{flex:auto}
[sm~="xn"]{flex:none}
[sm~="xo0"]{order:0}
[sm~="xo1"]{order:1}
[sm~="xo2"]{order:2}
[sm~="xo3"]{order:3}
[sm~="xo4"]{order:4}
[sm~="xot"]{order:-1}
[sm~="xob"]{order:99}
[sm~="df"]{display:flex}
[sm~="db"]{display:block}
[sm~="dib"]{display:inline-block}
[sm~="di"]{display:inline}
[sm~="dt"]{display:table}
[sm~="dtc"]{display:table-cell}
[sm~="dtr"]{display:table-row}
[sm~="dn"]{display:none}
[sm~="fl"]{float:left}
[sm~="fr"]{float:right}
[sm~="fn"]{float:none}
[sm~="cf"]:after{content:"";display:block;clear:both}
[sm~="oh"]{overflow:hidden}
[sm~="os"]{overflow:scroll}
[sm~="ov"]{overflow:visible}
[sm~="oxh"]{overflow-x:hidden}
[sm~="oxs"]{overflow-x:scroll}
[sm~="oxv"]{overflow-x:visible}
[sm~="oyh"]{overflow-y:hidden}
[sm~="oys"]{overflow-y:scroll}
[sm~="oyv"]{overflow-y:visible}
[sm~="psa"]{position:absolute}
[sm~="psr"]{position:relative}
[sm~="psf"]{position:fixed}
[sm~="pss"]{position:static}
[sm~="t0"]{top:0}
[sm~="r0"]{right:0}
[sm~="b0"]{bottom:0}
[sm~="l0"]{left:0}
[sm~="z0"]{z-index:0}
[sm~="z1"]{z-index:1}
[sm~="z2"]{z-index:2}
[sm~="z3"]{z-index:3}
[sm~="z4"]{z-index:4}
[sm~="w0"]{width:0}
[sm~="w100"]{width:100%}
[sm~="h0"]{height:0}
[sm~="h100"]{height:100%}
[sm~="vw50"]{width:50vw}
[sm~="vw100"]{width:100vw}
[sm~="vwmn50"]{min-width:50vw}
[sm~="vwmn100"]{min-width:100vw}
[sm~="vwmx50"]{max-width:50vw}
[sm~="vwmx100"]{max-width:100vw}
[sm~="vh50"]{height:50vh}
[sm~="vh100"]{height:100vh}
[sm~="vhmn50"]{min-height:50vh}
[sm~="vhmn100"]{min-height:100vh}
[sm~="vhmx50"]{max-height:50vh}
[sm~="vhmx100"]{max-height:100vh}
[sm~="ar25"]:before{padding-top:25%;content:"";display:block}
[sm~="ar50"]:before{padding-top:50%;content:"";display:block}
[sm~="ar75"]:before{padding-top:75%;content:"";display:block}
[sm~="ar100"]:before{padding-top:100%;content:"";display:block}
[sm~="fs1"]{font-size:1rem}
[sm~="fs1-2"]{font-size:1.2rem}
[sm~="fs1-6"]{font-size:1.6rem}
[sm~="fs2-4"]{font-size:2.4rem}
[sm~="fs3-2"]{font-size:3.2rem}
[sm~="fs6-4"]{font-size:6.4rem}
[sm~="lh1"]{line-height:1}
[sm~="lh1-5"]{line-height:1.5}
[sm~="fsn"]{font-style:normal}
[sm~="fsi"]{font-style:italic}
[sm~="fwn"]{font-weight:normal}
[sm~="fwb"]{font-weight:bold}
[sm~="tal"]{text-align:left}
[sm~="tac"]{text-align:center}
[sm~="tar"]{text-align:right}
[sm~="taj"]{text-align:justify}
[sm~="toi"]{text-overflow:initial}
[sm~="toc"]{text-overflow:clip}
[sm~="toe"]{text-overflow:ellipsis}
[sm~="tdu"]{text-decoration:underline}
[sm~="tdo"]{text-decoration:overline}
[sm~="tdlt"]{text-decoration:line-through}
[sm~="tdn"]{text-decoration:none}
[sm~="ttu"]{text-transform:uppercase}
[sm~="ttl"]{text-transform:lowercase}
[sm~="ttc"]{text-transform:capitalize}
[sm~="ttn"]{text-transform:none}
[sm~="vabl"]{vertical-align:baseline}
[sm~="vat"]{vertical-align:top}
[sm~="vam"]{vertical-align:middle}
[sm~="vab"]{vertical-align:bottom}
[sm~="wsn"]{white-space:normal}
[sm~="wsnw"]{white-space:nowrap}
[sm~="wsp"]{white-space:pre}
[sm~="wsi"]{white-space:inherit}
[sm~="tc1"]{columns:1}
[sm~="tc2"]{columns:2}
[sm~="tc3"]{columns:3}
[sm~="tc4"]{columns:4}
[sm~="curp"]{cursor:pointer}
[sm~="curd"]{cursor:default}
[sm~="cura"]{cursor:alias}
[sm~="curzi"]{cursor:zoom-in}
[sm~="curzo"]{cursor:zoom-out}
[sm~="usn"]{user-select:none}
[sm~="usa"]{user-select:auto}
[sm~="ust"]{user-select:text}
[sm~="pen"]{pointer-events:none}
[sm~="pea"]{pointer-events:auto}
[sm~="vh"]{visibility:hidden}
[sm~="vv"]{visibility:visible}
[sm~="dev"]{outline:1px solid #912eff}
[sm~="dev"] > * {outline:1px solid #5497ff}
[sm~="dev"] > * > * {outline:1px solid #51feff}
[sm~="dev"] > * > * > * {outline:1px solid #ff0000}
[sm~="dev"] > * > * > * * {outline:1px solid #00ff00}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment