LP6 Style Guide: CSS Minification

styles.min.php

This file in /common/css contains the php functions that control minification. Since the file is natively in php, first we generated a content-type header of text/css:

				
	header('Content-type: text/css');
				
			

compress($minify)

This php function uses regular expression replacement to strip out comments, spaces, tabs, lines, etc. to perform a simply minification of our stylesheets.

				
	function compress($minify) {
		/* remove comments */
		$minify = preg_replace( '!/\*[^*]*\*+([^/][^*]*\*+)*/!' , '' , $minify );
		/* remove tabs, spaces, newlines, etc. */
		$minify = preg_replace('/\s+/S', " ", $minify);
		return $minify;
	}
				
			

ob_start(compress)

This function turns output buffering on. While output buffering is active no output is sent from the script (other than headers), instead the output is stored in an internal buffer. This lets us find and minify all the supplied stylesheets that are then stored in $minify which is returned when we the output buffer ends and flushes. We now have a single minified output of all our supplied CSS.

				
	ob_start("compress");
		/* css files for combining */
		include("../../_templates/lp6/css/root.css");
		include("fontawesome.css");
		include("../../_templates/lp6/css/default.css");
		include("../../_templates/lp6/css/typography.css");
		include("../../_templates/lp6/css/layout.css");
		include("../../_templates/lp6/css/panes.css");
		include("../../_templates/lp6/css/facts.css");
		include("../../_templates/lp6/css/tables.css");
		include("../../_templates/lp6/css/buttons.css");
		include("../../_templates/lp6/css/hero.css");
		include("../../_templates/lp6/css/forms.css");
		include("../../_templates/lp6/css/rfi-overlay.css");
		include("../../_templates/lp6/css/flex-grid.css");
		include("../../_templates/lp6/css/tooltips.css");
		include("../../_templates/lp6/css/toggles.css");
		include("../../_templates/lp6/css/modals.css");
		include("../../_templates/lp6/css/degree-finder.css");
	ob_end_flush();
				
			

$GLOBALS["cssMin"]

This php variable functions as a TRUE/FALSE flag for toggling the minify mode on/off. We're going to set this variable to TRUE at the template level. An overrid can be set at the page level for individual page testing. Change value to FALSE at the template level LOCALLY only. (Note that CSS variable ponyfill fails in IE when unminified.)

				
	//Toggles Minify On
	$GLOBALS["cssMin"] = TRUE;

	//Toggles Minify Off
	$GLOBALS["cssMin"] = FALSE;