/* Description: Tables Framework Author: Insidelabdev Version: 1.0 */ /* -------------------------------------------------- :: GRID CONTAINER -------------------------------------------------- */ .grid-holder { position:relative; display:block; width:100%; margin:0; padding:0; font-size:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .grid-holder:after { content:""; display:block; height:0; clear:both; visibility:hidden; } /* -------------------------------------------------- :: COLUMNS FLOAT -------------------------------------------------- */ .grid-holder .column { display:inline-block; float:left; } /* ------------------------------------------------------- :: COLUMNS WIDTH IN % ------------------------------------------------------- */ .grid-holder .column.one { width:6.333333333333333%; padding:0 1%; } .grid-holder .column.two { width:14.666666666666667%; padding:0 1%; } .grid-holder .column.three { width:23%; padding:0 1%; } .grid-holder .column.four { width:31.33333333333334%; padding:0 1%; } .grid-holder .column.five { width:39.66666666666667%; padding:0 1%; } .grid-holder .column.six { width:48%; padding:0 1%; } .grid-holder .column.seven { width:56.33333333333334%; padding:0 1%; } .grid-holder .column.eight { width:64.66666666666667%; padding:0 1%; } .grid-holder .column.nine { width:73%; padding:0 1%; } .grid-holder .column.ten { width:81.33333333333334%; padding:0 1%; } .grid-holder .column.eleven { width:89.66666666666667%; padding:0 1%; } .grid-holder .column.twelve { width:98%; padding:0 1%; } /* -------------------------------------------------- :: COLUMNS WIDTH WITH NOSPACED DESKTOP -------------------------------------------------- */ .grid-holder .column.one.nospaced { width:8.333333333333333%; padding:0; } .grid-holder .column.two.nospaced { width:16.66666666666667%; padding:0; } .grid-holder .column.three.nospaced { width:25%; padding:0; } .grid-holder .column.four.nospaced { width:33.33333333333334%; padding:0; } .grid-holder .column.five.nospaced { width:41.66666666666667%; padding:0; } .grid-holder .column.six.nospaced { width:50%; padding:0; } .grid-holder .column.seven.nospaced { width:58.33333333333334%; padding:0; } .grid-holder .column.eight.nospaced { width:66.66666666666667%; padding:0; } .grid-holder .column.nine.nospaced { width:75%; padding:0; } .grid-holder .column.ten.nospaced { width:83.33333333333334%; padding:0; } .grid-holder .column.eleven.nospaced { width:91.66666666666667%; padding:0; } .grid-holder .column.twelve.nospaced { width:100%; padding:0; } /* ------------------------------------------------------- :: COLUMNS OFFSETS DESKTOP ------------------------------------------------------- */ /* .grid-holder .column.offsetone { margin-left:8.333333333333333%; } .grid-holder .column.offsettwo { margin-left:16.666666666666667%; } .grid-holder .column.offsetthree { margin-left:25%; } .grid-holder .column.offsetfour { margin-left:33.33333333333334%; } .grid-holder .column.offsetfive { margin-left:41.66666666666667%; } .grid-holder .column.offsetsix { margin-left:50%; } .grid-holder .column.offsetseven { margin-left:58.33333333333334%; } .grid-holder .column.offseteight { margin-left:66.66666666666667%; } .grid-holder .column.offsetnine { margin-left:75%; } .grid-holder .column.offsetten { margin-left:83.33333333333334%; } .grid-holder .column.offseteleven { margin-left:91.66666666666667%; } .grid-holder .column.offsettwelve { margin-left:100%; } - */ /* -------------------------------------------------- :: GRID COLUMNS 1199PX AND BELOW -------------------------------------------------- */ @media only screen and (min-width:960px) and (max-width:1199px) { .grid-holder .column.one, .grid-holder .column.two, .grid-holder .column.three, .grid-holder .column.four, .grid-holder .column.five, .grid-holder .column.six, .grid-holder .column.seven, .grid-holder .column.eight, .grid-holder .column.nine, .grid-holder .column.ten, .grid-holder .column.eleven, .grid-holder .column.twelve { width:100%; padding:0; } /* -------------------------------------------------- :: COLUMNS WIDTH WITH NOSPACER RESPONSIVE -------------------------------------------------- */ .grid-holder .column.one.nospacer, .grid-holder .column.two.nospacer, .grid-holder .column.three.nospacer, .grid-holder .column.four.nospacer, .grid-holder .column.five.nospacer, .grid-holder .column.six.nospacer, .grid-holder .column.seven.nospacer, .grid-holder .column.eight.nospacer, .grid-holder .column.nine.nospacer, .grid-holder .column.ten.nospacer, .grid-holder .column.eleven.nospacer, .grid-holder .column.twelve.nospacer { width:100%; padding:0; } /* -------------------------------------------------- :: COLUMNS OFFSETS RESPONSIVE -------------------------------------------------- */ .grid-holder .column.offsetone, .grid-holder .column.offsettwo, .grid-holder .column.offsetthree, .grid-holder .column.offsetfour, .grid-holder .column.offsetfive, .grid-holder .column.offsetsix, .grid-holder .column.offsetseven, .grid-holder .column.offseteight, .grid-holder .column.offsetnine, .grid-holder .column.offsetten, .grid-holder .column.offseteleven, .grid-holder .column.offsettwelve { width:100%; margin-left:0; } /* -------------------------------------------------- :: COLUMNS WITH HALF DIVISION COLUMN -------------------------------------------------- */ .grid-holder .column.one.division, .grid-holder .column.two.division, .grid-holder .column.three.division, .grid-holder .column.four.division, .grid-holder .column.five.division, .grid-holder .column.six.division, .grid-holder .column.seven.division, .grid-holder .column.eight.division, .grid-holder .column.nine.division, .grid-holder .column.ten.division, .grid-holder .column.eleven.division, .grid-holder .column.twelve.division { width:48%; padding:0 1%; } .grid-holder .column.one.nospacer.division, .grid-holder .column.two.nospacer.division, .grid-holder .column.three.nospacer.division, .grid-holder .column.four.nospacer.division, .grid-holder .column.five.nospacer.division, .grid-holder .column.six.nospacer.division, .grid-holder .column.seven.nospacer.division, .grid-holder .column.eight.nospacer.division, .grid-holder .column.nine.nospacer.division, .grid-holder .column.ten.nospacer.division, .grid-holder .column.eleven.nospacer.division, .grid-holder .column.twelve.nospacer.division { width:50%; padding:0; } .grid-holder .column.offsetone.division, .grid-holder .column.offsettwo.division, .grid-holder .column.offsetthree.division, .grid-holder .column.offsetfour.division, .grid-holder .column.offsetfive.division, .grid-holder .column.offsetsix.division, .grid-holder .column.offsetseven.division, .grid-holder .column.offseteight.division, .grid-holder .column.offsetnine.division, .grid-holder .column.offsetten.division, .grid-holder .column.offseteleven.division, .grid-holder .column.offsettwelve.division { width:50%; margin-left:0; } } /* -------------------------------------------------- :: GRID COLUMNS 959PX AND BELOW -------------------------------------------------- */ @media only screen and (min-width:768px) and (max-width:959px) { .grid-holder .column.one, .grid-holder .column.two, .grid-holder .column.three, .grid-holder .column.four, .grid-holder .column.five, .grid-holder .column.six, .grid-holder .column.seven, .grid-holder .column.eight, .grid-holder .column.nine, .grid-holder .column.ten, .grid-holder .column.eleven, .grid-holder .column.twelve { width:100%; padding:0; } /* -------------------------------------------------- :: COLUMNS WIDTH WITH NOSPACER RESPONSIVE -------------------------------------------------- */ .grid-holder .column.one.nospacer, .grid-holder .column.two.nospacer, .grid-holder .column.three.nospacer, .grid-holder .column.four.nospacer, .grid-holder .column.five.nospacer, .grid-holder .column.six.nospacer, .grid-holder .column.seven.nospacer, .grid-holder .column.eight.nospacer, .grid-holder .column.nine.nospacer, .grid-holder .column.ten.nospacer, .grid-holder .column.eleven.nospacer, .grid-holder .column.twelve.nospacer { width:100%; padding:0; } /* -------------------------------------------------- :: COLUMNS OFFSETS RESPONSIVE -------------------------------------------------- */ .grid-holder .column.offsetone, .grid-holder .column.offsettwo, .grid-holder .column.offsetthree, .grid-holder .column.offsetfour, .grid-holder .column.offsetfive, .grid-holder .column.offsetsix, .grid-holder .column.offsetseven, .grid-holder .column.offseteight, .grid-holder .column.offsetnine, .grid-holder .column.offsetten, .grid-holder .column.offseteleven, .grid-holder .column.offsettwelve { width:100%; margin-left:0; } /* -------------------------------------------------- :: COLUMNS WITH HALF DIVISION COLUMN -------------------------------------------------- */ .grid-holder .column.one.division, .grid-holder .column.two.division, .grid-holder .column.three.division, .grid-holder .column.four.division, .grid-holder .column.five.division, .grid-holder .column.six.division, .grid-holder .column.seven.division, .grid-holder .column.eight.division, .grid-holder .column.nine.division, .grid-holder .column.ten.division, .grid-holder .column.eleven.division, .grid-holder .column.twelve.division { width:48%; padding:0 1%; } .grid-holder .column.one.nospacer.division, .grid-holder .column.two.nospacer.division, .grid-holder .column.three.nospacer.division, .grid-holder .column.four.nospacer.division, .grid-holder .column.five.nospacer.division, .grid-holder .column.six.nospacer.division, .grid-holder .column.seven.nospacer.division, .grid-holder .column.eight.nospacer.division, .grid-holder .column.nine.nospacer.division, .grid-holder .column.ten.nospacer.division, .grid-holder .column.eleven.nospacer.division, .grid-holder .column.twelve.nospacer.division { width:50%; padding:0; } .grid-holder .column.offsetone.division, .grid-holder .column.offsettwo.division, .grid-holder .column.offsetthree.division, .grid-holder .column.offsetfour.division, .grid-holder .column.offsetfive.division, .grid-holder .column.offsetsix.division, .grid-holder .column.offsetseven.division, .grid-holder .column.offseteight.division, .grid-holder .column.offsetnine.division, .grid-holder .column.offsetten.division, .grid-holder .column.offseteleven.division, .grid-holder .column.offsettwelve.division { width:50%; margin-left:0; } } /* -------------------------------------------------- :: GRID COLUMNS 767PX AND BELOW -------------------------------------------------- */ @media only screen and (min-width:480px) and (max-width:767px) { .grid-holder .column.one, .grid-holder .column.two, .grid-holder .column.three, .grid-holder .column.four, .grid-holder .column.five, .grid-holder .column.six, .grid-holder .column.seven, .grid-holder .column.eight, .grid-holder .column.nine, .grid-holder .column.ten, .grid-holder .column.eleven, .grid-holder .column.twelve { width:100%; padding:0; } /* -------------------------------------------------- :: COLUMNS WIDTH WITH nospacer RESPONSIVE -------------------------------------------------- */ .grid-holder .column.one.nospacer, .grid-holder .column.two.nospacer, .grid-holder .column.three.nospacer, .grid-holder .column.four.nospacer, .grid-holder .column.five.nospacer, .grid-holder .column.six.nospacer, .grid-holder .column.seven.nospacer, .grid-holder .column.eight.nospacer, .grid-holder .column.nine.nospacer, .grid-holder .column.ten.nospacer, .grid-holder .column.eleven.nospacer, .grid-holder .column.twelve.nospacer { width:100%; padding:0; } /* -------------------------------------------------- :: COLUMNS OFFSETS RESPONSIVE -------------------------------------------------- */ .grid-holder .column.offsetone, .grid-holder .column.offsettwo, .grid-holder .column.offsetthree, .grid-holder .column.offsetfour, .grid-holder .column.offsetfive, .grid-holder .column.offsetsix, .grid-holder .column.offsetseven, .grid-holder .column.offseteight, .grid-holder .column.offsetnine, .grid-holder .column.offsetten, .grid-holder .column.offseteleven, .grid-holder .column.offsettwelve { width:100%; margin-left:0; } /* -------------------------------------------------- :: COLUMNS WITH HALF DIVISION COLUMN -------------------------------------------------- */ .grid-holder .column.one.division, .grid-holder .column.two.division, .grid-holder .column.three.division, .grid-holder .column.four.division, .grid-holder .column.five.division, .grid-holder .column.six.division, .grid-holder .column.seven.division, .grid-holder .column.eight.division, .grid-holder .column.nine.division, .grid-holder .column.ten.division, .grid-holder .column.eleven.division, .grid-holder .column.twelve.division { width:100%; padding:0; } .grid-holder .column.one.nospacer.division, .grid-holder .column.two.nospacer.division, .grid-holder .column.three.nospacer.division, .grid-holder .column.four.nospacer.division, .grid-holder .column.five.nospacer.division, .grid-holder .column.six.nospacer.division, .grid-holder .column.seven.nospacer.division, .grid-holder .column.eight.nospacer.division, .grid-holder .column.nine.nospacer.division, .grid-holder .column.ten.nospacer.division, .grid-holder .column.eleven.nospacer.division, .grid-holder .column.twelve.nospacer.division { width:100%; padding:0; } .grid-holder .column.offsetone.division, .grid-holder .column.offsettwo.division, .grid-holder .column.offsetthree.division, .grid-holder .column.offsetfour.division, .grid-holder .column.offsetfive.division, .grid-holder .column.offsetsix.division, .grid-holder .column.offsetseven.division, .grid-holder .column.offseteight.division, .grid-holder .column.offsetnine.division, .grid-holder .column.offsetten.division, .grid-holder .column.offseteleven.division, .grid-holder .column.offsettwelve.division { width:100%; margin-left:0; } } /* -------------------------------------------------- :: GRID COLUMNS 479PX AND BELOW -------------------------------------------------- */ @media only screen and (max-width:479px) { .grid-holder .column.one, .grid-holder .column.two, .grid-holder .column.three, .grid-holder .column.four, .grid-holder .column.five, .grid-holder .column.six, .grid-holder .column.seven, .grid-holder .column.eight, .grid-holder .column.nine, .grid-holder .column.ten, .grid-holder .column.eleven, .grid-holder .column.twelve { width:100%; padding:0; } /* -------------------------------------------------- :: COLUMNS WIDTH WITH nospacer RESPONSIVE -------------------------------------------------- */ .grid-holder .column.one.nospacer, .grid-holder .column.two.nospacer, .grid-holder .column.three.nospacer, .grid-holder .column.four.nospacer, .grid-holder .column.five.nospacer, .grid-holder .column.six.nospacer, .grid-holder .column.seven.nospacer, .grid-holder .column.eight.nospacer, .grid-holder .column.nine.nospacer, .grid-holder .column.ten.nospacer, .grid-holder .column.eleven.nospacer, .grid-holder .column.twelve.nospacer { width:100%; padding:0; } /* -------------------------------------------------- :: COLUMNS OFFSETS RESPONSIVE -------------------------------------------------- */ .grid-holder .column.offsetone, .grid-holder .column.offsettwo, .grid-holder .column.offsetthree, .grid-holder .column.offsetfour, .grid-holder .column.offsetfive, .grid-holder .column.offsetsix, .grid-holder .column.offsetseven, .grid-holder .column.offseteight, .grid-holder .column.offsetnine, .grid-holder .column.offsetten, .grid-holder .column.offseteleven, .grid-holder .column.offsettwelve { width:100%; margin-left:0; } /* -------------------------------------------------- :: COLUMNS WITH HALF DIVISION COLUMN -------------------------------------------------- */ .grid-holder .column.one.division, .grid-holder .column.two.division, .grid-holder .column.three.division, .grid-holder .column.four.division, .grid-holder .column.five.division, .grid-holder .column.six.division, .grid-holder .column.seven.division, .grid-holder .column.eight.division, .grid-holder .column.nine.division, .grid-holder .column.ten.division, .grid-holder .column.eleven.division, .grid-holder .column.twelve.division { width:100%; padding:0; } .grid-holder .column.one.nospacer.division, .grid-holder .column.two.nospacer.division, .grid-holder .column.three.nospacer.division, .grid-holder .column.four.nospacer.division, .grid-holder .column.five.nospacer.division, .grid-holder .column.six.nospacer.division, .grid-holder .column.seven.nospacer.division, .grid-holder .column.eight.nospacer.division, .grid-holder .column.nine.nospacer.division, .grid-holder .column.ten.nospacer.division, .grid-holder .column.eleven.nospacer.division, .grid-holder .column.twelve.nospacer.division { width:100%; padding:0; } .grid-holder .column.offsetone.division, .grid-holder .column.offsettwo.division, .grid-holder .column.offsetthree.division, .grid-holder .column.offsetfour.division, .grid-holder .column.offsetfive.division, .grid-holder .column.offsetsix.division, .grid-holder .column.offsetseven.division, .grid-holder .column.offseteight.division, .grid-holder .column.offsetnine.division, .grid-holder .column.offsetten.division, .grid-holder .column.offseteleven.division, .grid-holder .column.offsettwelve.division { width:100%; margin-left:0; } }