production/elastic.css
production/elastic.js
.gitignore
@@ -1,16 +1,16 @@
.full-height
{
-
+ /* Helpers will handle this */
}
.hard-full-height
{
-
+ /* Helpers will handle this (still not implemented) */
}
.same-height
{
-
+ /* Helpers will handle this */
}
.horizontal-center
class.css
@@ -7,18 +7,16 @@
<meta name="keywords" content="css, framework, elastic, layout" />
<meta name="description" content="Elastic css framework: Develop web-based user interfaces the way you think about layouts with an easy going syntax and lots of flexibility" />
<title>Elastic css framework</title>
- <!-- elastic -->
- <link rel="stylesheet" href="../reset.css" type="text/css" media="all" title="" charset="utf-8" />
- <link rel="stylesheet" href="../base.css" type="text/css" media="all" title="" charset="utf-8" />
- <link rel="stylesheet" href="../fonts.css" type="text/css" media="all" title="" charset="utf-8" />
- <link rel="stylesheet" href="../class.css" type="text/css" media="all" title="" charset="utf-8" />
- <link rel="stylesheet" href="../grid.css" type="text/css" media="all" title="" charset="utf-8" />
- <link rel="stylesheet" href="../print.css" type="text/css" media="print" title="" charset="utf-8" />
- <script src="../helpers_jquery/jquery.js" type="text/javascript" language="javascript" charset="utf-8"></script>
- <script src="../helpers_jquery/engine.js" type="text/javascript" language="javascript" charset="utf-8"></script>
- <!-- end elastic -->
- <!-- application -->
+ <link rel="stylesheet" href="../production/elastic.css" type="text/css" media="all" title="" charset="utf-8" />
<link rel="stylesheet" href="skin.css" type="text/css" media="all" title="" charset="utf-8" />
+ <style type="text/css" media="screen">
+ /* <![CDATA[ */
+
+ /* ]]> */
+ </style>
+
+ <script src="../helpers_jquery/jquery.js" type="text/javascript" language="javascript" charset="utf-8"></script>
+ <script src="../production/elastic.js" type="text/javascript" language="javascript" charset="utf-8"></script>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
@@ -31,7 +29,7 @@
<div class="container" style="">
<div class="unit two-columns header">
<div class="container same-height" style="">
- <div class="fixed-left-column" style="">
+ <div class="fixed-column" style="">
<a href="/" title="home"><img src="img/logo.png" alt="logo" /></a>
</div>
<div class="elastic-column">
@@ -45,12 +43,7 @@
</div>
</div>
<div class="unit two-columns welcome">
- <div class="container" style="">
- <div class="fixed-right-column" style="width:400px;">
- <div class="container full-height" style="text-align:center;">
- <img src="img/ninja.png" title="" />
- </div>
- </div>
+ <div class="container same-height" style="">
<div class="elastic-column description">
<div class="container full-height" style="padding-top:20px;">
<p class="introduction">
@@ -77,14 +70,19 @@
</div>
</div>
</div>
+ <div class="fixed-column" style="">
+ <div class="container full-height" style="text-align:center; width:400px;">
+ <img src="img/ninja.png" title="" />
+ </div>
+ </div>
</div>
</div>
<div class="unit two-columns body">
<div class="container same-height" style="">
- <div class="fixed-left-column" style="">
+ <div class="fixed-column" style="">
<div class="container" style="font-family:monospace; background-color:#4d4d4d; padding:20px;">
<span style="color:#E4F2FD"><div class=<span style="color:#fff400;">"unit two-columns same-height"</span>></span><br />
- <span style="color:#E4F2FD"><div class=<span style="color:#fff400">"fixed-left-column"</span>></span><br />
+ <span style="color:#E4F2FD"><div class=<span style="color:#fff400">"fixed-column"</span>></span><br />
<span style="color:#FFFFFF;">Fixed width content</span></span><br />
<span style="color:#E4F2FD"></div><br />
<span style="color:#E4F2FD"><div class=<span style="color:#fff400">"elastic-column"</span>></span><br />
@@ -117,6 +115,17 @@
<div class="container full-height" style="padding-right:5px;">
<div class="container" style="border-top: dotted 1px #90ACC2;">
<h3>Challenge</h3>
+ <div class="unit">
+ <h4>Building a Grid System with Elastic</h4>
+ <p>Currently most CSS Frameworks are designed on the basis of a grid system.
+ Elastic is a more freestyle framework, so we will try to make a grid system
+ with Elastic 1.2</p>
+ </div>
+ <div class="unit">
+ <h4>Building a Widget</h4>
+ <p>Elastic seems to be a framework for page layout, but there is more.
+ So we eill build a gallery widget with Elastic</p>
+ </div>
</div>
</div>
</div>
@@ -124,13 +133,22 @@
<div class="container full-height" style="padding-left: 5px; padding-right: 5px;">
<div class="container" style="border-top: dotted 1px #90ACC2;">
<h3>News</h3>
+ <div class="unit">
+ Elastic 1.2.1 Released: This is a bug fix release
+ Elastic 1.2 Released: Lots of new features
+ </div>
</div>
</div>
</div>
<div class="column">
<div class="container full-height" style="padding-left: 5px;">
<div class="container" style="border-top: dotted 1px #90ACC2;">
- <h3>News</h3>
+ <h3>Tips and Tricks</h3>
+ <div class="unit">
+ Elastic class unit:
+ its the main class in the framework, reserved, only for internal usage
+ and its the begining of every building block of a layout
+ </div>
</div>
</div>
</div>
doc/index.html
@@ -1,19 +1,13 @@
/* Grade A browser clearfix */
-.two-columns:after,
-.three-columns:after,
-.four-columns:after,
.fixed-column:after,
-.fixed-left-column:after,
-.fixed-right-column:after,
-.fixed-center-column:after,
.elastic-column:after,
.column:after,
.unit:after,
.container:after,
.clearfix:after
{
- content : ".";
+ content : " ";
display : block;
height : 0;
clear : both;
@@ -21,13 +15,7 @@
}
/* msie6 clearfix */
-.two-columns,
-.three-columns,
-.four-columns,
.fixed-column,
-.fixed-left-column,
-.fixed-right-column,
-.fixed-center-column,
.elastic-column,
.column,
.unit,
@@ -46,12 +34,7 @@
.column,
.elastic-column,
-.fixed-column,
-.fixed-left-column,
-.elastic-left-column,
-.fixed-right-column,
-.elastic-right-column,
-.fixed-center-column
+.fixed-column
{
float : left;
}
grid.css
@@ -15,11 +15,10 @@
*/
(function($){
var CStyle = function (element, pseudoElement) {
- if (window.getComputedStyle) {
+ if (window.getComputedStyle){
return getComputedStyle(element, pseudoElement);
}
- else
- {
+ else{
return element.currentStyle;
}
};
@@ -44,23 +43,18 @@
egcl = egnl = 0;
econs = $.find('.two-columns, .three-columns, .four-columns, .auto-columns', context);
- //console.log(econs);
for(i = 0, il = econs.length; i < il; i++){
econ = econs[i];
- //console.log(econ)
econclass = econ.className;
- if( econclass.indexOf('two-columns') > -1){ egml = 2; }
- else if(econclass.indexOf('three-columns') > -1){ egml = 3; }
- else if(econclass.indexOf('four-columns') > -1 ){ egml = 4; }
- else if(econclass.indexOf('auto-columns') > -1 ){ egml = $.find('.column', econ).length;
- //console.log($.find('.column', econ))
+ if( econclass.indexOf('two-columns') > -1){ egml = 2; }
+ else if(econclass.indexOf('three-columns') > -1){ egml = 3; }
+ else if(econclass.indexOf('four-columns') > -1){ egml = 4; }
+ else if(econclass.indexOf('auto-columns') > -1){ egml = $.find('.column', econ).length;
if(egreg.test(econclass)){ egml = Number(RegExp.$2);}
- //console.log(egml)
}
-
+ else{continue;}
econ = $.find('> .container', econs[i])[0] || econ;
ecw = Math.round( width(econ) / egml);
- //console.log(ecw)
ecols = $.find('> .column, > .fixed-column, > .elastic-column', econ);
for(j = 0, jl = ecols.length; j < jl; j++){
efcs = [];
@@ -71,22 +65,20 @@
escol = 1;
if(esreg.test(ecol.className)){escol = Number(RegExp.$2);}
ecol.escol = escol;
- //console.log(ecol.escol)
egnl += escol;
if(egnl == egml || j == (jl - 1)){ eg.push(ecol); egcl = 0; rp = 1;}
- else if( egnl < egml) { eg.push(ecol); egcl = egnl;}
- else if(egnl > egml) { egcl = escol; rp = 1; ig = 1;}
+ else if(egnl < egml) { eg.push(ecol); egcl = egnl;}
+ else if(egnl > egml) { egcl = escol; rp = 1; ig = 1;}
if(rp){
for(k = 0, kl = eg.length; k < kl; k++){
ec = eg[k];
ecclass = ec.className;
- if(ecclass.indexOf('fixed-') > -1) { efcs.push(ec); efcsw += width(ec); }
+ if( ecclass.indexOf('fixed-') > -1){ efcs.push(ec); efcsw += width(ec); }
else if(ecclass.indexOf('elastic-') > -1){ eecs.push(ec); }
else { ecs.push(ec); ec.style.width = '10px'; ec.style.width = (ecw * ec.escol) + 'px'; ecsw += width(ec); }
}
-
ll = eecs.length;
if(ll > 0){
eecw = Math.round( ( width(econ) - ( ecsw + efcsw ) ) / ll);
@@ -102,11 +94,9 @@
eg = [];
egnl = 0;
}
-
if(ig){eg = [ecol];}
}
}
-
for(i in Elastic.helpers){Elastic.helpers[i](context);}
};
@@ -186,17 +176,3 @@ jQuery(window).bind('load', function(){
});
jQuery(document).bind('elastic', Elastic.refresh);
});
-
-/*
-jQuery(function(){
- Elastic();
- jQuery(document).bind('elastic', Elastic.refresh);
- jQuery(window).bind('resize', function(){
- Elastic.refresh();
- });
-
- if(!jQuery.browser.msie){
- jQuery(window).bind('load', Elastic.refresh)
- }
-});
-*/
helpers_jquery/engine.js
helpers_jquery/extensions.js
helpers_jquery/jquery.js
helpers_jquery/ui.js
test/test.html
7636adee4d63b9c85f0f7e40985ee4f2bcca07e7
fernando
trasvina@gmail.com
http://github.com/azendal/elastic/commit/49dbace7e811fa1061f4fb131c44183641626e8a
49dbace7e811fa1061f4fb131c44183641626e8a
2009-04-27T08:56:34-07:00
2009-04-27T08:56:34-07:00
add: minified package on production
improve: grid.css
8edd7ed2531cf4b90ef1993ce90ea66734c950e3
fernando
trasvina@gmail.com