<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 = { 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 %} <p>If you wanted to change what screen breakpoints HeadJS uses, then you would do something like this</p> {% highlight html %} <html> <head> <script> var head_conf = { screens: [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>screens</dt> <dd>Width breakpoints for which lt,lte,gt,gte,eq can be generated (.gt-800, .lt-1680)</dd> <dt>screensCss</dt> <dd>Enables/Disables the actual insertion of those breakpoints into the HTML</dd> <dt>browsers</dt> <dd>Browser/Version breakpoints for which lt,lte,gt,gte,eq can be generated (.ie8, .lt-ie9)</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>page</dt> <dd>Suffix used by the « CSS Router » when detecting pages (#v1-page)</dd> <dt>section</dt> <dd>Suffix used by the « CSS Router » when detecting page sections (.api-section)</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/1.0.0/configuration', 'Leave a comment')" style="cursor: pointer;"> <h2>Show Comments</h2> </div> </div> </div>