Elastic 是一个简单的 CSS 布局框架

Elastic 是一个简单的 CSS 布局框架

Elastic CSS Framework

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.

Foundation

Elastic is organized in several files

reset.css: unifies the css of the browserbase.css: builds a base to work onfonts.css: sets the font basegrid.css: layout componentsprint.css: layout printing componentsjquery.js: jquery to simplify the creation of helperselastic.js: subpixel rounding, and special helpersskin.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.csselastic.js

this are packed in the production folder

Browser support

Our team has been able to test and confirm support layouts made with elastic in the following browsers:

Firefox 2 mac, windows, linuxFirefox >=3 mac, windows, linuxSafari >=3 mac, windowsOpera >=9.6 linuxInternet Explorer >=7

About subpixel rounding

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

The order is this:

.column.fixed never modified.column.column.elastic

Engine performance

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.

Basic layouts

Make a layout based on 1 column

Make a layout based on 2 columns

Make a layout based on 3 columns

Make a layout based on 4 columns

But i really really need more columns

This things is like tables, can i have span?

Well you can, but currently not for auto-columns. and it is called span

Complex layouts

Complex layout are accomplished by combinations of the basic for layout units, and basic overrides on your skin

Controlling the width: the elastic, the fluid and the liquid

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 */}

Make a layout based on 2 columns and a 3 columns below that

Make a layout of 2 columns and the left column contain 3 columns

Advanced layout features

Make a column fixed and the other elastic

Elastic height

How about i dont know the width of fixed-column

How about a 3×3 layout

Make columns of same height

Centering on the vertical axis

full-width. This one is cool for inputs

Make adaptive layouts.

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.

Layouts

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.

From this html code you will get this after Elastic processes.

About Padding and Margin

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

separate columns form its container

Separate columns from each other

Controlling printing

Hide something on printed version

Hide something on printed version but keep space

Show something on printed version only

Javascript API

Telling elastic to refresh calculations

Telling elastic to not refresh calculations on resize

Event System

Elastic now provides an event system, that gets very usefull when creating widgets and some special cases

Reserved Classescentervertical-center

Help and Contact

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.

Contributors

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)

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。