forked from jxnblk/_gx
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
1 lines (1 loc) · 12.6 KB
/
index.html
File metadata and controls
1 lines (1 loc) · 12.6 KB
1
<!DOCTYPE html><html><head><meta charset="utf-8"/><title>Gx</title><meta name="viewport" content="width=device-width,initial-scale=1"/><link href="https://unpkg.com/basscss-basic/index.css" rel="stylesheet"/><link href="https://unpkg.com/basscss@8.0.0/css/basscss.min.css" rel="stylesheet"/><link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400" rel="stylesheet"/><style>code, pre, samp, .mono { font-family: 'Roboto Mono', monospace }/*.Example .Gx { outline: 1px solid #07c;}*/@media screen and (min-width:512px) { .sm-right-align { text-align: right }}.b2 { border: 2px solid }.b3 { border: 3px solid }.black { color: #111 }.white { color: #fff }.bg-black { background-color: #111 }.bg-white { background-color: #fff }#carbonads { display: inline-block; font-size: 14px; line-height: 1.25; text-align: left; max-width: 320px;}#carbonads a,#carbonads a:hover { text-decoration: none; color: inherit;}#carbonads span { display: block }#carbonads > span::before,#carbonads > span::after { content: ''; display: table;}#carbonads > span::after { clear: both;}.carbon-img { float: left; margin-right: .5em;}.carbon-img > img { display: block }.carbon-text { overflow: hidden }.carbon-poweredby { float: left; margin-top: .25em; opacity: 0.5;}</style></head><body><div class="Box" style="padding:24px;"><header class="py4"><div class="flex flex-column items-center justify-between p2 mb4 b3" style="width:192px;height:256px;"><div class=""></div><h1 class="m0" style="font-size:56px;">Gx</h1><div>Grid System</div></div><div class="flex flex-wrap"><div class="flex-auto"><p>Minimal responsive React grid system based on the <a href='https://medium.freecodecamp.com/the-fab-four-technique-to-create-responsive-emails-without-media-queries-baf11fdfa848#.hnwla2u14'>Fab Four Technique</a>.</p><a href="https://travis-ci.org/jxnblk/gx" class="mr2" style="display:inline-block;height:20px;"><img src="https://travis-ci.org/jxnblk/gx.svg?branch=master" style="display:block;"/></a><a href="https://twitter.com/share" class="twitter-share-button" data-text="Minimal React grid system" data-via="jxnblk">Tweet</a><pre>npm i gx</pre></div><div><script async="" type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1696&serve=CVYD42T&placement=jxnblkcom" id="_carbonads_js"></script></div></div></header><section class="py4"><div class="Gx" style="box-sizing:border-box;display:inline-block;vertical-align:top;min-width:33.33333333333333%;max-width:100%;width:calc(262144px - 51200%);"><div class="Box" style="padding:24px;outline:1px solid rgba(0, 128, 255, .5);">Element-query-like behavior</div></div><div class="Gx" style="box-sizing:border-box;display:inline-block;vertical-align:top;min-width:33.33333333333333%;max-width:100%;width:calc(262144px - 51200%);"><div class="Box" style="padding:24px;outline:1px solid rgba(0, 128, 255, .5);">No CSS dependencies</div></div><div class="Gx" style="box-sizing:border-box;display:inline-block;vertical-align:top;min-width:33.33333333333333%;max-width:100%;width:calc(262144px - 51200%);"><div class="Box" style="padding:24px;outline:1px solid rgba(0, 128, 255, .5);">No client-side JS</div></div><div class="Gx" style="box-sizing:border-box;display:inline-block;vertical-align:top;min-width:33.33333333333333%;max-width:100%;width:calc(262144px - 51200%);"><div class="Box" style="padding:24px;outline:1px solid rgba(0, 128, 255, .5);">Works with server-side rendering</div></div><div class="Gx" style="box-sizing:border-box;display:inline-block;vertical-align:top;min-width:33.33333333333333%;max-width:100%;width:calc(262144px - 51200%);"><div class="Box" style="padding:24px;outline:1px solid rgba(0, 128, 255, .5);">Single React Component</div></div><div class="Gx" style="box-sizing:border-box;display:inline-block;vertical-align:top;min-width:33.33333333333333%;max-width:100%;width:calc(262144px - 51200%);"><div class="Box" style="padding:24px;outline:1px solid rgba(0, 128, 255, .5);"><1KB gzipped & minified</div></div></section><section id="examples" class="Examples"><h2><a href="#examples">Examples</a></h2><div class="Example py2"><div class="Gx" style="box-sizing:border-box;display:inline-block;vertical-align:top;min-width:50%;max-width:100%;width:calc(262144px - 51200%);"><div class="Box" style="padding:24px;outline:1px solid rgba(0, 128, 255, .5);">Default Gx</div></div><div class="Gx" style="box-sizing:border-box;display:inline-block;vertical-align:top;min-width:50%;max-width:100%;width:calc(262144px - 51200%);"><div class="Box" style="padding:24px;outline:1px solid rgba(0, 128, 255, .5);">Default Gx</div></div></div><div class="Example py2"><div class="Gx" style="box-sizing:border-box;display:inline-block;vertical-align:top;min-width:33.33333333333333%;max-width:100%;width:calc(262144px - 51200%);"><div class="Box" style="padding:24px;outline:1px solid rgba(0, 128, 255, .5);">Col 4 Gx</div></div><div class="Gx" style="box-sizing:border-box;display:inline-block;vertical-align:top;min-width:33.33333333333333%;max-width:100%;width:calc(262144px - 51200%);"><div class="Box" style="padding:24px;outline:1px solid rgba(0, 128, 255, .5);">Col 4 Gx</div></div><div class="Gx" style="box-sizing:border-box;display:inline-block;vertical-align:top;min-width:33.33333333333333%;max-width:100%;width:calc(262144px - 51200%);"><div class="Box" style="padding:24px;outline:1px solid rgba(0, 128, 255, .5);">Col 4 Gx</div></div></div><div class="Example py2"><div class="Gx" style="box-sizing:border-box;display:inline-block;vertical-align:top;min-width:25%;max-width:100%;width:calc(262144px - 51200%);"><div class="Box" style="padding:24px;outline:1px solid rgba(0, 128, 255, .5);">Col 3 Gx</div></div><div class="Gx" style="box-sizing:border-box;display:inline-block;vertical-align:top;min-width:25%;max-width:100%;width:calc(262144px - 51200%);"><div class="Box" style="padding:24px;outline:1px solid rgba(0, 128, 255, .5);">Col 3 Gx</div></div><div class="Gx" style="box-sizing:border-box;display:inline-block;vertical-align:top;min-width:25%;max-width:100%;width:calc(262144px - 51200%);"><div class="Box" style="padding:24px;outline:1px solid rgba(0, 128, 255, .5);">Col 3 Gx</div></div><div class="Gx" style="box-sizing:border-box;display:inline-block;vertical-align:top;min-width:25%;max-width:100%;width:calc(262144px - 51200%);"><div class="Box" style="padding:24px;outline:1px solid rgba(0, 128, 255, .5);">Col 3 Gx</div></div></div><div class="Example py2"><div class="Gx" style="box-sizing:border-box;display:inline-block;vertical-align:top;min-width:16.666666666666664%;max-width:100%;width:calc(262144px - 51200%);"><div class="Box" style="padding:24px;outline:1px solid rgba(0, 128, 255, .5);">Col 2 Gx</div></div><div class="Gx" style="box-sizing:border-box;display:inline-block;vertical-align:top;min-width:16.666666666666664%;max-width:100%;width:calc(262144px - 51200%);"><div class="Box" style="padding:24px;outline:1px solid rgba(0, 128, 255, .5);">Col 2 Gx</div></div><div class="Gx" style="box-sizing:border-box;display:inline-block;vertical-align:top;min-width:16.666666666666664%;max-width:100%;width:calc(262144px - 51200%);"><div class="Box" style="padding:24px;outline:1px solid rgba(0, 128, 255, .5);">Col 2 Gx</div></div><div class="Gx" style="box-sizing:border-box;display:inline-block;vertical-align:top;min-width:16.666666666666664%;max-width:100%;width:calc(262144px - 51200%);"><div class="Box" style="padding:24px;outline:1px solid rgba(0, 128, 255, .5);">Col 2 Gx</div></div><div class="Gx" style="box-sizing:border-box;display:inline-block;vertical-align:top;min-width:16.666666666666664%;max-width:100%;width:calc(262144px - 51200%);"><div class="Box" style="padding:24px;outline:1px solid rgba(0, 128, 255, .5);">Col 2 Gx</div></div><div class="Gx" style="box-sizing:border-box;display:inline-block;vertical-align:top;min-width:16.666666666666664%;max-width:100%;width:calc(262144px - 51200%);"><div class="Box" style="padding:24px;outline:1px solid rgba(0, 128, 255, .5);">Col 2 Gx</div></div></div><div class="Example py2"><div class="Gx" style="box-sizing:border-box;display:inline-block;vertical-align:top;min-width:50%;max-width:100%;width:calc(589824px - 76800%);"><div class="Box" style="padding:24px;outline:1px solid rgba(0, 128, 255, .5);">Breakpoint 768 Gx</div></div><div class="Gx" style="box-sizing:border-box;display:inline-block;vertical-align:top;min-width:50%;max-width:100%;width:calc(589824px - 76800%);"><div class="Box" style="padding:24px;outline:1px solid rgba(0, 128, 255, .5);">Breakpoint 768 Gx</div></div></div><div class="Example py2"><div class="Gx" style="box-sizing:border-box;display:inline-block;vertical-align:top;min-width:50%;max-width:100%;width:calc(589824px - 76800%);"><div class="Box" style="padding:24px;outline:1px solid rgba(0, 128, 255, .5);">Breakpoint 768 Gx</div></div><div class="Gx" style="box-sizing:border-box;display:inline-block;vertical-align:top;min-width:50%;max-width:100%;width:calc(262144px - 51200%);"><div class="Box" style="padding:24px;outline:1px solid rgba(0, 128, 255, .5);">Breakpoint 512 Gx</div></div></div><div class="Example py2"><div class="Gx" style="box-sizing:border-box;display:inline-block;vertical-align:top;min-width:33.33333333333333%;max-width:100%;width:calc(262144px - 51200%);"><div class="Box" style="padding:24px;outline:1px solid rgba(0, 128, 255, .5);"><h3>Col 4</h3></div></div><div class="Gx" style="box-sizing:border-box;display:inline-block;vertical-align:top;min-width:66.66666666666666%;max-width:100%;width:calc(262144px - 51200%);"><div class="Box" style="padding:24px;outline:1px solid rgba(0, 128, 255, .5);"><h3>Col 8</h3><div class="Gx" style="box-sizing:border-box;display:inline-block;vertical-align:top;min-width:50%;max-width:100%;width:calc(262144px - 51200%);"><div class="Box" style="padding:24px;outline:1px solid rgba(0, 128, 255, .5);">Nested Gx</div></div><div class="Gx" style="box-sizing:border-box;display:inline-block;vertical-align:top;min-width:50%;max-width:100%;width:calc(262144px - 51200%);"><div class="Box" style="padding:24px;outline:1px solid rgba(0, 128, 255, .5);">Nested Gx</div></div></div></div></div><div class=""><div class="Gx" style="box-sizing:border-box;display:inline-block;vertical-align:top;min-width:41.66666666666667%;max-width:100%;width:calc(1254400px - 112000%);"><div class="Example" style="max-width:480px;"><div class="Box" style="padding:24px;outline:1px solid rgba(0, 128, 255, .5);"><h3>480px Container</h3><div class="Gx" style="box-sizing:border-box;display:inline-block;vertical-align:top;min-width:50%;max-width:100%;width:calc(262144px - 51200%);"><div class="Box" style="padding:24px;outline:1px solid rgba(0, 128, 255, .5);">Col 6</div></div><div class="Gx" style="box-sizing:border-box;display:inline-block;vertical-align:top;min-width:50%;max-width:100%;width:calc(262144px - 51200%);"><div class="Box" style="padding:24px;outline:1px solid rgba(0, 128, 255, .5);">Col 6</div></div></div></div></div><div class="Gx" style="box-sizing:border-box;display:inline-block;vertical-align:top;min-width:58.333333333333336%;max-width:100%;width:calc(1254400px - 112000%);"><div class="Example" style="max-width:640px;"><div class="Box" style="padding:24px;outline:1px solid rgba(0, 128, 255, .5);"><h3>640px Container</h3><div class="Gx" style="box-sizing:border-box;display:inline-block;vertical-align:top;min-width:50%;max-width:100%;width:calc(262144px - 51200%);"><div class="Box" style="padding:24px;outline:1px solid rgba(0, 128, 255, .5);">Col 6</div></div><div class="Gx" style="box-sizing:border-box;display:inline-block;vertical-align:top;min-width:50%;max-width:100%;width:calc(262144px - 51200%);"><div class="Box" style="padding:24px;outline:1px solid rgba(0, 128, 255, .5);">Col 6</div></div></div></div></div></div></section><section class="py4"><h2 class="mb0">Get Started</h2><p class="mt0">Learn more and read the documentation on GitHub</p><a href="https://github.com/jxnblk/gx" class="h1 bold">GitHub</a></section><footer class="py4"><div class="Gx" style="box-sizing:border-box;display:inline-block;vertical-align:top;min-width:50%;max-width:100%;width:calc(262144px - 51200%);"><a href="//github.com/jxnblk/gx" class="bold black text-decoration-none">GitHub</a></div><div class="Gx" style="box-sizing:border-box;display:inline-block;vertical-align:top;min-width:50%;max-width:100%;width:calc(262144px - 51200%);"><div class="sm-right-align"><a href="//jxnblk.com" class="bold black text-decoration-none">Made by Jxnblk</a></div></div></footer></div><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?"http":"https";if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document, "script", "twitter-wjs");</script></body></html>