forked from jxnblk/gravitons
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
4 lines (4 loc) · 31.2 KB
/
index.html
1
2
3
4
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Gravitons</title><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="Virtually massless CSS layout microlibrary"><style>body{margin:0}img{max-width:100%}svg{max-height:100%}body{font-family:SF UI Text,Roboto,Helvetica Neue,Helvetica,sans-serif;line-height:1.5;font-size:100%}h1,h2,h3,h4,h5,h6{font-family:SF UI Display,Roboto,Helvetica Neue,Helvetica,sans-serif;font-weight:700;line-height:1.25;margin-top:1em;margin-bottom:.5em}dl,ol,p,ul{margin-top:0;margin-bottom:1pc;margin-bottom:1rem}code,pre,samp{font-family:Source Code Pro,Consolas,monospace;font-size:87.5%}pre{margin-top:0;margin-bottom:1pc;margin-bottom:1rem;overflow-x:scroll}h1{font-size:2pc;font-size:2rem}h2{font-size:24px;font-size:1.5rem}h3{font-size:20px;font-size:1.25rem}h4{font-size:1pc;font-size:1rem}h5{font-size:14px;font-size:.875rem}h6{font-size:9pt;font-size:.75rem}body{color:#172c36;background-color:#fff}a{color:#007bbd;text-decoration:none}a:hover{text-decoration:underline}code,pre{background-color:transparent;border-radius:3px}hr{border:0;border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:rgba(0,0,0,.125)}.btn{font-family:inherit;font-size:14px;font-size:.875rem;font-weight:700;cursor:pointer;display:inline-block;line-height:18px;line-height:1.125rem;padding:8px 1pc;padding:.5rem 1rem;margin:0;height:auto;border:1px solid transparent;vertical-align:middle;-webkit-appearance:none;color:inherit;background-color:transparent}.btn,.btn:hover{text-decoration:none}.btn:focus{outline:0;border-color:#000;border-color:rgba(0,0,0,.125);box-shadow:0 0 0 3px rgba(0,0,0,.25)}::-moz-focus-inner{border:0;padding:0}.bold{font-weight:700}.regular{font-weight:400}.italic{font-style:italic}.caps{text-transform:uppercase;letter-spacing:.2em}.left-align{text-align:left}.center{text-align:center}.right-align{text-align:right}.justify{text-align:justify}.nowrap{white-space:nowrap}.break-word{word-wrap:break-word}.truncate{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list-reset{list-style:none;padding-left:0}.inline{display:inline}.block{display:block}.inline-block{display:inline-block}.table{display:table}.table-cell{display:table-cell}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overflow-auto{overflow:auto}.clearfix:after,.clearfix:before{content:" ";display:table}.clearfix:after{clear:both}.left{float:left}.right{float:right}.fit{max-width:100%}.border-box{box-sizing:border-box}.container,.mx-auto{margin-left:auto;margin-right:auto}.container{max-width:64em}.col{float:left}.col,.col-right{box-sizing:border-box}.col-right{float:right}.col-1{width:8.33333%}.col-2{width:16.66667%}.col-3{width:25%}.col-4{width:33.33333%}.col-5{width:41.66667%}.col-6{width:50%}.col-7{width:58.33333%}.col-8{width:66.66667%}.col-9{width:75%}.col-10{width:83.33333%}.col-11{width:91.66667%}.col-12{width:100%}@media (min-width:40em){.sm-col{float:left;box-sizing:border-box}.sm-col-right{float:right;box-sizing:border-box}.sm-col-1{width:8.33333%}.sm-col-2{width:16.66667%}.sm-col-3{width:25%}.sm-col-4{width:33.33333%}.sm-col-5{width:41.66667%}.sm-col-6{width:50%}.sm-col-7{width:58.33333%}.sm-col-8{width:66.66667%}.sm-col-9{width:75%}.sm-col-10{width:83.33333%}.sm-col-11{width:91.66667%}.sm-col-12{width:100%}}@media (min-width:52em){.md-col{float:left;box-sizing:border-box}.md-col-right{float:right;box-sizing:border-box}.md-col-1{width:8.33333%}.md-col-2{width:16.66667%}.md-col-3{width:25%}.md-col-4{width:33.33333%}.md-col-5{width:41.66667%}.md-col-6{width:50%}.md-col-7{width:58.33333%}.md-col-8{width:66.66667%}.md-col-9{width:75%}.md-col-10{width:83.33333%}.md-col-11{width:91.66667%}.md-col-12{width:100%}}@media (min-width:64em){.lg-col{float:left;box-sizing:border-box}.lg-col-right{float:right;box-sizing:border-box}.lg-col-1{width:8.33333%}.lg-col-2{width:16.66667%}.lg-col-3{width:25%}.lg-col-4{width:33.33333%}.lg-col-5{width:41.66667%}.lg-col-6{width:50%}.lg-col-7{width:58.33333%}.lg-col-8{width:66.66667%}.lg-col-9{width:75%}.lg-col-10{width:83.33333%}.lg-col-11{width:91.66667%}.lg-col-12{width:100%}}.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flex-column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.flex-wrap{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.flex-baseline{-webkit-box-align:baseline;-webkit-align-items:baseline;-ms-flex-align:baseline;align-items:baseline}.flex-stretch{-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch}.flex-start{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.flex-end{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.flex-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.flex-first{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.flex-last{-webkit-box-ordinal-group:1025;-webkit-order:1024;-ms-flex-order:1024;order:1024}.flex-auto{-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.flex-grow{-webkit-box-flex:1;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto}.flex-none{-webkit-box-flex:0;-webkit-flex:none;-ms-flex:none;flex:none}.flex>div{box-sizing:border-box}@media (min-width:40em){.sm-flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.sm-flex>div{box-sizing:border-box}}@media (min-width:52em){.md-flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.md-flex>div{box-sizing:border-box}}@media (min-width:64em){.lg-flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.lg-flex>div{box-sizing:border-box}}.border{border:1px solid #000;border-color:rgba(0,0,0,.125)}.border-top{border-top-style:solid;border-top-width:1px;border-top-color:rgba(0,0,0,.125)}.border-right{border-right-style:solid;border-right-width:1px;border-right-color:rgba(0,0,0,.125)}.border-bottom{border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:rgba(0,0,0,.125)}.border-left{border-left-style:solid;border-left-width:1px;border-left-color:rgba(0,0,0,.125)}.no-border{border:0}.rounded{border-radius:3px}.circle{border-radius:50%}.rounded-top{border-radius:3px 3px 0 0}.rounded-right{border-radius:0 3px 3px 0}.rounded-bottom{border-radius:0 0 3px 3px}.rounded-left{border-radius:3px 0 0 3px}.not-rounded{border-radius:0}.black{color:#111}.gray{color:#aaa}.silver{color:#ddd}.white{color:#fff}.aqua{color:#7fdbff}.blue{color:#007bbd}.navy{color:#001f3f}.teal{color:#39cccc}.green{color:#00a865}.olive{color:#3d9970}.lime{color:#01ff70}.yellow{color:#ffdc00}.orange{color:#ff851b}.red{color:#ff6200}.fuchsia{color:#f012be}.purple{color:#b10dc9}.maroon{color:#85144b}.color-inherit{color:inherit}.muted{opacity:.5}.bg-black{background-color:#111}.bg-gray{background-color:#aaa}.bg-silver{background-color:#ddd}.bg-white{background-color:#fff}.bg-aqua{background-color:#7fdbff}.bg-blue{background-color:#007bbd}.bg-navy{background-color:#001f3f}.bg-teal{background-color:#39cccc}.bg-green{background-color:#00a865}.bg-olive{background-color:#3d9970}.bg-lime{background-color:#01ff70}.bg-yellow{background-color:#ffdc00}.bg-orange{background-color:#ff851b}.bg-red{background-color:#ff6200}.bg-fuchsia{background-color:#f012be}.bg-purple{background-color:#b10dc9}.bg-maroon{background-color:#85144b}.bg-darken-1{background-color:#000;background-color:rgba(0,0,0,.0625)}.bg-darken-2{background-color:#000;background-color:rgba(0,0,0,.125)}.bg-darken-3{background-color:#000;background-color:rgba(0,0,0,.25)}.bg-darken-4{background-color:#000;background-color:rgba(0,0,0,.5)}.prose{font-family:Georgia,serif;font-size:1pc;font-size:1rem}.prose dl,.prose ol,.prose p,.prose ul{font-size:inherit}.prose p:first-child{font-size:20px;font-size:1.25rem}.prose img{height:auto}.prose figcaption{font-family:SF UI Text,Roboto,Helvetica Neue,Helvetica,sans-serif;font-size:14px;font-size:.875rem}@media (min-width:40em){.prose,.serif{font-size:1.25rem}.prose p:first-child{font-size:1.5rem}}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:inherit;text-decoration:none}h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{text-decoration:underline}pre{padding:0 24px;padding:0 1.5rem;border-left:4px solid rgba(0,0,0,.0625)}.caps{letter-spacing:.1em}.sans{font-family:SF UI Text,Roboto,Helvetica Neue,Helvetica,sans-serif}.serif{font-family:Georgia,serif}.compact{font-family:SF Compact Text,Roboto,Helvetica Neue,Helvetica,sans-serif}.icon{position:relative;top:.125em}.btn:hover{box-shadow:inset 0 99999px rgba(127,219,255,.0625)}.btn-link:hover{text-decoration:underline;box-shadow:none}.btn-narrow{padding-left:8px;padding-left:.5rem;padding-right:8px;padding-right:.5rem}.slate{color:#172c36}.brightblue{color:#33b8ff}.bg-slate{background-color:#172c36}.bg-brightblue{background-color:#33b8ff}
/*! gravitons */.h1{font-size:2pc;font-size:2rem}.h2{font-size:24px;font-size:1.5rem}.h3{font-size:20px;font-size:1.25rem}.h4{font-size:1pc;font-size:1rem}.h5{font-size:14px;font-size:.875rem}.h6{font-size:9pt;font-size:.75rem}.m0{margin:0}.mt0{margin-top:0}.mr0{margin-right:0}.mb0{margin-bottom:0}.ml0{margin-left:0}.m1{margin:8px;margin:.5rem}.mt1{margin-top:8px;margin-top:.5rem}.mr1{margin-right:8px;margin-right:.5rem}.mb1{margin-bottom:8px;margin-bottom:.5rem}.ml1{margin-left:8px;margin-left:.5rem}.m2{margin:1pc;margin:1rem}.mt2{margin-top:1pc;margin-top:1rem}.mr2{margin-right:1pc;margin-right:1rem}.mb2{margin-bottom:1pc;margin-bottom:1rem}.ml2{margin-left:1pc;margin-left:1rem}.m3{margin:2pc;margin:2rem}.mt3{margin-top:2pc;margin-top:2rem}.mr3{margin-right:2pc;margin-right:2rem}.mb3{margin-bottom:2pc;margin-bottom:2rem}.ml3{margin-left:2pc;margin-left:2rem}.m4{margin:4pc;margin:4rem}.mt4{margin-top:4pc;margin-top:4rem}.mr4{margin-right:4pc;margin-right:4rem}.mb4{margin-bottom:4pc;margin-bottom:4rem}.ml4{margin-left:4pc;margin-left:4rem}.mxn1{margin-left:-8px;margin-left:-.5rem;margin-right:-8px;margin-right:-.5rem}.mxn2{margin-left:-1pc;margin-left:-1rem;margin-right:-1pc;margin-right:-1rem}.mxn3{margin-left:-2pc;margin-left:-2rem;margin-right:-2pc;margin-right:-2rem}.mxn4{margin-left:-4pc;margin-left:-4rem;margin-right:-4pc;margin-right:-4rem}.p0{padding:0}.pt0{padding-top:0}.pr0{padding-right:0}.pb0{padding-bottom:0}.pl0{padding-left:0}.p1{padding:8px;padding:.5rem}.pt1{padding-top:8px;padding-top:.5rem}.pr1{padding-right:8px;padding-right:.5rem}.pb1{padding-bottom:8px;padding-bottom:.5rem}.pl1,.px1{padding-left:8px;padding-left:.5rem}.px1{padding-right:8px;padding-right:.5rem}.py1{padding-top:8px;padding-top:.5rem;padding-bottom:8px;padding-bottom:.5rem}.p2{padding:1pc;padding:1rem}.pt2{padding-top:1pc;padding-top:1rem}.pr2{padding-right:1pc;padding-right:1rem}.pb2{padding-bottom:1pc;padding-bottom:1rem}.pl2,.px2{padding-left:1pc;padding-left:1rem}.px2{padding-right:1pc;padding-right:1rem}.py2{padding-top:1pc;padding-top:1rem;padding-bottom:1pc;padding-bottom:1rem}.p3{padding:2pc;padding:2rem}.pt3{padding-top:2pc;padding-top:2rem}.pr3{padding-right:2pc;padding-right:2rem}.pb3{padding-bottom:2pc;padding-bottom:2rem}.pl3,.px3{padding-left:2pc;padding-left:2rem}.px3{padding-right:2pc;padding-right:2rem}.py3{padding-top:2pc;padding-top:2rem;padding-bottom:2pc;padding-bottom:2rem}.p4{padding:4pc;padding:4rem}.pt4{padding-top:4pc;padding-top:4rem}.pr4{padding-right:4pc;padding-right:4rem}.pb4{padding-bottom:4pc;padding-bottom:4rem}.pl4,.px4{padding-left:4pc;padding-left:4rem}.px4{padding-right:4pc;padding-right:4rem}.py4{padding-top:4pc;padding-top:4rem;padding-bottom:4pc;padding-bottom:4rem}.db{display:block}.dib{display:inline-block}.di{display:inline}.dt{display:table}.dtc{display:table-cell}.fl{float:left}.fr{float:right}.oh{overflow:hidden}.cf:after,.cf:before{content:' ';display:table}.cf:after{clear:both}.c1{width:8.33333%}.c1,.c2{box-sizing:border-box}.c2{width:16.66667%}.c3{width:25%}.c3,.c4{box-sizing:border-box}.c4{width:33.33333%}.c5{width:41.66667%}.c5,.c6{box-sizing:border-box}.c6{width:50%}.c7{width:58.33333%}.c7,.c8{box-sizing:border-box}.c8{width:66.66667%}.c9{width:75%}.c9,.c10{box-sizing:border-box}.c10{width:83.33333%}.c11{width:91.66667%}.c11,.c12{box-sizing:border-box}.c12{width:100%}.lh1{line-height:1}.b{border:1px solid #ddd}.bt{border-top:1px solid #ddd}.bb{border-bottom:1px solid #ddd}.tc{text-align:center}.break-word{word-break:break-word}.caps2{letter-spacing:.2em}.caps3{letter-spacing:.3em}.c1,.c2,.c3,.c4{-webkit-column-gap:2rem;-moz-column-gap:2rem;column-gap:2rem}.avoid-break,li{-webkit-column-break-inside:avoid;page-break-inside:avoid;break-inside:avoid}.cols1{-webkit-columns:20rem;-moz-columns:20rem;columns:20rem}.cols2{-webkit-columns:24rem;-moz-columns:24rem;columns:24rem}.cols3{-webkit-columns:28rem;-moz-columns:28rem;columns:28rem}.cols4{-webkit-columns:32rem;-moz-columns:32rem;columns:32rem}.Logo-particle-1,.Logo-particle-2{-webkit-animation-name:a;animation-name:a;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.Logo-particle-1{-webkit-animation-duration:1s;animation-duration:1s}.Logo-particle-1,.Logo-particle-2{-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%}.Logo-particle-2{-webkit-animation-duration:1.25s;animation-duration:1.25s;-webkit-animation-direction:reverse;animation-direction:reverse}@-webkit-keyframes a{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes a{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}</style><link href="http://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css"></head><body class="p3"><div class="container"><div class="tc py4"><svg viewBox="0 0 256 256" width="160" height="160" fill="currentcolor"><g class="Logo-particle-1"><rect width="256" height="256" fill="none"></rect><circle cx="128" cy="3" r="3" opacity="0.5"></circle></g><g class="Logo-particle-2"><rect width="256" height="256" fill="none"></rect><circle cx="128" cy="252" r="4" opacity="0.5"></circle></g><path d="M 205.66563145999496 71.57261577992259 A 96 96 0 1 0 205.66563145999496 184.4273842200774 L 192.72135954999578 175.02282018339787 A 80 80 1 1 1 192.72135954999578 80.97717981660215 z"></path><path d="M 242.26329099458596 215.95831566156875 L 246.73360338539888 209.32383699866352 L 78.45806855540982 87.06450452182912 L 73.9877561645969 93.69898318473432 z M 35.15494043459944 65.4852910746956 L 39.62525282541236 58.8508124117904 L 13.736709005414045 40.04168433843125 L 9.266396614601117 46.67616300133645 z"></path></svg></div><header class="py3 sm-flex flex-wrap flex-center"><div class="flex-auto mxn1"><div class=""><a href="http://jxnblk.com" class="h5 bold caps compact px1 color-inherit">Jxnblk</a></div><h1 class="m0"><a href="/gravitons" class="inline-block px1">Gravitons</a></h1><p class="h3 m0 px1">Virtually massless CSS layout microlibrary</p></div><div class="mxn1"><a href="//github.com/jxnblk/gravitons" class="btn btn-narrow btn-link">GitHub</a><a href="//npmjs.com/package/gravitons" class="btn btn-narrow btn-link">npm</a></div></header><section class="py4"><div class="container"><p class="h2">Gravitons is an extremely lightweight suite of CSS layout utilities based on modular scales and inspired by the <a href="http://en.wikipedia.org/wiki/Unix_philosophy" target="_blank">Unix Philosophy</a>.</p></div></section><section class="tc cf py4 mxn3"><div class="dib c3 p1" style="min-width:128px;"><div><div style="font-size:5vw;font-weight:700;">617 B</div><div class="h5 caps compact">Gzipped</div></div></div><div class="dib c3 p1" style="min-width:128px;"><div><div style="font-size:5vw;font-weight:700;">90</div><div class="h5 caps compact">Rules</div></div></div><div class="dib c3 p1" style="min-width:128px;"><div><div style="font-size:5vw;font-weight:700;">91</div><div class="h5 caps compact">Selectors</div></div></div><div class="dib c3 p1" style="min-width:128px;"><div><div style="font-size:5vw;font-weight:700;">115</div><div class="h5 caps compact">Declarations</div></div></div></section><pre class="tc h3 p1 mb4 b">
npm i gravitons</pre><section id="features" class="py4"><div class="container"><h2 class="h3 caps">Features</h2><ul class="h3 p0 cols1"><li>Less than 1KB</li><li>Shorthand naming convention</li><li>Quick to internalize</li><li>No colors</li><li>No media queries</li><li>No monolithic components</li></ul></div></section></div><section id="styles"><h2 class="h3 caps">Styles</h2><ul class="pl0 cols2" style="list-style:none;"><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.h1</b></div><div class="fl h5"><span>font-size: 2rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.h2</b></div><div class="fl h5"><span>font-size: 1.5rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.h3</b></div><div class="fl h5"><span>font-size: 1.25rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.h4</b></div><div class="fl h5"><span>font-size: 1rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.h5</b></div><div class="fl h5"><span>font-size: .875rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.h6</b></div><div class="fl h5"><span>font-size: .75rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.m0</b></div><div class="fl h5"><span>margin: 0; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.mt0</b></div><div class="fl h5"><span>margin-top: 0; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.mr0</b></div><div class="fl h5"><span>margin-right: 0; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.mb0</b></div><div class="fl h5"><span>margin-bottom: 0; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.ml0</b></div><div class="fl h5"><span>margin-left: 0; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.m1</b></div><div class="fl h5"><span>margin: .5rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.mt1</b></div><div class="fl h5"><span>margin-top: .5rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.mr1</b></div><div class="fl h5"><span>margin-right: .5rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.mb1</b></div><div class="fl h5"><span>margin-bottom: .5rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.ml1</b></div><div class="fl h5"><span>margin-left: .5rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.m2</b></div><div class="fl h5"><span>margin: 1rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.mt2</b></div><div class="fl h5"><span>margin-top: 1rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.mr2</b></div><div class="fl h5"><span>margin-right: 1rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.mb2</b></div><div class="fl h5"><span>margin-bottom: 1rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.ml2</b></div><div class="fl h5"><span>margin-left: 1rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.m3</b></div><div class="fl h5"><span>margin: 2rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.mt3</b></div><div class="fl h5"><span>margin-top: 2rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.mr3</b></div><div class="fl h5"><span>margin-right: 2rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.mb3</b></div><div class="fl h5"><span>margin-bottom: 2rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.ml3</b></div><div class="fl h5"><span>margin-left: 2rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.m4</b></div><div class="fl h5"><span>margin: 4rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.mt4</b></div><div class="fl h5"><span>margin-top: 4rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.mr4</b></div><div class="fl h5"><span>margin-right: 4rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.mb4</b></div><div class="fl h5"><span>margin-bottom: 4rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.ml4</b></div><div class="fl h5"><span>margin-left: 4rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.mxn1</b></div><div class="fl h5"><span>margin-left: -.5rem; </span><span>margin-right: -.5rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.mxn2</b></div><div class="fl h5"><span>margin-left: -1rem; </span><span>margin-right: -1rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.mxn3</b></div><div class="fl h5"><span>margin-left: -2rem; </span><span>margin-right: -2rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.mxn4</b></div><div class="fl h5"><span>margin-left: -4rem; </span><span>margin-right: -4rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.p0</b></div><div class="fl h5"><span>padding: 0; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.pt0</b></div><div class="fl h5"><span>padding-top: 0; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.pr0</b></div><div class="fl h5"><span>padding-right: 0; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.pb0</b></div><div class="fl h5"><span>padding-bottom: 0; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.pl0</b></div><div class="fl h5"><span>padding-left: 0; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.p1</b></div><div class="fl h5"><span>padding: .5rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.pt1</b></div><div class="fl h5"><span>padding-top: .5rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.pr1</b></div><div class="fl h5"><span>padding-right: .5rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.pb1</b></div><div class="fl h5"><span>padding-bottom: .5rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.pl1</b></div><div class="fl h5"><span>padding-left: .5rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.px1</b></div><div class="fl h5"><span>padding-left: .5rem; </span><span>padding-right: .5rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.py1</b></div><div class="fl h5"><span>padding-top: .5rem; </span><span>padding-bottom: .5rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.p2</b></div><div class="fl h5"><span>padding: 1rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.pt2</b></div><div class="fl h5"><span>padding-top: 1rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.pr2</b></div><div class="fl h5"><span>padding-right: 1rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.pb2</b></div><div class="fl h5"><span>padding-bottom: 1rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.pl2</b></div><div class="fl h5"><span>padding-left: 1rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.px2</b></div><div class="fl h5"><span>padding-left: 1rem; </span><span>padding-right: 1rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.py2</b></div><div class="fl h5"><span>padding-top: 1rem; </span><span>padding-bottom: 1rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.p3</b></div><div class="fl h5"><span>padding: 2rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.pt3</b></div><div class="fl h5"><span>padding-top: 2rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.pr3</b></div><div class="fl h5"><span>padding-right: 2rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.pb3</b></div><div class="fl h5"><span>padding-bottom: 2rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.pl3</b></div><div class="fl h5"><span>padding-left: 2rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.px3</b></div><div class="fl h5"><span>padding-left: 2rem; </span><span>padding-right: 2rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.py3</b></div><div class="fl h5"><span>padding-top: 2rem; </span><span>padding-bottom: 2rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.p4</b></div><div class="fl h5"><span>padding: 4rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.pt4</b></div><div class="fl h5"><span>padding-top: 4rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.pr4</b></div><div class="fl h5"><span>padding-right: 4rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.pb4</b></div><div class="fl h5"><span>padding-bottom: 4rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.pl4</b></div><div class="fl h5"><span>padding-left: 4rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.px4</b></div><div class="fl h5"><span>padding-left: 4rem; </span><span>padding-right: 4rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.py4</b></div><div class="fl h5"><span>padding-top: 4rem; </span><span>padding-bottom: 4rem; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.db</b></div><div class="fl h5"><span>display: block; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.dib</b></div><div class="fl h5"><span>display: inline-block; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.di</b></div><div class="fl h5"><span>display: inline; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.dt</b></div><div class="fl h5"><span>display: table; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.dtc</b></div><div class="fl h5"><span>display: table-cell; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.fl</b></div><div class="fl h5"><span>float: left; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.fr</b></div><div class="fl h5"><span>float: right; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.oh</b></div><div class="fl h5"><span>overflow: hidden; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.cf::before,.cf::after</b></div><div class="fl h5"><span>content: ' '; </span><span>display: table; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.cf::after</b></div><div class="fl h5"><span>clear: both; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.c1</b></div><div class="fl h5"><span>box-sizing: border-box; </span><span>width: 8.33333%; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.c2</b></div><div class="fl h5"><span>box-sizing: border-box; </span><span>width: 16.66667%; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.c3</b></div><div class="fl h5"><span>box-sizing: border-box; </span><span>width: 25%; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.c4</b></div><div class="fl h5"><span>box-sizing: border-box; </span><span>width: 33.33333%; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.c5</b></div><div class="fl h5"><span>box-sizing: border-box; </span><span>width: 41.66667%; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.c6</b></div><div class="fl h5"><span>box-sizing: border-box; </span><span>width: 50%; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.c7</b></div><div class="fl h5"><span>box-sizing: border-box; </span><span>width: 58.33333%; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.c8</b></div><div class="fl h5"><span>box-sizing: border-box; </span><span>width: 66.66667%; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.c9</b></div><div class="fl h5"><span>box-sizing: border-box; </span><span>width: 75%; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.c10</b></div><div class="fl h5"><span>box-sizing: border-box; </span><span>width: 83.33333%; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.c11</b></div><div class="fl h5"><span>box-sizing: border-box; </span><span>width: 91.66667%; </span></div></li><li class="cf py2 avoid-break bb"><div class="fl c3 break-word"><b>.c12</b></div><div class="fl h5"><span>box-sizing: border-box; </span><span>width: 100%; </span></div></li></ul></section><section style="max-width:40em;margin:0 auto;" class="py4"><blockquote class="h3 m0 mb4">The graviton is a hypothetical elementary particle that mediates the force of gravitation in the framework of quantum field theory.</blockquote><pre class="tc h3 p1 mb4 b">
npm i gravitons</pre><a href="//github.com/jxnblk/gravitons" style="display:inline-block;font-weight:700;text-decoration:none;text-transform:uppercase;letter-spacing:0.1em;line-height:3;padding:0 1rem;color:#fff;border-radius:3px;" class="bg-blue">Github</a></section><section id="related" class="tc py4"><div class="container"><h2 class="h3 caps">Related</h2><a href="//tachyons.io" class="dib p1 m1">Tachyons</a><a href="//basscss.com" class="dib p1 m1">Basscss</a></div></section><footer class="mt3 py3 border-top"><div class="sm-flex flex-baseline flex-wrap mxn1"><a href="/gravitons" class="h3 btn btn-narrow btn-link">Gravitons</a><div class="sm-flex flex-baseline"><a href="//github.com/jxnblk/gravitons" class="btn btn-narrow btn-link">GitHub</a><a href="//npmjs.com/package/gravitons" class="btn btn-narrow btn-link">npm</a></div><div class="flex-auto"></div><a href="//jxnblk.com" class="btn btn-narrow btn-link">Made by Jxnblk</a></div></footer></body></html>