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

Changing base from 960 to 1200, and adding appropriate media queries to 960 classes.

Browse Source
This commit is contained in:
Nicholas Whittier 2011-12-01 20:55:21 -05:00
parent 2dfa28cea9
commit ce543821eb
1 changed files with 93 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
stylesheets/skeleton.css vendored
View File

@ -10,7 +10,8 @@
/* Table of Contents /* Table of Contents
================================================== ==================================================
#Base 960 Grid #Base 1200 Grid
#960 Grid
#Tablet (Portrait) #Tablet (Portrait)
#Mobile (Portrait) #Mobile (Portrait)
#Mobile (Landscape) #Mobile (Landscape)
@ -18,9 +19,63 @@
/* #Base 960 Grid /* #Base 1200 Grid
================================================== */ ================================================== */
.container { position: relative; width: 1200px; margin: 0 auto; padding: 0; }
.column, .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 { 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; }
.container .two-thirds.column { width: 400px; }
/* 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; }
/* #960 Grid
================================================== */
/* Note: Design for a width of 960px */
@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; }
.column, .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; } .column, .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
.row { margin-bottom: 20px; } .row { margin-bottom: 20px; }
@ -66,7 +121,7 @@
.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; }
}
/* #Tablet (Portrait) /* #Tablet (Portrait)