Skip to content

Instantly share code, notes, and snippets.

@mlconnor
Created December 30, 2011 16:30
Show Gist options
  • Save mlconnor/1540520 to your computer and use it in GitHub Desktop.
Save mlconnor/1540520 to your computer and use it in GitHub Desktop.
PHP Grid Builder
<?php
$column_width = 60;
$gutter_width = 20;
$columns = 12;
if ( isset($_GET['column_width']) ) {
$column_width = $_GET['column_width'];
}
if ( isset($_GET['gutter_width']) ) {
$gutter_width = $_GET['gutter_width'];
}
if ( isset($_GET['columns']) ) {
$columns = $_GET['columns'];
}
$margin = $gutter_width / 2;
$width = $columns * ($column_width + $gutter_width);
?>
body {
min-width: <?php print $width; ?>px;
}
/* Containers */
.container_<?php print $columns; ?> {
margin-left: auto;
margin-right: auto;
width: <?php print $width; ?>px;
}
/* Grid >> Global */
<?php
$column_list = array();
$push_list = array();
$pull_list = array();
$column_widths = array();
for ( $i = 1; $i <= $columns; $i++ ) {
$column_list []= ".grid_$i";
$push_list []= ".push_$i";
$pull_list []= ".pull_$i";
$grid_width = $i * ($column_width + $gutter_width) - $gutter_width;
$column_widths []= ".container_$columns .grid_$i { width:" . $grid_width . "px; }";
}
$prefix = array();
$suffix = array();
for ( $i = 1; $i < $columns; $i++ ) {
$prefix []= ".container_$columns .prefix_$i { padding-left:" . $i * ($column_width + $gutter_width) . "px; }";
$suffix []= ".container_$columns .suffix_$i { padding-right:" . $i * ($column_width + $gutter_width) . "px; }";
$push []= ".container_$columns .push_$i { left:" . $i * ($column_width + $gutter_width) . "px; }";
$pull []= ".container_$columns .pull_$i { left:-" . $i * ($column_width + $gutter_width) . "px; }";
}
print implode(",\n", $column_list);
?> {
display:inline;
float: left;
position: relative;
margin-left: <?php print $gutter_width / 2;?>px;
margin-right: <?php print $gutter_width / 2;?>px;
}
<?php
print implode(",\n", array_merge($push_list, $pull_list));
?> {
position:relative;
}
/* Grid >> Children (Alpha ~ First, Omega ~ Last) */
.alpha { margin-left: 0; }
.omega { margin-right: 0; }
<?php
print implode("\n", $column_widths) . "\n" .
implode("\n", $prefix) . "\n" .
implode("\n", $suffix) . "\n" .
implode("\n", $push) . "\n" .
implode("\n", $pull) . "\n";
?>
/* Clear Floated Elements */
/* http://sonspring.com/journal/clearing-floats */
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
.clearfix:before,
.clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:after {
clear: both;
}
/*
The following zoom:1 rule is specifically for IE6 + IE7.
Move to separate stylesheet if invalid CSS is a problem.
*/
.clearfix {
zoom: 1;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment