From d24d572ceca09a17ee20cafee524f720b7d888e6 Mon Sep 17 00:00:00 2001 From: bfintal Date: Thu, 17 Jan 2013 14:20:42 +0800 Subject: [PATCH] Replaced Offsets with Push & Pulls can't really use the original offsets for content placement. Changed to pushes and pulls instead. For small screens, the pushed and pulled content just revert back to normal columns. --- stylesheets/skeleton.css | 147 ++++++++++++++++++++++++++------------- 1 file changed, 98 insertions(+), 49 deletions(-) diff --git a/stylesheets/skeleton.css b/stylesheets/skeleton.css index 5db3d38..275ea95 100644 --- a/stylesheets/skeleton.css +++ b/stylesheets/skeleton.css @@ -25,6 +25,8 @@ .container .column, .container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; } .row { margin-bottom: 20px; } + .container .pull, + .container .push { position: relative; } /* Nested Column Classes */ .column.alpha, .columns.alpha { margin-left: 0; } @@ -51,23 +53,39 @@ .container .one-third.column { width: 300px; } .container .two-thirds.column { width: 620px; } - - /* Offsets */ - .container .offset-by-one { padding-left: 60px; } - .container .offset-by-two { padding-left: 120px; } - .container .offset-by-three { padding-left: 180px; } - .container .offset-by-four { padding-left: 240px; } - .container .offset-by-five { padding-left: 300px; } - .container .offset-by-six { padding-left: 360px; } - .container .offset-by-seven { padding-left: 420px; } - .container .offset-by-eight { padding-left: 480px; } - .container .offset-by-nine { padding-left: 540px; } - .container .offset-by-ten { padding-left: 600px; } - .container .offset-by-eleven { padding-left: 660px; } - .container .offset-by-twelve { padding-left: 720px; } - .container .offset-by-thirteen { padding-left: 780px; } - .container .offset-by-fourteen { padding-left: 840px; } - .container .offset-by-fifteen { padding-left: 900px; } + + /* Pushes & Pulls */ + .container .pull.by-one { left: -50px } + .container .pull.by-two { left: -110px; } + .container .pull.by-three { left: -170px; } + .container .pull.by-four { left: -230px; } + .container .pull.by-five { left: -290px; } + .container .pull.by-six { left: -350px; } + .container .pull.by-seven { left: -410px; } + .container .pull.by-eight { left: -470px; } + .container .pull.by-nine { left: -530px; } + .container .pull.by-ten { left: -590px; } + .container .pull.by-eleven { left: -650px; } + .container .pull.by-twelve { left: -710px; } + .container .pull.by-thirteen { left: -770px; } + .container .pull.by-fourteen { left: -830px; } + .container .pull.by-fifteen { left: -890px; } + + .container .push.by-one { left: 50px } + .container .push.by-two { left: 110px; } + .container .push.by-three { left: 170px; } + .container .push.by-four { left: 230px; } + .container .push.by-five { left: 290px; } + .container .push.by-six { left: 350px; } + .container .push.by-seven { left: 410px; } + .container .push.by-eight { left: 470px; } + .container .push.by-nine { left: 530px; } + .container .push.by-ten { left: 590px; } + .container .push.by-eleven { left: 650px; } + .container .push.by-twelve { left: 710px; } + .container .push.by-thirteen { left: 770px; } + .container .push.by-fourteen { left: 830px; } + .container .push.by-fifteen { left: 890px; } @@ -105,22 +123,38 @@ .container .one-third.column { width: 236px; } .container .two-thirds.column { width: 492px; } - /* Offsets */ - .container .offset-by-one { padding-left: 48px; } - .container .offset-by-two { padding-left: 96px; } - .container .offset-by-three { padding-left: 144px; } - .container .offset-by-four { padding-left: 192px; } - .container .offset-by-five { padding-left: 240px; } - .container .offset-by-six { padding-left: 288px; } - .container .offset-by-seven { padding-left: 336px; } - .container .offset-by-eight { padding-left: 384px; } - .container .offset-by-nine { padding-left: 432px; } - .container .offset-by-ten { padding-left: 480px; } - .container .offset-by-eleven { padding-left: 528px; } - .container .offset-by-twelve { padding-left: 576px; } - .container .offset-by-thirteen { padding-left: 624px; } - .container .offset-by-fourteen { padding-left: 672px; } - .container .offset-by-fifteen { padding-left: 720px; } + /* Pushes & Pulls */ + .container .pull.by-one { left: -38px } + .container .pull.by-two { left: -86px; } + .container .pull.by-three { left: -134px; } + .container .pull.by-four { left: -182px; } + .container .pull.by-five { left: -230px; } + .container .pull.by-six { left: -278px; } + .container .pull.by-seven { left: -326px; } + .container .pull.by-eight { left: -374px; } + .container .pull.by-nine { left: -422px; } + .container .pull.by-ten { left: -470px; } + .container .pull.by-eleven { left: -518px; } + .container .pull.by-twelve { left: -566px; } + .container .pull.by-thirteen { left: -614px; } + .container .pull.by-fourteen { left: -662px; } + .container .pull.by-fifteen { left: -710px; } + + .container .push.by-one { left: 38px } + .container .push.by-two { left: 86px; } + .container .push.by-three { left: 134px; } + .container .push.by-four { left: 182px; } + .container .push.by-five { left: 230px; } + .container .push.by-six { left: 278px; } + .container .push.by-seven { left: 326px; } + .container .push.by-eight { left: 374px; } + .container .push.by-nine { left: 422px; } + .container .push.by-ten { left: 470px; } + .container .push.by-eleven { left: 518px; } + .container .push.by-twelve { left: 566px; } + .container .push.by-thirteen { left: 614px; } + .container .push.by-fourteen { left: 662px; } + .container .push.by-fifteen { left: 710px; } } @@ -154,22 +188,37 @@ .container .one-third.column, .container .two-thirds.column { width: 300px; } - /* Offsets */ - .container .offset-by-one, - .container .offset-by-two, - .container .offset-by-three, - .container .offset-by-four, - .container .offset-by-five, - .container .offset-by-six, - .container .offset-by-seven, - .container .offset-by-eight, - .container .offset-by-nine, - .container .offset-by-ten, - .container .offset-by-eleven, - .container .offset-by-twelve, - .container .offset-by-thirteen, - .container .offset-by-fourteen, - .container .offset-by-fifteen { padding-left: 0; } + /* Pushes & Pulls */ + .container .pull.by-one, + .container .pull.by-two, + .container .pull.by-three, + .container .pull.by-four, + .container .pull.by-five, + .container .pull.by-six, + .container .pull.by-seven, + .container .pull.by-eight, + .container .pull.by-nine, + .container .pull.by-ten, + .container .pull.by-eleven, + .container .pull.by-twelve, + .container .pull.by-thirteen, + .container .pull.by-fourteen, + .container .pull.by-fifteen, + .container .push.by-one, + .container .push.by-two, + .container .push.by-three, + .container .push.by-four, + .container .push.by-five, + .container .push.by-six, + .container .push.by-seven, + .container .push.by-eight, + .container .push.by-nine, + .container .push.by-ten, + .container .push.by-eleven, + .container .push.by-twelve, + .container .push.by-thirteen, + .container .push.by-fourteen, + .container .push.by-fifteen { left: 0; } }