mirror of
https://github.com/kristoferjoseph/flexboxgrid.git
synced 2026-01-25 07:47:53 +00:00
202 lines
35 KiB
HTML
202 lines
35 KiB
HTML
<!DOCTYPE HTML><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Flexbox Grid</title><meta name="viewport" content="width=device-width, initial-scale=1"><style>/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}a{background:0 0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}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}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}body{box-sizing:border-box;padding:0;margin:0;font-size:18px;font-family:HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:400;background:#EEE;line-height:1.4rem}h1,h2,h3,h4,h5,h6{font-family:Gibson,HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;color:#001A33}h2{font-size:2rem;margin:1rem 0}:focus{outline-color:transparent;outline-style:none}h2+p{margin:0 0 2rem}a{text-decoration:none;color:#007FFF;padding:0 0 .2rem;font-weight:700}a:hover{color:#007FFF}pre{overflow-x:auto;padding:1.25em;border:1px solid #e6e6e6;border-left-width:5px;margin:1.6em 0;font-size:.875em;background:#fcfcfc;white-space:pre;word-wrap:normal}code{color:#007FFF}.layout{display:flex;min-height:100vh;flex-direction:column}.page-nav{box-sizing:border-box;position:fixed;padding:.5rem;width:100%;background:0 0}.page{z-index:0;background:#EEE}.wrap{box-sizing:border-box;max-width:1200px;margin:0 auto}.page-section{padding-top:3rem;margin-bottom:3rem}.page-features{width:100%;background:#001a33;overflow:scroll}.menu-button{position:fixed;top:.75rem;right:.75rem;z-index:1;box-sizing:border-box;padding:.45rem;height:3rem;width:3rem;background:#FFF;border:1px solid transparent;user-select:none}.menu-button:hover{border:1px solid #007FFF;border-radius:2px}.menu-button:active{background:#EEE;border:1px solid transparent}.open{transform:translate3d(-15rem,0,0)}.menu-button-icon{width:2rem;height:2rem}.hero{box-sizing:border-box;padding:2rem;background:#FFF;border:1px solid #FFF;border-radius:2px}.hero-headline{font-size:3rem;white-space:nowrap;margin-bottom:0}.hero-copy{font-size:1rem;margin-bottom:0;padding:0 2rem;text-align:center}.slide-menu{display:block;position:fixed;overflow:auto;top:0;right:0;bottom:0;height:100%;width:250px}.menu{box-sizing:border-box;padding-bottom:5rem;background:#001a33}.menu-header{box-sizing:border-box;padding:3rem 3rem 0;color:#eee}.menu-list{margin:0;padding:0;list-style:none}.menu-list-item{height:3rem;line-height:3rem;font-size:1rem;color:#007FFF;background:0 0;transition:all .2s ease-in}.menu-link{box-sizing:border-box;padding-left:3rem;display:block;color:#007FFF;transition:color .2s ease-in}.menu-link:hover{color:#3298ff;border-bottom:0}.link-top{align-self:flex-end}.button{position:relative;display:inline-block;box-sizing:border-box;min-width:11rem;padding:0 4rem;margin:1rem;height:3rem;line-height:3rem;border:1px solid #007FFF;border-radius:2px;color:#007FFF;font-size:1.25rem;transition:background-color,.15s}.button:hover{background:#39F;border-color:#39F;color:#FFF;text-shadow:0 1px #007FFF}.button:active{background:#007FFF;color:#FFF;border-top:2px solid #06C}.box,.box-first,.box-large,.box-nested,.box-row{position:relative;box-sizing:border-box;min-height:1rem;margin-bottom:0;background:#007FFF;border:1px solid #FFF;border-radius:2px;overflow:hidden;text-align:center;color:#fff}.box-row{margin-bottom:1rem}.box-first{background:#06C;border-color:#007FFF}.box-nested{background:#036;border-color:#007FFF}.box-large{height:8rem}.box-container{box-sizing:border-box;padding:.5rem}.page-footer{box-sizing:border-box;padding-bottom:3rem}.tag{color:#000;font-weight:400}.end{text-align:end}.invisible-xs{display:none;visibility:hidden}.visible-xs{display:block;visibility:visible}@media only screen and (min-width:48rem){body{font-size:16px}.slide-menu{width:25%}.open{transform:translate3d(0,0,0)}.hero-headline{font-size:6rem;margin-bottom:2rem}.hero-copy{font-size:1.25rem;margin-bottom:2rem}.box,.box-first,.box-large,.box-nested,.box-row{padding:1rem}.invisible-md{display:none;visibility:hidden}.visible-md{display:block;visibility:visible}}.container,.container-fluid{margin-right:auto;margin-left:auto}.container-fluid{padding-right:2rem;padding-left:2rem}.row{box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-.5rem;margin-left:-.5rem}.row.reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.col.reverse{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.col-xs,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-offset-1,.col-xs-offset-10,.col-xs-offset-11,.col-xs-offset-12,.col-xs-offset-2,.col-xs-offset-3,.col-xs-offset-4,.col-xs-offset-5,.col-xs-offset-6,.col-xs-offset-7,.col-xs-offset-8,.col-xs-offset-9{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-xs{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-xs-1{-webkit-flex-basis:8.333%;-ms-flex-preferred-size:8.333%;flex-basis:8.333%;max-width:8.333%}.col-xs-2{-webkit-flex-basis:16.667%;-ms-flex-preferred-size:16.667%;flex-basis:16.667%;max-width:16.667%}.col-xs-3{-webkit-flex-basis:25%;-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-xs-4{-webkit-flex-basis:33.333%;-ms-flex-preferred-size:33.333%;flex-basis:33.333%;max-width:33.333%}.col-xs-5{-webkit-flex-basis:41.667%;-ms-flex-preferred-size:41.667%;flex-basis:41.667%;max-width:41.667%}.col-xs-6{-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-xs-7{-webkit-flex-basis:58.333%;-ms-flex-preferred-size:58.333%;flex-basis:58.333%;max-width:58.333%}.col-xs-8{-webkit-flex-basis:66.667%;-ms-flex-preferred-size:66.667%;flex-basis:66.667%;max-width:66.667%}.col-xs-9{-webkit-flex-basis:75%;-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-xs-10{-webkit-flex-basis:83.333%;-ms-flex-preferred-size:83.333%;flex-basis:83.333%;max-width:83.333%}.col-xs-11{-webkit-flex-basis:91.667%;-ms-flex-preferred-size:91.667%;flex-basis:91.667%;max-width:91.667%}.col-xs-12{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-xs-offset-1{margin-left:8.333%}.col-xs-offset-2{margin-left:16.667%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-4{margin-left:33.333%}.col-xs-offset-5{margin-left:41.667%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-7{margin-left:58.333%}.col-xs-offset-8{margin-left:66.667%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-10{margin-left:83.333%}.col-xs-offset-11{margin-left:91.667%}.start-xs{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-xs{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-xs{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-xs{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.middle-xs{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.bottom-xs{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.around-xs{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.between-xs{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.first-xs{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.last-xs{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}@media only screen and (min-width:48em){.container{width:49rem}.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-offset-1,.col-sm-offset-10,.col-sm-offset-11,.col-sm-offset-12,.col-sm-offset-2,.col-sm-offset-3,.col-sm-offset-4,.col-sm-offset-5,.col-sm-offset-6,.col-sm-offset-7,.col-sm-offset-8,.col-sm-offset-9{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-sm{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-sm-1{-webkit-flex-basis:8.333%;-ms-flex-preferred-size:8.333%;flex-basis:8.333%;max-width:8.333%}.col-sm-2{-webkit-flex-basis:16.667%;-ms-flex-preferred-size:16.667%;flex-basis:16.667%;max-width:16.667%}.col-sm-3{-webkit-flex-basis:25%;-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-sm-4{-webkit-flex-basis:33.333%;-ms-flex-preferred-size:33.333%;flex-basis:33.333%;max-width:33.333%}.col-sm-5{-webkit-flex-basis:41.667%;-ms-flex-preferred-size:41.667%;flex-basis:41.667%;max-width:41.667%}.col-sm-6{-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-sm-7{-webkit-flex-basis:58.333%;-ms-flex-preferred-size:58.333%;flex-basis:58.333%;max-width:58.333%}.col-sm-8{-webkit-flex-basis:66.667%;-ms-flex-preferred-size:66.667%;flex-basis:66.667%;max-width:66.667%}.col-sm-9{-webkit-flex-basis:75%;-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-sm-10{-webkit-flex-basis:83.333%;-ms-flex-preferred-size:83.333%;flex-basis:83.333%;max-width:83.333%}.col-sm-11{-webkit-flex-basis:91.667%;-ms-flex-preferred-size:91.667%;flex-basis:91.667%;max-width:91.667%}.col-sm-12{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-sm-offset-1{margin-left:8.333%}.col-sm-offset-2{margin-left:16.667%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-4{margin-left:33.333%}.col-sm-offset-5{margin-left:41.667%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-7{margin-left:58.333%}.col-sm-offset-8{margin-left:66.667%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-10{margin-left:83.333%}.col-sm-offset-11{margin-left:91.667%}.start-sm{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-sm{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-sm{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-sm{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.middle-sm{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.bottom-sm{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.around-sm{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.between-sm{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.first-sm{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.last-sm{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}}@media only screen and (min-width:64em){.container{width:65rem}.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-offset-1,.col-md-offset-10,.col-md-offset-11,.col-md-offset-12,.col-md-offset-2,.col-md-offset-3,.col-md-offset-4,.col-md-offset-5,.col-md-offset-6,.col-md-offset-7,.col-md-offset-8,.col-md-offset-9{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-md{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-md-1{-webkit-flex-basis:8.333%;-ms-flex-preferred-size:8.333%;flex-basis:8.333%;max-width:8.333%}.col-md-2{-webkit-flex-basis:16.667%;-ms-flex-preferred-size:16.667%;flex-basis:16.667%;max-width:16.667%}.col-md-3{-webkit-flex-basis:25%;-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-md-4{-webkit-flex-basis:33.333%;-ms-flex-preferred-size:33.333%;flex-basis:33.333%;max-width:33.333%}.col-md-5{-webkit-flex-basis:41.667%;-ms-flex-preferred-size:41.667%;flex-basis:41.667%;max-width:41.667%}.col-md-6{-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-md-7{-webkit-flex-basis:58.333%;-ms-flex-preferred-size:58.333%;flex-basis:58.333%;max-width:58.333%}.col-md-8{-webkit-flex-basis:66.667%;-ms-flex-preferred-size:66.667%;flex-basis:66.667%;max-width:66.667%}.col-md-9{-webkit-flex-basis:75%;-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-md-10{-webkit-flex-basis:83.333%;-ms-flex-preferred-size:83.333%;flex-basis:83.333%;max-width:83.333%}.col-md-11{-webkit-flex-basis:91.667%;-ms-flex-preferred-size:91.667%;flex-basis:91.667%;max-width:91.667%}.col-md-12{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-md-offset-1{margin-left:8.333%}.col-md-offset-2{margin-left:16.667%}.col-md-offset-3{margin-left:25%}.col-md-offset-4{margin-left:33.333%}.col-md-offset-5{margin-left:41.667%}.col-md-offset-6{margin-left:50%}.col-md-offset-7{margin-left:58.333%}.col-md-offset-8{margin-left:66.667%}.col-md-offset-9{margin-left:75%}.col-md-offset-10{margin-left:83.333%}.col-md-offset-11{margin-left:91.667%}.start-md{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-md{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-md{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-md{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.middle-md{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.bottom-md{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.around-md{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.between-md{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.first-md{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.last-md{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}}@media only screen and (min-width:75em){.container{width:76rem}.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-offset-1,.col-lg-offset-10,.col-lg-offset-11,.col-lg-offset-12,.col-lg-offset-2,.col-lg-offset-3,.col-lg-offset-4,.col-lg-offset-5,.col-lg-offset-6,.col-lg-offset-7,.col-lg-offset-8,.col-lg-offset-9{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-lg{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-lg-1{-webkit-flex-basis:8.333%;-ms-flex-preferred-size:8.333%;flex-basis:8.333%;max-width:8.333%}.col-lg-2{-webkit-flex-basis:16.667%;-ms-flex-preferred-size:16.667%;flex-basis:16.667%;max-width:16.667%}.col-lg-3{-webkit-flex-basis:25%;-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-lg-4{-webkit-flex-basis:33.333%;-ms-flex-preferred-size:33.333%;flex-basis:33.333%;max-width:33.333%}.col-lg-5{-webkit-flex-basis:41.667%;-ms-flex-preferred-size:41.667%;flex-basis:41.667%;max-width:41.667%}.col-lg-6{-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-lg-7{-webkit-flex-basis:58.333%;-ms-flex-preferred-size:58.333%;flex-basis:58.333%;max-width:58.333%}.col-lg-8{-webkit-flex-basis:66.667%;-ms-flex-preferred-size:66.667%;flex-basis:66.667%;max-width:66.667%}.col-lg-9{-webkit-flex-basis:75%;-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-lg-10{-webkit-flex-basis:83.333%;-ms-flex-preferred-size:83.333%;flex-basis:83.333%;max-width:83.333%}.col-lg-11{-webkit-flex-basis:91.667%;-ms-flex-preferred-size:91.667%;flex-basis:91.667%;max-width:91.667%}.col-lg-12{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-lg-offset-1{margin-left:8.333%}.col-lg-offset-2{margin-left:16.667%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-4{margin-left:33.333%}.col-lg-offset-5{margin-left:41.667%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-7{margin-left:58.333%}.col-lg-offset-8{margin-left:66.667%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-10{margin-left:83.333%}.col-lg-offset-11{margin-left:91.667%}.start-lg{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-lg{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-lg{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-lg{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.middle-lg{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.bottom-lg{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.around-lg{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.between-lg{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.first-lg{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.last-lg{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}}</style><script>function loadCSS( href, before, media, callback ){
|
|
"use strict";
|
|
var ss = window.document.createElement( "link" );
|
|
var ref = before || window.document.getElementsByTagName( "script" )[ 0 ];
|
|
var sheets = window.document.styleSheets;
|
|
ss.rel = "stylesheet";
|
|
ss.href = href;
|
|
ss.media = "only x";
|
|
ref.parentNode.insertBefore( ss, ref );
|
|
ss.onloadcssdefined = function( cb ){
|
|
var defined;
|
|
for( var i = 0; i < sheets.length; i++ ){
|
|
if( sheets[ i ].href && sheets[ i ].href.indexOf( href ) > -1 ){
|
|
defined = true;
|
|
}
|
|
}
|
|
if( defined ){
|
|
cb();
|
|
} else {
|
|
setTimeout(function() {
|
|
ss.onloadcssdefined( cb );
|
|
});
|
|
}
|
|
};
|
|
ss.onloadcssdefined(function() {
|
|
ss.media = media || "all";
|
|
});
|
|
return ss;
|
|
}
|
|
loadCSS( "//kristoferjoseph.com/font/bold.css" );</script><noscript><link href="//kristoferjoseph.com/font/bold.css" rel="stylesheet"></noscript></head><body class="layout"><div class="page js-page"><header class="hero"><div class="row center-xs"><h1 class="hero-headline">Flexbox Grid</h1></div><div class="row center-xs"><p class="hero-copy">A grid system based on the <a href="http://caniuse.com/#search=flexbox"><code class="inline-anchor">flex</code></a> display property.</p></div><div class="row center-xs"><a class="button invisible-xs visible-md" href="https://github.com/kristoferjoseph/flexboxgrid/archive/v6.3.0.zip">Download</a> <a class="button" href="https://github.com/kristoferjoseph/flexboxgrid">Github</a></div></header><div class="wrap container-fluid"><a name="responsive"></a><section class="page-section"><h2>Responsive</h2><p>Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md & lg viewport widths.</p><div class="row"><div class="col-xs-12 col-sm-3 col-md-2 col-lg-1"><div class="box-row"></div></div><div class="col-xs-6 col-sm-6 col-md-8 col-lg-10"><div class="box-row"></div></div><div class="col-xs-6 col-sm-3 col-md-2 col-lg-1"><div class="box-row"></div></div></div><div class="row"><div class="col-xs-12 col-sm-3 col-md-2 col-lg-1"><div class="box-row"></div></div><div class="col-xs-12 col-sm-9 col-md-10 col-lg-11"><div class="box-row"></div></div></div><div class="row"><div class="col-xs-10 col-sm-6 col-md-8 col-lg-10"><div class="box-row"></div></div><div class="col-xs-2 col-sm-6 col-md-4 col-lg-2"><div class="box-row"></div></div></div><pre><code><div class="row">
|
|
<div class="col-xs-12
|
|
col-sm-8
|
|
col-md-6
|
|
col-lg-4">
|
|
<div class="box">Responsive</div>
|
|
</div>
|
|
</div></code></pre></section><a name="fluid"></a><section class="page-section"><br><h2>Fluid</h2><p>Percent based widths allow fluid resizing of columns and rows.</p><div class="row"><div class="col-xs-12"><div class="box-row"></div></div></div><div class="row"><div class="col-xs-1"><div class="box-row"></div></div><div class="col-xs-11"><div class="box-row"></div></div></div><div class="row"><div class="col-xs-2"><div class="box-row"></div></div><div class="col-xs-10"><div class="box-row"></div></div></div><div class="row"><div class="col-xs-3"><div class="box-row"></div></div><div class="col-xs-9"><div class="box-row"></div></div></div><div class="row"><div class="col-xs-4"><div class="box-row"></div></div><div class="col-xs-8"><div class="box-row"></div></div></div><div class="row"><div class="col-xs-5"><div class="box-row"></div></div><div class="col-xs-7"><div class="box-row"></div></div></div><div class="row"><div class="col-xs-6"><div class="box-row"></div></div><div class="col-xs-6"><div class="box-row"></div></div></div><pre><code>.col-xs-6 {
|
|
flex-basis: 50%;
|
|
}</code></pre></section><a name="syntax"></a><section class="page-section"><h2>Simple Syntax</h2><p>All you need to remember is row, column, content.</p><pre><code><div class="row">
|
|
<div class="col-xs-12">
|
|
<div class="box">12</div>
|
|
</div>
|
|
</div></code></pre></section><a name="offsets"></a><section class="page-section"><h2>Offsets</h2><p>Offset a column</p><div class="row"><div class="col-xs-offset-11 col-xs-1"><div class="box-row"></div></div></div><div class="row"><div class="col-xs-offset-10 col-xs-2"><div class="box-row"></div></div></div><div class="row"><div class="col-xs-offset-9 col-xs-3"><div class="box-row"></div></div></div><div class="row"><div class="col-xs-offset-8 col-xs-4"><div class="box-row"></div></div></div><div class="row"><div class="col-xs-offset-7 col-xs-5"><div class="box-row"></div></div></div><div class="row"><div class="col-xs-offset-6 col-xs-6"><div class="box-row"></div></div></div><div class="row"><div class="col-xs-offset-5 col-xs-7"><div class="box-row"></div></div></div><div class="row"><div class="col-xs-offset-4 col-xs-8"><div class="box-row"></div></div></div><div class="row"><div class="col-xs-offset-3 col-xs-9"><div class="box-row"></div></div></div><div class="row"><div class="col-xs-offset-2 col-xs-10"><div class="box-row"></div></div></div><div class="row"><div class="col-xs-offset-1 col-xs-11"><div class="box-row"></div></div></div><pre><code><div class="row">
|
|
<div class="col-xs-offset-3 col-xs-9">
|
|
<div class="box">offset</div>
|
|
</div>
|
|
</div></code></pre></section><a name="auto"></a><section class="page-section"><h2>Auto Width</h2><p>Add any number of auto sizing columns to a row. Let the grid figure it out.</p><div class="row"><div class="col-xs"><div class="box-row"></div></div><div class="col-xs"><div class="box-row"></div></div></div><div class="row"><div class="col-xs"><div class="box-row"></div></div><div class="col-xs"><div class="box-row"></div></div><div class="col-xs"><div class="box-row"></div></div></div><pre><code><div class="row">
|
|
<div class="col-xs">
|
|
<div class="box">auto</div>
|
|
</div>
|
|
</div></code></pre></section><a name="nested"></a><section class="page-section"><h2>Nested Grids</h2><p>Nest grids inside grids inside grids.</p><div class="row"><div class="col-xs-7"><div class="box box-container"><div class="row"><div class="col-xs-9"><div class="box-first box-container"><div class="row"><div class="col-xs-4"><div class="box-nested"></div></div><div class="col-xs-8"><div class="box-nested"></div></div></div></div></div><div class="col-xs-3"><div class="box-first box-container"><div class="row"><div class="col-xs"><div class="box-nested"></div></div></div></div></div></div></div></div><div class="col-xs-5"><div class="box box-container"><div class="row"><div class="col-xs-12"><div class="box-first box-container"><div class="row"><div class="col-xs-6"><div class="box-nested"></div></div><div class="col-xs-6"><div class="box-nested"></div></div></div></div></div></div></div></div></div><pre><code><div class="row">
|
|
<div class="col-xs">
|
|
<div class="box">auto</div>
|
|
<div class="row">
|
|
<div class="col-xs">
|
|
<div class="box">auto</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div></code></pre></section><a name="alignment"></a><section class="page-section"><h2>Alignment</h2><p>Add classes to align elements to the start or end of a row as well as the top, bottom, or center of a column</p><h3><code>.start-</code></h3><div class="row"><div class="col-xs-12"><div class="box box-container"><div class="row start-xs"><div class="col-xs-6"><div class="box-nested"></div></div></div></div></div></div><pre><code><div class="row start-xs">
|
|
<div class="col-xs-6">
|
|
<div class="box">
|
|
start
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code></pre><h3><code>.center-</code></h3><div class="row"><div class="col-xs-12"><div class="box box-container"><div class="row center-xs"><div class="col-xs-6"><div class="box-nested"></div></div></div></div></div></div><pre><code><div class="row center-xs">
|
|
<div class="col-xs-6">
|
|
<div class="box">
|
|
start
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code></pre><h3><code>.end-</code></h3><div class="row"><div class="col-xs-12"><div class="box box-container"><div class="row end-xs"><div class="col-xs-6"><div class="box-nested"></div></div></div></div></div></div><pre><code><div class="row end-xs">
|
|
<div class="col-xs-6">
|
|
<div class="box">
|
|
end
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code></pre><p>Here is an example of using the modifiers in conjunction to acheive different alignment at different viewport sizes.</p><div class="row"><div class="col-xs-12"><div class="box box-container"><div class="row center-xs end-sm start-lg"><div class="col-xs-6"><div class="box-nested"></div></div></div></div></div></div>Example<pre><code><div class="row center-xs end-sm start-lg">
|
|
<div class="col-xs-6">
|
|
<div class="box">
|
|
All together now
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code></pre><h3><code>.top-</code></h3><div class="row top-xs"><div class="col-xs-6"><div class="box-large"></div></div><div class="col-xs-6"><div class="box"></div></div></div><pre><code><div class="row top-xs">
|
|
<div class="col-xs-6">
|
|
<div class="box">
|
|
top
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code></pre><h3><code>.middle-</code></h3><div class="row middle-xs"><div class="col-xs-6"><div class="box-large"></div></div><div class="col-xs-6"><div class="box"></div></div></div><pre><code><div class="row middle-xs">
|
|
<div class="col-xs-6">
|
|
<div class="box">
|
|
center
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code></pre><h3><code>.bottom-</code></h3><div class="row bottom-xs"><div class="col-xs-6"><div class="box-large"></div></div><div class="col-xs-6"><div class="box"></div></div></div><pre><code><div class="row bottom-xs">
|
|
<div class="col-xs-6">
|
|
<div class="box">
|
|
bottom
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code></pre></section><a name="distribution"></a><section class="page-section"><h2>Distribution</h2><p>Add classes to distribute the contents of a row or column.</p><h3><code>.around-</code></h3><div class="row"><div class="col-xs-12"><div class="box box-container"><div class="row around-xs"><div class="col-xs-2"><div class="box-nested"></div></div><div class="col-xs-2"><div class="box-nested"></div></div><div class="col-xs-2"><div class="box-nested"></div></div></div></div></div></div><pre><code><div class="row around-xs">
|
|
<div class="col-xs-2">
|
|
<div class="box">
|
|
around
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-2">
|
|
<div class="box">
|
|
around
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-2">
|
|
<div class="box">
|
|
around
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code></pre><h3><code>.between-</code></h3><div class="row"><div class="col-xs-12"><div class="box box-container"><div class="row between-xs"><div class="col-xs-2"><div class="box-nested"></div></div><div class="col-xs-2"><div class="box-nested"></div></div><div class="col-xs-2"><div class="box-nested"></div></div></div></div></div></div><pre><code><div class="row between-xs">
|
|
<div class="col-xs-2">
|
|
<div class="box">
|
|
between
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-2">
|
|
<div class="box">
|
|
between
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-2">
|
|
<div class="box">
|
|
between
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code></pre></section><a name="reordering"></a><section class="page-section"><h2>Reordering</h2><p>Add classes to reorder columns.</p><h3><code>.first-</code></h3><div class="row"><div class="col-xs-12"><div class="box box-container"><div class="row"><div class="col-xs-2"><div class="box-first">1</div></div><div class="col-xs-2"><div class="box-first">2</div></div><div class="col-xs-2"><div class="box-first">3</div></div><div class="col-xs-2"><div class="box-first">4</div></div><div class="col-xs-2"><div class="box-first">5</div></div><div class="col-xs-2 first-xs"><div class="box-nested">6</div></div></div></div></div></div><pre><code><div class="row">
|
|
<div class="col-xs-2">
|
|
<div class="box">
|
|
1
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-2">
|
|
<div class="box">
|
|
2
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-2 first-xs">
|
|
<div class="box">
|
|
3
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code></pre><h3><code>.last-</code></h3><div class="row"><div class="col-xs-12"><div class="box box-container"><div class="row"><div class="col-xs-2 last-xs"><div class="box-nested">1</div></div><div class="col-xs-2"><div class="box-first">2</div></div><div class="col-xs-2"><div class="box-first">3</div></div><div class="col-xs-2"><div class="box-first">4</div></div><div class="col-xs-2"><div class="box-first">5</div></div><div class="col-xs-2"><div class="box-first">6</div></div></div></div></div></div><pre><code><div class="row">
|
|
<div class="col-xs-2 last-xs">
|
|
<div class="box">
|
|
1
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-2">
|
|
<div class="box">
|
|
2
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-2">
|
|
<div class="box">
|
|
3
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code></pre></section><a name="reversing"></a><section class="page-section"><h2>Reversing</h2><h3><code>.reverse</code></h3><div class="row"><div class="col-xs-12"><div class="box box-container"><div class="row reverse"><div class="col-xs-2"><div class="box-nested">1</div></div><div class="col-xs-2"><div class="box-nested">2</div></div><div class="col-xs-2"><div class="box-nested">3</div></div><div class="col-xs-2"><div class="box-nested">4</div></div><div class="col-xs-2"><div class="box-nested">5</div></div><div class="col-xs-2"><div class="box-nested">6</div></div></div></div></div></div><pre><code><div class="row reverse">
|
|
<div class="col-xs-2">
|
|
<div class="box">
|
|
1
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-2">
|
|
<div class="box">
|
|
2
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-2">
|
|
<div class="box">
|
|
3
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code></pre></section><footer class="page-footer"><div class="row"><div class="col-xs start"><a class="tag" href="http://twitter.com/dam">@dam ♡s you</a></div><div class="col-xs end"><a class="link-top" href="#top">⇪ back to top</a></div></div></footer></div></div><script>(function() {
|
|
document.addEventListener('DOMContentLoaded', function(e) {
|
|
var code = document.createElement('script');
|
|
code.src = 'js/index.js';
|
|
var script = document.getElementsByTagName('script')[0];
|
|
script.parentNode.insertBefore(code, script);
|
|
});
|
|
}());</script><script src="//localhost:35729/livereload.js"></script></body></html> |