Yii-fluid-grid - 源码 - 源码 - 免费下载

Yii-fluid-grid

文件大小： unknow

源码售价： 5 个金币积分规则积分充值

资源说明：CSS framework for creating fluid layouts. Supports 100-percent (step of 5%), 12, 16 column layouts

##Page layout
Basic empty page must contain this layout:
```html


    


```

###`.body`
It is whole page canvas, uses all viewport space. Can be used for page background, you can specify page part adding `.body-header`, `.body-middle`, `.body-anythingblablabla` extended classes.

> Meanwhile `.body` canvas adds left and right page paddings, for comfortable reading. Page don't have to occupy browser window without reading margins, text reading becoming easier.

Note that even nested `.body` containers will keep same side paddings, it useful for compound backgrounds.

###`.wrap`
Used as content container, centered horizontally and having content width limit. It is useful to manage page width (minimum and maximum) if it built with numerous `.wrap` blocks:

```html    

    



    

...
```
[See this example at jsFiddle](http://jsfiddle.net/velosipedistorg/j6UK6/)

Then we shall mark-up `.wrap` blocks with columns.

##Columns
Class `.c` marks node as floating column, without width specification.

Classes beginning with `.w-` is width-modifiers, sets percentage with 5% step. `.w-15` sets 15% width to  anything.

> I said **anything** - it means not only columns can be fit do grid-based design. It is very common case, when we need to specify width to non-floated div, or `.inset` (read forward), or even text input. That is big advantage of splitting _width_ and _"columnizing"_ properties.

Also we have 12-column and 16-column grids, for "large" layout needs, and for compatibility with [960.gs](//960.gs)

###Gutters
Classes `.-c, .-c-, .c-` is used inside of column or just any container to specify column gutter.

`.clear` class used to "fix" floating elements heights, it has to be placed at the end of columns set.
We can also use `.clearfix` class added to columns parent node if present.

Now we can build example layout. Both column sets will give [same result](http://jsfiddle.net/velosipedistorg/j6UK6/1/):

```html


    Left column, gutter only on right


    Here we can place any content, it will be separated with gutters both on left & right sides.


    Right column, gutter only on left. Pretty narrow, huh :)





    
        Left column, gutter only on right
    
    
        Here we can place any content, it will be separated with gutters both on left & right sides.
    
    
    
        Right column, gutter only on left. Pretty narrow, huh :)
    

```

部分文件列表（点击文件名可查看文件内容）

					
									本源码包内暂不包含可直接显示的源代码文件，请下载源码包。