updated 1200 grid

I've tested it already and works fine.
Added more classes:
.hide-desktop
.hide-tablet
.hide-mobile
.show-tablet
.show-mobile
This commit is contained in:
qadamo 2014-08-14 23:49:25 +02:00
parent 7ab682091d
commit 6130761567

View File

@ -10,7 +10,8 @@
/* Table of Contents /* Table of Contents
================================================== ==================================================
#Base 960 Grid #Base 1200 Grid
#Tablet 960 Grid (Landscape)
#Tablet (Portrait) #Tablet (Portrait)
#Mobile (Portrait) #Mobile (Portrait)
#Mobile (Landscape) #Mobile (Landscape)
@ -18,9 +19,64 @@
/* #Base 960 Grid /* #Base 1200 Grid
================================================== */ ================================================== */
.container { position: relative; width: 1200px; margin: 0 auto; padding: 0; }
.container .column,
.container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
.row { margin-bottom: 20px; }
/* Nested Column Classes */
.column.alpha, .columns.alpha { margin-left: 0; }
.column.omega, .columns.omega { margin-right: 0; }
/* Base Grid */
.container .one.column,
.container .one.columns { width: 55px; }
.container .two.columns { width: 130px; }
.container .three.columns { width: 205px; }
.container .four.columns { width: 280px; }
.container .five.columns { width: 355px; }
.container .six.columns { width: 430px; }
.container .seven.columns { width: 505px; }
.container .eight.columns { width: 580px; }
.container .nine.columns { width: 655px; }
.container .ten.columns { width: 730px; }
.container .eleven.columns { width: 805px; }
.container .twelve.columns { width: 880px; }
.container .thirteen.columns { width: 955px; }
.container .fourteen.columns { width: 1030px; }
.container .fifteen.columns { width: 1105px; }
.container .sixteen.columns { width: 1180px; }
.container .one-third.column { width: 380px; }
.column-1, .column-2 { width: 285px; float: left; }
.container .two-thirds.column { width: 780px; }
/* Offsets */
.container .offset-by-one { padding-left: 75px; }
.container .offset-by-two { padding-left: 150px; }
.container .offset-by-three { padding-left: 225px; }
.container .offset-by-four { padding-left: 300px; }
.container .offset-by-five { padding-left: 375px; }
.container .offset-by-six { padding-left: 450px; }
.container .offset-by-seven { padding-left: 525px; }
.container .offset-by-eight { padding-left: 600px; }
.container .offset-by-nine { padding-left: 675px; }
.container .offset-by-ten { padding-left: 750px; }
.container .offset-by-eleven { padding-left: 825px; }
.container .offset-by-twelve { padding-left: 900px; }
.container .offset-by-thirteen { padding-left: 975px; }
.container .offset-by-fourteen { padding-left: 1050px; }
.container .offset-by-fifteen { padding-left: 1125px; }
/*hide desktop*/
.hide-desktop { display: none !important; visibility: hidden; }
/* #Tablet landscape 960
================================================== */
@media only screen and (min-width: 960px) and (max-width: 1199px){
.container { position: relative; width: 960px; margin: 0 auto; padding: 0; } .container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
.container .column, .container .column,
.container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; } .container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
@ -50,6 +106,7 @@
.container .sixteen.columns { width: 940px; } .container .sixteen.columns { width: 940px; }
.container .one-third.column { width: 300px; } .container .one-third.column { width: 300px; }
.column-1, .column-2 , .column-3 { width: 285px; float: left; }
.container .two-thirds.column { width: 620px; } .container .two-thirds.column { width: 620px; }
/* Offsets */ /* Offsets */
@ -68,9 +125,12 @@
.container .offset-by-thirteen { padding-left: 780px; } .container .offset-by-thirteen { padding-left: 780px; }
.container .offset-by-fourteen { padding-left: 840px; } .container .offset-by-fourteen { padding-left: 840px; }
.container .offset-by-fifteen { padding-left: 900px; } .container .offset-by-fifteen { padding-left: 900px; }
/*hide desktop*/
.hide-desktop { display: none !important; visibility: hidden; }
}
/* #Tablet (Portrait) /* #Tablet (Portrait)
================================================== */ ================================================== */
@ -103,6 +163,7 @@
.container .sixteen.columns { width: 748px; } .container .sixteen.columns { width: 748px; }
.container .one-third.column { width: 236px; } .container .one-third.column { width: 236px; }
.column-1, .column-2 { width: 100%; float: left; }
.container .two-thirds.column { width: 492px; } .container .two-thirds.column { width: 492px; }
/* Offsets */ /* Offsets */
@ -121,6 +182,12 @@
.container .offset-by-thirteen { padding-left: 624px; } .container .offset-by-thirteen { padding-left: 624px; }
.container .offset-by-fourteen { padding-left: 672px; } .container .offset-by-fourteen { padding-left: 672px; }
.container .offset-by-fifteen { padding-left: 720px; } .container .offset-by-fifteen { padding-left: 720px; }
/*hide tablet*/
.hide-tablet { display: none !important; visibility: hidden; }
/*show tablet*/
.show-tablet { display: inherit !important; visibility: visible; }
} }
@ -153,7 +220,11 @@
.container .sixteen.columns, .container .sixteen.columns,
.container .one-third.column, .container .one-third.column,
.container .two-thirds.column { width: 300px; } .container .two-thirds.column { width: 300px; }
.column-1,
.column-2 { width: 92%; float: left; }
/* Offsets */ /* Offsets */
.container .offset-by-one, .container .offset-by-one,
.container .offset-by-two, .container .offset-by-two,
@ -170,6 +241,12 @@
.container .offset-by-thirteen, .container .offset-by-thirteen,
.container .offset-by-fourteen, .container .offset-by-fourteen,
.container .offset-by-fifteen { padding-left: 0; } .container .offset-by-fifteen { padding-left: 0; }
/*hide mobile*/
.hide-mobile { display: none !important; visibility: hidden; }
/*show mobile*/
.show-mobile { display: inherit !important; visibility: visible; }
} }
@ -202,7 +279,15 @@
.container .fifteen.columns, .container .fifteen.columns,
.container .sixteen.columns, .container .sixteen.columns,
.container .one-third.column, .container .one-third.column,
.column-1,
.column-2,
.container .two-thirds.column { width: 420px; } .container .two-thirds.column { width: 420px; }
/*hide mobile*/
.hide-mobile { display: none !important; visibility: hidden; }
/*show mobile*/
.show-mobile { display: inherit !important; visibility: visible; }
} }