Overview

The Header configuration array works in conjunction with a call to expTheme::head(); This allows you to pass certain configurations to the CSS Engine, as well as letting exponent know what doctype you're using.

Array Configurations

"xhtml"

• This takes a boolean value (true/false, defaults to false) to establish whether or not the page should be xhtml compliant, primarily in regards to 'tag' closing.

"normalize"

• This takes a boolean value (true/false, defaults to false) to tell Exponent to load the 'normalize.css' stylesheet first into Exponent's CSS Engine.  Normalize.css is the modern standard replacing many of the older 'reset' type stylesheets.  Normalize is automatically included with Twitter Bootstrap v3

"css_primer"

• This takes an array of paths to specific CSS files to be loaded first (after normalize.css) into Exponent's CSS Engine.  Since stylesheets cascade, it is sometimes desired to have a system type stylesheet load early in the chain so it will be overridden by the theme's styles.

"framework"

• This takes a string name of the framework to load.  It is an easy way to ensure all the basic scripts and stylesheets for the specified framework are loaded.  Currently there are fourframeworks available: 'bootstrap3', 'bootstrap', 'jquery', and 'yui'.
  • 'bootstrap3' - this setting loads all the Twitter Bootstrap v3 and jQuery basic scripts and stylesheets.  It also gives priority to any bootstrap3 specific form controls and smarty plugins over bootstrap and jquery ones, then system ones.
  • 'bootstrap' - this setting loads all the Twitter Bootstrap and jQuery basic scripts and stylesheets.  It also gives priority to any bootstrap specific form controls and smarty plugins over jquery ones, then system ones.
  • 'jquery' - this setting loads the jQuery script.  It also gives priority to any jquery specific form controls and smarty plugins over system ones.  In particular it will provide more modern 'controls' to an otherwise generic theme.
  • 'yui' (default) - this entry is not necessary since the system always ensures that YUI is loaded (if needed) and available.
  • The theme's form controls and smarty plugins always take precedence over bootstrap3, bootstrap, jquery, and system ones.

"lesscss"

• This takes an array of paths to specific LESS files to be complied to CSS files and then loaded in to Exponent's CSS Engine.  The .less files should be within a /less folder and will be compiled to the same named .css file in the /css folder of the same parent as the /less folder.  The .css file will be recompiled if necessary whenever the source files or variables change.

"lessprimer"

• This takes an array of paths to specific LESS files to be complied to CSS files and then loaded first in to Exponent's CSS Engine.  The .less files should be within a /less folder and will be compiled to the same named .css file in the /css folder of the same parent as the /less folder.  The .css file will be recompiled if necessary whenever the source files or variables change.

"lessvars"

• This takes an associative array of (global type) variables to pass to LESS files being complied.  These variables are applied to both the 'lesscss' and 'lessprimer' files and the 'css_theme' .less files.

“css_core”

• css_core is an array of system stylesheet names sans the .css/.less ending.  It allows you to easily reference system stylesheets widely used throughout Exponent. This directory is located in /framework/core/assets/css/. In the core_css index of our config array, we’re simply specifying the name or names of the common stylesheets we wish to include, sans the .css extension. In demotheme’s case, we’re specifying that we only want common,css to be included by default.

"css_links"

• This takes a boolean value (true/false, defaults to true) to tell Exponent whether or not to load CSS files linked in via the {css} smarty plugin. As the page executes and various modules are loaded, certain views will specify the use of stylesheets needed for default display. The css_links shows whether or not we’d like Exponent to allow the stylesheets called by the view to be included, or not.  This does not affect the loading of 'primer' nor 'core' stylesheets, nor inline style commands.  This is provided more as a trouble-shooting feature.

"css_theme"

• By default css_theme will allow you to specify true to include all the stylesheets found in /themes/demotheme/css/ and /themes/demotheme/less/, false to include none of them.  The default is set to true.
• css_theme may also be an array of stylesheets names (sans the .css extension) to be included at run time. Most themers will always want to set css_theme to true, but in certain cases may want to only include certain theme stylesheets, say for a homepage, or mobile-friendly subtheme.
  • You may also specify the name of .less LESS files found in the /less folder of the theme to be complied into CSS files.  The .less files will be compiled to the same named .css file in the /css folder of the theme folder.  The .css file will be recompiled if the associated .less file(s) is newer or the passed variables ('lessvars') has changed.

"viewport"

• By default, Exponent adds a standard meta viewport entry ('width=device-width, user-scalable=yes') used for responsive displays on devices.  But it can be adjusted using this setting which holds a named array.
  • 'width' determines the content width with a default of the device width
  • 'height' determines the content height
  • 'initial_scale' determines the initial zoom level
  • 'minimum_scale' determines the lowest zoom level
  • 'maximum_scale' determines the highest zoom level
  • 'user_scalable' determines if the user can adjust the zoom setting with a default of 'yes' or the optional 'no'

"meta"

• ​Additionally there are several entries in an array parameter named 'meta', which can be used to REMOVE standard meta tags and stylesheet entries from the page markup for specialized applications if they are set to 'false':
  • 'content_type' when set will remove the meta content type entry
  • 'content_language' when set will remove the meta content language entry
  • 'generator' when set will remove the meta generator entry which is set to the Exponent CMS and the version number
  • 'keywords' when set will remove the meta keywords entry which is used by search engines - This one may be desired since very few search engines use this meta tag and it could actually cause the page to be marked as spam!
  • 'description' when set will remove the meta description entry which is used by search engines
  • 'canonical' when set will remove the meta canonical link which is used by search engines
  • 'viewport' when set will remove the standard meta viewport entry
  • 'ie_compat' when set to 'false' will remove/not add the four stylesheets used to overcome issues in earlier releases of Internet Explorer

Example configuration array being passed to expTheme::head()

<?php
expTheme::head(array(
     "xhtml"=>false,
     "normalize"=>true,
     "framework"=>"bootstrap",
     "viewport"=>array(
         "width"=>"device-width",  // html5 default is 980
         "height"=>"device-height",  // html5 default is unset
         "initial_scale"=>1,  // html5 default is unset
         "minimum_scale"=>0.25,  // html5 default is 0.25
         "maximum_scale"=>5.0,  // html5 default is 1.6
         "user_scalable"=>'yes',  // html5 default is yes
     ),
     "meta"=>array(
         "content_type"=>false,
         "content_language"=>false,
         "generator"=>false,
         "keywords"=>false,
         "description"=>false,
         "canonical"=>false,
         "viewport"=>false,
         "ie_compat"=>false,
     ),
     "css_primer"=>array(
         YUI3_PATH."cssreset/cssreset-min.css",
         YUI3_PATH."cssfonts/cssfonts-min.css",
         YUI3_PATH."cssgrids/cssgrids-min.css"
     ),
     "lesscss"=>array(
          "external/bootstrap/less/bootstrap.less",
          "external/bootstrap/less/responsive.less",
     ),
     "lessvars"=>array(
          'swatch'=>SWATCH,
          'special'=>"#FFEEDD"
     ),
     "css_core"=>array(
          "common"
     ),
     "css_links"=>true,
     "css_theme"=>true
));
?>

This is a truly fictitious config since 'normalize' and the old yui reset stylesheets are redundant, and the two .less files listed are automatically loaded when the framework is set to 'bootstrap.'