azendal / elastic

Branches (2)
- edge
- master
Tags (11)
- v1.2.5
- v1.2.4
- v1.2.3
- v1.2.2
- v1.2.1
- v1.2
- v1.1
- v1.0
- 2.0.3
- 2.0.2
- 0.5

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. — Read more

<a href="http://www.elasticss.com">elasticss.com</a>

This URL has Read+Write access

v1.2.5 Production ready

sgarza (author)

Wed May 27 14:17:05 -0700 2009

commit 7aa597848abe42c49564948a32d829b5756d63d5
tree dd795e3c910ee117ccba46b0b8fe00b96a1bbce4
parent fc368419467e95b8f77c6afa9bf94c180fa22701

elastic /

	name	age	history message
	.gitignore		Loading commit data...
	Capfile
	README.textile
	base.css
	class.css
	config/
	doc/
	fonts.css
	grid.css
	helpers_jquery/
	print.css
	production/
	reset.css
	test/

README.textile

Elastic CSS Framework

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