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
parent
7ab682091d
commit
6130761567
97
stylesheets/skeleton.css
vendored
97
stylesheets/skeleton.css
vendored
@ -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; }
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user