Respond.js is a polyfill of sorts that lets you use media queries in internet explorer and older browsers. It currently just supports min/max-width but honestly, that’s all you’re going to need for IE6-8.
Why use it? Well, if someone uses IE6 or 7, you can bet your ass that they won’t have a 1960px-wide monitor to view your site. Let’s guess it’s going to be 1280px or LESS. If your site is made with a 960px grid or above, there’s a chance you’ll encounter users whose monitors won’t be able to view your site. This is where media queries are very useful.
Another reason to use these is if you’re very concerned with cross-browser compatibility and at 4kbs for the file, there is no reason not to include in your <if IE> statements.
Head.js is the one stop fix for everything. It truly is pretty damn amazing. It does everything in the background that you can ever need or think of (okay, maybe not EVERYTHING but a lot of stuff). Here’s what it does:
- modernizr-like capability. You’ve heard of modernizr, and it’s included with Head. Now you can style elements according to how advanced a browser is. Does it not allow box-shadow? Add a border instead. Fixed, done. And it helps you create graceful degradation
- Shiv away! Yep, it includes HTML5 enabler so that older browsers can run HTML5 🙂 No need for a separate solution
- Screen size detector! This is like creating media queries without the media queries. Head.js adds a class according to the screen-size so that you can style the site accordingly. Immensely useful for non-modern browsers that don’t use media queries
- Add back-end to your front-end – honestly, this is stuff I’d expect from the back-end to do or for a middle-end person to do but you can sniff out authentication tokens and cookies so you can change out your CSS according to if someone is logged in. You can also user page-specific CSS according to if you are on home page or elsewhere. You also get browser detection and browser-specific classes for not only internet explorer but other browsers also show up.
- Enable Caching
And at 17kbs before compression, it’s not very heavy!
jQuery tools, with their really cool and inspirational logo ;), is a UI toolkit that works on top of jQuery. Think jQuery UI that’s focused on different aspects of UI. or just a collection of plugins. The toolkit includes some of the following things:
- Tabs – Tabs, the basics of internet haha. jQuery Tools includes basic tab setup for all your needs.
- Tooltips – recently gone into mainstream via WordPress, tooltips add important accessible information
- Basic Overlay – Think lightbox. Click on an element and another element shows up over everything.
- Scrollable – a carousel competitor. Line up elements, and scroll through them
- Some extra stuff – jQuery tools also has some random other cool features that are useful like “expose” (click on an object, everything around it dims), flash embedding
Overall, it’s a neat little library to use and it’s only 4kbs in size. 🙂
What to do with all of these