| 1 |
Aberdeen is a fresh design that balances simplicity, soft, neutral background colors, plenty of whitespace and big nice typography.
|
| 2 |
|
| 3 |
List of features
|
| 4 |
|
| 5 |
* Standards-compliant XHTML 1.0 Strict and CSS (No CSS hacks).
|
| 6 |
* Liquid CSS layout (tableless) - the whole layout increases or decreases proportionally as dimensions are specified in ems. Try changing the font size to see this working.
|
| 7 |
* Supports one, two and three columns.
|
| 8 |
* Cross-browser compatible. Works fine in Firefox 2.0 and IE 6.
|
| 9 |
* Cute icons (all GPL or created by myself).
|
| 10 |
* Coded with SEO in mind, the order of the columns are 2dn, 3rd and 1st - usually the 1st is intended for navigation, the other two for content, Google likes that.
|
| 11 |
* Slinding doors tabs for primary links that blend with main content area.
|
| 12 |
|
| 13 |
1. Aberdeen Layout
|
| 14 |
|
| 15 |
If all columns are enabled, the visual layout is divided in four equal columns, with the center one taking twice the width of the sidebars.
|
| 16 |
|
| 17 |
For SEO the order in the HTML is re-arranged by the stylesheet.
|
| 18 |
|
| 19 |
Note the HTML structure - if one column changes its width it affects the other ones.
|
| 20 |
|
| 21 |
|------------------------------#main------------------------------------|
|
| 22 |
|-------------------#content---------------------||----#sidebar_left----|
|
| 23 |
|-----------#center--------||---#sidebar_right---|
|
| 24 |
|
| 25 |
If you want to change the width of the sidebars go to the layout section in the style.css file.
|
| 26 |
|
| 27 |
These are the original dimensions
|
| 28 |
/*****************************************************************/
|
| 29 |
#main {
|
| 30 |
width: 68.5em;
|
| 31 |
...
|
| 32 |
}
|
| 33 |
#sidebar-left {
|
| 34 |
width: 16em;
|
| 35 |
...
|
| 36 |
}
|
| 37 |
#sidebar-right {
|
| 38 |
width: 16em;
|
| 39 |
...
|
| 40 |
}
|
| 41 |
#center {
|
| 42 |
width: 100%; /* if #center is the only column */
|
| 43 |
...
|
| 44 |
}
|
| 45 |
body.sidebar-left #center, body.sidebar-right #center { /* if #center shares full width with one other column */
|
| 46 |
width: 51em;
|
| 47 |
}
|
| 48 |
body.sidebars #center { /* if #center, #sidebar-left and #sidebar-right are all present */
|
| 49 |
width: 33.4em;
|
| 50 |
}
|
| 51 |
body.sidebars #content {
|
| 52 |
width: 51em;
|
| 53 |
}
|
| 54 |
/*****************************************************************/
|
| 55 |
|
| 56 |
|
| 57 |
If we want sidebar_left and sidebar_right to be 12ems instead of 16em then
|
| 58 |
|
| 59 |
/*****************************************************************/
|
| 60 |
#main {
|
| 61 |
width: 68.5em;
|
| 62 |
.../* more styles here */
|
| 63 |
}
|
| 64 |
#sidebar-left {
|
| 65 |
width: 12em;
|
| 66 |
...
|
| 67 |
}
|
| 68 |
#sidebar-right {
|
| 69 |
width: 12em;
|
| 70 |
...
|
| 71 |
}
|
| 72 |
#center {
|
| 73 |
width: 100%;
|
| 74 |
...
|
| 75 |
}
|
| 76 |
body.sidebar-left #center, body.sidebar-right #center {
|
| 77 |
width: 55em; /* 51em + 4em gained from the sidebar present */
|
| 78 |
}
|
| 79 |
body.sidebars #center {
|
| 80 |
width: 41.4em; /*33.4em + 4em gained from sidebar_left + 4em gained from sidebar_right*/
|
| 81 |
}
|
| 82 |
body.sidebars #content {
|
| 83 |
width: 55em; /*51em + 4em gained from sidebar_right*/
|
| 84 |
}
|
| 85 |
/*****************************************************************/
|
Parent Directory
| 
Revision Log
| 
Revision Graph