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.
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)
even this may sound like many files, on production state you only need 2:
- elastic.css
- elastic.js
this are packed in the production folder
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
- Safari >=3 mac, windows
- Opera >=9.6 linux
- Internet Explorer >=7
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
- .column.fixed never modified
- .column
- .column.elastic
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.
Since version 2.0 almost all development has been around performance and accuracy meaning that
elastic is not gaining features, it seems that most of the cases are covered, and for the ones that
may be missing, you can still use old css and javascript, elastic won’t complain.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" media="print" href="elastic.css" />
<script src="jquery.js" type="text/javascript" language="javascript" charset="utf-8"></script>
<script src="elastic.js" type="text/javascript" language="javascript" charset="utf-8"></script>
</head>
<body>
<div class="unit">
content
</div>
</body>
</html>
<div class="unit">
<div>column content</div>
</div>
<div class="unit on-2 columns">
<div class="column">first column content</div>
<div class="column">second column content</div>
</div>
<div class="unit on-3 columns">
<div class="column">first column content</div>
<div class="column">second column content</div>
<div class="column">third column content</div>
</div>
<div class="unit on-4 columns">
<div class="column">first column content</div>
<div class="column">second column content</div>
<div class="column">third column content</div>
<div class="column">fourth column content</div>
</div>
<div class="unit columns">
<div class="column">column content</div>
<div class="column">column content</div>
<div class="column">column content</div>
<div class="column">column content</div>
<div class="column">column content</div>
<div class="column">column content</div>
<div class="column">column content</div>
</div>
Well you can, but currently not for auto-columns. and it is called span
<div class="unit on-4 columns">
<div class="column">first column content</div>
<div class="column">second column content</div>
<div class="column span-2">third column content spawned as a double column</div>
</div>
<div class="unit on-4 columns">
<div class="column">first column content</div>
<div class="column span-3">second column content spawned as a triple column</div>
</div>
Complex layout are accomplished by combinations of the basic for layout units, and basic overrides on your skin
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 */
}
<div class="unit on-2 columns">
<div class="column">first column content</div>
<div class="column">second column content</div>
</div>
<div class="unit on-3 columns">
<div class="column">first column content</div>
<div class="column">second column content</div>
<div class="column">third column content</div>
</div>
<div class="unit on-2 columns">
<div class="column three-columns">
<div class="column">first column content</div>
<div class="column">second column content</div>
<div class="column">third column content</div>
</div>
<div class="column">second column content</div>
</div>
<div class="unit on-3 columns">
<div class="column">first column content</div>
<div class="column">second column content</div>
<div class="column">third column content</div>
</div>
<div class="unit columns">
<div class="fixed column" style="width:250px;">first column content</div>
<div class="elastic column">second column content</div>
</div>
<div class="unit columns">
<div class="elastic column">second column content</div>
<div class="fixed column" style="width:250px;">second column content</div>
</div>
<div class="unit">
<div class="container" style="height:200px;">
<div class="unit">
some text
</div>
<!-- The next unit will occupy the remaining space in the contianer -->
<div class="unit elastic-height">
some text, check documentation for overflow integration
</div>
</div>
</div>
<div class="unit columns">
<div class="fixed column">let elastic get it</div>
<div class="elastic column">second column content</div>
</div>
<div class="unit columns">
<div class="elastic column">second column content</div>
<div class="fixed column" style="width:250px;">second column content</div>
</div>
<div class="unit on-3 columns">
<div class="column">
column
</div>
<div class="column">
column
</div>
<div class="column">
column
</div>
<div class="column span-2">
column
</div>
<div class="column">
column
</div>
</div>
<div class="unit columns same-height">
<div class="column">first column content</div>
<div class="column">second column content</div>
</div>
<div class="unit columns same-height">
<div class="column" style="height:50px;">first column content</div>
<div class="column">
<div class="container vertical-center" style="">
second column content
</div>
</div>
</div>
<div class="unit on-2 columns same-height">
<div class="column">first column content</div>
<div class="column">
<input type="text" class="full-width" name="some_name" value="" id="" />
</div>
</div>
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.
<div class="unit columns adaptive-200-300 same-height">
<div class="column">first column content</div>
<div class="column">first column content</div>
<div class="column">first column content</div>
<div class="column">first column content</div>
<div class="column">first column content</div>
</div>
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.
<div class="unit position-body">body 1</div>
<div class="unit position-footer">footer 1</div>
<div class="unit position-body">body 2</div>
<div class="unit on-2 columns same-height">
<div class="column display body"></div>
<div class="column display footer"></div>
</div>
From this html code you will get this after Elastic processes.
<div class="unit on-2 columns same-height">
<div class="column display body">
<div class="unit position-body">body 1</div>
<div class="unit position-body">body 2</div>
</div>
<div class="column display footer">
<div class="unit position-footer">footer 1</div>
</div>
</div>
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
<div class="unit on-2 columns">
<div class="container same-height" style="padding:10px;">
<div class="column">first column content</div>
<div class="column">second column content</div>
</div>
</div>
<div class="unit on-2 columns same-height">
<div class="column">
<div class="container" style="margin-right:5px;">
first column content
</div>
</div>
<div class="column">
<div class="container" style="margin-left:5px;">
second column content
</div>
</div>
</div>
<div class="unit no-print">
content does not get printed
</div>
<div class="unit no-print-content">
content does not get printed but uses space
</div>
<div class="unit print-only">
content does get printed but not seen on screen
</div>
<script type="text/javascript" language="javascript" charset="utf-8">
// direct call
Elastic.refresh(context);
</script>
<script type="text/javascript" language="javascript" charset="utf-8">
// direct call
Elastic.configuration.refreshOnResize = false;
</script>
Elastic now provides an event system, that gets very usefull when creating widgets and some special cases
<script type="text/javascript" language="javascript" charset="utf-8">
// Do something before elastic initializes
jQuery(document).bind('elastic:beforeInitialize', function(){ /* code here */});
// Do something after elastic initializes
jQuery(document).bind('elastic:initialize', function(){ /* code here */});
// Do something before elastic does some refresh
jQuery(document).bind('elastic:beforeRefresh', function(){ /* code here */});
// Do something after elastic does some refresh
jQuery(document).bind('elastic:refresh', function(){ /* code here */});
// Do something before elastic does reset
jQuery(document).bind('elastic:beforeReset', function(){ /* code here */});
// Do something after elastic does some reset
jQuery(document).bind('elastic:reset', function(){ /* code here */});
</script>
We have an issue tracker for bugs and feature requests and a Google Group for discussion on the usage of the framework.
You are very welcome to contribute. Just fork the git repository and create a new issue, send a pull request or contact us personally.
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)