Hitch is a small (5.5k gzipped) JavaScript library which provides an extension model for CSS and HTML.
Including Hitch in your page lets you import and use features like CSS selectors that have only been proposed or HTML widgetry based on microformats. Hitch allows it to be up to you (the person writing the page or the stylesheet) to determine which features you need, not the user's particular browser.
Don't wait for the future - live it.
@-hitch-requires http://www.hitchjs.com/bkardell.math/1;
/* Style the .car with the greatest numerical value in the data-price attribute */
.car:-math-greatest(data-price){
color: red;
}
Share the Love...
Quick Start Guide
Getting started couldn't be easier, just include the following snippet once in your document.
Use @-hitch-requires to import them, and use them just like they were native...
@-hitch-requires http://www.hitchjs.com/use/bkardell.math/1;
/* Style cars with a price attribute containing a number less than 20000 */
.car:-math-lessthan(data-price, 20000){ ... }
Hitch comes out-of-the-box with an assortment of very powerful selector filters. Provided the following markup, you could apply many out-of-the-box Hitches to achieve powerful styles.
The following rules demonstrate what Hitch is possible of doing right away. The comments explain what each rule will do.
/* Style the cars that are new and have quality as well as domestic and peformance */
.cars div:-hitch-allof(.new .quality, .domestic .performance) p {
color: red;
}
/* Style the cars that are foreign and used or domestic, new and effiecient. */
.cars div:-hitch-anyof(.foreign .used, .domestic .new .efficient) p {
color: blue;
}
/* Style the efficient cars that are neither domestic and used nor foreign and new. */
.efficient:-hitch-noneof(.domestic .used, .foreign .new) p {
color: green;
}
/* Style the cars that are only one of quality or fast (but not both). */
.cars div:-hitch-oneof(.quality, .fast) p {
font-weight: bold;
}
And here it is in action!
2012 Ford Fiesta
2012 Chrysler 300
2012 Dodge Charger
2009 Ford Fiesta
2004 Chevy Malibu
2010 Dodge Charger
2012 Kia Forte
2012 BMW 525i
2009 Kia Forte
2005 Toyota Camry
2009 Audi R5
Writing Hitches
If you can't find the Hitch that you need in the repository, you can add your own Hitches to extend CSS and HTML any way you like. There are 2 types of Hitches and their use cases are different.
Selectors
These are Hitches that get applied during all presentation phases that CSS would be applied.
HTML
These are Hitches that get applied only once, but can gain relevance whenever the tree changes.
Functionality
You will want to write Selector Hitches when your functionality is required for changing the presentation. This functionality is beyond the things you can do with normal CSS. You will want to write HTML Hitches when your functionality is required to build or change the DOM. This is a unique and powerful way to provide widgets to your DOM.
Hitch API
It's a very simple API and here is an example of it.
var myHitch = {
name: "my-hitch",
base: "*",
type: "selector", // or "html"
filter: function(matches, arguments){
// matches will be an array of matched DOM node
// arguments will be the string of arguments passed along to your Hitch
}
};
Hitch.add(myHitch);
Simply save this in a normal js file and use @-hitch-requires or data-hitch-widget as shown previously to wire it up.
Hitch Resources
If you want to learn more about authoring Hitch, or how the internals work, you can
check out these links.
