code generator for css grids in omega 3.x

Submitted by admin on Sat, 08/15/2015 - 15:00

<code>

<?php

$columns = 24;
$left_margin = 10;
$right_margin = 10;
$width = 1024;
$gutter = 20;

$column_width = ($width - ($columns - 1)* $gutter) / $columns;
$total_width = $width + $left_margin + $right_margin;

foreach (range(1, $columns) as $column) {
$grid[] = ".grid-" . $column;
$push[] = ".push-" . $column;
$pull[] = ".pull-" . $column;
$prefix[] = ".prefix-" . $column;
$suffix[] = ".suffix-" . $column;
}

$str = <<<EOF

/*
* ==========================================================
* Grid
* ==========================================================
*/

EOF;

print $str;

print implode(", ", $grid) . " { \n display: inline; \n float: left; \n position: relative; \n margin-left: 10px; \n margin-right: 10px; } \n \n ";

print implode(", ", $push) . " {\n position: relative; \n } \n \n";

print implode(", ", $pull) . " {\n position: relative; \n } \n \n";

$str ="

/*
* ==========================================================
* Alpha - Omega
* ==========================================================
*/

.alpha {
margin-left: 0;
}

.omega {
margin-right: 0;
}

/*
* ==========================================================
* Container
* ==========================================================
*/

body {
min-width: %s;
}

.container-%s {
margin-left: auto;
margin-right: auto;
width: %s;
}
";

print sprintf($str, $total_width . "px", $columns, $total_width . "px");

$str = <<<EOF

/*
* ==========================================================
* Columns
* ==========================================================
*/

EOF;

print $str;

for ($i=1; $i <= $columns; $i++) {
print " .container-12 .grid-" . $i . " { width: " . (($column_width * $i) + ($gutter * ($i - 1))) . "px; } \n";
}

$str = <<<EOF
/*
* ==========================================================
* Prefix
* ==========================================================
*/

EOF;

print $str;

for ($i=1; $i <= $columns - 1; $i++) {
print " .container-12 .prefix-" . $i . " { width: " . (($column_width + $gutter) * $i) . "px; } \n";
}

$str = <<<EOF

/*
* ==========================================================
* Suffix
* ==========================================================
*/

EOF;

print $str;

for ($i=1; $i <= $columns - 1; $i++) {
print " .container-12 .suffix-" . $i . " { width: " . (($column_width + $gutter) * $i) . "px; } \n";
}

$str = <<<EOF

/*
* ==========================================================
* Push
* ==========================================================
*/

EOF;

print $str;

for ($i=1; $i <= $columns - 1; $i++) {
print " .container-12 .push-" . $i . " { width: " . (($column_width + $gutter) * $i) . "px; } \n";
}

$str = <<<EOF

/*
* ==========================================================
* Pull
* ==========================================================
*/

EOF;

print $str;

for ($i=1; $i <= $columns - 1; $i++) {
print " .container-12 .pull-" . $i . " { width: -" . (($column_width + $gutter) * $i) . "px; } \n";
}

?>

</code>

Etiquetas