Using Hitches

Using Hitches

Using 3rd party hitches (and being able to create them) is really what it's all about... To use additional hitches, you just have to find (or write) one (or more) that you like use the @ rule processing instruction "-hitch-requires" to require them in your CSS...

@-hitch-requires LIBRARYPATH

And then go ahead and use them as advertised...For example:

@-hitch-requires 	http://www.hitchjs.com/use/bkardell.math/1.js;

/* div's which have a cost attribute whose value is numeric and under 100 */
div:-math-lessthan(cost,100){
    background-color: blue;
}

Here's a resource with a few to get you started: [http://hitchjs.com/repo/]

Using selector hitches in your CSS

In your CSS you can reference hitches via the @-hitch-requires processing instruction, and then just use the hitches provided by that package in your CSS... Below is an example of a simple stylesheet that uses a -math-* library to style elements of the person class which contain a data-score attribute over 10000 and the highest score sibling:

@-hitch-requires math.js

.person{
	padding: 1em;
	border:  2px solid #F6EDA9;
}

.person:-math-greaterthan(data-score,10000){  
	border-color: blue;
}

.person:-math-greatest(data-score){
	background-color: blue;
	color: white;
}

Using HTML hitches in your markup

In your HTML you can hitches by setting an data-hitch-requires attribute with a valid widget url.

A widget url is merely a url where a package of one or more hitches are sourced followed by # and then the name of specific widget in that package you wish to use.

HTML hitches offer new component capabilities... You can find HTML hitches that you can download or use right off our CDN in the Hitch Repository: http://hitchjs.com/repo/.

The following example shows simple inclusion of a Twitter "tweet" widget.

<div data-hitch-widget="twittertest.js#twitter_tweet"></div>

The above file, could be served off our CDN like this:

   <div data-hitch-widget="http://www.hitchjs.com/twittertest.js#twitter_tweet"></div>