Elastic CSS Framework

Is like having a conversation with your code.
"Web design meets simplicity"

Documentation

The Elastic CSS Framework has a lot of classes and helpers that will aid in the process of web design. By understanding this documentation you’ll be all set to start designing with Elastic right away. The content of this page provides all the tools for you to start experimenting and trying all kind of things you can imagine. Go ahead and give it a try.

How to Install

The Elastic CSS Framework comes as set of .js and .css files. The procedure to install the is really easy:

First, download the latest version of the Elastic CSS Framework. (v. 2.0.3).
You’ll see some files and folders inside the .zip file. Open the production folder which contains the compressed versions of the js and css files.
Add them to the header of your html file.
jQuery is included in Elastic CSS Framework Distribution
Start adding some CSS clases to your code and you are ready to go.

Snippet of an HTML document with elastic installed

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
    ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
    <head>
        <meta http-equiv=”Content-type” content=”text/html; charset=utf-8″ />
        <title></title>
        <link rel=”stylesheet” href=”elastic/elastic.css” type=”text/css” media=”all” charset=”utf-8″ />
        <link rel=”stylesheet” href=”elastic/elastic.print.css” type=”text/css” media=”print” charset=”utf-8″ />
        <script src=”elastic/jquery.js” type=”text/javascript” language=”javascript” charset=”utf-8″></script>
        <script src=”elastic/elastic.js” type=”text/javascript” language=”javascript” charset=”utf-8″></script>
    </head>
    <body>
        
    </body>
</html>

The Basic CSS Classes

unit: The unit is the base and starting point of all elastic framework grids. This basic class will convert your div in a 100% width column.

<div class=”unit”>
    …
</div>

container: The container is the class that will allow you to add style to your design in the simplest and easiest way you can imagine. Technically you’ll need to add a container div inside or outside of almost every other non-container div, the only thing you can’t do is having two containers overlapping each other.

<div class=”unit”>
    <div class=”container” style=” /*– Style goes here –*/ “>
        Content goes here..
    </div>
</div>

Before we continue

There is one thing you’ll need to understand right now, but don’t worry, you’ll love this part of the framework.

One of the great things about the Elastic CSS Framework is that the Box Model has a different convention in here. So say “ba bye” to additions, substractions and divisions because all these things are beautifully handled by the framework. Here goes the example.

The regular way to do a DIV with an exact width of 200px having a padding of 15px, is to set a width of 170px and a padding of 15px. Right? But the Elastic way is far more flexible with the design process, so if you want a div with a width of 200px and a padding of 15px, just set the width to 200px and nest a container with the desired padding, having the same result but getting rid of all kind of mathematics you have to do in a regular design process.

With this convention you’ll be able to have different separation on every designed cell, unlike the rest of the frameworks out there.

Visual Example:

boxmodel1

Ok, you are done, let’s continue.

The Columns

column: This defines the content block of grid and it doesn’t matter where it appears it alwas behaves as a column. The height will depend of the inner containerThe width of a column is calculated dinamically depending on the context that you are using and . For example, if you are using a column class inside a two-columns the width will be set to 50% of the parent DIV. If you use it inside a three-column the width will be of 33%.

<div class=”column”>
    ..Simple column that will have a width depending of the way you are using it..
</div>

columns: This acts as column containers, at its most basic behavior columns will automatically determine the number of columns by its number of “column” children, but when you need more control there are some other classes to help.

on-#: Is the columns modifier to let elastic know on how many columns the layout should behave, the number is unlimited, elastic will do the math.

<div class=”unit on-2 columns”>
    <div class=”column”>
        first column content
    </div>
    <div class=”column”>
        second column content
    </div>
</div>

Here the columns are being wrapped in a two-columns DIV, this will make the framework to give a width of 50% of the parent DIV to each column.

<div class=”unit on-3 columns”>
    <div class=”column”>
        first column content
    </div>
    <div class=”column”>
        second column content
    </div>
    <div class=”column”>
        third column content
    </div>
</div>

Here the columns are being wrapped in a three-columns DIV, this will make the framework to give a width of 33% of the parent DIV to each column.

Want more colums?

Some Examples:

<div class=”unit on-6 columns”>
    <div class=”column”> Content of column 1 </div>
    <div class=”column”> Content of column 2 </div>
    <div class=”column”> Content of column 3 </div>
    <div class=”column”> Content of column 4 </div>
    <div class=”column”> Content of column 5 </div>
    <div class=”column”> Content of column 6 </div>
</div>

<div class=”unit on-3 columns”>
    <div class=”column”> Content of column 1 </div>
    <div class=”column”> Content of column 2 </div>
    <div class=”column”> Content of column 3 </div>
</div>

<div class=”unit on-30 columns”>
    <div class=”column”> Content of column 1 </div>
    <div class=”column”> Content of column 2 </div>
        …
        …
    <div class=”column”> Content of column 29 </div>
    <div class=”column”> Content of column 30 </div>
</div>

Want to see the real power of Elasticss?

When we say that the Elastic CSS Framework has unlimited posibilities, we surely say the truth. With Elasticss you won’t need to depend of divs, because the usage of this framework can extend to any tag and any component.

Example of a Not so weird case:

<ul class=”on-5 columns”>
    <li class=”column”> Content of list element #1 </li>
    <li class=”column”> Content of list element #2 </li>
    <li class=”column”> Content of list element #3 </li>
    <li class=”column”> Content of list element #4 </li>
    <li class=”column”> Content of list element #5 </li>
</ul>

Example of a really weird case:

<p class=”on-5 columns”>
    <a class=”column”> Content of element #1 </a>
    <ul class=”column”>
        <li>Content of list element #2<li>
        <li>Content of list element #2<li>
        <li>Content of list element #2<li>
    </ul>
    <strong class=”column”> Content of element #3 </strong>
    <em class=”column”> Content of element #4 </em>
    <span class=”column”> Content of element #5 </span>
</p>

Column Modifiers

elastic column: This type of column can be used to set the width of the a column to be the rest of the space not occupied by other columns or fixed-columns. For example, let say that you want a two-column based layout, one column with a fixed width and the other column to have and elastic width, so that your design can occupie the same proportion of the visible space of the browser at any time.

fixed column: With this special column you can achieve every fixed design you can imagine. The only catch of this type of column is that you’ll need to specify a width embeded in the style of the DIV.

Examples:

Fixed-colum example

<div class=”unit on-3 columns”>
    <div class=”fixed column” style=”width:200px; “>
        Fixed column with a width of 200px
    </div>
    <div class=”fixed column” style=”width:610px; “>
        Fixed column with a width of 610px
    </div>
    <div class=”fixed column” style=”width:150px; “>
        Fixed column with a width of 150px
    </div>
</div>

Elastic and Fixed columns example

<div class=”unit on-2 columns”>
    <div class=”container” style=”width:500px; “>
        <div class=”fixed column” style=”width:150px; “>
            Fixed column with a width of 150px
        </div>
        <div class=”elastic column”>
            Elastic column with a width of 350px
        </div>
    </div>
</div>

One important thing here is that you need to write your code in the order you want to be displayed from left to right since all the columns are floated to the left.

span-#: This class sets the number of columns a column should span. Where ‘#’ is the number of columns you want to simulate. For example, let say you want to have a two column based layout but that you need that one of your columns has a width of exactly 33%. Well, you can solve this with a three-columns class and just two columns.

Example:

<div class=”unit on-3 columns same-height”>
    <div class=”column span-2″ >
        Column with a width of 66%
    </div>
    <div class=”column”>
        Column with a width of 33%
    </div>
</div>

The Helpers

same-height: This class helps the main columns divider to make all of its inner columns of the same height.

<div class=”unit on-2 columns same-height”>
    <div class=”column” >
        Content here..
    </div>
    <div class=”column”>
        Content here..
        Content here..
        Content here..
        Content here..
    </div>
</div>

elastic-height: With this class you can achieve something similiar to what the elastic column does, but in the vertical axis. You can use this class whenever you need a container with an overflow or scrollbars of the size of its parent container.

full-height: With this class you can achieve something similiar to what the same-height does, because if you set your columns to all have a full-height it would be the same like using the same-height class, just that this method is a little more messy than the other one. This class makes a column to be the same height as its parent column. One good use of this class would be to use it just for those columns you do want to have the same height of the column that contains it.

vertical-center: This class will make your column or container to be placed in the vertcial center of its parent. Is like ordering a DIV to align to the middle of the vertical axis.

bottom: This class will make your column DIV to go all the way down to the bottom of its parent container.

horizontal-center: This class has no science basically it just add a -margin: 0 auto- to the container. Just remember that this will not have any visual efect unless you use it on a container that has a width smaller than that of its parent.

full-width: This class adds a width of 100% to any element you want.

Event System

Elastic provides an event system to hook actions on several points of execution

    // Do something before elastic initializes
    jQuery(document).bind(’elastic:beforeInitialize’, function(){ /* code here */});
    // Do something after elastic initializes
    jQuery(document).bind(’elastic:initialize’, function(){ /* code here */});
    // Do something before elastic does some refresh
    jQuery(document).bind(’elastic:beforeRefresh’, function(){ /* code here */});
    // Do something after elastic does some refresh
    jQuery(document).bind(’elastic:refresh’, function(){ /* code here */});
    // Do something before elastic does reset
    jQuery(document).bind(’elastic:beforeReset’, function(){ /* code here */});
    // Do something after elastic does some reset
    jQuery(document).bind(’elastic:reset’, function(){ /* code here */});

Javascript Methods

Elastic.version: Returns a string with Elastic Version Number

Elastic.version;

Elastic.configuration.refreshOnResize: Have a fixed layout? ok tell elastic not process on window resize

Elastic.configuration.refreshOnResize = boolean;

Elastic.reset(context): Recalculates a partial part of a document. Useful when working with ajax and dynamically generated content or widgets.

Elastic.reset(document.getElementById(’some-id’));

Elastic.refresh(context): Recalculates a partial part of a document. Useful when working with ajax and dynamically generated content or widgets.

Elastic.refresh(document.getElementById(’some-id’));

Usage of JavaScript

So maybe you wonder why elastic user JavaScript?. The reason is that current browsers provide different ways to render the same document, some of this differences may be solved by CSS techniques, but there are many other cases where this is not possible, require a lot of markup, or violates the principle or use properties like overflow: hidden, margin-left:9999px. This techniques solve the rendering problem but break element accurate measurements, or conflict with widget positioning, making the scalability from simple pages, to complex applications very difficult .

Elastic uses JavaScript for some of this problems, providing the final markup with the minimum required tags and classes to accomplish this layout problems. Of course there are pure CSS ways to accomplish some of this cases, knowing the right info, like the dimension of elements, using combinations of position relative and absolute, but elastic does not use this solutions to keep the flow as close as possible to the default HTML rendering behavior., here are some examples:

automatic determination of columns width (see an article here)
one fixed column, and 2 elastic columns
columns overcharging
centering elements vertically
make an element take the not used height of its siblings (elastic-height)
aligning an element to the bottom of its container

Next Steps

You may want to see the demos and view how the most common layouts, and some not so common are implemented with the framework in the Demos section on the sidebar, but here is the list of links if you want to go from here.

Elastic CSS Framework

Documentation

How to Install

Snippet of an HTML document with elastic installed

The Basic CSS Classes

Before we continue

The Columns

Want more colums?

Want to see the real power of Elasticss?

Column Modifiers

The Helpers

Event System

Javascript Methods

Usage of JavaScript

Next Steps

Demos

Elastic News

Dev News

Always Handy

Why Elastic?

Latest Challenges

Write a tutorial

Suggestions?

Random Sites