'.$error_output.'

CSS 960 GRID PLUGIN PARAMETERS

'; foreach($params as $key=>$val) { if(is_bool($val)) {$output .= $key.' = '. boolval($val).'
';} else {$output .= $key.' = '.$val.'
';} } $output .= '

NO ERRORS

'; if($type=='fixe' && $css_grid) { $output .='

CSS 960 GRID PLUGIN Help For type Fixe

With_max parameter takes the value of with_min

CSS 960 GRID PLUGIN Help For css_handheld_1

Insert this meta viewport in your template into head part.

<meta name="viewport" content="width=device-width, initial-scale=1,target-densitydpi=device-dpi">

What does this do?

Generate a GRID CSS Framework base on 960 GRID SYSTEM, see examples here : 12 and 16 columns 960 GRID DEMO

How do I use it?

Just insert the tag {css_960_grid} in your stylesheet,

or assign it in a template or a page {css_960_grid assign=var_name} and use it on desired stylesheet [[$var_name]]

Then construct your grid template using appropriate class. Look at the links above to see how works this grid framework.
<div class="container_12">
<div class="grid_6">...</div> <div class="grid_6">...</div>
<div class="grid_4">...</div> <div class="grid_4">...</div> <div class="grid_4">...</div>
<div class="grid_3">...</div> <div class="grid_7">...</div> <div class="grid_2">...</div>
</div>

Type fluid or fixe : type =

You can choose between two types of grid : "fluid" or "fixe"

Type fluid (default)

{css_960_grid type="fluid" columns=12 align=center css="grid"}- shortcut : {css_960_grid} :
Generate a centered grid template having 92% wide divided in 12 columns.
Each column has 2% of margin on the left and right, which create 4% wide gutters between columns.

Needed parameters : columns (default 12)

Type fixe

{css_960_grid type="fixe" columns=12 width=960 gutter=20 align=center css="grid"}- shortcut : {css_960_grid type="fixe"} :
Generate a centered grid template having 960 pixels wide divided in 12 columns.
Each column has 10 pixels of margin on the left and right, which create 20 pixels wide gutters between columns.

Needed parameters : columns (default 12), width (default 960), gutter (default 20)

With parameter type="fixe", you aren't limited to only use 960 and you can use others values define by "width" parameter, but make sure that given parameters "width" divided by each "columns" values: result an integer.
example : {css_960_grid type="fixe" columns=16 width=1024}

Multi grids : columns="12,16,24"

Columns parameter accept integer as single value. {css_960_grid columns=12}
You can also define multiple columns in one way in order to use severals grids system in same template.
In this case, columns parameter accept only string as multiple values separated by comma.
{css_960_grid columns="12,16"}
{css_960_grid columns="12,16,24"} but you can do same and reduce css lines code with {css_960_grid columns=48}

Manage css output : css=

By default this plugin only output grid css (css="grid").
You can generate all css output using {css_960_grid css="all"} , return these css in this order : reset, text, grid, handheld_2, print.

You can split css in order to include each one into specific stylesheet : {css_960_grid css="print"} {css_960_grid css="reset"}

which CSS select

reset css :

Reset css is a stylesheet is to reduce browser inconsistencies : https://github.com/necolas/normalize.css

text css :

Text css is stylesheet pre-formated.

grid css :

Grid css is a stylesheet auto generated for grid template : 960 GRID SYSTEM

handheld css :

handheld_css1 is a responsive css based on device screen target and this parameter need device-width targeted screen values:
It need "handheld_devices" parameter which is device-width targets.
It need columns parameter or use 12 columns by default
example for width=960: {css_960_grid css=handheld_1 handheld_devices='959,854,800,768,720,600,540,480,320,240'}
if you set "width_min" parameter, the generated ouput css will only include "handheld_devices" widths that are smaller than "min_width".
It have class .no_handheld{display:none;} and for each values define in handheld_devices parameter ex: .no_handheld_480{display:none;}

You can linearize a floated grid using .linearize : ex in template <div class="grid_4 linearize">...</div>
or linearize severals grids in one container : ex in template <div class="container_12 linearize"><div class="grid_6">...</div><div class="grid_6">...</div></div>

<meta name="viewport" content="width=device-width, initial-scale=1,target-densitydpi=device-dpi">

handheld_css2 (true/false) is a responsive css for grid system from demo SIMPLEX template created by Goran ILIC.
It need columns parameter or use 12 columns by default
It have class .no_handheld{display:none;}
example : {css_960_grid css=handheld_2}

Naturally width min is not include in handheld css code
Both handheld css have class .no_handheld{display:none;}

print css :

Print css is stylesheet print-friendly.
It have class .no_print{display:none;}

Test it before use it

To prevent misundertanding, you can test the plugin in your template or a page and set parameter check=true
{css_960_grid check=true type='fixe' columns=12 width=960 gutter=20} in your template or a page, return all parameters or return detailed errors.

{css_960_grid type='fixe' columns=12 width=960 gutter=20} in your template or a page, show the "css code" which would be produced if you had inserted this tag in a stylesheet or a simple "errors warning" between /* */ to prevent breaking your style sheet code.

What parameters does it take?

GRID

• type (string "fixe" or "fluid") (default: "fluid" ) - Generate Fluid or fixe GRID CSS.
• align (string "center" or "left" or "right") (default: "center" ) - define template alignment.
• columns - (string or integer) (default: 12 ) define numbers of columns.
  single value : columns=12 or multiple values separated with comma ex: columns="12,16"
• width (integer) (default: 960 ) - define container template width.
• gutter (integer) (default: 20 ) - define gutter width.

• css (string) (default: "grid" ) - select output CSS reset text grid handheld_1 handheld_2 hack print
• handheld_devices (integer or string with comma) (default: not set ) - device-width targets ot use width handheld_1
• assign Assigns the content to a smarty parameter. Warning, you need to refresh cache stylesheet if you change a parameter value

• align = [ left / center / right ] (default: center) Allow to define which alignment apply for the template.
• width_min = [ integer ] (default: not set) Allow to define template min width.
• width_max = [ integer ] (default: not set) Allow to define template max width.
• check = [ boolean ] (default: false) : Ouput parameters values or errors if exist. Do not set TRUE in a stylesheet. but only in a template or page.

Exemples

GRID - 12 columns :

{css_960_grid type="fluid" align="center" columns=12 css=grid} shortcut {css_960_grid}

fixe 960 GRID - 12 columns, gutter 20 :

{css_960_grid type="fixe" align="center" columns=12 width=960 gutter=20 css=grid} shortcut {css_960_grid type="fixe"}

fixe 960 GRID - 12 14 16 columns, gutter 10 :

{css_960_grid type="fixe" align="center" columns='12,16,24' width=960 gutter=10 css=grid} shortcut {css_960_grid type="fixe" columns='12,16,24'}

fixe 1024 GRID - 8 16 columns, gutter 10 :

{css_960_grid type="fixe" columns="8,16" width=1024 gutter=10}

fluid GRID - 8 16 columns + width template min 960 max 1024: + reset css

{css_960_grid type="fluid" columns="8,16" width_max=1024 width_min=960 css="grid,reset"}

fixe 1024 GRID - 8 16 columns gutter 10, min width 960 , splited css reset / css grid + css_print / css handheld_1 for 480 320 240 scrren

{css_960_grid css=reset} : tag include in a reset stylesheet
{css_960_grid type='fixe' columns="8,16" width=1024 gutter=10 width_min=960 css="grid,print"} : tag include in first place in main stylesheet
{css_960_grid columns="8,16" css="handheld_1" handheld_devices='480,320,240' assign='mobile-css'} : tag include in template and call from specific stylesheet width [[$mobile-css]]
don't forget to include specific viewport for handheld_1 css

Author: Philippe THOMAS <devteam@aviapic.com>
plugin based on 960 GRID SYSTEM + Goran Ilic CSS: http://960.gs/

Version: 3.0.1

Change History:

1.0.0 - Initial version released.

1.1.0 - Add parameters : mobile, print, css_hack, hack_only.
next release will add parameters : mobile_only, print_only

2.0.0 - Check parameters and validation for outputed css
Display warnings if parameter check is true and errors exists
Add parameters : mobile_only, print_only

2.0.1 - Bug fixs for Fluid css values

3.0.1 - new tag and update reset css

3.0.2 - fixe replace bad values with comma for fluid grid css
add class .linearize extend responsive output for css_handheld_1