Basket
Your basket is empty.
Posted on Wednesday 21 July 2010 by Norbert Laposa
This article will describe how to build any layout from a combination of two columns.
Building layout in web design is considered to be the hardest thing. The most popular method at the moment seems to be the grid layout. It's not really natural. In my opinion it's something like using a bitmap graphic when you should be using a vector graphic.
To understand this article you do not need to have any knowledge of HTML, CSS, or any Adobe products. You only need to switch off everything you know about web design and try to look at it as normal human being. Tons of material has been written about how to create 2 or 3 column layout for your website, like the "holy grail" articles or grid design.
The key thing is to use nested sets of two column layouts, i.e. Fibonacci number based set below. Insert the same code into [CONTAINER.1] or [CONTAINER.2] recursively and it does the trick.
<div class="twoColumnLayout {NODE.css_class}"> <div class="layoutWrapper"> <div class="top"><span></span></div> <div class="layoutContent"> <div class="layoutContentWrapper"> <h2 class="layoutTitle">{NODE.title|htmlspecialchars}</h2> <div class="layoutColumnOne"> <div class="layoutColumnWrapper"> [CONTAINER.1] </div> </div> <div class="layoutColumnTwo"> <div class="layoutColumnWrapper"> [CONTAINER.2] </div> </div> </div> </div> <div class="bottom"><span></span></div> </div></div>
Fibonacci number based layouts
| Class | Name | layoutColumnOne | layoutColumnTwo |
| fibonacci-1-5 | Fibonacci 1/5 ratio | 16.6% | 83.3% |
| fibonacci-1-3 | Fibonacci 1/3 ratio | 25% | 75% |
| fibonacci-2-5 | Fibonacci 2/5 ratio | 28.6% | 71.4% |
| fibonacci-1-2 | Fibonacci 1/2 ratio | 33% | 66% |
| fibonacci-3-5 | Fibonacci 3/5 ratio | 38.2% | 61.8% rounded to Golden Ratio * |
| fibonacci-1-1 | Fibonacci 1/1 ratio | 50% | 50% |
| fibonacci-5-3 | Fibonacci 5/3 ratio | 61.8% | 38.2% rounded to Golden Ratio ** |
| fibonacci-2-1 | Fibonacci 2/1 ratio | 66% | 33% |
| fibonacci-5-2 | Fibonacci 5/2 ratio | 71.4% | 28.6% |
| fibonacci-3-1 | Fibonacci 3/1 ratio | 75% | 25% |
| fibonacci-5-1 | Fibonacci 5/1 ratio | 83.3% | 16.6% |
Examples how to build different 1, 2, 3, 4, 5 and more columns layouts using just Fibonacci 2 columns are on Onxshop documentation page.
* The ratio of consecutive numbers in the Fibonacci is close to 1.618, the Golden Ratio - convergence of Fibonacci number in infinity. Fibonacci number for 3:5 would be 1:1.666, Golden Ration is 1:1.618
** 1.666:1, convergence to golden ratio, 61.8/38.2 (Golden ratio 1.618:1), convergence of Fibonacci number
© 2024 Laposa UK