--- layout: main title: Head.JS, the only script in your HEAD ---
HeadJS, a small library for Responsive Design, Feature Detections & Resource Loading

When you need a quick cross-browser compatible hand, don't bang your head. HeadJS is here to help you out !

Your imagination, Your limit

Responsive Design (Think @media-queries, and more)

Achieve responsive design with CSS that targets different screen resolutions, paths, states and browsers.

Need to display an element at a specific screen size ?

{% highlight js %} /* JS */ if (head.screen.innerWidth > 800) { document.getElementById("#side-menu").style.display = "block"; } /* CSS */ .gt-800 #side-menu { display: block; } {% endhighlight %}

As you can see above, if you can write it in CSS, you can usually also write it in JavaScript.

mobile, desktop, landscape, portrait, touch, viewport height, viewport width, screen height, screen width, browser height, browser width, browser name (ie, chrome, ff, ios, android, webkit, opera), browser version, current folder, current page

Feature Detections (Like Modernizr. Just smaller, and simpler)

Detect various browsers and their features. Target HTML5 and CSS3 safely.

What about custom detections and device/browser features ?

{% highlight css %} /* Add a custom feature yourself */ head.feature("member", true); /* Now use it */ if (head.member) { document.querySelector(".member-menu").style.display = "block"; } .member-menu { display: block; } /* Use built-in detections*/ /* if the browser supports CSS3 box-shadow */ if (head.boxshadow) { document.querySelector(".member-menu").style.boxShadow = "3px 3px 3px black"; } /* if the browser supports CSS3 box-shadow */ .boxshadow .member-menu { box-shadow: 3px 3px 3px black; } {% endhighlight %}

We have a bunch of features detections built in, and if that's not enough, simply create one yourself !

  1. Desktop
  2. Mobile
  3. Landscape
  4. Portrait
  5. Retina
  6. Touch
  7. Transitions
  8. Transforms
  9. Gradients
  10. Opacity
  11. Textshadow
  12. Multiplebgs
  13. Boxshadow
  14. Borderimage
  15. Borderradius
  16. Cssreflections
  17. Fontface
  18. rgba()

Resource Loading (Direct or Conditional)

Manage your library's dependencies. Load JavaScript and StyleSheets in parallel but execute them in the correct order.

Need to quickly load a JS or CSS file ?

{% highlight js %} // Load up some JS head.load("jQuery.js", function() { // Call a function when done console.log("Done loading jQuery"); }); // Load up some CSS head.load("bootstrap.css"); {% endhighlight %}

How about something crazy like

On DocumentReady, if the user is using IE8, you need to load 2 scripts, or otherwise load a different script, then wait for them to finish loading, then fire a callback, and then load/apply a stylesheet ? Yeah right..


{% highlight js %} // head.ready(document, callback) // head.test(test, success, failure, callback) head.ready(document, function() { head.test( (head.browser.ie && head.browser.version === 8), ["file1.js", "file2.js"], ["other.js"], function() { // run callback head.load("file1.css"); } ); }); {% endhighlight %}

Of course you can use each of those functions (ready, test, load) individually too.

Make it the only script in your HEAD. « A concise solution to universal problems »
{% include sections/download.html %}