Configuration

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 = { widths : [240, 320, 480, 640, 768, 800, 1024, 1280, 1366, 1440, 1680, 1920], heights : [320, 480, 600, 768, 800, 900, 1050], widthCss : { "gt": true, "lt": true, }, heightCss : { "gt": true, "lt": true, }, browsers : { "ie" : [7, 11] //,"ff" : [4, 26] //,"chrome" : [23, 31] //,"ios" : [4, 7] //,"android": [2, 4] //,"webkit" : [10, 12] //,"opera" : [10, 12] }, browserCss: { "gt": true, "lt": true }, html5 : true, hashtags : true, page : "page", section : "section", hash : "hash", head : "head" }; {% endhighlight %}

If you wanted to change what screen-width 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.

width
Width breakpoints for which lt, gt can be generated (.w-gt800, .w-lt1680)
height
Height breakpoints for which lt, gt can be generated (.h-gt600, .h-lt1050)
widthCss
Enables/Disables the actual insertion of those breakpoints into the HTML
heightCss
Enables/Disables the actual insertion of those breakpoints into the HTML
browsers
Browser version breakpoints for which lt, gt can be generated (.ie-gt8, .ie-lt9)
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
hashtags
When enabled, hashchange events will be detected (ie. /home/user#profile) and classes inserted into the HTML
page
Prefix used by the « CSS Router » when detecting pages (#page-user)
section
Prefix used by the « CSS Router » when detecting page sections (.section-home)
hash
Prefix used by the « CSS Router » when detecting hashtags (.hash-profile)
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()

Show Comments