Last active
August 29, 2015 14:21
-
-
Save simoncoulton/720c8ca63c5f0f6f2fbe to your computer and use it in GitHub Desktop.
Fun with Bourbon, Neat and my own flexbox based grid
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <style> | |
| img,legend{border:0} | |
| legend,td,th{padding:0} | |
| html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;box-sizing:border-box} | |
| body{margin:0;text-rendering:optimizeLegibility} | |
| article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block} | |
| audio,canvas,progress,video{display:inline-block;vertical-align:baseline} | |
| audio:not([controls]){display:none;height:0} | |
| [hidden],template{display:none} | |
| a{background-color:transparent} | |
| a:active,a:hover{outline:0} | |
| abbr[title]{border-bottom:1px dotted} | |
| b,optgroup,strong{font-weight:700} | |
| dfn{font-style:italic} | |
| h1{font-size:2em;margin:.67em 0} | |
| mark{background:#ff0;color:#000} | |
| small{font-size:80%} | |
| sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline} | |
| sup{top:-.5em} | |
| sub{bottom:-.25em} | |
| svg:not(:root){overflow:hidden} | |
| figure{margin:1em 40px} | |
| hr{box-sizing:content-box;height:0} | |
| pre,textarea{overflow:auto} | |
| code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em} | |
| button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0} | |
| button{overflow:visible} | |
| button,select{text-transform:none} | |
| button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer} | |
| button[disabled],html input[disabled]{cursor:default} | |
| button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0} | |
| input{line-height:normal} | |
| input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0} | |
| input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto} | |
| input[type=search]{-webkit-appearance:textfield;box-sizing:content-box} | |
| input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none} | |
| fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em} | |
| .container,body:before{max-width:68em;margin:0 auto} | |
| table{border-collapse:collapse;border-spacing:0} | |
| *,::after,::before{box-sizing:inherit} | |
| body:before{background-image:linear-gradient(to left,transparent 0,#eee 0,#eee 6.17215%,transparent 6.17215%,transparent 8.5298%,#eee 8.5298%,#eee 14.70196%,transparent 14.70196%,transparent 17.05961%,#eee 17.05961%,#eee 23.23176%,transparent 23.23176%,transparent 25.58941%,#eee 25.58941%,#eee 31.76157%,transparent 31.76157%,transparent 34.11922%,#eee 34.11922%,#eee 40.29137%,transparent 40.29137%,transparent 42.64902%,#eee 42.64902%,#eee 48.82117%,transparent 48.82117%,transparent 51.17883%,#eee 51.17883%,#eee 57.35098%,transparent 57.35098%,transparent 59.70863%,#eee 59.70863%,#eee 65.88078%,transparent 65.88078%,transparent 68.23843%,#eee 68.23843%,#eee 74.41059%,transparent 74.41059%,transparent 76.76824%,#eee 76.76824%,#eee 82.94039%,transparent 82.94039%,transparent 85.29804%,#eee 85.29804%,#eee 91.4702%,transparent 91.4702%,transparent 93.82785%,#eee 93.82785%,#eee 100%,transparent 100%);content:"";display:inline-block;height:100%;left:0;opacity:.4;pointer-events:none;position:fixed;right:0;width:100%;z-index:-1} | |
| .container,.full-width,.item{display:-webkit-flex;display:-ms-flexbox} | |
| @media screen and (min-width:20em){body:before{background-image:linear-gradient(to left,transparent 0,#eee 0,#eee 6.17215%,transparent 6.17215%,transparent 8.5298%,#eee 8.5298%,#eee 14.70196%,transparent 14.70196%,transparent 17.05961%,#eee 17.05961%,#eee 23.23176%,transparent 23.23176%,transparent 25.58941%,#eee 25.58941%,#eee 31.76157%,transparent 31.76157%,transparent 34.11922%,#eee 34.11922%,#eee 40.29137%,transparent 40.29137%,transparent 42.64902%,#eee 42.64902%,#eee 48.82117%,transparent 48.82117%,transparent 51.17883%,#eee 51.17883%,#eee 57.35098%,transparent 57.35098%,transparent 59.70863%,#eee 59.70863%,#eee 65.88078%,transparent 65.88078%,transparent 68.23843%,#eee 68.23843%,#eee 74.41059%,transparent 74.41059%,transparent 76.76824%,#eee 76.76824%,#eee 82.94039%,transparent 82.94039%,transparent 85.29804%,#eee 85.29804%,#eee 91.4702%,transparent 91.4702%,transparent 93.82785%,#eee 93.82785%,#eee 100%,transparent 100%)} | |
| } | |
| @media screen and (min-width:48em){body:before{background-image:linear-gradient(to left,transparent 0,#eee 0,#eee 6.17215%,transparent 6.17215%,transparent 8.5298%,#eee 8.5298%,#eee 14.70196%,transparent 14.70196%,transparent 17.05961%,#eee 17.05961%,#eee 23.23176%,transparent 23.23176%,transparent 25.58941%,#eee 25.58941%,#eee 31.76157%,transparent 31.76157%,transparent 34.11922%,#eee 34.11922%,#eee 40.29137%,transparent 40.29137%,transparent 42.64902%,#eee 42.64902%,#eee 48.82117%,transparent 48.82117%,transparent 51.17883%,#eee 51.17883%,#eee 57.35098%,transparent 57.35098%,transparent 59.70863%,#eee 59.70863%,#eee 65.88078%,transparent 65.88078%,transparent 68.23843%,#eee 68.23843%,#eee 74.41059%,transparent 74.41059%,transparent 76.76824%,#eee 76.76824%,#eee 82.94039%,transparent 82.94039%,transparent 85.29804%,#eee 85.29804%,#eee 91.4702%,transparent 91.4702%,transparent 93.82785%,#eee 93.82785%,#eee 100%,transparent 100%)} | |
| } | |
| @media screen and (min-width:60.0625em){body:before{background-image:linear-gradient(to left,transparent 0,#eee 0,#eee 6.17215%,transparent 6.17215%,transparent 8.5298%,#eee 8.5298%,#eee 14.70196%,transparent 14.70196%,transparent 17.05961%,#eee 17.05961%,#eee 23.23176%,transparent 23.23176%,transparent 25.58941%,#eee 25.58941%,#eee 31.76157%,transparent 31.76157%,transparent 34.11922%,#eee 34.11922%,#eee 40.29137%,transparent 40.29137%,transparent 42.64902%,#eee 42.64902%,#eee 48.82117%,transparent 48.82117%,transparent 51.17883%,#eee 51.17883%,#eee 57.35098%,transparent 57.35098%,transparent 59.70863%,#eee 59.70863%,#eee 65.88078%,transparent 65.88078%,transparent 68.23843%,#eee 68.23843%,#eee 74.41059%,transparent 74.41059%,transparent 76.76824%,#eee 76.76824%,#eee 82.94039%,transparent 82.94039%,transparent 85.29804%,#eee 85.29804%,#eee 91.4702%,transparent 91.4702%,transparent 93.82785%,#eee 93.82785%,#eee 100%,transparent 100%)} | |
| } | |
| .container{display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap} | |
| .column,.column1,.column2{-webkit-flex:0 0 100%;-ms-flex:0 0 100%;flex:0 0 100%;margin-right:2.35765%;padding:20px 0;text-align:center} | |
| .column1{background:#FFF493} | |
| .column2{background:#96A3FF} | |
| @media screen and (min-width:48em){.column1{-webkit-flex:0 0 48.82117%;-ms-flex:0 0 48.82117%;flex:0 0 48.82117%;margin-right:2.35765%} | |
| .column2{-webkit-flex:0 0 48.82117%;-ms-flex:0 0 48.82117%;flex:0 0 48.82117%;margin-right:0} | |
| } | |
| .full-width{display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;max-width:auto;margin:0 auto} | |
| .half-width,.half-width1,.half-width2{-webkit-flex:0 0 100%;-ms-flex:0 0 100%;flex:0 0 100%;margin-right:2.35765%;padding:40px} | |
| @media screen and (min-width:20em){.half-width,.half-width1,.half-width2{-webkit-flex:0 0 50%;-ms-flex:0 0 50%;flex:0 0 50%;margin-right:0} | |
| } | |
| .half-width1{background:#FF7F78} | |
| .half-width1 .box{float:right} | |
| .half-width2{background:#B4EFFF} | |
| .item{-webkit-flex:0 0 100%;-ms-flex:0 0 100%;flex:0 0 100%;margin-right:2.35765%;height:100px;background:#c1c1c1;margin-bottom:4px;display:flex} | |
| .item div{text-align:center;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;width:100%} | |
| @media screen and (min-width:20em){.item{-webkit-flex:0 0 14.70196%;-ms-flex:0 0 14.70196%;flex:0 0 14.70196%;margin-right:2.35765%;background:#8FFFA4} | |
| .item:nth-child(6){margin-right:0} | |
| } | |
| @media screen and (min-width:48em){.item{-webkit-flex:0 0 23.23176%;-ms-flex:0 0 23.23176%;flex:0 0 23.23176%;margin-right:2.35765%;background:#FF7C79} | |
| .item:nth-child(4){margin-right:0} | |
| .item:nth-child(6){margin-right:2.35765%} | |
| } | |
| </style> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| </head> | |
| <body> | |
| <div class="full-width"> | |
| <div class="half-width1"> | |
| <div class="box"> | |
| Some content | |
| </div> | |
| </div> | |
| <div class="half-width2"> | |
| <div class="box"> | |
| Some content | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container"> | |
| <div class="column1">1</div> | |
| <div class="column2">2</div> | |
| </div> | |
| <div class="container"> | |
| <div class="item"><div>1</div></div> | |
| <div class="item"><div>2</div></div> | |
| <div class="item"><div>3</div></div> | |
| <div class="item"><div>4</div></div> | |
| <div class="item"><div>5</div></div> | |
| <div class="item"><div>6</div></div> | |
| <div class="item"><div>7</div></div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment