flex-box-grid
Version:
Responsive, mobile first Flexbox Grid
2 lines (1 loc) • 16.1 kB
CSS
.container{margin-right:auto;margin-left:auto;padding-left:5px;padding-right:5px}.row{display:flex;flex:0 1 auto;flex-direction:row;flex-wrap:wrap;margin-left:-5px;margin-right:-5px}.X1,.S1,.M1,.L1,.XL1,.X2,.S2,.M2,.L2,.XL2,.X3,.S3,.M3,.L3,.XL3,.X4,.S4,.M4,.L4,.XL4,.X5,.S5,.M5,.L5,.XL5,.X6,.S6,.M6,.L6,.XL6,.X7,.S7,.M7,.L7,.XL7,.X8,.S8,.M8,.L8,.XL8,.X9,.S9,.M9,.L9,.XL9,.X10,.S10,.M10,.L10,.XL10,.X11,.S11,.M11,.L11,.XL11,.X12,.S12,.M12,.L12,.XL12{flex:0 0 100%;max-width:100%;min-height:1px;padding-left:5px;padding-right:5px}.X1{flex-basis:8.33333%;max-width:8.33333%}.X2{flex-basis:16.66667%;max-width:16.66667%}.X3{flex-basis:25%;max-width:25%}.X4{flex-basis:33.33333%;max-width:33.33333%}.X5{flex-basis:41.66667%;max-width:41.66667%}.X6{flex-basis:50%;max-width:50%}.X7{flex-basis:58.33333%;max-width:58.33333%}.X8{flex-basis:66.66667%;max-width:66.66667%}.X9{flex-basis:75%;max-width:75%}.X10{flex-basis:83.33333%;max-width:83.33333%}.X11{flex-basis:91.66667%;max-width:91.66667%}.X12{flex-basis:100%;max-width:100%}.X--offset0{margin-left:0%}.X--offset1{margin-left:8.33333%}.X--offset2{margin-left:16.66667%}.X--offset3{margin-left:25%}.X--offset4{margin-left:33.33333%}.X--offset5{margin-left:41.66667%}.X--offset6{margin-left:50%}.X--offset7{margin-left:58.33333%}.X--offset8{margin-left:66.66667%}.X--offset9{margin-left:75%}.X--offset10{margin-left:83.33333%}.X--offset11{margin-left:91.66667%}.X--offset12{margin-left:100%}.X--order0{order:0}.X--order1{order:1}.X--order2{order:2}.X--order3{order:3}.X--order4{order:4}.X--order5{order:5}.X--order6{order:6}.X--order7{order:7}.X--order8{order:8}.X--order9{order:9}.X--order10{order:10}.X--order11{order:11}.X--order12{order:12}.X--start{justify-content:flex-start}.X--center{justify-content:center}.X--end{justify-content:flex-end}.X--top{align-items:flex-start}.X--middle{align-items:center}.X--bottom{align-items:flex-end}.X--stretch{align-items:stretch}.X--reverse{flex-direction:row-reverse}.X--around{justify-content:space-around}.X--between{justify-content:space-between}@media (min-width: 481px){.S1{flex-basis:8.33333%;max-width:8.33333%}.S2{flex-basis:16.66667%;max-width:16.66667%}.S3{flex-basis:25%;max-width:25%}.S4{flex-basis:33.33333%;max-width:33.33333%}.S5{flex-basis:41.66667%;max-width:41.66667%}.S6{flex-basis:50%;max-width:50%}.S7{flex-basis:58.33333%;max-width:58.33333%}.S8{flex-basis:66.66667%;max-width:66.66667%}.S9{flex-basis:75%;max-width:75%}.S10{flex-basis:83.33333%;max-width:83.33333%}.S11{flex-basis:91.66667%;max-width:91.66667%}.S12{flex-basis:100%;max-width:100%}.S--offset0{margin-left:0%}.S--offset1{margin-left:8.33333%}.S--offset2{margin-left:16.66667%}.S--offset3{margin-left:25%}.S--offset4{margin-left:33.33333%}.S--offset5{margin-left:41.66667%}.S--offset6{margin-left:50%}.S--offset7{margin-left:58.33333%}.S--offset8{margin-left:66.66667%}.S--offset9{margin-left:75%}.S--offset10{margin-left:83.33333%}.S--offset11{margin-left:91.66667%}.S--offset12{margin-left:100%}.S--order0{order:0}.S--order1{order:1}.S--order2{order:2}.S--order3{order:3}.S--order4{order:4}.S--order5{order:5}.S--order6{order:6}.S--order7{order:7}.S--order8{order:8}.S--order9{order:9}.S--order10{order:10}.S--order11{order:11}.S--order12{order:12}.S--start{justify-content:flex-start}.S--center{justify-content:center}.S--end{justify-content:flex-end}.S--top{align-items:flex-start}.S--middle{align-items:center}.S--bottom{align-items:flex-end}.S--stretch{align-items:stretch}.S--reverse{flex-direction:row-reverse}.S--around{justify-content:space-around}.S--between{justify-content:space-between}}@media (min-width: 769px){.M1{flex-basis:8.33333%;max-width:8.33333%}.M2{flex-basis:16.66667%;max-width:16.66667%}.M3{flex-basis:25%;max-width:25%}.M4{flex-basis:33.33333%;max-width:33.33333%}.M5{flex-basis:41.66667%;max-width:41.66667%}.M6{flex-basis:50%;max-width:50%}.M7{flex-basis:58.33333%;max-width:58.33333%}.M8{flex-basis:66.66667%;max-width:66.66667%}.M9{flex-basis:75%;max-width:75%}.M10{flex-basis:83.33333%;max-width:83.33333%}.M11{flex-basis:91.66667%;max-width:91.66667%}.M12{flex-basis:100%;max-width:100%}.M--offset0{margin-left:0%}.M--offset1{margin-left:8.33333%}.M--offset2{margin-left:16.66667%}.M--offset3{margin-left:25%}.M--offset4{margin-left:33.33333%}.M--offset5{margin-left:41.66667%}.M--offset6{margin-left:50%}.M--offset7{margin-left:58.33333%}.M--offset8{margin-left:66.66667%}.M--offset9{margin-left:75%}.M--offset10{margin-left:83.33333%}.M--offset11{margin-left:91.66667%}.M--offset12{margin-left:100%}.M--order0{order:0}.M--order1{order:1}.M--order2{order:2}.M--order3{order:3}.M--order4{order:4}.M--order5{order:5}.M--order6{order:6}.M--order7{order:7}.M--order8{order:8}.M--order9{order:9}.M--order10{order:10}.M--order11{order:11}.M--order12{order:12}.M--start{justify-content:flex-start}.M--center{justify-content:center}.M--end{justify-content:flex-end}.M--top{align-items:flex-start}.M--middle{align-items:center}.M--bottom{align-items:flex-end}.M--stretch{align-items:stretch}.M--reverse{flex-direction:row-reverse}.M--around{justify-content:space-around}.M--between{justify-content:space-between}}@media (min-width: 1025px){.L1{flex-basis:8.33333%;max-width:8.33333%}.L2{flex-basis:16.66667%;max-width:16.66667%}.L3{flex-basis:25%;max-width:25%}.L4{flex-basis:33.33333%;max-width:33.33333%}.L5{flex-basis:41.66667%;max-width:41.66667%}.L6{flex-basis:50%;max-width:50%}.L7{flex-basis:58.33333%;max-width:58.33333%}.L8{flex-basis:66.66667%;max-width:66.66667%}.L9{flex-basis:75%;max-width:75%}.L10{flex-basis:83.33333%;max-width:83.33333%}.L11{flex-basis:91.66667%;max-width:91.66667%}.L12{flex-basis:100%;max-width:100%}.L--offset0{margin-left:0%}.L--offset1{margin-left:8.33333%}.L--offset2{margin-left:16.66667%}.L--offset3{margin-left:25%}.L--offset4{margin-left:33.33333%}.L--offset5{margin-left:41.66667%}.L--offset6{margin-left:50%}.L--offset7{margin-left:58.33333%}.L--offset8{margin-left:66.66667%}.L--offset9{margin-left:75%}.L--offset10{margin-left:83.33333%}.L--offset11{margin-left:91.66667%}.L--offset12{margin-left:100%}.L--order0{order:0}.L--order1{order:1}.L--order2{order:2}.L--order3{order:3}.L--order4{order:4}.L--order5{order:5}.L--order6{order:6}.L--order7{order:7}.L--order8{order:8}.L--order9{order:9}.L--order10{order:10}.L--order11{order:11}.L--order12{order:12}.L--start{justify-content:flex-start}.L--center{justify-content:center}.L--end{justify-content:flex-end}.L--top{align-items:flex-start}.L--middle{align-items:center}.L--bottom{align-items:flex-end}.L--stretch{align-items:stretch}.L--reverse{flex-direction:row-reverse}.L--around{justify-content:space-around}.L--between{justify-content:space-between}}@media (min-width: 1441px){.XL1{flex-basis:8.33333%;max-width:8.33333%}.XL2{flex-basis:16.66667%;max-width:16.66667%}.XL3{flex-basis:25%;max-width:25%}.XL4{flex-basis:33.33333%;max-width:33.33333%}.XL5{flex-basis:41.66667%;max-width:41.66667%}.XL6{flex-basis:50%;max-width:50%}.XL7{flex-basis:58.33333%;max-width:58.33333%}.XL8{flex-basis:66.66667%;max-width:66.66667%}.XL9{flex-basis:75%;max-width:75%}.XL10{flex-basis:83.33333%;max-width:83.33333%}.XL11{flex-basis:91.66667%;max-width:91.66667%}.XL12{flex-basis:100%;max-width:100%}.XL--offset0{margin-left:0%}.XL--offset1{margin-left:8.33333%}.XL--offset2{margin-left:16.66667%}.XL--offset3{margin-left:25%}.XL--offset4{margin-left:33.33333%}.XL--offset5{margin-left:41.66667%}.XL--offset6{margin-left:50%}.XL--offset7{margin-left:58.33333%}.XL--offset8{margin-left:66.66667%}.XL--offset9{margin-left:75%}.XL--offset10{margin-left:83.33333%}.XL--offset11{margin-left:91.66667%}.XL--offset12{margin-left:100%}.XL--order0{order:0}.XL--order1{order:1}.XL--order2{order:2}.XL--order3{order:3}.XL--order4{order:4}.XL--order5{order:5}.XL--order6{order:6}.XL--order7{order:7}.XL--order8{order:8}.XL--order9{order:9}.XL--order10{order:10}.XL--order11{order:11}.XL--order12{order:12}.XL--start{justify-content:flex-start}.XL--center{justify-content:center}.XL--end{justify-content:flex-end}.XL--top{align-items:flex-start}.XL--middle{align-items:center}.XL--bottom{align-items:flex-end}.XL--stretch{align-items:stretch}.XL--reverse{flex-direction:row-reverse}.XL--around{justify-content:space-around}.XL--between{justify-content:space-between}}code[class*="language-"],pre[class*="language-"]{color:black;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*="language-"]::-moz-selection,pre[class*="language-"] ::-moz-selection,code[class*="language-"]::-moz-selection,code[class*="language-"] ::-moz-selection{text-shadow:none;background:#b3d4fc}pre[class*="language-"]::selection,pre[class*="language-"] ::selection,code[class*="language-"]::selection,code[class*="language-"] ::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*="language-"],pre[class*="language-"]{text-shadow:none}}pre[class*="language-"]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*="language-"],pre[class*="language-"]{background:#f5f2f0}:not(pre)>code[class*="language-"]{padding:.1em;border-radius:.3em}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:slategray}.token.punctuation{color:#999}.namespace{opacity:.7}.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol,.token.deleted{color:#905}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#690}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string{color:#a67f59;background:rgba(255,255,255,0.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.function{color:#DD4A68}.token.regex,.token.important,.token.variable{color:#e90}.token.important,.token.bold{font-weight:bold}.token.italic{font-style:italic}.token.entity{cursor:help}.token a{color:inherit}pre[class*='language-']{position:relative}pre[class*='language-'][data-language]::before{content:attr(data-language);color:black;background-color:#CFCFCF;display:inline-block;position:absolute;top:0;right:0;font-size:0.9em;border-radius:0 0 0 5px;padding:0 0.5em;text-shadow:none}@font-face{font-weight:300;font-style:normal;font-family:"Font Awesome";src:url("../fonts/fontawesome-webfont.eot");src:url("../fonts/fontawesome-webfont.eot?#iefix") format("embedded-opentype"),url("../fonts/fontawesome-webfont.woff2") format("woff2"),url("../fonts/fontawesome-webfont.woff") format("woff"),url("../fonts/fontawesome-webfont.ttf") format("truetype"),url("../fonts/fontawesome-webfont.svg#fontawesome-webfont") format("svg")}.flexgrid-logo:before,.btn-github:before,.btn-download-css:before,.btn-download-scss:before{display:inline-block;font-family:"Font Awesome";font-style:normal;font-weight:normal;line-height:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}*,*:after,*:before{box-sizing:inherit}html{box-sizing:border-box}body{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-size:14px;line-height:1.4;font-weight:100;color:#666}h1,h2,h3{font-weight:300;margin-top:0}h2{font-size:30px}h3{font-size:24px}h3 code{font-size:14px}pre[class*='language-']{margin-top:0;margin-bottom:2em}ul{margin-top:0;margin-bottom:2em;padding:0}ul li{display:block;margin-bottom:.5em}ul li:before{content:'\2014';margin-right:.5em}dl{margin:0;padding:0}dt{font-weight:600;display:block;margin-bottom:.25em;font-size:15px}dd{margin:0 0 2em;display:block}p{margin-top:0;margin-bottom:2em}a{color:#4cbef4}a:hover{color:#34b5f3}img{width:auto;max-width:100%}.main{max-width:1024px;margin:0 auto;padding:30px}.header-actions{margin-bottom:2em;margin-top:2em;text-align:center}@media (min-width: 769px){.header-actions{text-align:right;margin-bottom:10px;margin-top:13px}}.page-title{font-weight:300;margin-bottom:.25em;font-size:3em;text-align:center;white-space:nowrap;letter-spacing:.025em}@media (min-width: 769px){.page-title{text-align:left}}.page-title .accent-text{color:#9d66c7}.header{position:relative}.flexgrid-logo{display:inline-block;opacity:.1;position:absolute;font-size:3em;left:50%;top:-22px;transform:rotate(-38deg) scale(8) translate(-14%, 0)}.flexgrid-logo:before{content:""}@media (min-width: 769px){.flexgrid-logo{left:65px;top:19px;transform:rotate(-10deg) scale(6) translate(0, 0)}.flexgrid-logo:before{content:"";font-size:.85em}}.flexgrid-logo__item{position:absolute;display:block;width:12px;height:2px;background-color:#9d66c7;top:23px;left:3px}.flexgrid-logo__item:nth-child(2){top:27px}.flexgrid-logo__item:nth-child(3){top:31px}.flexgrid-logo__item:nth-child(4){top:35px}@media (min-width: 769px){.flexgrid-logo__item{width:14px;top:19px;left:4px}.flexgrid-logo__item:nth-child(2){top:19px}.flexgrid-logo__item:nth-child(10),.flexgrid-logo__item:nth-child(2){left:20px}.flexgrid-logo__item:nth-child(3),.flexgrid-logo__item:nth-child(4),.flexgrid-logo__item:nth-child(5),.flexgrid-logo__item:nth-child(6){top:23px;width:6px}.flexgrid-logo__item:nth-child(4){left:12px}.flexgrid-logo__item:nth-child(5){left:20px}.flexgrid-logo__item:nth-child(6){left:28px}.flexgrid-logo__item:nth-child(7),.flexgrid-logo__item:nth-child(8){top:27px}.flexgrid-logo__item:nth-child(7){width:6px}.flexgrid-logo__item:nth-child(8){width:22px;left:12px}.flexgrid-logo__item:nth-child(9),.flexgrid-logo__item:nth-child(10){top:31px;width:14px}}.page-description{font-weight:300;font-size:16px;border-bottom:1px dashed;padding-bottom:2em}.section-example{margin-bottom:1.5em}.row-example{background-color:#e5d6f0;margin-bottom:3px}.row-example small{display:inline-block;padding:.5em 1em}.col-content-example-wrap,.col-content-example{text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;font-weight:300;font-size:11px}.col-content-example-wrap{background-color:#b58bd5;padding:10px 0 9px}.col-content-example-wrap .col-content-example{margin-top:10px}.col-content-example{background-color:#9d66c7;margin-bottom:10px;padding:9px 10px 11px}.col-content-example-x2{padding:29px 10px 31px}.line-sass-class,.line-sass-variable{margin-right:.25em;margin-left:.25em;font-family:monospace}.line-sass-class{color:#07a}.line-sass-variable{color:#e90}.code-block-description{font-size:13px;margin-bottom:.5em}.btn{display:inline-block;background-color:#fff;border:1px solid #666;border-radius:3px;padding:.5em 15px .5em 38px;color:#666;text-decoration:none;transition-property:color, border-color;transition-timing-function:linear;transition-duration:.15s;font-weight:300;margin:0 5px 10px;font-size:15px;position:relative}.btn:hover{border-color:#4cbef4;color:#4cbef4}.btn:active{transform:scale(0.95)}.btn:before{position:absolute;top:50%;margin-top:-9px;left:15px;font-size:20px}.btn-github:before{content:""}.btn-download-css:before{content:"";font-size:18px;margin-top:-7px}.btn-download-scss:before{content:"";font-size:18px;margin-top:-7px}code[class*="language-"],pre[class*="language-"]{font-size:13px;font-family:monospace;background:#F5F0F5;border-radius:5px}[class*='--stretch']{height:150px}[class*='--stretch'] [class*='X']{position:relative}[class*='--stretch'] [class*='X'] .col-content-example{position:absolute;top:0;right:5px;left:5px;bottom:0}.nav{display:none;padding-top:21px;font-weight:300;font-size:16px}@media (min-width: 769px){.nav{position:fixed;display:block}}.nav h4{margin-top:22px;display:none}.nav ul li:hover:before{color:#4cbef4}.nav ul ul{margin-top:5px;margin-bottom:0;margin-left:25px}.nav ul ul li{font-size:12px;margin-bottom:3px}.nav ul ul li:before{content:'\2013'}.nav a{color:#666;text-decoration:none}.social-box{display:none}@media (min-width: 481px){.social-box{display:block;position:absolute;left:10px;top:10px}}@media (min-width: 769px){.social-box{position:fixed;bottom:30px;top:auto;left:auto;margin-left:30px}}.social-box__item{margin-bottom:5px}