BitGoblin/Bones
1
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases Wiki Activity

updated 1200 grid

Browse Source 
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
1 changed files with 91 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
stylesheets/skeleton.css vendored
View File

@ -10,7 +10,8 @@
/* Table of Contents
==================================================
#Base 960 Grid
#Base 1200 Grid
#Tablet 960 Grid (Landscape)
#Tablet (Portrait)
#Mobile (Portrait)
#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 .column,
.container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
@ -50,6 +106,7 @@
.container .sixteen.columns { width: 940px; }
.container .one-third.column { width: 300px; }
.column-1, .column-2 , .column-3 { width: 285px; float: left; }
.container .two-thirds.column { width: 620px; }
/* Offsets */
@ -68,9 +125,12 @@
.container .offset-by-thirteen { padding-left: 780px; }
.container .offset-by-fourteen { padding-left: 840px; }
.container .offset-by-fifteen { padding-left: 900px; }
/*hide desktop*/
.hide-desktop { display: none !important; visibility: hidden; }
}
/* #Tablet (Portrait)
================================================== */
@ -103,6 +163,7 @@
.container .sixteen.columns { width: 748px; }
.container .one-third.column { width: 236px; }
.column-1, .column-2 { width: 100%; float: left; }
.container .two-thirds.column { width: 492px; }
/* Offsets */
@ -121,6 +182,12 @@
.container .offset-by-thirteen { padding-left: 624px; }
.container .offset-by-fourteen { padding-left: 672px; }
.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 .one-third.column,
.container .two-thirds.column { width: 300px; }
.column-1,
.column-2 { width: 92%; float: left; }
/* Offsets */
.container .offset-by-one,
.container .offset-by-two,
@ -170,6 +241,12 @@
.container .offset-by-thirteen,
.container .offset-by-fourteen,
.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 .sixteen.columns,
.container .one-third.column,
.column-1,
.column-2,
.container .two-thirds.column { width: 420px; }
/*hide mobile*/
.hide-mobile { display: none !important; visibility: hidden; }
/*show mobile*/
.show-mobile { display: inherit !important; visibility: visible; }
}