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

Replaced Offsets with Push & Pulls

Browse Source 
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.
This commit is contained in:
bfintal
2013-01-17 14:20:42 +08:00
parent 7ab682091d
commit d24d572cec
1 changed files with 98 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
stylesheets/skeleton.css vendored
View File

@@ -25,6 +25,8 @@
.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; }
.row { margin-bottom: 20px; } .row { margin-bottom: 20px; }
.container .pull,
.container .push { position: relative; }
/* Nested Column Classes */ /* Nested Column Classes */
.column.alpha, .columns.alpha { margin-left: 0; } .column.alpha, .columns.alpha { margin-left: 0; }
@@ -51,23 +53,39 @@
.container .one-third.column { width: 300px; } .container .one-third.column { width: 300px; }
.container .two-thirds.column { width: 620px; } .container .two-thirds.column { width: 620px; }
/* Offsets */ /* Pushes & Pulls */
.container .offset-by-one { padding-left: 60px; } .container .pull.by-one { left: -50px }
.container .offset-by-two { padding-left: 120px; } .container .pull.by-two { left: -110px; }
.container .offset-by-three { padding-left: 180px; } .container .pull.by-three { left: -170px; }
.container .offset-by-four { padding-left: 240px; } .container .pull.by-four { left: -230px; }
.container .offset-by-five { padding-left: 300px; } .container .pull.by-five { left: -290px; }
.container .offset-by-six { padding-left: 360px; } .container .pull.by-six { left: -350px; }
.container .offset-by-seven { padding-left: 420px; } .container .pull.by-seven { left: -410px; }
.container .offset-by-eight { padding-left: 480px; } .container .pull.by-eight { left: -470px; }
.container .offset-by-nine { padding-left: 540px; } .container .pull.by-nine { left: -530px; }
.container .offset-by-ten { padding-left: 600px; } .container .pull.by-ten { left: -590px; }
.container .offset-by-eleven { padding-left: 660px; } .container .pull.by-eleven { left: -650px; }
.container .offset-by-twelve { padding-left: 720px; } .container .pull.by-twelve { left: -710px; }
.container .offset-by-thirteen { padding-left: 780px; } .container .pull.by-thirteen { left: -770px; }
.container .offset-by-fourteen { padding-left: 840px; } .container .pull.by-fourteen { left: -830px; }
.container .offset-by-fifteen { padding-left: 900px; } .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 .one-third.column { width: 236px; }
.container .two-thirds.column { width: 492px; } .container .two-thirds.column { width: 492px; }
/* Offsets */ /* Pushes & Pulls */
.container .offset-by-one { padding-left: 48px; } .container .pull.by-one { left: -38px }
.container .offset-by-two { padding-left: 96px; } .container .pull.by-two { left: -86px; }
.container .offset-by-three { padding-left: 144px; } .container .pull.by-three { left: -134px; }
.container .offset-by-four { padding-left: 192px; } .container .pull.by-four { left: -182px; }
.container .offset-by-five { padding-left: 240px; } .container .pull.by-five { left: -230px; }
.container .offset-by-six { padding-left: 288px; } .container .pull.by-six { left: -278px; }
.container .offset-by-seven { padding-left: 336px; } .container .pull.by-seven { left: -326px; }
.container .offset-by-eight { padding-left: 384px; } .container .pull.by-eight { left: -374px; }
.container .offset-by-nine { padding-left: 432px; } .container .pull.by-nine { left: -422px; }
.container .offset-by-ten { padding-left: 480px; } .container .pull.by-ten { left: -470px; }
.container .offset-by-eleven { padding-left: 528px; } .container .pull.by-eleven { left: -518px; }
.container .offset-by-twelve { padding-left: 576px; } .container .pull.by-twelve { left: -566px; }
.container .offset-by-thirteen { padding-left: 624px; } .container .pull.by-thirteen { left: -614px; }
.container .offset-by-fourteen { padding-left: 672px; } .container .pull.by-fourteen { left: -662px; }
.container .offset-by-fifteen { padding-left: 720px; } .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 .one-third.column,
.container .two-thirds.column { width: 300px; } .container .two-thirds.column { width: 300px; }
/* Offsets */ /* Pushes & Pulls */
.container .offset-by-one, .container .pull.by-one,
.container .offset-by-two, .container .pull.by-two,
.container .offset-by-three, .container .pull.by-three,
.container .offset-by-four, .container .pull.by-four,
.container .offset-by-five, .container .pull.by-five,
.container .offset-by-six, .container .pull.by-six,
.container .offset-by-seven, .container .pull.by-seven,
.container .offset-by-eight, .container .pull.by-eight,
.container .offset-by-nine, .container .pull.by-nine,
.container .offset-by-ten, .container .pull.by-ten,
.container .offset-by-eleven, .container .pull.by-eleven,
.container .offset-by-twelve, .container .pull.by-twelve,
.container .offset-by-thirteen, .container .pull.by-thirteen,
.container .offset-by-fourteen, .container .pull.by-fourteen,
.container .offset-by-fifteen { padding-left: 0; } .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; }
} }