Elastic CSS Framework A simple, yet comple, and un-obstrusive CSS Framework. 2009-10-21T16:33:47Z WordPress http://elasticss.com/feed/atom/ Fernando Trasviña http://twitter.com/azendal <![CDATA[New Ruby Gem to install Elastic on Rails]]> http://elasticss.com/?p=277 2009-10-21T16:33:47Z 2009-10-21T15:16:04Z Our good friend Ivan Torres @mexpolk created a gem to install Elastic in rails, and it makes the process of installing Elastic so easy as “elasticss”, check it out at http://github.com/mexpolk/elastic_rails. The current version has the latest version of elastic (2.0.2).

]]> 0 http://elasticss.com/new-ruby-gem-to-install-elastic-on-rails/ Sergio http://twitter.com/sgarza <![CDATA[WorkshopCamp Mexico]]> http://elasticss.com/?p=275 2009-10-13T15:17:27Z 2009-10-13T15:17:27Z El próximo 25 de octubre se llevará a cabo el Workshop Camp México. Para todos aquellos que disfrutan de los BarCamps pero que a veces requieren de más de 15 minutos para su ponencia - o para aprender bien - este en particular será un conjunto de talleres impartidos simultáneamente con una duración de 3 horas.

¿Dónde y cuándo?

Domingo 25 de octubre 2009.
Instalaciones de Ked, México, D.F.
Av. Revolución No. 374, Col. San Pedor de los Pinos
A una cuadra del metro San Pedro de los Pinos.

Para mayor información, visita la página oficial: http://barcamp.org/WorkshopCampMexico

Habra un taller sobre Elastic CSS Framework, es totalmente gratis, no faltes!

]]> 0 http://elasticss.com/workshopcamp-mexico/ Fernando Trasviña http://twitter.com/azendal <![CDATA[15 minutes Implementation of Rails-like ActiveRecord in JavaScript]]> http://elasticss.com/?p=263 2009-08-31T21:29:15Z 2009-08-31T20:56:59Z I was trying to design an api for a large application and of course i was using javaScript. So in order to try the feeling of the application design without code it i started up my firebug and started coding a simple active record. so this is what i tried in 15 mins aprox.

here is the result.

Elastic = {
    Installation : (function(){
        var Installation           = function(){};
        Installation.prototype     = {
            domain_name: ‘x’,
            save: function(){
                this.id = Date.now() + Math.random();
                Elastic.Installation.installations.push(this);
                return this;
            }
        };
        Installation.installations = [];
        Installation.all           = function(){
            return Installation.installations;
        };
        Installation.new = function(){
            return new Installation();
        };
        Installation.find = function(id){
            var installations = Installation.installations;
            for(var i = 0; i < installations.length; i++){
                 if(installations[i].id == id){
                     return installations[i];
                 }
            }
            return null;
        };
        Installation.find_by = function(key){
            var finder = function(value){
                var installations = Installation.installations;
                var found = [];
                for(var i = 0; i < installations.length; i++){
                    if(installations[i][key] == value){
                        found.push(installations[i]);
                    }
                }
                return found;
            };
            return finder;
        };
        return Installation;
    })()
};
var installation_id = Elastic.Installation.new().save().id;
var installation_id = Elastic.Installation.new().save().id;
var y = Elastic.Installation.new();
var installations_on_x = Elastic.Installation.find_by('domain_name')('x');
installations_on_x

its kind of cool how JavaScript can be used to try things fast, and with some work you could actually do some serious coding.

firebug as a fast IDE for testing

firebug as a fast IDE for testing

]]> 2 http://elasticss.com/15-minutes-implementation-of-rails-like-activerecord-in-javascript/ Fernando Trasviña http://twitter.com/azendal <![CDATA[Determination of algorithms used for percentage based rounding divs on browsers and CSS Frameworks]]> http://elasticss.com/?p=247 2009-08-28T14:47:13Z 2009-08-28T14:47:13Z Introduction

In current HTML codification trends, developers prefer construct HTML documents, pages and applications based on columns, against the table technique of row based design. This techniques commonly include the use of floated divs.

With the complexity and inconsistency between browsers implementation of standards, and in order to provide more solid code bases, many developers targeted this layout problems with CSS Frameworks, almost all of them based on columns, and with a very different set of approaches and features. The second generation of CSS Frameworks are a great advance in CSS code standardization, they are providing a richer set of features and a great flexibility to accomplish high complexity designs.

The first generation of CSS Frameworks provided fixed width capabilities, and very limited or null nesting capabilities. This frameworks increased the time of development but only at the very high level of design, leaving the developers alone for most of the job. Even when they helped a lot, there was not a complete solution.

In the second generation of CSS Frameworks we have complex nesting, layout width variability, and support for fixed, liquid, and elastic layouts, But the transition has not been by any means smooth.

Going from fixed, to liquid layouts present a very complex challenge to framework developers. The resulting width of columns are commonly float values, W3C has not created a description or a standard solution to solve this problem, leaving the solution up to the browser developers.

The purpose of this study is determine what solutions we currently have, from Browsers and CSS Frameworks.

Hypothesis

Making a wide set of test, varying the number of columns of a block, the algorithm used to get to the rendered layout can be determined by the analysis of the rendered pixels with an image editor.

This study will help to determine if the current Elastic CSS Framework Engine is a good solution for sub pixel rounding, and how this engine compares to the browsers and other frameworks.

Experiment Design

A set of blocks of same width, every block, will vary the number of columns from 1 to 10, and an extra block of 15 columns, to test a non continuous block.

Every block is paired with a set of columns equal to the test created with Elastic CSS Framework to serve as control. All tests have a background of alternating pixel colors to simplify measurements.

All testing blocks must lead to a float measure for columns in order to test the rounding of those float values (183px).

The test were run on mayor browsers, and a screen shot will be taken.

Every column will have a 2px padding to provide clear separation between columns, and a solid background color to be measured with image editing software.

Measures will be done with gimp, and then the results will be analyzed in order to try to infer the underlying algorithm.

Experimentation

Test were run on different platforms, and browsers.

  • Safari 4.0 Final (Mac)
  • Firefox 3.0 (Linux)
  • Opera 9.64 (Linux)
  • Internet Explorer 7 (Windows)

Results

Special considerations, Elastic rounding algorithm leads to -1px on test for 10 columns and 1 column, this did not affected the analysis, and corrections were made at measurement.

Try the test case on your browser

Column 1 2 3 4 5 6 7 8 9 10
10 Columns 14.7 14.7 14.7 14.7 14.7 14.7 14.7 14.7 14.7 14.7
Elastic 2.0 15 15 15 15 15 15 15 14 14 14
Firefox 3.0, 3.5 15 14 15 15 15 14 15 15 14 15
Safari 14 14 14 14 14 14 14 14 14 14
Opera 14 14 14 14 14 14 14 14 14 14
Internet Explorer 15 15 15 15 15 15 15 15 15 15
 
Column 1 2 3 4 5 6 7 8 9 10
9 Columns 16.78 16.78 16.78 16.78 16.78 16.78 16.78 16.78 16.78  
Elastic 2.0 17 17 17 17 17 17 17 16 16  
Firefox 3.0, 3.5 17 17 16 17 17 17 16 17 17  
Safari 16 16 16 16 16 16 16 16 16  
Opera 16 16 16 16 16 16 16 16 16  
Internet Explorer 17 17 17 17 17 17 17 17 17  
 
Column 1 2 3 4 5 6 7 8 9 10
8 Columns 19.38 19.38 19.38 19.38 19.38 19.38 19.38 19.38    
Elastic 2.0 19 19 19 19 19 20 20 20    
Firefox 3.0, 3.5 19 20 19 19 20 19 20 19    
Safari 19 19 19 19 19 19 19 19    
Opera 18 18 18 18 18 18 18 18    
Internet Explorer 19 19 19 19 19 19 19 19    
 
Column 1 2 3 4 5 6 7 8 9 10
7 Columns 22.71 22.71 22.71 22.71 22.71 22.71 22.71      
Elastic 2.0 23 23 23 23 23 22 22      
Firefox 3.0, 3.5 23 22 23 23 23 22 23      
Safari 22 22 22 22 22 22 22      
Opera 22 22 22 22 22 22 22      
Internet Explorer 23 23 23 23 23 23 23      
 
Column 1 2 3 4 5 6 7 8 9 10
6 Columns 27.17 27.17 27.17 27.17 27.17 27.17        
Elastic 2.0 27 27 27 27 27 28        
Firefox 3.0, 3.5 27 27 27 28 27 27        
Safari 27 27 27 27 27 27        
Opera 25 25 25 25 25 25        
Internet Explorer 27 27 27 27 27 27        
 
Column 1 2 3 4 5 6 7 8 9 10
5 Columns 33.4 33.4 33.4 33.4 33.4          
Elastic 2.0 33 33 33 34 34          
Firefox 3.0, 3.5 33 34 33 34 33          
Safari 33 33 33 33 33          
Opera 33 33 33 33 33          
Internet Explorer 33 33 33 33 33          
 
Column 1 2 3 4 5 6 7 8 9 10
4 Columns 42.75 42.75 42.75 42.75            
Elastic 2.0 43 43 43 42            
Firefox 3.0, 3.5 43 43 42 43            
Safari 42 42 42 42            
Opera 42 42 42 42            
Internet Explorer 43 43 43 43            
 
Column 1 2 3 4 5 6 7 8 9 10
3 Columns 58.3 58.3 58.3              
Elastic 2.0 58 58 59              
Firefox 3.0, 3.5 58 59 58              
Safari 58 58 58              
Opera 57 57 57              
Internet Explorer 58 58 58              
 
Column 1 2 3 4 5 6 7 8 9 10
2 Columns 89.5 89.5                
Elastic 2.0 90 89                
Firefox 3.0, 3.5 90 89                
Safari 89 89                
Opera 89 89                
Internet Explorer 90 90                
 
Column 1 2 3 4 5 6 7 8 9 10
1 Column 183                  
Elastic 2.0 183                  
Firefox 3.0, 3.5 183                  
Safari 183                  
Opera 183                  
Internet Explorer 183                  

Discussion

Even though this study only reveals one part of the algorithm of render engines, its a problem that should appear in a wide number of cases
of web development. Further studies could reveal other parts of this algorithm.

Browsers

Firefox

var containerWidth;
var columnPercentageWidth;
var columns;
var columnWidth = Math.round(containerWidth * ( columnPercentageWidth / 100 ));
var column;
for(var i = 0; i < columns.length; i++){
	column.style.width = columnWidth;
}
var computedWidth    = columnWidth * columns.length;
var difference       = containerWidth - computedWidth;
var positionDivision = columns.length / (Math.abs(difference) + 1);
var increment        = (difference > 0);
var direction        = -1;
if(difference !== 0)
for(var i = 1; i <= (Math.abs(difference)); i++){
	if(direction == -1){
		column = columns[columns.length - Math.floor( positionDivision * Math.round(i/2) )];
	}
	else{
		column = columns[Math.floor( positionDivision * Math.round(i/2) ) - 1];
	}
	if(increment){
		column.style.width = columnWidth + 1;
	}
	else{
		column.style.width = columnWidth - 1;
	}
	direction = direction * -1;
}

Safari

var columns;
var columnWidth = Math.floor( containerWidth * ( columnPercentageWidth / 100 ) )
for(var i = 0; i < columns.length; i++){
	column.style.width = columnWidth;
}

Opera

var columns;
var columnWidth = Math.floor( containerWidth * ( Math.floor( columnPercentageWidth ) / 100 ) );
for(var i = 0; i < columns.length; i++){
	column.style.width = columnWidth;
}

Internet Explorer

var columns;
width = Math.round( containerWidth * ( columnPercentageWidth / 100 ) )
for(var i = 0; i < columns.length; i++){
	column.style.width = columnWidth;
}

Elastic CSS Framework

var containerWidth;
var columnPercentageWidth;
var columns;
var columnWidth = Math.round(containerWidth * ( columnPercentageWidth / 100 ));
var column;
for(var i = 0; i < columns.length; i++){
	column.style.width = columnWidth;
}
var computedWidth    = columnWidth * columns.length;
var difference       = containerWidth - computedWidth;
var positionDivision = columns.length / (Math.abs(difference) + 1);
var increment        = (difference > 0);
var direction        = -1;
if(difference !== 0)
for(var i = 1; i <= (Math.abs(difference)); i++){
	column = columns[columns.length - i )];
	if(increment){
		column.style.width = columnWidth + 1;
	}
	else{
		column.style.width = columnWidth - 1;
	}
}

The code presented here may not be the actual code, because it was not copied, was infered. Also code must have extra considerations for more cases

This results are valid for the cases considered in the study, and are confirmed by the control case. Combinations of diferent types of blocks may lead to a different set of results, but that is outside of the scope of this study.

How other css frameworks handle pixel rounding

CSS Frameworks based on grid systems (blueprint, 960gs, bluetrip, and similar) are based on divisions that lead to integer results for every column, this avoids falling in the problem of pixel rounding and do not need a solution, but a limitant on this frameworks is that they do not support liquid layouts. Implementing liquid layouts on this type of frameworks would force to find a pixel rounding solution.

CSS Frameworks based on column combinations that support liquid layouts, have different solutions to deal with this.

YUI uses a set of classes that define different width and float left or right according to the context of its container and the browser.
This still presents the problem that the computed values varies according to the algorithm implemented by the browser. Scaling this to more than 4 columns would lead to a high multiplicity of exceptions on css code.

OOCSS uses a class “last” that its not floated, contrary to the rest of the columns in the unit, this causes that the last column gets reduced
by the space of the rest of the columns, but also depends on the computed withs of the algorithm implemented by the browser. scaling this to more columns would reveal the algorithm errors on browsers leading to more evident problems in the final width of columns.

Elastic provides a JavaScript Based override to the computations making a completely predictable width in all browsers. even though is a little slower because overrides the native render engine computations, it can scale to many columns, and never blocks the flow of content.

Conclusions

  • Every Browser implements a different solution for sub pixel rounding.
  • Firefox is the only browser that does a complete use of the available space.
  • Elastic CSS Framework is the only Framework that rounds widths consistently accross browsers.
  • Other CSS Frameworks will vary their accuracy depending on the browser they are rendered.
  • Only Internet Explorer leads to a sum of column widths grater to their container, showing the column jump bug.

Personal opinion.

Browsers should be more open in their implementations, that way they would help the creation of a standard in rounding widths, and other areas.

An open documentation of this solutions would help web developers understand better the problems, and solutions in browsers, and this would help to advance the standardization and development to a faster ratio.

A standardization on this subject would simplify the advance and improve speed of Elastic CSS Framework Engine performance leaving this operations to a lower level. Also will open the path to a collaboration between framework authors instead of a competition.

If anyone would like to join efforts with Elastic CSS Framework core team, we are open to collaborate with others to improve the features of frameworks and maybe make recommendations to browsers and W3C.

This will open a discussion inside Elastic CSS Framework to see if the current algorithm should be changed to match Firefox, this also is an invitation to everyone to participate.

]]> 2 http://elasticss.com/determination-of-algorithms-used-for-percentage-based-rounding-divs-on-browsers-and-css-frameworks/ Sergio http://twitter.com/sgarza <![CDATA[Sites using elastic]]> http://elasticss.com/?p=245 2009-08-24T14:17:26Z 2009-08-24T14:17:26Z Have you done a site with Elastic CSS Framework?

Send us a shout here to post it on the Elastic Gallery Section.

]]> 0 http://elasticss.com/sites-using-elastic/ Fernando Trasviña http://twitter.com/azendal <![CDATA[Elastic 2.0.1]]> http://elasticss.com/?p=231 2009-07-15T14:00:34Z 2009-07-14T21:42:53Z Why so often and why so little increment?

Well in he process of releasing 2.0 we considered the possibility to support calculations based on percentages, but It was dropped, because we believed that it was not necessary, but well it turns out that it is important, and that the current algorithm was not enough, some rounding problems arise mainly it comes from the width reported by the browsers, and the rounding that result from that.

So to not make a long story, this release tries to solve that, as an experiment, maybe its usefull, maybe not we will see.

]]> 7 http://elasticss.com/elastic-201/ Fernando Trasviña http://twitter.com/azendal <![CDATA[Elastic 2.0 Final Release]]> http://elasticss.com/?p=206 2009-07-08T21:45:11Z 2009-07-08T21:44:38Z Today Elastic core team releases the version 2.0 of Elastic CSS Framework. Many things where changed. Now Elastic has a simplified syntax, and new features that will help you develop complex layouts even easier than before. We know that the new syntax might be a little problematic because we are not providing backwards compatibility with the previous syntax, that is why we increased the version number.

Here is a list of changes in the final release:

Simplified syntax
auto-columns => columns
two-columns, three-columns, four-columns =>
number of columns => on-#
fixed columns bug
fixed equalized-height refresh bug
fixed printing(still some rules apply but works when followed)
fixed span-# bug when there is one one column
fixed pixel rounding bug when having many columns(now it gets computed fine)
changed span-# now if # is grater than the row it gets setted to the columns per row(it was some serious punishment)
improved engine performace
improved helpers performance
improved pixel rounding algorithm
added support for elastic-height
added support for adaptive-#-# columns
added support for layouts position-x : display x
added support for final on column

We had the chance to fix some ambiguities, and bugs. We are very happy with this new version, it has helped us to accomplish more complex layouts in less time, keeping the cross browser compatibility.

We hope you enjoy it and provide feedback and ideas on how we can improve elastic to a happier coding experience.

]]> 2 http://elasticss.com/elastic-20-final-release/ Sergio http://twitter.com/sgarza <![CDATA[Two columns based layout]]> http://elasticss.com/?p=9 2009-07-08T21:55:22Z 2009-07-08T08:36:09Z This post is on how to use Elastic CSS Framework to create a simple two column layout.

The layout consists of a header, a main content column, a right sidebar, and a footer. It is also horizontally centered in the browser window. A pretty basic layout, and not at all difficult to create with Elastic CSS Framework and the best part is you don’t need to worry about browser specific hacks.

First you need to download the latest version of Elastic CSS Framework from Github.com, unzip the file, rename the resulted directory to elastic and copy it to your project.

Now lets beging…

Basically our layout should look like this:

two column layout thumb

two column layout thumb

In order to use Elastic you need to create an HTML document (index.html) and include all the CSS and Javascript files Elastic has:

	<script src="/elastic//jquery.js" type="text/javascript"></script>
	<script src="/elastic/elastic.js" type="text/javascript"></script>

Notice the “/stylesheets/skin.css” file, well here is where all our custom CSS will live, so you can let all Elastic files untouched.

Now lets make our layout. Lets work on a 960px wide container aligned on center and a light-grey background just to diferentiate.

You have to add the following CSS code in stylesheets/skin.css:

	div.layout{
		width : 960px;
  	min-width : 960px;
  	min-height : 500px;
  	margin : auto;
  	background : #F0F0F0;
	}

Now add the markup to your HTML document:

	<div class="unit layout"></div>

Now that we have our main container lets the fun stuff begin.
Lets work on the header part. It has to be 100px tall and 100% wide, well that’ easy:

Add this to skin.css:

	div.header{
		height : 100px;
		background : #C0C0C0;
	}

And the HTML should look like this:

	<div class="unit layout">
		<div class="unit header">

		</div>
	</div>

Now lets make the two columns and the footer.
With Elastic CSS Framework is easy to make columns that have the same height, full height and truly behave like a columns :)

So this is our final CSS file:

	div.layout{
		width : 960px;
		min-width : 960px;
		min-height : 500px;
		margin : auto;
		background : #F0F0F0;
	}

	div.header{
		height : 100px;
		background : #C0C0C0;
	}

	div.main-content{
		background : #CCC;
	}

	div.sidebar{
		background : #FFF;
	}

	div.footer{
		height : 100px;
		text-align : center;
		background : #C0C0C0;
	}

And this is how our final HTML file should look like:

	<div class="unit layout">
	  <div class="unit header">
	    <h1>Header</h1>
	  </div>
	  <div class="unit full-height on-2 columns same-height">
	    <div class="elastic column full-height main-content">
	      <div class="container" style="padding:10px">
	        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	      </div>
	    </div>
	    <div class="fixed column full-height sidebar" style="width: 320px;">
	      <div class="container" style="padding:10px">
	        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	      </div>
	    </div>
	  </div>
	  <div class="unit footer">
	    Elastic CSS Framework Two Column Layout
	  </div>
	</div>

UPDATE: Working demo here

See, its pretty easy to make layouts with Elastic CSS Framework, now it is up to you to add some grpahics, icons and typography.

Thanks for reading and feel free to comment.

]]> 7 http://elasticss.com/two-columns-based-layout/ Fernando Trasviña http://twitter.com/azendal <![CDATA[Elastic V2.0 RC]]> http://elasticss.com/?p=200 2009-06-23T18:25:30Z 2009-06-23T18:19:42Z In the last weeks we had low activity on our repository and in the website, the reason?
We where working on the next mayor release of the framework.

This release is mainly focused on advanced layout features, and the engine performance. Most of the time our core team and colaborators were m on the new syntax(yes syntax has been changed).

To some of you that have using the previous versions of the framework that may think, why a change? Well as we developed the framework we added features, and a syntax had to be created in most of the cases, but we felt the syntax a lil bloated, and we went in the hunt for a change.

The results are quite promissing, the syntax maintains its legibility, but has been simplified. all columns now are handled by the class columns, fixed-column, elastic-colmumn and column are all handled by column, now fixed and elastic are modifiers. to explain this a little better here is the new syntax description:

unit [full-height] [elastic-height]
columns [on-#] [same-height] [adaptive-#-#]
column [span-#] [final]
container [same-height] [full-height] [horizontal-center] [vertical-center] [center] [bottom]
* [full-width] [position-#] [display #]
                         |___________|

unit << columns
column << columns

We also added two new cool features:

adaptive-#-#: This will let you create adaptive layouts based on a range for column width. layouts: this is similar to the CSS3 layout notion, but with the syntax of elastic using only class names.

The reason to release this as RC is that we need testing mainly for IE7 and IE6. but we are developing projects with this new version and it has worked well up to now, when we get to testing, we will see if any improvements are required, but syntax should remain the same from RC to final.

]]> 0 http://elasticss.com/releasing-v20-rc/ Javier Ayala http://www.twitter.com/javi_ayala <![CDATA[Challenge: Grid of boxes]]> http://elasticss.com/?p=166 2009-05-30T00:57:12Z 2009-05-29T22:18:29Z One of the most common problems that web designers has to deal with is when a client ask to have some kind of grid-based on their webdesign. For some of you this might be a piece of cake, but the real challenge cames when you can’t set specific height when you are dealing with a loop that can have big or small amount of text on it.

The Study Case:

Suppose you are working with wordpress, and you need to make some kind of grid out of the information that The Loop is going to throw you away. What would you do to show the information in a grid made out of divs?

The Example image:

gridbox

The Limitations:

You can only use CSS and Javascript to solve this challenge.

Good Luck

]]> 4 http://elasticss.com/challenge-grid-of-boxes/