$params['min_width'], "max_width"=>$params['max_width'], "column_nb"=>$params['column_nb'], "gutter"=>$params['gutter']); foreach ($test as $key => $value) { ### test integers parameters if (!is_array($value)) { if (!preg_match('/[0-9]/',$value)) { ${'error_'.$key} = '
Error : Parameter "'.$key.'" must only use 0123456789.'; } elseif (!is_int($value))// Is the parameter an integer ? { $params[$key] = (int)$value; } //reset value if error if ($error_gutter) { $params['gutter'] = 20; //reset "gutter" to default value $error_gutter .= "Parameter reset to default value : 20"; } elseif (${'error_'.$key}) { $params["$key"] = 960; ${'error_'.$key} .= "Parameter reset to default value : 960"; } // reset "min_width" or "max_width" parameter to default value } ### test only "column_nb" parameter like an integer if (is_array($value)) { unset($column_id,$column_value); foreach ($value as $column_id => $column_value) { if (!preg_match('/[0-9]/',$column_value)) { ${'error_'.$key} = '
Error : Parameter "'.$key.'" must be a STRING packaging INTEGER using 0123456789 separated with comma. Parameter reset to default value : 12"'; $params['column_nb'] = explode(',','12'); } elseif (!is_int($column_nb))// Is the parameter an integer ? { $params[$key][$column_id] = (int)$column_value; } // check ratio for valid 960 GRID and "type"=fixed if ( $params['type'] === 'fixed' && !is_int($params['max_width']/$column_value)) { $error_ratio = 'Bad RATIO value : "max_width" divided by "column_nb" must be an integer. Reset defaults values : max_width=960 column_nb="12" '; $params['column_nb'] = explode(',','12'); $params['max_width'] = 960; } } unset($column_id,$column_value); } } ### Test strings values unset($test,$key,$value); $test = array ("type"=>$params['type'], "align"=>$params['align']); foreach ($test as $key => $value) { switch ($key) { case "type" : //default value : "fixed" $unit = "px"; $container_width = $params['max_width']; switch ($value) { case "fluid" : $container_width = "92"; $params['gutter'] ="2"; $unit="%"; break; case "fixed" : $params['min_width'] = $params['max_width']; break; default : //keep default value $params['type'] = 'fixed'; $params['min_width'] = $params['max_width']; ${'error_'.$key} = '
Error : Parameter "'.$key.'" must be a STRING and choose between "fluid" or "fixed". Default value "fixed" is used.'; }; break; case "align" : // default value "center" $container_margin= "0 auto ;"; switch ($value) { case "left" : $container_margin= "0 auto 0 0 ;"; break; case "right" : $container_margin= "0 0 0 auto ;"; break; case "center" : //keep default value break; default : //keep default value $params['align'] = 'center'; ${'error_'.$key} = '
Error : Parameter "'.$key.'" must be a STRING and choose between "left" or "right" or "center". Default value "center" is used.'; break; }; break; } } unset($test,$key,$value); ### Display only values - don't generate & ouput CSS if ($check) { echo << align = "$align" $error_align
min_width = $min_width $error_min_width
max_width = $max_width $error_max_width
column_nb = "$column_check" $error_column_nb
gutter = $gutter $error_gutter
$error_ratio

OPTIONS :

check = $check
reset_css = $reset_960
text_css = $text_960
mobile_css =$mobile_960
print_css = $print_960
hack_css = $hack_css
hack_only = $hack_only
mobile_only = $mobile_only
print_only = $print_only
EOF; } else { ### GENERATE OUPUT CSS : .container_IDs {} ####################################### $column_count = sizeof($params['column_nb']); $column_max_value = max($params['column_nb']); sort($params['column_nb']); // container IDs unset ($value); foreach ($params['column_nb'] as $value) { $separator = ", "; if ($value == $column_max_value) { unset($separator); } $container_IDs .= ".container_".$value.$separator; // cf line 257 268 284 } unset ($value); // Generate ouput : .container_IDs {} $output_container = "$container_IDs { width: ".$container_width.$unit." ; min-width: ".$params['min_width']."px; max-width: ".$params['max_width']."px; margin: ".$container_margin." } "; //cf line 238 ### GENERATE OUPUT CSS : .grid_IDs {} AND .push_IDs, .pull_IDs {} ####################################### // grid, pull, push : IDs $grid_margin = $params['gutter'] /2; for ($id=1; $id <= $column_max_value ; $id++) { $separator = ", "; if($id == $column_max_value) { unset($separator); } $grid_IDs .= ".grid_".$id.$separator; if($params['type'] =="fixed") { $push_pull_IDs .= ".push_".$id.$separator." .pull_".$id.$separator." "; } } unset($id); // Generate ouput : .grid_IDs {} $output_grid = $grid_IDs." { display: inline ; float: left ; margin-left : ".$grid_margin.$unit." ; margin-right: ".$grid_margin.$unit." ; } "; //cf line 239 // Generate ouput : .push_IDs, .pull_IDs {} if($params['type'] =="fixed") { $output_push_pull = $push_pull_IDs." { position:relative; } "; // cf line 240 } ### GENERATE all others OUPUT CSS ####################################### unset ($i,$value); foreach ($params['column_nb'] as $value) { for ($i=1; $i <= $value ; $i++) { if ($params['type'] == "fluid") { $common_width = round((100/$value)*$i,3); } else { $common_width = ($params['max_width']/$value)*$i; } $grid_width = $common_width - $params['gutter']; $ouput_grid_width .= ".container_$value .grid_$i {width: ".$grid_width.$unit." ;} "; // cf line 246 if($i < $value) { $ouput_grid_prefix .= ".container_$value .prefix_$i {padding-left: ".$common_width.$unit." ;} "; // cf line 247 $ouput_grid_suffix .= ".container_$value .suffix_$i {padding-right: ".$common_width.$unit." ;} "; // cf line 248 $ouput_grid_push .= ".container_$value .push_$i {left: ".$common_width.$unit." ;} "; // cf line 249 $ouput_grid_pull .= ".container_$value .pull_$i {left: -".$common_width.$unit." ;} "; // cf line 250 } $separator = ", "; if ($i == $column_max_value) { unset($separator); } $container_grid_IDs .= ".container_".$value." .grid_".$i.$separator." "; // cf line 271 289 $container_prefix_IDs .= ".container_".$value." .prefix_".$i.$separator." "; // cf line 301 $container_suffix_IDs .= ".container_".$value." .suffix_".$i.$separator." "; // cf line 302 $container_push_IDs .= ".container_".$value." .push_".$i.$separator." "; // cf line 30644 $container_pull_IDs .= ".container_".$value." .pull_".$i.$separator." "; // cf line 307 unset($separator); } $separator = ", "; if ($value == $column_max_value) { unset($separator); } // `generate css -section : Clear Floated Elements $container_IDs_before .= ".container_".$value.":before".$separator." "; //cf line 344 $container_IDs_after .= ".container_".$value.":after".$separator." "; //cf line 343 358 // use this output for IE6 IE7 fixe (see bottom of output css) $container_IDs_fixe .= ".container_".$value.$separator." "; //cf line 368 unset($separator); } unset ($i,$value); ### manage output css ####################################### // ouput main css $main_css = true; if ($hack_only || $mobile_only || $print_only ) { $reset_960 = $text_960 = $main_css = $hack_css = $mobile_960 = $print_960 = false; ### Display only HACK ouput CSS if ($hack_only && !$mobile_only && !$print_only) { $hack_css = true; } ### Display only Mobile ouput CSS elseif (!$hack_only && $mobile_only && !$print_only) { $mobile_960 = true; } ### Display only Mobile ouput CSS elseif (!$hack_only && !$mobile_only && $print_only) { $print_960 = true; } else // diplay all css { $reset_960 = $text_960 = $main_css = $hack_css = $mobile_960 = $print_960 = true; } } ### RESET CSS : true ######################################################################################################################" if ($reset_960) { echo " /* XHTML, HTML4, HTML5 Reset ----------------------------------------------------------------------------------------------------*/ a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,dialog,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,meter,nav,object,ol,output,p,pre,progress,q,rp,rt,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video,xmp{border:0;margin:0;padding:0;font-size:100%}html,body{height:100%}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}b,strong{font-weight:bold}img{color:transparent;font-size:0;vertical-align:middle;-ms-interpolation-mode:bicubic}ol,ul{list-style:none}li{display:list-item}table{border-collapse:collapse;border-spacing:0}th,td,caption{font-weight:normal;vertical-align:top;text-align:left}q{quotes:none}q:before,q:after{content:'';content:none}sub,sup,small{font-size:75%}sub,sup{line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}svg{overflow:hidden} "; } ### TEXT CSS : true ######################################################################################################################" if($text_960) { echo " /* 960 Grid System ~ Text CSS. ----------------------------------------------------------------------------------------------------*/ body{font:13px/1.5 'Helvetica Neue',Arial,'Liberation Sans',FreeSans,sans-serif}pre,code{font-family:'DejaVu Sans Mono',Menlo,Consolas,monospace}hr{border:0 solid #ccc;border-top-width:1px;clear:both;height:0}h1{font-size:25px}h2{font-size:23px}h3{font-size:21px}h4{font-size:19px}h5{font-size:17px}h6{font-size:15px}ol{list-style:decimal}ul{list-style:disc}li{margin-left:30px}p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset,figure{margin-bottom:20px} "; } ### main CSS : true ######################################################################################################################" if ($main_css) { ### GENERAL OUTPUT CSS echo <<

What does this do?

Generate 960 GRID CSS

How do I use it?

Just insert the tag into your stylesheet (template or page) like: {css_960_grid}

What parameters does it take?

(optional) check (true/false) (default: false )- only display your params. - no output css
(optional) type (string "fixed" or "fluid") (default: "fixed" ) - Generate Fluid or Fixed CSS template.
(optional) align (string "center" or "left" or "right") (default: "center" ) - define your template alignment.
(optional) max_width (integer) (default: 960 ) - define max width template.
(optional) min_width - (integer) (default: 960 ) define min width template. (if type="fixed" min_width will be overwrite with the max_value)
(optional) column_nb - (string "number") (default: "12" ) define numbers of columns for the grid. (multiple values separated with comma ex: column_nb="12,16")
(optional) gutter (integer) (default: 20 ) - define gutter width.
(optional) reset_css (true/false) (default: true ) - include 960 RESET CSS.
(optional) text_css (true/false) (default: true ) - include 960 TEXT CSS.
(optional) hack_css (true/false) (default: true ) - include hack CSS for Ie6/Ie7.
(optional) mobile_css (true/false) (default: true ) - include mobile CSS.
(optional) print_css (true/false) (default: true ) - include print CSS. (don't forget to set your stylesheet type : ALL or SCREEN PRINT)

Three optionals parameters for only displaying some CSS part - usefull for multiples css stylesheet
use only single one of these options otherwise these options will be ignored.

(optional) hack_only (true/false) (default: false ) - Only output hack CSS for Ie6/Ie7. - (don't forget to set your stylesheet type : ALL or SCREEN PRINT)
(optional) mobile_only (true/false) (default: false ) - Only output mobile CSS. - (don't forget to set your stylesheet type : SCREEN or HANDHELD)
(optional) print_only (true/false) (default: false ) - Only output print CSS. - (don't forget to set your stylesheet type : PRINT)

Hints and Tips

-A good idea might be to choose a number of column in this list : 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480
-This plugin generate a CSS based on 960 GRID SYSTEM and 960 is divisible by these values.
-This makes it a highly flexible base number to work with. get more infos here http://960.gs/

You aren't limited to only use 960 and you can use an other value define by "max_width" parameter,
but with parameter type="fixed" make sure that given parameters "max_width" divided by "column_nb" result is an integer.
example : type="fixed" max_widh=1000 column_nb="10" ratio result = 100 - correct value.
example : type="fixed" max_widh=1000 column_nb="11" ratio result = 90,909 - bad value -> defaults values overwrite yours

Exemples

Standard 960 GRID - 12 columns :

{css_960_grid type="fixed" align="center" max_width=960 min_width=960 column_nb="12" gutter=20}
or just {css_960_grid}

Standard 960 GRID - 16 columns :

{css_960_grid type="fixed" align="center" max_width=960 min_width=960 column_nb="16" gutter=20}
or just {css_960_grid column="16"}

Standard 960 GRID - 24 columns :

{css_960_grid type="fixed" align="center" max_width=960 min_width=960 column_nb="24" gutter=10}
or just {css_960_grid column="24" gutter=10}

Multiples 960 GRID - 12 and 16 columns :

{css_960_grid column="12,16"}

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

Version: 2.0.0

Change History:

1.0.0 - Initial version released.

1.1.0 - Add parameters : mobile, print, hack_css, 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