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.

Foundation

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
elastic.js: subpixel rounding, and special helpers
skin.css: your place to build the skin of your site (you can choose whatever you want)

even this may sound like many files, on production state you only need 2:

elastic.css
elastic.js

this are packed in the production folder

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, windows
Opera >=9.6 linux
Internet Explorer >=7

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 firefox (even though it has the most accurate rounding algorithm), and every browser does rounding in a different way, that is why
elastic’s elastic.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
.column.elastic

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.

Since version 2.0 almost all development has been around performance and accuracy meaning that
elastic is not gaining features, it seems that most of the cases are covered, and for the ones that
may be missing, you can still use old css and javascript, elastic won’t complain.


<!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="elastic.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 on-2 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 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>

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>

Elastic height


<div class="unit">
	<div class="container" style="height:200px;">
		<div class="unit">
			some text
		</div>
		<!-- The next unit will occupy the remaining space in the contianer -->
		<div class="unit elastic-height">
			some text, check documentation for overflow integration
		</div>
	</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 on-3 columns">
	<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 on-2 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>

Make adaptive layouts.

Elastic provides a new way to make layouts adaptive on the number of columns per row on layouts, using the new class
adaptive-min-max where min is the minimum number of pixels for a column and max is the oposite.


<div class="unit columns adaptive-200-300 same-height">
	<div class="column">first column content</div>
	<div class="column">first column content</div>
	<div class="column">first column content</div>
	<div class="column">first column content</div>
	<div class="column">first column content</div>
</div>

Layouts

Elastic provides layout features, (similar idea of CSS3 Layouts), but this is a pure Elastic implementation following the Framework DSL.
This lets layout creator provide ceo friendly content, and change layouts easily. Even though it is accomplished via javascript, but it
lets Elastic do its magic more properly.


<div class="unit position-body">body 1</div>
<div class="unit position-footer">footer 1</div>
<div class="unit position-body">body 2</div>

<div class="unit on-2 columns same-height">
	<div class="column display body"></div>
	<div class="column display footer"></div>
</div>

From this html code you will get this after Elastic processes.


<div class="unit on-2 columns same-height">
	<div class="column display body">
		<div class="unit position-body">body 1</div>
		<div class="unit position-body">body 2</div>
	</div>
	<div class="column display footer">
		<div class="unit position-footer">footer 1</div>
	</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 on-2 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 on-2 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>

Javascript API

Telling elastic to refresh calculations


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

Telling elastic to not refresh calculations on resize


<script type="text/javascript" language="javascript" charset="utf-8">
	// direct call 
	Elastic.configuration.refreshOnResize = false;
</script>

Event System

Elastic now provides an event system, that gets very usefull when creating widgets and some special cases


<script type="text/javascript" language="javascript" charset="utf-8">
	// 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 */});
</script>

Reserved Classes

center

vertical-center

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 welcome 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
-@azendal (Twitter)

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

Javier Ayala (Website)
-jav.forzza [at] gmail
-@javi_ayala (Twitter)

azendal/elastic