From 61307615671e7de8bc4d57bf456d652f179f5a2e Mon Sep 17 00:00:00 2001 From: qadamo Date: Thu, 14 Aug 2014 23:49:25 +0200 Subject: [PATCH] updated 1200 grid I've tested it already and works fine. Added more classes: .hide-desktop .hide-tablet .hide-mobile .show-tablet .show-mobile --- stylesheets/skeleton.css | 97 +++++++++++++++++++++++++++++++++++++--- 1 file changed, 91 insertions(+), 6 deletions(-) diff --git a/stylesheets/skeleton.css b/stylesheets/skeleton.css index 5db3d38..ade223b 100644 --- a/stylesheets/skeleton.css +++ b/stylesheets/skeleton.css @@ -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; } + }