Hitch provides a better way to write your CSS

  • Make your CSS selectors more expressive and your HTML clean.
  • Don't wait, use proposed selectors now.
  • Browse and use new features easily in a standard way.

Amazing future CSS at your finger tips... Prolly.

Hitch is a small (5.5k gzipped) JavaScript prollyfill engine 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 an earlier Web Components proposal (simple microformats which provide an easy uplift to real native when you decide to do so). With Hitch, it is up to you (the author of the page/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; }

#extendthewebforward

Quick Start Guide

Getting started couldn't be easier, just include the following snippet once in your document.

<script type="text/javascript" src="http://www.hitchjs.com/dist/hitch-0.6.1.min.js"></script>

Flag a stylesheet or two...

Add the -hitch-interpret flag to a <link> or <style> tag like this...

<style type="text/css" data-hitch-interpret>...</style>

Now you can use wildly powerful new CSS selectors

How many times have you wanted to do something like this...

/* Style the thing that HAS power windows, not the thing that IS power windows */ .car:-hitch-has(.powerwindows){ ... }

Look around and find more or write your own...

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){ ... }

Read more...

Demo of built-in Hitch features

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.

Authors

We are very excited about Hitch and we'd love to hear your feedback about the project.

Site Design

Hitchjs.com would have been impossible without the sweet site design of our friend Kris Bennett at kbeez.com. That guy rocks.