@@ -11,7 +11,8 @@ <link rel="stylesheet" href="skin.css" type="text/css" media="all" title="" charset="utf-8" /> <style type="text/css" media="screen"> /* <![CDATA[ */ - + .data{border-collapse:collapse;} + .data td{padding: 5px; border:solid 1px} /* ]]> */ </style> @@ -110,6 +111,8 @@ have taken different approaches to this problem.</p> <p>Elastic has integrated clearfix, so there is no need to do clearfix manually when making a layout. Most other frameworks require that the developer handle this, making it more difficult to change, and learn</p> + <p>Elastic clearfix method is not intrusive, it does not require extra markup, and dont use overlfow:hidden to accomplish it. + So you can position relative or absolute like if your where not using clearfix at all.</p> <p>Some frameworks require that the developer use a class last, to let the framework know that a block is ended, Elastic handles this situation autmatically, making it easier to learn and code.</p> <p>Many frameworks are designed to make fixed with layouts, others to make liquid layouts, and some recent frameworks are @@ -137,6 +140,83 @@ <h2>Advanced Layouts</h2> <h2>Tutorials</h2> <h2>Reference</h2> + <div class="unit"> + <table class="data"> + <tr> + <td width="200">unit</td> + <td>The base and starting point of all elastic framework grids</td> + </tr> + <tr> + <td>column</td> + <td>this defines the content block of grid. and it does not matter where it appears + it alwas behaves as a column. but its size is affected by its container. It also is affected by span-#</td> + </tr> + <tr> + <td>fixed-column</td> + <td>a special type of column with a defined with, that can be set, or inferred by elastic engine.</td> + </tr> + <tr> + <td>elastic-column</td> + <td>a special type of column that uses the space not occupied by columns or fixed columns.</td> + </tr> + <tr> + <td>container</td> + <td>units or columns cannot be used to set margin or padding. container serves to this pourpose. + This also has the beneffit of variable column separation</td> + </tr> + <tr> + <td>two-columns</td> + <td>defines that every contained column must be 50% of its parentNode. + It can be stacked with unit or column</td> + </tr> + <tr> + <td>three-columns</td> + <td>defines that every contained column must be 33.33% of its parentNode. + It can be stacked with unit or column</td> + </tr> + <tr> + <td>four-columns</td> + <td>defines that every contained column must be 25% of its parentNode. + It can be stacked with unit or column</td> + </tr> + <tr> + <td>auto-columns</td> + <td>defines that every contained column must be 1/n of its parentNode. + It can be stacked with unit or column, and it can be modified by group-by-#. + Internally everything on elastic is processed as auto-columns, but to serve better syntax, + and like 1-4 columns are the most common sets, they are explicitelly named, but they can be + made by auto-columns</td> + </tr> + <tr> + <td>same-height</td> + <td>sets the height of every child to the height of its parentNode</td> + </tr> + <tr> + <td>equalized-height</td> + <td>sets the height of every child to the height of the tallest column (use when using column overload)</td> + </tr> + <tr> + <td>horizontal-center</td> + <td>centers an element on the x axis</td> + </tr> + <tr> + <td>vertical-center</td> + <td>centers an element on the y axis</td> + </tr> + <tr> + <td>center</td> + <td>centers an element on the y and x axis</td> + </tr> + <tr> + <td>full-width</td> + <td>sets the element to the width of its container(usefull for form widgets)</td> + </tr> + <tr> + <td>full-height</td> + <td>sets the element to the height of its container</td> + </tr> + </table> + </div> </div> </div> <div class="unit footer"> doc/documentation.html @@ -1,10 +1,10 @@ /* Grade A browser clearfix */ +.unit:after, +.container:after, +.column:after, .fixed-column:after, .elastic-column:after, -.column:after, -.unit:after, -.container:after, .clearfix:after { content : " "; @@ -15,11 +15,11 @@ } /* msie6 clearfix */ +.unit, +.container, +.column, .fixed-column, .elastic-column, -.column, -.unit, -.container, .clearfix { *zoom :1; grid.css @@ -94,7 +94,7 @@ eg = []; egnl = 0; } - if(ig){eg = [ecol];} + if(ig){eg = [ecol]; egnl = escol;} } } for(i in Elastic.helpers){Elastic.helpers[i](context);} @@ -105,6 +105,7 @@ Elastic.version = '1.2.1'; Elastic.reset = function Elastic_reset(context){ + jQuery(document).trigger('elastic:beforeReset'); var i,w,wl,h,hl,p,pl; h = $.find('.same-height > *, .full-height, .equalized-height', context); for(i=0, hl = h.length; i<hl; i++){h[i].style.height = '';} @@ -112,11 +113,14 @@ for(i=0, pl = p.length; i<pl; i++){p[i].parentNode.style.paddingTop = '';} w = $('.column, .elastic-column', context); for(i=0, wl = w.length; i<wl; i++){w[i].parentNode.style.width = '';} + jQuery(document).trigger('elastic:reset'); }; Elastic.refresh = function Elastic_refresh(context){ + jQuery(document).trigger('elastic:beforeRefresh'); Elastic.reset(context); Elastic(context); + jQuery(document).trigger('elastic:refresh'); }; Elastic.configuration = { @@ -180,4 +184,5 @@ jQuery(window).bind('load', function(){ } }); jQuery(document).bind('elastic', Elastic.refresh); + jQuery(document).trigger('elastic:Initialize'); }); helpers_jquery/engine.js a965d68a1b5ee6217fca852cbe1511c115afeb0c fernando trasvina@gmail.com http://github.com/azendal/elastic/commit/0f84c6133e5c0fb9439c08b4afa2ea37f199d2fc 0f84c6133e5c0fb9439c08b4afa2ea37f199d2fc

2009-04-29T16:30:06-07:00

fix: column overload bug 610660610eb6315d6a22eec183b142d4c28e4b87 fernando trasvina@gmail.com