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 !

  • Speed up your apps: Load JS & CSS asyncronously and in parallel, but execute them in order
  • Load one asset if a condition is met, else fallback and load a different one
  • Manage script dependencies, and execute callbacks once they are loaded
  • Cross-browser compatible « pseudo media-queries » let you code against different resolutions & devices
  • Fix quirks in specific browsers by quickly applying dedicated CSS/JS logic
  • Detect various browsers & their versions
  • Check if the client supports a certain Browser, HTML5, or CSS3 feature
  • Automatically generates JS and CSS classes for browsers & features that where detected
  • Automatically generates CSS classes, to know what page or section a user is viewing
  • Know if the user is in landscape or portrait mode
  • Or whether the client is using a mobile or desktop device
  • Get old browsers to support HTML5 elements like nav, sidebar, header, footer, ...
  • ...
  • Make it, The only script in your <HEAD>
    • A concise solution to universal problems

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 ? 

/* JS */
if (head.screen.innerWidth > 800) {
    document.getElementById("#side-menu").style.display = "block";
}

/* CSS */
.gt-800 #side-menu {
    display: block;
}

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 ?

/* 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;
}

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 ?

// 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");

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..

Easy.

// 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");
        }
    );
});

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 »

head.ready(?)

Api Documentation

Documentation

Download

Download
Top