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

Added other nested column widths

Browse Source 
Aside from one-third and two-thirds, I added: one-half, one-fourth and
three-fourths. As well as widths for when these all are nested inside a
twelve.columns div. Very helpful when having a sidebar with
four.columns (sidebar div + content div = sixteen columns)
This commit is contained in:
bfintal 2013-01-17 14:27:26 +08:00
parent 7ab682091d
commit c9c73708d5
1 changed files with 55 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
stylesheets/skeleton.css vendored
View File

@ -27,8 +27,14 @@
.row { margin-bottom: 20px; } .row { margin-bottom: 20px; }
/* Nested Column Classes */ /* Nested Column Classes */
.column.alpha, .columns.alpha { margin-left: 0; } .column .column.alpha,
.column.omega, .columns.omega { margin-right: 0; } .columns .column.alpha,
.column .columns.alpha,
.columns .columns.alpha { margin-left: 0; }
.column .column.omega,
.columns .column.omega,
.column .columns.omega,
.columns .columns.omega { margin-right: 0; }
/* Base Grid */ /* Base Grid */
.container .one.column, .container .one.column,
@ -49,8 +55,17 @@
.container .fifteen.columns { width: 880px; } .container .fifteen.columns { width: 880px; }
.container .sixteen.columns { width: 940px; } .container .sixteen.columns { width: 940px; }
.container .one-half.column { width: 460px; }
.container .one-third.column { width: 300px; } .container .one-third.column { width: 300px; }
.container .two-thirds.column { width: 620px; } .container .two-thirds.column { width: 620px; }
.container .one-fourth.column { width: 220px; }
.container .three-fourths.column { width: 700px; }
.container .twelve.columns .one-half.column { width: 340px; }
.container .twelve.columns .one-third.column { width: 220px; }
.container .twelve.columns .two-thirds.column { width: 460px; }
.container .twelve.columns .one-fourth.column { width: 160px; }
.container .twelve.columns .three-fourths.column { width: 520px; }
/* Offsets */ /* Offsets */
.container .offset-by-one { padding-left: 60px; } .container .offset-by-one { padding-left: 60px; }
@ -80,9 +95,16 @@
.container { width: 768px; } .container { width: 768px; }
.container .column, .container .column,
.container .columns { margin-left: 10px; margin-right: 10px; } .container .columns { margin-left: 10px; margin-right: 10px; }
.column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; } .column .column.alpha,
.column.omega, .columns.omega { margin-right: 0; margin-left: 10px; } .columns .column.alpha,
.alpha.omega { margin-left: 0; margin-right: 0; } .column .columns.alpha,
.columns .columns.alpha { margin-left: 0; margin-right: 10px; }
.column .column.omega,
.columns .column.omega,
.column .columns.omega,
.columns .columns.omega { margin-right: 0; margin-left: 10px; }
.column .alpha.omega,
.columns .alpha.omega { margin-left: 0; margin-right: 0; }
.container .one.column, .container .one.column,
.container .one.columns { width: 28px; } .container .one.columns { width: 28px; }
@ -102,8 +124,17 @@
.container .fifteen.columns { width: 700px; } .container .fifteen.columns { width: 700px; }
.container .sixteen.columns { width: 748px; } .container .sixteen.columns { width: 748px; }
.container .one-half.column { width: 364px; }
.container .one-third.column { width: 236px; } .container .one-third.column { width: 236px; }
.container .two-thirds.column { width: 492px; } .container .two-thirds.column { width: 492px; }
.container .one-fourth.column { width: 172px; }
.container .three-fourths.column { width: 556px; }
.container .twelve.columns .one-half.column { width: 268px; }
.container .twelve.columns .one-third.column { width: 172px; }
.container .twelve.columns .two-thirds.column { width: 364px; }
.container .twelve.columns .one-fourth.column { width: 124px; }
.container .twelve.columns .three-fourths.column { width: 412px; }
/* Offsets */ /* Offsets */
.container .offset-by-one { padding-left: 48px; } .container .offset-by-one { padding-left: 48px; }
@ -152,7 +183,15 @@
.container .fifteen.columns, .container .fifteen.columns,
.container .sixteen.columns, .container .sixteen.columns,
.container .one-third.column, .container .one-third.column,
.container .two-thirds.column { width: 300px; } .container .two-thirds.column,
.container .one-half.column,
.container .one-fourth.column,
.container .three-fourths.column,
.container .twelve.columns .one-third.column,
.container .twelve.columns .two-thirds.column,
.container .twelve.columns .one-half.column,
.container .twelve.columns .one-fourth.column,
.container .twelve.columns .three-fourths.column { width: 300px; }
/* Offsets */ /* Offsets */
.container .offset-by-one, .container .offset-by-one,
@ -202,7 +241,15 @@
.container .fifteen.columns, .container .fifteen.columns,
.container .sixteen.columns, .container .sixteen.columns,
.container .one-third.column, .container .one-third.column,
.container .two-thirds.column { width: 420px; } .container .two-thirds.column,
.container .one-half.column,
.container .one-fourth.column,
.container .three-fourths.column,
.container .twelve.columns .one-third.column,
.container .twelve.columns .two-thirds.column,
.container .twelve.columns .one-half.column,
.container .twelve.columns .one-fourth.column,
.container .twelve.columns .three-fourths.column { width: 420px; }
} }