azendal / elastic fork watch download tarball
public
Forks2Right
Watchers27Right
Description: A simple css framework to layout web-based interfaces, based on the printed layout techniques of 4 columns but with capabilities to unlimited column combinations. and capacity to make elastic, fixed and liquid layout easily.
Homepage: <a href="http://www.elasticss.com">elasticss.com</a>
Clone URL: git://github.com/azendal/elastic.git 
Elastic 2.0 RC
fernando trasvina (author)
Tue Jun 23 12:28:25 -0700 2009
commit  a48b1f96e4364e224f86f35b068746dbd6790d0d
tree    6a91ccfd8f8e865ddc1d33ee1c7ba646ce808e8a
parent  7aa597848abe42c49564948a32d829b5756d63d5
name age
history
message
file .gitignore Mon Apr 27 08:56:34 -0700 2009 add: minified package on production improve: gr... [azendal]
file README.textile Tue Jun 23 12:28:25 -0700 2009 Elastic 2.0 RC [fernando trasvina]
directory doc/ Tue Jun 23 12:28:25 -0700 2009 Elastic 2.0 RC [fernando trasvina]
file jquery.js Tue Jun 23 12:28:25 -0700 2009 Elastic 2.0 RC [fernando trasvina]
directory lib/ Tue Jun 23 12:28:25 -0700 2009 Elastic 2.0 RC [fernando trasvina]
directory production/ Tue Jun 23 12:28:25 -0700 2009 Elastic 2.0 RC [fernando trasvina]

Elastic CSS Framework

A simple css framework to layout web-based interfaces, based on the printed layout techniques of 4 columns but with capabilities to unlimited column combinations. and capacity to make elastic, fixed and liquid layout easily.

Fundation

Elastic is organized in several files

  • reset.css: unifies the css of the browser
  • base.css: builds a base to work on
  • fonts.css: sets the font base
  • grid.css: layout components
  • print.css: layout printing components
  • jquery.js: jquery to simplify the creation of helpers
  • engine.js: subpixel rounding, and special helpers
  • skin.css: your place to build the skin of your site (you can choose whatever you want)

Browser support

Our team has been able to test and confirm support layouts made with elastic in the following browsers:

  • Firefox 2 mac, windows, linux
  • Firefox 3 mac, windows, linux
  • Safari 3 mac and windows
  • Safari 4
  • Opera 9.6 linux
  • Internet Explorer 6
  • Internet Explorer 7
  • Internet Explorer 8 Beta 2

About subpixel rounding

The subpixel rounding problems can be found on every browser according to our test, but it is more difficult to find this rounding problems in safari and firefox, and every browser does rounding in a different way, that is why elastic’s engine.js provides a predictable way of rounding letting you know what can be subject of modifications

The order is this:

  • .column.fixed never modified
  • .column (last) modified
  • .column.elastic (last)

Engine performance

Since version 1.0 we have been working in making engine faster, and will continue to improve the speed of the engine, but from version 1.0 to 2.0 we have gained around a 60% of speed some new features have been added, so if you use them all, you may get a lil slower than 1.0 but hey engine is doing more things.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <link rel="stylesheet" type="text/css" media="print" href="elastic.css" />
        <script src="jquery.js" type="text/javascript" language="javascript" charset="utf-8"></script>
        <script src="engine.js" type="text/javascript" language="javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="unit">
            content
        </div>
    </body>
</html>

Basic layouts

Make a layout based on 1 column


<div class="unit">
    <div>column content</div>
</div>

Make a layout based on 2 columns


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

Make a layout based on 3 columns


<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>

Make a layout based on 4 columns


<div class="unit on-4 columns">
    <div class="column">first column content</div>
    <div class="column">second column content</div>
    <div class="column">third column content</div>
    <div class="column">fourth column content</div>
</div>

But i really really need more columns


<div class="unit columns">
    <div class="column">column content</div>
    <div class="column">column content</div>
    <div class="column">column content</div>
    <div class="column">column content</div>
    <div class="column">column content</div>
    <div class="column">column content</div>
    <div class="column">column content</div>
</div>

This things is like tables, can i have span?

Well you can, but currently not for auto-columns. and it is called span


<div class="unit on-4 columns">
    <div class="column">first column content</div>
    <div class="column">second column content</div>
    <div class="column span-2">third column content spawned as a double column</div>
</div>
<div class="unit on-4 columns">
    <div class="column">first column content</div>
    <div class="column span-3">second column content spawned as a triple column</div>
</div>

Complex layouts

Complex layout are accomplished by combinations of the basic for layout units, and basic overrides on your skin

Controlling the width: the elastic, the fluid and the liquid

By default elastic is liquid to 100%


/* An elastic layout */
div.layout
{
    min-width  : 750px; /* it can be ems too */
    max-height : 960px; /* it can be ems too */
}
/* A fixed layout */
div.layout
{
    width  : 750px; /* it can be ems too */
}

Make a layout based on 2 columns and a 3 columns below that


<div class="unit on-2 columns">
    <div class="column">first column content</div>
    <div class="column">second column content</div>
</div>
<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>

Make a layout of 2 columns and the left column contain 3 columns


<div class="unit two-columns">
    <div class="column three-columns">
        <div class="column">first column content</div>
        <div class="column">second column content</div>
        <div class="column">third column content</div>
    </div>
    <div class="column">second column content</div>
</div>
<div class="unit three-columns">
    <div class="column">first column content</div>
    <div class="column">second column content</div>
    <div class="column">third column content</div>
</div>

Advanced layout features

Make a column fixed and the other elastic


<div class="unit columns">
    <div class="fixed column" style="width:250px;">first column content</div>
    <div class="elastic column">second column content</div>
</div>
<div class="unit columns">
    <div class="elastic column">second column content</div>
    <div class="fixed column" style="width:250px;">second column content</div>
</div>

How about i dont know the width of fixed-column


<div class="unit columns">
    <div class="fixed column">let elastic get it</div>
    <div class="elastic column">second column content</div>
</div>
<div class="unit columns">
    <div class="elastic column">second column content</div>
    <div class="fixed column" style="width:250px;">second column content</div>
</div>

How about a 3×3 layout


<div class="unit columns on-3">
    <div class="column">
        column
    </div>
    <div class="column">
        column
    </div>
    <div class="column">
        column
    </div>
    <div class="column span-2">
        column
    </div>
    <div class="column">
        column
    </div>
</div>

Make columns of same height


<div class="unit columns same-height">
    <div class="column">first column content</div>
    <div class="column">second column content</div>
</div>

Centering on the vertical axis


<div class="unit columns same-height">
    <div class="column" style="height:50px;">first column content</div>
    <div class="column">
        <div class="container vertical-center" style="">
            second column content
        </div>
    </div>
</div>

full-width. This one is cool for inputs


<div class="unit two-columns same-height">
    <div class="column">first column content</div>
    <div class="column">
        <input type="text" class="full-width" name="some_name" value="" id="" />
    </div>
</div>

About Padding and Margin

DOM Box model says that padding is inside the element, border and margin are outside the element. Setting a width on an element sets the innerWidth, innerHeight of an element (not counting padding), so setting a padding, margin or border rules expands the element box. To overcome this in the framework an special class exists .container

separate columns form its container


<div class="unit two-columns">
    <div class="container same-height" style="padding:10px;">
        <div class="column">first column content</div>
        <div class="column">second column content</div>
    </div>
</div>

Separate columns from each other


<div class="unit two-columns same-height">
    <div class="column">
        <div class="container" style="margin-right:5px;">
            first column content
        </div>
    </div>
    <div class="column">
        <div class="container" style="margin-left:5px;">
            second column content
        </div>
    </div>
</div>

Controlling printing

Hide something on printed version


<div class="unit no-print">
    content does not get printed
</div>

Hide something on printed version but keep space


<div class="unit no-print-content">
    content does not get printed but uses space
</div>

Show something on printed version only


<div class="unit print-only">
    content does get printed but not seen on screen
</div>

Telling elastic to refresh calculations


<script type="text/javascript" language="javascript" charset="utf-8">
    // direct call 
    Elastic.refresh(context);
</script>

Help and Contact

We have an issue tracker for bugs and feature requests and a Google Group for discussion on the usage of the framework.

You are very wellcome to contribute. Just fork the git repository and create a new issue, send a pull request or contact us personally.

Contributors

Fernando Trasviña (Lead Developer) trasvina [at] gmail

Sergio de la Garza (Core Member Lead) sergio.delagarza [at] gmail

Javier Ayala (Website) jav.forza [at] gmail