Two columns for everything

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


Creating Thumbnails Using the CSS Clip Property

Thursday 1 July 2010 by Norbert Laposa

I had an idea of creating a clip image by using CSS, so the CSS clip property looked like the perfect way to achieve that. After some googling I found Joe's article at seifi.org. Joe advocated an entirely functional, but unnecessarily complex solution. 

I came up with a much simpler way. The trick is that you don't need to use the CSS clip property when you want to clip an image. Here is a simple way to clip an image to 300x200px, push 20px top and 30px left:

div.imageWrapper {
width: 300px;
height: 200px;
overflow: hidden;
}
div.imageWrapper img {
margin-top: -20px;
margin-left: -30px;
}

Archive

Categories

Laposa Ltd
58 Howard Street
Belfast BT1 6PJ

info@laposa.co.uk
+44 2890 328 988