May 17, 2014

New Freebie: Aerial

This is Aerial, a single page, single screen responsive site template for HTML5 UP. Pretty much just a quick little experiment combining CSS animations with 3D transforms. CCA licensed and built on HTML5/CSS3, skel, and Sass (which should come in handy if you plan to tweak the animation timing). Grab yourself a copy and do something cool with it:

html5up.net/aerial

PS: The seamless background image is derived from Icefields by Ryan Schroeder (who graciously released it on Unsplash under the CC0 license).

May 11, 2014

templated.co

Eons ago, myself and Cherry (a coder/designer I've been working with on side projects for years) started a site called FreeCSSTemplates.org to showcase some of our then-new freebie work. While we (though mostly Cherry as of late) kept up with adding new stuff the site itself became dated and sort of crap. So instead of letting it languish any further I took some time out last week to whip up TEMPLATED, a reboot of FCT with a cooler design, a less stupid name, and newer responsive HTML5 stuff. Check it out: http://templated.co

PS: So admittedly there's a fair amount of old stuff on there (FCT had been around for a reeeeeally long time), but there's also a lot of cool new stuff and Cherry (as well as myself from time to time) will be adding to it on a semi-regular basis once we've worked out some of the kinks, so keep an eye on it.

April 7, 2014

New Freebie: Twenty

This is Twenty, a minimal, multi-page responsive site template for HTML5 UP.

As the name implies, this is my twentieth (!) design for HTML5 UP. Since the last few have been single page affairs, I decided to go with something a bit more conventional and threw in four extra page layouts. Beyond that, it's the usual drill: fully responsive, built on HTML5/CSS3/skel, and CCA licensed like all my other stuff.

And ... that's about it. Download yourself a free copy over at html5up.net/twenty

(special thanks to Michael Domaradzki for allowing me to use his excellent photos in Twenty's demo)

January 30, 2014

New Freebie: Big Picture

This is Big Picture, a simple, single page responsive site template for HTML5 UP.

So I've been on a single page kick as of late, partly because I'm lazy, but mostly because they kick ass for experimentation. In this case, Big Picture makes heavy use of my (tentatively named and soon to be released) scrollgress and scrollwatch jQuery plugins to pull off some interesting effects as you scroll around the page. In addition to said interesting effects, Big Picture also includes a nice lightbox-style gallery, styling for basic page elements, a handy centralized settings area, and thoroughly commented code for your editing pleasure (with instructions! -- see the included README.txt file).

Big Picture is licensed under the CCA, so go ahead and download yourself a free copy over at HTML5 UP.

Many thanks to my good friends Felicia Simion and Michael Domaradzki for allowing me to use their amazing photos in Big Picture's demo.

December 3, 2013

New Freebie: Tessellate

This is Tessellate, a new responsive site template freebie for HTML5 UP. Semi-interestingly, this design actually began life as little more than a quick test of my new setup (rMBP + Photoshop CS6), but I suppose the infusion of shiny new tools inspired me to turn it into a full-fledged template (and simultaneously try out a few ideas I had kicking around).

CCA licensed as per usual, so grab yourself a free copy over at HTML5 UP.

Demo images courtesy of the photographic genius herself, Felicia Simion.

October 14, 2013

New Freebie: Overflow

This is Overflow, a new responsive site template for HTML5 UP. If it looks familiar, it's because I actually designed it a few months ago but only got around to coding it recently (it's been busy, yo). Anyhow, it includes some new stuff I've been experimenting with (like a cool parallax background) as well as a pop-up gallery and styling for all your basic page elements.

CCA licensed as usual, so head on over to HTML5 UP to see it in action and grab yourself a free copy.

Demo images courtesy of the living legend herself, Felicia Simion.

October 5, 2013

jquery.touch

A few days ago I needed to add touch gestures (like tap and swipe) to some nameless thing I'm currently working on, but I didn't want to use an existing library (for a few reasons, including "just because"). So, I took an afternoon and whipped up jquery.touch, a handy little plugin that adds a bunch of touch gesture events to jQuery.

Usage is simple: load the plugin, call enableTouch on your selector, then bind to the new events in the manner to which you're accustomed. Supported gesture events as of this initial release:

  • tap
  • doubleTap
  • dragStart
  • drag
  • dragEnd
  • swipe
  • swipeUp
  • swipeDown
  • swipeLeft
  • swipeRight
  • tapAndHold

Tested on Android, iOS, all the desktop browsers that matter, and IE7/8. Requires jQuery 1.7.x or higher. Download the minified version and/or view the unminified source over at GitHub.