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

63
stylesheets/skeleton.css vendored
View File

@ -27,8 +27,14 @@
.row { margin-bottom: 20px; }
/* Nested Column Classes */
.column.alpha, .columns.alpha { margin-left: 0; }
.column.omega, .columns.omega { margin-right: 0; }
.column .column.alpha,
.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 */
.container .one.column,
@ -48,9 +54,18 @@
.container .fourteen.columns { width: 820px; }
.container .fifteen.columns { width: 880px; }
.container .sixteen.columns { width: 940px; }
.container .one-half.column { width: 460px; }
.container .one-third.column { width: 300px; }
.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 */
.container .offset-by-one { padding-left: 60px; }
@ -80,9 +95,16 @@
.container { width: 768px; }
.container .column,
.container .columns { margin-left: 10px; margin-right: 10px; }
.column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; }
.column.omega, .columns.omega { margin-right: 0; margin-left: 10px; }
.alpha.omega { margin-left: 0; margin-right: 0; }
.column .column.alpha,
.columns .column.alpha,
.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.columns { width: 28px; }
@ -102,8 +124,17 @@
.container .fifteen.columns { width: 700px; }
.container .sixteen.columns { width: 748px; }
.container .one-half.column { width: 364px; }
.container .one-third.column { width: 236px; }
.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 */
.container .offset-by-one { padding-left: 48px; }
@ -152,7 +183,15 @@
.container .fifteen.columns,
.container .sixteen.columns,
.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 */
.container .offset-by-one,
@ -202,7 +241,15 @@
.container .fifteen.columns,
.container .sixteen.columns,
.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; }
}