logo
About
Blog
Documentation
Downloads

Elastic CSS Framework is a full-featured framework to layout websites and web-based applications, it provides a non intrusive code base to develop fast and easy.

In a few words, Elastic is there when you need to layout fast, and accuratelly, any type of layout. any combination of liquid, fixed, and elastic.

Unleash the power of helpers. Elastic provides an unobtrusive set of javascript helpers to accomplish even more than what css can do. Create same-height columns, forget about using .clearfix, and dont limit yourself to 12, 14, or 16 columns.

And its both, open source and cross-browser.

<div class="unit two-columns same-height">
  <div class="fixed-column side-bar">
    Fixed width content
  </div>
  <div class="elastic-column content">
    Width variable content
  </div>
</div>

Elastic provides a declarative syntax language to define the layout structure and behaviour. Its like having a conversation with your layout.

This way you dont have to remember crypticclass names, just express what you want.

Request two, three, four, or auto-columns.
Let Elastic get the width of fixed width columns.
Call for same-height or full-height.

Challenge

Building a Grid System with Elastic

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

Building a Widget

Elastic seems to be a framework for page layout, but there is more. So we eill build a gallery widget with Elastic

News

Elastic 1.2.3 Released: Events support
Elastic 1.2.1 Released: This is a bug fix release
Elastic 1.2 Released: Lots of new features

Tips and Tricks

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