h1. 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. h2. 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 * *elastic.js*: subpixel rounding, and special helpers * *skin.css*: your place to build the skin of your site (you can choose whatever you want) h3. 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 * Firefox 3.5 mac, windows, linux * Safari 3 mac, windows * Safari 4 mac, windows * Opera 9.6 linux * Internet Explorer 6 (still need to test 2.0) * Internet Explorer 7 * Internet Explorer 8 h3. 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 h4. The order is this: * .column.fixed never modified * .column * .column.elastic h4. 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. 



	
		
		
		
	
	
		

			content
h2. Basic layouts h3. Make a layout based on 1 column 



	
column content
h3. Make a layout based on 2 columns 



	
first column content

	
second column content
h3. Make a layout based on 3 columns 



	
first column content

	
second column content

	
third column content
h3. Make a layout based on 4 columns 



	
first column content

	
second column content

	
third column content

	
fourth column content
h3. But i really really need more columns 



	
column content

	
column content

	
column content

	
column content

	
column content

	
column content

	
column content
h3. This things is like tables, can i have span? Well you can, but currently not for auto-columns. and it is called span 



	
first column content

	
second column content

	
third column content spawned as a double column





	
first column content

	
second column content spawned as a triple column
h2. Complex layouts Complex layout are accomplished by combinations of the basic for layout units, and basic overrides on your skin h3. 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 */
}
h3. Make a layout based on 2 columns and a 3 columns below that 



	
first column content

	
second column content





	
first column content

	
second column content

	
third column content
h3. Make a layout of 2 columns and the left column contain 3 columns 



	

		
first column content

		
second column content

		
third column content

	

	
second column content





	
first column content

	
second column content

	
third column content
h2. Advanced layout features h3. Make a column fixed and the other elastic 



	
first column content

	
second column content





	
second column content

	
second column content
h3. Elastic height 



	

		

			some text
		

		
		

			some text, check documentation for overflow integration
h3. How about i dont know the width of fixed-column 



	
let elastic get it

	
second column content





	
second column content

	
second column content
h3. How about a 3x3 layout 



	

		column
	

	

		column
	

	

		column
	

	

		column
	

	

		column
h3. Make columns of same height 



	
first column content

	
second column content
h3. Centering on the vertical axis 



	
first column content

	

		

			second column content
h3. full-width. This one is cool for inputs 



	
first column content
h3. 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. 



	
first column content

	
first column content

	
first column content

	
first column content

	
first column content
h2. 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. 


body 1


footer 1


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



	

		
body 1

		
body 2

	

	

		
footer 1
h2. 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 h3. separate columns form its container 



	

		
first column content

		
second column content
h3. Separate columns from each other 



	

		

			first column content
		

	

	

		

			second column content
h2. Controlling printing h3. Hide something on printed version 



	content does not get printed
h3. Hide something on printed version but keep space 



	content does not get printed but uses space
h3. Show something on printed version only 



	content does get printed but not seen on screen
h2. Javascript API h3. Telling elastic to refresh calculations
h3. Telling elastic to not refresh calculations on resize
h2. Event System Elastic now provides an event system, that gets very usefull when creating widgets and some special cases
h2. Help and Contact We have an issue "tracker":http://elastic.lighthouseapp.com/projects/26690-elastic-css-framework for bugs and feature requests and a "Google Group":http://groups.google.com/group/elastic-css-framework 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. h2. 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)