azendal / elastic
watch download tarball
public
Forks5Right
Watchers57Right
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
name age
history
message
file .gitignore Mon Apr 27 08:56:34 -0700 2009 add: minified package on production improve: gr... [azendal]
file Capfile Tue Nov 18 13:55:36 -0800 2008 organize repository fix on same-height helper f... [azendal]
file README.textile Loading commit data...
file base.css Wed Jul 08 15:17:27 -0700 2009 Elastic 2.0 final [azendal]
file class.css Wed Jul 08 15:17:27 -0700 2009 Elastic 2.0 final [azendal]
directory config/ Tue Nov 18 13:55:36 -0800 2008 organize repository fix on same-height helper f... [azendal]
directory doc/
file fonts.css Wed Jul 08 15:17:27 -0700 2009 Elastic 2.0 final [azendal]
file grid.css
directory helpers_jquery/
file print.css Wed Jul 08 15:17:27 -0700 2009 Elastic 2.0 final [azendal]
directory production/
file reset.css Wed Jul 08 15:17:27 -0700 2009 Elastic 2.0 final [azendal]
directory test/
README.textile

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
  • class.css: CSS Classes for engine.js
  • 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:

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

Engine performance

We are currently releasing a working version of the engine in order to spot bugs on design and on implementation
next milestone will be to improve speed of this engine.


<!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="all" href="reset.css" />
		<link rel="stylesheet" type="text/css" media="all" href="base.css" />
		<link rel="stylesheet" type="text/css" media="all" href="fonts.css" />
		<link rel="stylesheet" type="text/css" media="all" href="class.css" />
		<link rel="stylesheet" type="text/css" media="all" href="grid.css" />
		<link rel="stylesheet" type="text/css" media="print" href="print.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 three-columns">
			<div class="column">first column content</div>
			<div class="column">second column content</div>
			<div class="column">third column content</div>
		</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 two-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 three-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 four-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 auto-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 four-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 four-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 two-columns">
	<div class="column">first column content</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>

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 two-columns">
	<div class="fixed-column" style="width:250px;">first column content</div>
	<div class="elastic-column">second column content</div>
</div>
<div class="unit two-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 two-columns">
	<div class="fixed-column">let elastic get it</div>
	<div class="elastic-column">second column content</div>
</div>
<div class="unit two-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 two-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 two-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 two-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();
</script>
<script type="text/javascript" language="javascript" charset="utf-8">
	// jquery event invocation
	$(document).trigger('elastic');
</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