<h1 id="configuration">Configuration</h1>
<div class="intro">
Sometimes you will want to change how HeadJS behaves by enabling or disabling certain features.
</div>
<div class="code-example" data-title="Configuration">
<p>This is the default configuration that HeadJS ships with</p>
{% 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 %}
<p>If you wanted to change what screen-width breakpoints HeadJS uses, then you would do something like this</p>
{% highlight html %}
<html>
<head>
<script>
var head_conf = {
widths: [1024, 1280, 1440, 1680, 1920]
};
</script>
<script src="head.min.js"></script>
</head>
<body>
<!-- my content-->
</body>
</html>
{% endhighlight %}
<p>The same goes for all the other configurable variables. Just make sure <strong>var head_conf</strong> is declared BEFORE you include HeadJS.</p>
<dl>
<dt>width</dt>
<dd>Width breakpoints for which lt, gt can be generated (.w-gt800, .w-lt1680)</dd>
<dt>height</dt>
<dd>Height breakpoints for which lt, gt can be generated (.h-gt600, .h-lt1050)</dd>
<dt>widthCss</dt>
<dd>Enables/Disables the actual insertion of those breakpoints into the HTML</dd>
<dt>heightCss</dt>
<dd>Enables/Disables the actual insertion of those breakpoints into the HTML</dd>
<dt>browsers</dt>
<dd>Browser version breakpoints for which lt, gt can be generated (.ie-gt8, .ie-lt9)</dd>
<dt>browserCss</dt>
<dd>Enables/Disables the actual insertion of those breakpoints into the HTML</dd>
<dt>html5</dt>
<dd>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</dd>
<dt>hashtags</dt>
<dd>When enabled, hashchange events will be detected (ie. /home/user#profile) and classes inserted into the HTML</dd>
<dt>page</dt>
<dd>Prefix used by the « CSS Router » when detecting pages (#page-user)</dd>
<dt>section</dt>
<dd>Prefix used by the « CSS Router » when detecting page sections (.section-home)</dd>
<dt>hash</dt>
<dd>Prefix used by the « CSS Router » when detecting hashtags (.hash-profile)</dd>
<dt>head</dt>
<dd>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()</dd>
</dl>
<div style="width:100%;">
<div onclick="blog.loadComments(this, 'api/2.0.0/configuration', 'Leave a comment')" style="cursor: pointer;">
<h2>Show Comments</h2>
</div>
</div>
</div>