So what does elastic can do if no elastic.js?

Posted on September 11, 2010 by Fernando Trasviña

Categories: CSS • Challenges • Elastic • Tutorials

Today I was reading about css layouts and found an old post on stackoverflow,they discussed about a 4 column based layout with a small tweek on it.
The main thing with this layout is that it requires nesting to be accomplished, so using elastic was of course my first option, but then i found this link where they present the same 4 column based layout.The main problem presented in that page is that the author does not like css frameworks, and he does not want to use tables either.

Ok, the tables thing i don’t have any complain, don’t use them to layout your pages use them do display tabular data. But no css frameworks, why people keeps being afraid of them, maybe we are not providing them with the right tools, or maybe they really don’t like them. maybe its pride that they don’t want to use someone else css code, either way i kinda disliked it a little, and went to check if i could do it myself, ok here are the steps.

so if you are lazy and didn’t go into the link here is the image of the layout on subject.

image of a 4 column based layout

If i could use elastic for this i would endup using the following code. and exactly the following code, assuming the framework is included, so no extra css nothing.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
        <title>Layout</title>
        <link rel=”stylesheet” href=”elastic.css” type=”text/css” media=”screen”>
        <style type=”text/css” media=”screen”>
            body{
                width  : 960px;
                margin : 0 auto;
            }
            .bg{
                background-color : #efefef;
                min-height       : 100px;
            }
            .dh{
                min-height : 220px;
            }
            .fixed.column{
                width   : 200px;
                margin  : 10px 20px;
            }
            .on-4.columns > .fixed.column.span-2{
                width   : 480px;
                margin  : 0;
            }
                .fixed.column.span-2 > .unit{
                    margin : 10px 20px;
                }
        </style>
        <script src=”jquery.js”></script>
        <script src=”elastic.js”></script>
    </head>
    <body class=”on-4 columns”>
        <div class=”fixed column span-2 on-2 columns”>
            <div class=”unit bg”>top left box</div>
            <div class=”fixed column bg”>first column</div>
            <div class=”fixed column bg”>second column</div>
        </div>
        <div class=”fixed column bg dh”>third column</div>
        <div class=”fixed column bg dh”>fourth column</div>
    </body>
</html>

But no no elastic, how about something similar but no js, no framework no nada. ok ill use elastic, no javascript, no jquery (this layout is fixed anyway), 200px columns with a 20px margin giving us a total of 960px;

Like this layout its based on columns we definitely will need float:left, and of course a way to clearfix. float left no problem, clearfix ill get that from elastic internal clearfix. and i will extract some other things and keep the same classes from elastic so i can tell the difference.

Now the markup. Basically lets try to make the markup as simple as possible. so lets just add the specific things that we need from elastic, of course this means, no reset, no base, no nesting, no round, no vertical centers and all. actually if i where so sure that this is all the layout that i will ever need i will not use elastic, because this layout is so simple, tough is never the case so ill use elastic anyway but here it is.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
        <title>Layout</title>
        <style type=”text/css” media=”screen”>
            .unit:after, .columns:after, .column:after{
            	content    : ” “;
            	display    : block;
            	height     : 0;
            	clear      : both;
            	visibility : hidden;
            }
            .unit, .columns, .column{
            	display  : block;
            	_zoom    : 1;
            	_display : inline-block;
            }
            .column
            {
            	float : left;
            }
            body{
                width  : 960px;
                margin : 0 auto;
            }
            .bg{
                background-color : #efefef;
                min-height       : 100px;
            }
            .dh{
                min-height : 220px;
            }
            .fixed.column{
                width   : 200px;
                margin  : 10px 20px;
            }
            .on-4.columns > .fixed.column.span-2{
                width   : 480px;
                margin  : 0;
            }
                .fixed.column.span-2 > .unit{
                    margin : 10px 20px;
                }
        </style>
    </head>
    <body class=”on-4 columns”>
        <div class=”fixed column span-2 on-2 columns”>
            <div class=”unit bg”>top left box</div>
            <div class=”fixed column bg”>first column</div>
            <div class=”fixed column bg”>second column</div>
        </div>
        <div class=”fixed column bg dh”>third column</div>
        <div class=”fixed column bg dh”>fourth column</div>
    </body>
</html>

So what do we get from this. for me its the same, same markup, same clearfix, so what do you get with elastic? why use it. the first reason is that wether you use on the framework or no for a specific case, it keeps the style and that is a huge advantage already. the other one, is that this layout is so simple, and if you wanna standout i can bet you wont get away with this, you will require nesting, vertical or horizontal centering, how about same-height, how about some jquery, jquery ui, or some custom widgets, now that looks like a real site to me, the code you will need for all that, well i would use a framework.

The other thing, elastic actually is not doing any intrusive code, actually the only difference here is that I copied the clearfix from elastic, i even did some overrides to elastic css classes, nothing happened, same result, let me know what you think.

If you enjoy this post, please share it.