Elastic CSS Framework http://www.elasticss.com A simple, yet comple, and un-obstrusive CSS Framework. Thu, 25 Nov 2010 16:35:43 +0000 http://wordpress.org/?v=2.7.1 en hourly 1 New elastic css video on creating 3column layout http://www.elasticss.com/new-elastic-css-video-on-creating-3column-layout/ http://www.elasticss.com/new-elastic-css-video-on-creating-3column-layout/#comments Thu, 25 Nov 2010 16:34:00 +0000 Fernando Trasviña http://elasticss.com/new-elastic-css-video-on-creating-3column-layout/ I just created a small new video on how to create a 3 column layout with elastic where the columns are the same-height

]]> http://www.elasticss.com/new-elastic-css-video-on-creating-3column-layout/feed/ So what does elastic can do if no elastic.js? http://www.elasticss.com/so-what-does-elastic-can-do-if-no-elastic-js/ http://www.elasticss.com/so-what-does-elastic-can-do-if-no-elastic-js/#comments Sun, 12 Sep 2010 04:31:20 +0000 Fernando Trasviña http://elasticss.com/?p=2157 Today I was reading about css layouts and found an old post on stackoverflow,they discussed about a 4 column based layout with a small tweek on it.
The main thing with this layout is that it requires nesting to be accomplished, so using elastic was of course my first option, but then i found this link where they present the same 4 column based layout.The main problem presented in that page is that the author does not like css frameworks, and he does not want to use tables either.

Ok, the tables thing i don’t have any complain, don’t use them to layout your pages use them do display tabular data. But no css frameworks, why people keeps being afraid of them, maybe we are not providing them with the right tools, or maybe they really don’t like them. maybe its pride that they don’t want to use someone else css code, either way i kinda disliked it a little, and went to check if i could do it myself, ok here are the steps.

so if you are lazy and didn’t go into the link here is the image of the layout on subject.

image of a 4 column based layout

image of a 4 column based layout

If i could use elastic for this i would endup using the following code. and exactly the following code, assuming the framework is included, so no extra css nothing.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
        <title>Layout</title>
        <link rel=”stylesheet” href=”elastic.css” type=”text/css” media=”screen”>
        <style type=”text/css” media=”screen”>
            body{
                width  : 960px;
                margin : 0 auto;
            }
            .bg{
                background-color : #efefef;
                min-height       : 100px;
            }
            .dh{
                min-height : 220px;
            }
            .fixed.column{
                width   : 200px;
                margin  : 10px 20px;
            }
            .on-4.columns > .fixed.column.span-2{
                width   : 480px;
                margin  : 0;
            }
                .fixed.column.span-2 > .unit{
                    margin : 10px 20px;
                }
        </style>
        <script src=”jquery.js”></script>
        <script src=”elastic.js”></script>
    </head>
    <body class=”on-4 columns”>
        <div class=”fixed column span-2 on-2 columns”>
            <div class=”unit bg”>top left box</div>
            <div class=”fixed column bg”>first column</div>
            <div class=”fixed column bg”>second column</div>
        </div>
        <div class=”fixed column bg dh”>third column</div>
        <div class=”fixed column bg dh”>fourth column</div>
    </body>
</html>

But no no elastic, how about something similar but no js, no framework no nada. ok ill use elastic, no javascript, no jquery (this layout is fixed anyway), 200px columns with a 20px margin giving us a total of 960px;

Like this layout its based on columns we definitely will need float:left, and of course a way to clearfix. float left no problem, clearfix ill get that from elastic internal clearfix. and i will extract some other things and keep the same classes from elastic so i can tell the difference.

Now the markup. Basically lets try to make the markup as simple as possible. so lets just add the specific things that we need from elastic, of course this means, no reset, no base, no nesting, no round, no vertical centers and all. actually if i where so sure that this is all the layout that i will ever need i will not use elastic, because this layout is so simple, tough is never the case so ill use elastic anyway but here it is.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
        <title>Layout</title>
        <style type=”text/css” media=”screen”>
            .unit:after, .columns:after, .column:after{
            	content    : ” “;
            	display    : block;
            	height     : 0;
            	clear      : both;
            	visibility : hidden;
            }
            .unit, .columns, .column{
            	display  : block;
            	_zoom    : 1;
            	_display : inline-block;
            }
            .column
            {
            	float : left;
            }
            body{
                width  : 960px;
                margin : 0 auto;
            }
            .bg{
                background-color : #efefef;
                min-height       : 100px;
            }
            .dh{
                min-height : 220px;
            }
            .fixed.column{
                width   : 200px;
                margin  : 10px 20px;
            }
            .on-4.columns > .fixed.column.span-2{
                width   : 480px;
                margin  : 0;
            }
                .fixed.column.span-2 > .unit{
                    margin : 10px 20px;
                }
        </style>
    </head>
    <body class=”on-4 columns”>
        <div class=”fixed column span-2 on-2 columns”>
            <div class=”unit bg”>top left box</div>
            <div class=”fixed column bg”>first column</div>
            <div class=”fixed column bg”>second column</div>
        </div>
        <div class=”fixed column bg dh”>third column</div>
        <div class=”fixed column bg dh”>fourth column</div>
    </body>
</html>

So what do we get from this. for me its the same, same markup, same clearfix, so what do you get with elastic? why use it. the first reason is that wether you use on the framework or no for a specific case, it keeps the style and that is a huge advantage already. the other one, is that this layout is so simple, and if you wanna standout i can bet you wont get away with this, you will require nesting, vertical or horizontal centering, how about same-height, how about some jquery, jquery ui, or some custom widgets, now that looks like a real site to me, the code you will need for all that, well i would use a framework.

The other thing, elastic actually is not doing any intrusive code, actually the only difference here is that I copied the clearfix from elastic, i even did some overrides to elastic css classes, nothing happened, same result, let me know what you think.

]]> http://www.elasticss.com/so-what-does-elastic-can-do-if-no-elastic-js/feed/ New Screencast: Elastic CSS Advanced Tips http://www.elasticss.com/new-screencast-elastic-css-advanced-tips/ http://www.elasticss.com/new-screencast-elastic-css-advanced-tips/#comments Wed, 24 Mar 2010 20:54:35 +0000 Sergio http://elasticss.com/?p=2148 Here are shown how to use some of the advanced features in Elastic CSS Framework like Column Supercharge, Adaptive Columns, Centering, Liquid Layouts, Advanced Column Techniques (mixing fixed, elastic and automagic columns)

Elastic CSS Framework Advanced from Sergio de la Garza on Vimeo.

As always you can post your questions or comments here or on Google Groups.

P.S. Sorry for the Audio, we really need a good mic hehe

]]> http://www.elasticss.com/new-screencast-elastic-css-advanced-tips/feed/ Announcing the Elastic CSS Framework Channel on Vimeo http://www.elasticss.com/announcing-the-elastic-css-framework-channel-on-vimeo/ http://www.elasticss.com/announcing-the-elastic-css-framework-channel-on-vimeo/#comments Thu, 18 Mar 2010 19:30:09 +0000 Fernando Trasviña http://elasticss.com/?p=2128 We created a video channel on Vimeo check it out here, and its not coming alone!. We also are giving the first screencasts(it would not be nice to have a channel without interesting content right?). The process was not easy being the first time talking to a computer and explaining at the same time we code and create stuff. But like everything we should get better at it with practice. Without further ado.

Elastic CSS Framework: Creating a Page 01 from fernando trasvina on Vimeo.

Previous Analysis in the process of creating a web page with the framework, analysis is made on gimp on Ubuntu 10.04

Elastic CSS Framework: building a page 02 from fernando trasvina on Vimeo.

Creating the actual layout, with the html classes from elastic, up to the point where all the rest is css skining. Using gedit, with elastic_gedit_snippets from http://github.com/azendal/elastic_gedit_snippets.

Elastic CSS Framework: Creating a Page 03 from fernando trasvina on Vimeo.

This part show the final skinning to create the layout details, and shows some modifiers from the framework stack

The features used from the framework here only scratch the possibilities that you get with the framework, so the main objective is to serve as an introduction tutorial so you can start getting the feel of how to use it and what to expect form the power of combining classes that provides.

Download the project files

]]> http://www.elasticss.com/announcing-the-elastic-css-framework-channel-on-vimeo/feed/ Quick Tip: The Difference Between Live() and Delegate() http://www.elasticss.com/quick-tip-the-difference-between-live-and-delegate/ http://www.elasticss.com/quick-tip-the-difference-between-live-and-delegate/#comments Wed, 10 Mar 2010 16:03:18 +0000 Sergio http://elasticss.com/quick-tip-the-difference-between-live-and-delegate/ In jQuery 1.3, the team introduced the live() method, which allows us to bind event handlers to elements on the page, as well as any that might be created in the future dynamically. Though not perfect, it definitely proved to be helpful. Most notably, live() bubbles all the way up, and attaches the handler to the document.

Read the original post:
Quick Tip: The Difference Between Live() and Delegate()

]]> http://www.elasticss.com/quick-tip-the-difference-between-live-and-delegate/feed/ CSS3 Please! Instant results… Thank You http://www.elasticss.com/css3-please-instant-results%e2%80%a6-thank-you-2/ http://www.elasticss.com/css3-please-instant-results%e2%80%a6-thank-you-2/#comments Wed, 10 Mar 2010 11:39:24 +0000 Javier Ayala http://elasticss.com/css3-please-instant-results%e2%80%a6-thank-you-2/ Paul Irish and Jonathan Neal have created a fun example of various CSS tweaks that you can make, and see the results instantly. CSS3, Please! lets you play with fancy new rules such as: border-radius box shadow gradients rgba support in backgrounds transforms font-face Really nice way to make tweaks inline in the page…..

Visit link:
CSS3 Please! Instant results… Thank You

]]> http://www.elasticss.com/css3-please-instant-results%e2%80%a6-thank-you-2/feed/ CSS3 Please! Instant results… Thank You http://www.elasticss.com/css3-please-instant-results%e2%80%a6-thank-you/ http://www.elasticss.com/css3-please-instant-results%e2%80%a6-thank-you/#comments Wed, 10 Mar 2010 11:39:24 +0000 Fernando Trasviña http://elasticss.com/css3-please-instant-results%e2%80%a6-thank-you/ Paul Irish and Jonathan Neal have created a fun example of various CSS tweaks that you can make, and see the results instantly. CSS3, Please! lets you play with fancy new rules such as: border-radius box shadow gradients rgba support in backgrounds transforms font-face Really nice way to make tweaks inline in the page….

View original post here:
CSS3 Please! Instant results… Thank You

]]> http://www.elasticss.com/css3-please-instant-results%e2%80%a6-thank-you/feed/ HTML Minification http://www.elasticss.com/html-minification-2/ http://www.elasticss.com/html-minification-2/#comments Wed, 10 Mar 2010 09:14:51 +0000 Sergio http://elasticss.com/html-minification-2/ Good old Kangax has been playing with HTML minification and has shared his new tool in an early stage.

Visit link:
HTML Minification

]]> http://www.elasticss.com/html-minification-2/feed/ HTML Minification http://www.elasticss.com/html-minification/ http://www.elasticss.com/html-minification/#comments Wed, 10 Mar 2010 09:14:51 +0000 Fernando Trasviña http://elasticss.com/html-minification/ Good old Kangax has been playing with HTML minification and has shared his new tool in an early stage. What does it do?

Continue reading here:
HTML Minification

]]> http://www.elasticss.com/html-minification/feed/ Harmony: Canvas Drawing Tool http://www.elasticss.com/harmony-canvas-drawing-tool/ http://www.elasticss.com/harmony-canvas-drawing-tool/#comments Wed, 10 Mar 2010 07:50:44 +0000 Sergio http://elasticss.com/harmony-canvas-drawing-tool/ Harmony is a new drawing tool, a HTML5/Canvas experiment with great potential. It provides some unique brush styles, and can produce some great-looking charcoal pencil style sketches, among other things. Better to try it out than explain it in words

Here is the original post:
Harmony: Canvas Drawing Tool

]]> http://www.elasticss.com/harmony-canvas-drawing-tool/feed/