azendal / elastic

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.

This URL has Read+Write access

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
  • grid.css: layout components
  • print.css: layout printing components
  • jquery.js: jquery to simplify the creation of helpers
  • helpers.js: tiny scripts to make complex thing easier to you
  • skin.css: your place to build the skin of your site (you can choose whatever you want)

The fundation of layouts begin with the convention of a certain structure in your html
the next code snippet show the basic structure of a layout base for elastic css framework


<!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="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="helpers.js" type="text/javascript" language="javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="layout">
			<div class="header"></div>
			<div class="body"></div>
			<div class="footer"></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 spawn(yeahh the spawn not span)


<div class="unit four-columns">
	<div class="column">first column content</div>
	<div class="column">second column content</div>
	<div class="column spawn-two">third column content spawned as a double 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-left-column" style="width:250px;">first column content</div>
	<div class="elastic-column">second column content</div>
</div>
<div class="unit two-columns">
	<div class="fixed-right-column" style="width:250px;">second column content</div>
	<div class="elastic-column">second column content</div>
</div>

How about i dont know the width of fixed-column


<div class="unit two-columns">
	<div class="fixed-left-column">let elastic get it</div>
	<div class="elastic-column">second column content</div>
</div>
<div class="unit two-columns">
	<div class="fixed-right-column" style="width:250px;">second column content</div>
	<div class="elastic-column">second column content</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>

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 same-height">
	<div class="container" 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>