Sometimes you will want to change how HeadJS behaves by enabling or disabling certain features.
This is the default configuration that HeadJS ships with
{% highlight js %}
conf = {
screens : [240, 320, 480, 640, 768, 800, 1024, 1280, 1440, 1680, 1920],
screensCss: { "gt": true, "gte": false, "lt": true, "lte": false, "eq": false },
browsers : [
{ ie: { min: 6, max: 11 } }
//,{ chrome : { min: 8, max: 31 } }
//,{ ff : { min: 3, max: 26 } }
//,{ ios : { min: 3, max: 7 } }
//,{ android: { min: 2, max: 4 } }
//,{ webkit : { min: 9, max: 12 } }
//,{ opera : { min: 9, max: 12 } }
],
browserCss: { "gt": true, "gte": false, "lt": true, "lte": false, "eq": true },
html5 : true,
page : "-page",
section : "-section",
head : "head"
};
{% endhighlight %}
If you wanted to change what screen breakpoints HeadJS uses, then you would do something like this
{% highlight html %}
{% endhighlight %}
The same goes for all the other configurable variables. Just make sure var head_conf is declared BEFORE you include HeadJS.
- screens
- Width breakpoints for which lt,lte,gt,gte,eq can be generated (.gt-800, .lt-1680)
- screensCss
- Enables/Disables the actual insertion of those breakpoints into the HTML
- browsers
- Browser/Version breakpoints for which lt,lte,gt,gte,eq can be generated (.ie8, .lt-ie9)
- browserCss
- Enables/Disables the actual insertion of those breakpoints into the HTML
- html5
- When enabled, IE8 and less will have the « HTML5 Shim » injected, which adds compatibility for the following HTML5 elements: abbr, article, aside, audio, canvas, details, figcaption, figure, footer, header, hgroup, main, mark, meter, nav, output, progress, section, summary, time, video
- page
- Suffix used by the « CSS Router » when detecting pages (#v1-page)
- section
- Suffix used by the « CSS Router » when detecting page sections (.api-section)
- head
- Name of the variable that should be used for HeadJS. If set to something else like: test, you would call test.load() instead of head.load()