Last active
June 4, 2020 08:13
-
-
Save kalamun/a73f5a8cc045163c7be9ff861882fd21 to your computer and use it in GitHub Desktop.
CSS Lightweight Grid System - 12 cols
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
| /* grid */ | |
| .row { max-width:1200px; position:relative; clear:both; margin:0 auto; opacity:1; } | |
| .row:after { content: ''; display: block; clear: both; } | |
| .row.full-width { max-width:100%; width:100%; } | |
| .column { float:left; } | |
| .grid { margin:0 15px; position:relative; } | |
| .grid.center { margin:0 auto !important; } | |
| .grid.nomargin { margin:0; } | |
| .grid img,.grid object,.grid element,.grid iframe { max-width:100%; height:auto; } | |
| .grid object,.grid element,.grid iframe { min-height:400px; } | |
| .grid object,.grid element { min-height:300px; } | |
| .grid>h1:first-child,.grid>h2:first-child,.grid>h3:first-child,.grid>h4:first-child,.grid>h5:first-child,.grid>h6:first-child { margin-top:0; } | |
| .grid.w1 { width:calc(8.3333% - 30px); } | |
| .grid.w2 { width:calc(16.6666% - 30px); } | |
| .grid.w3 { width:calc(25% - 30px); } | |
| .grid.w4 { width:calc(33.3333% - 30px); } | |
| .grid.w5 { width:calc(41.6665% - 30px); } | |
| .grid.w6 { width:calc(50% - 30px); } | |
| .grid.w7 { width:calc(58.3335% - 30px); } | |
| .grid.w8 { width:calc(66.6667% - 30px); } | |
| .grid.w9 { width:calc(75% - 30px); } | |
| .grid.w10 { width:calc(83.3334% - 30px); } | |
| .grid.w11 { width:calc(91.6667% - 30px); } | |
| .grid.w12 { width:calc(100% - 30px); } | |
| .grid.w1.nomargin { width:8.3333%; } | |
| .grid.w2.nomargin { width:16.6666%; } | |
| .grid.w3.nomargin { width:25%; } | |
| .grid.w4.nomargin { width:33.3333%; } | |
| .grid.w5.nomargin { width:41.6665%; } | |
| .grid.w6.nomargin { width:50%; } | |
| .grid.w7.nomargin { width:58.3335%; } | |
| .grid.w8.nomargin { width:66.6667%; } | |
| .grid.w9.nomargin { width:75%; } | |
| .grid.w10.nomargin { width:83.3334%; } | |
| .grid.w11.nomargin { width:91.6667%; } | |
| .grid.w12.nomargin { width:100%; } | |
| .grid.o1 { margin-left: calc( 15px + 8.3333% ); } | |
| .grid.o2 { margin-left: calc( 15px + 16.6666% ); } | |
| .grid.o3 { margin-left: calc( 15px + 25% ); } | |
| .grid.o4 { margin-left: calc( 15px + 33.3333% ); } | |
| .grid.o5 { margin-left: calc( 15px + 41.6665% ); } | |
| .grid.o6 { margin-left: calc( 15px + 50% ); } | |
| .grid.o7 { margin-left: calc( 15px + 58.3335% ); } | |
| .grid.o8 { margin-left: calc( 15px + 66.6667% ); } | |
| .grid.o9 { margin-left: calc( 15px + 75% ); } | |
| .grid.o10 { margin-left: calc( 15px + 83.3334% ); } | |
| .grid.o11 { margin-left: calc( 15px + 91.6667% ); } | |
| .grid.o1.nomargin { margin-left: 8.3333%; } | |
| .grid.o2.nomargin { margin-left: 16.6666%; } | |
| .grid.o3.nomargin { margin-left: 25%; } | |
| .grid.o4.nomargin { margin-left: 33.3333%; } | |
| .grid.o5.nomargin { margin-left: 41.6665%; } | |
| .grid.o6.nomargin { margin-left: 50%; } | |
| .grid.o7.nomargin { margin-left: 58.3335%; } | |
| .grid.o8.nomargin { margin-left: 66.6667%; } | |
| .grid.o9.nomargin { margin-left: 75%; } | |
| .grid.o10.nomargin { margin-left: 83.3334%; } | |
| .grid.o11.nomargin { margin-left: 91.6667%; } | |
| .margin-top-0 { margin-top:0 !important; } | |
| .margin-bottom-0 { margin-bottom:0 !important; } | |
| .margin-top-15 { margin-top:15px; } | |
| .margin-bottom-15 { margin-bottom:15px; } | |
| .margin-top-30 { margin-top:30px; } | |
| .margin-bottom-30 { margin-bottom:30px; } | |
| .margin-top-60 { margin-top:60px; } | |
| .margin-bottom-60 { margin-bottom:60px; } | |
| .margin-top-90 { margin-top:90px; } | |
| .margin-bottom-90 { margin-bottom:90px; } | |
| .margin-top-120 { margin-top:120px; } | |
| .margin-bottom-120 { margin-bottom:120px; } | |
| .padding-15 { padding:15px; } | |
| .padding-30 { padding:30px; } | |
| .padding-60 { padding:60px; } | |
| .padding-90 { padding:90px; } | |
| .padding-120 { padding:120px; } | |
| .padding-top-0 { padding-top:0 !important; } | |
| .padding-bottom-0 { padding-bottom:0 !important; } | |
| .padding-top-15 { padding-top:15px !important;; } | |
| .padding-bottom-15 { padding-bottom:15px !important;; } | |
| .padding-top-30 { padding-top:30px !important;; } | |
| .padding-bottom-30 { padding-bottom:30px !important;; } | |
| .padding-top-60 { padding-top:60px !important;; } | |
| .padding-bottom-60 { padding-bottom:60px !important;; } | |
| .padding-top-90 { padding-top:90px !important;; } | |
| .padding-bottom-90 { padding-bottom:90px !important;; } | |
| .padding-top-120 { padding-top:120px !important;; } | |
| .padding-bottom-120 { padding-bottom:120px !important;; } | |
| .hidden { display:none; } | |
| .clear-both { clear:both; } | |
| .alignleft { float:left; margin:0 20px 10px 0; } | |
| .alignright { float:right; margin:0 0 10px 20px; } | |
| .aligncenter, img.aligncenter, object { clear: both; display: block; margin-left: auto; margin-right: auto; text-align:center; } | |
| h1 + h2, h1:first-child, h2 + h3, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child { margin-top:0; } | |
| .flex { display: flex; align-items: stretch; flex-wrap: wrap; } | |
| .flex .column { float:none; } | |
| .flex.vertical-top { align-items:flex-start; } | |
| .flex.vertical-center { align-items:center; } | |
| .flex.vertical-bottom { align-items:flex-end; } | |
| .flex > .order-1 { order:1; } | |
| .flex > .order-2 { order:2; } | |
| .flex > .order-3 { order:3; } | |
| .flex > .order-4 { order:4; } | |
| /* smartphone */ | |
| @media only screen and (max-width : 667px) | |
| { | |
| .row { position:relative; clear:both; margin:0 auto; width:100%; padding:0; } | |
| .column { float:none; } | |
| .grid { margin:0 20px; position:relative; } | |
| .grid.w1,.grid.w2,.grid.w3,.grid.w4,.grid.w5,.grid.w6,.grid.w7,.grid.w8,.grid.w9,.grid.w10,.grid.w11,.grid.w12 { width:100%; margin: 0; max-width: 100%; padding: 0 10px; } | |
| .grid.w1.nomargin,.grid.w2.nomargin,.grid.w3.nomargin,.grid.w4.nomargin,.grid.w5.nomargin,.grid.w6.nomargin,.grid.w7.nomargin,.grid.w8.nomargin,.grid.w9.nomargin,.grid.w10.nomargin,.grid.w11.nomargin,.grid.w12.nomargin { width:100%; margin: 0; max-width: 100%; padding-left:0; padding-right:0; } | |
| .grid.s1,.grid.s2,.grid.s3,.grid.s4,.grid.s5,.grid.s6,.grid.s7,.grid.s8,.grid.s9,.grid.s10,.grid.s11,.grid.s12 { float:left; } | |
| .grid.s1 { width:8.33%; } | |
| .grid.s2 { width:16.66%; } | |
| .grid.s3 { width:25%; } | |
| .grid.s4 { width:33.33%; } | |
| .grid.s5 { width:41.66%; } | |
| .grid.s6 { width:50%; } | |
| .grid.s7 { width:58.33%; } | |
| .grid.s8 { width:66.66%; } | |
| .grid.s9 { width:75%; } | |
| .grid.s10 { width:83.33%; } | |
| .grid.s11 { width:91.66%; } | |
| .grid.s12 { width:100%; } | |
| .grid.s1.nomargin,.grid.s2.nomargin,.grid.s3.nomargin,.grid.s4.nomargin,.grid.s5.nomargin,.grid.s6.nomargin,.grid.s7.nomargin,.grid.s8.nomargin,.grid.s9.nomargin,.grid.s10.nomargin,.grid.s11.nomargin,.grid.s12.nomargin { padding:0; } | |
| .grid.o1,.grid.o2,.grid.o3,.grid.o4,.grid.o5,.grid.o6,.grid.o7,.grid.o8,.grid.o9,.grid.o10,.grid.o11{ margin:0; } | |
| h1 + h2, h1:first-child, h2 + h3, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child { margin-top:20px; } | |
| .margin-top-0, .s-margin-top-0 { margin-top:0; } | |
| .margin-top-15, .s-margin-top-15 { margin-top:7px; } | |
| .margin-top-30, .s-margin-top-30 { margin-top:15px; } | |
| .margin-top-60, .s-margin-top-60 { margin-top:30px; } | |
| .margin-top-90, .s-margin-top-90 { margin-top:45px; } | |
| .margin-top-120, .s-margin-top-120 { margin-top:60px; } | |
| .margin-bottom-0, .s-margin-bottom-0 { margin-bottom:0; } | |
| .margin-bottom-15, .s-margin-bottom-15 { margin-bottom:7px; } | |
| .margin-bottom-30, .s-margin-bottom-30 { margin-bottom:15px; } | |
| .margin-bottom-60, .s-margin-bottom-60 { margin-bottom:30px; } | |
| .margin-bottom-90, .s-margin-bottom-90 { margin-bottom:45px; } | |
| .margin-bottom-120, .s-margin-bottom-120 { margin-bottom:60px; } | |
| .flex.s-vertical-top { align-items:flex-start; } | |
| .flex.s-vertical-center { align-items:center; } | |
| .flex.s-vertical-bottom { align-items:flex-end; } | |
| .flex > .s-order-1 { order:1; } | |
| .flex > .s-order-2 { order:2; } | |
| .flex > .s-order-3 { order:3; } | |
| .flex > .s-order-4 { order:4; } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment