What's New?

curated tools for
modern websites


created by Paravel
last modified 02/08/13

FitText is a jQuery plugin that enables text to scale proportionally with the width of the browser — or rather, the width of the text’s parent element. It has a diversity of uses, though it is intended for use on headlines only (not paragraph text).

I have implemented FitText on this site via the title of the site, as well as the section headers. For a very basic use of it, I calculated the minimum and maximum sizes of each piece of text and determined a proper compressor (the rate at which it resizes).

I first set the type in Illustrator in it’s smallest size (for mobile devices) and it’s largest size (for desktop). I then measured the width of the full line of text in both sizes and divided each size by the width of the elements containing it in each size.

So, for my header, the min-width of the title is 60px and the min-width of the #headerContainer is 280px, thus 21%. The max-width of the title is 180px and the max-width of the #headerContainer is 900px, thus 20%. So, in my CSS, I have:

#header h1 {
	width: 20%;

I also entered the min- and max- font sizes (so the plugin would not go below or above them) in my JavaScript:

$("#fancyTitle").fitText(0.5125, { minFontSize: '60px', maxFontSize: '180px'});

For the compressor (“0.5125” in the above example), the higher the number, the more aggressive the text is resized (over 1.0); the lower the number, the less aggressive the text is resized (under 1.0). I used trial-and-error (resize the screen, make an adjustment, repeat) until I found a compressor that got as close to my min- and max- widths as possible. Each element of flexible type has a different compressor fine-tuned for the specific text.

Admittedly, it’s a little clunky; but it’s the best thing out there right now.

Flex Slider

created by Tyler Smith, WooThemes
last modified 02/08/13

FlexSlider is a jQuery plugin for a responsive image slider that responds to touch. It is a really robust tool with a diversity of uses and a lot of customizability. For as complex as it can get, FlexSlider is actually rather easy to use:

  1. Download the FlexSlider plugin.
  2. Link to their StyleSheet and JavaScript files in the of your HTML:
  3. <link rel="stylesheet" href="js/flexslider/flexslider.css" type="text/css"/>
    <script src="js/flexslider/jquery.flexslider.js"></script>
  4. In your HTML, create a div class=”flexslider” and ul class=”slides”, where each li is a different slide (image, text, etc).
  5. <div class="flexslider">
    	<ul class="slides">
    			<img src="images/flexslider/fittext.jpg"/>
    			<img src="images/flexslider/flexslider.jpg"/>
    			<img src="images/flexslider/spinner.jpg"/>
    			<img src="images/flexslider/webfonts.jpg"/>
    		<!-- you get the point -->
  6. Add the following code to your JavaScript file:
  7. $(window).load(function() {

If you are completely satisfied with how your slider looks at this point, then you’re done! But if you want, you can customize the animation as well as style it with CSS. WooThemes actually provides a lot of advanced options for customization, including usability features, primary controls, secondary navigation, etcetera.

I have used:

    animation: "slide",
	touch: true,

CSS3 Transitions

last modified 02/08/13

Webkit has some experimental features for the web including transitions. CSS3 Transitions are a way to animate CSS3 properties over time (as opposed to immediately). Some of these properties include: rotation, scale, position, color, and opacity.

I have implemented CSS3 Transitions in this site combined with some basic JavaScript. You’ll notice the transitions when you click/tap on a particular tool to view it in detail or return to the gallery of tools by clicking/tapping on the gallery header.

I started in JavaScript by moving the position of all the tiles up and simultaneously fading them out when one tile is clicked, so that the extended information for that tool can fade in.

function goToPage(pagename) {
	$(".tile").css({"margin-top":"-300px", "opacity":"0"});
	$(pagename).fadeIn(1000, function() {	});

I then defined the transition in my CSS:

-webkit-transition-property: opacity, margin-top;
-webkit-transition-duration: 0.6s, 1s;
transition-property: opacity, margin-top;
transition-duration: 0.6s, 1s;

I also reversed the animation for when the title of the gallery is clicked/tapped in order to go back to the gallery of tools:

function goToGallery() {
	$(".tile").css({"margin-top":"0px", "opacity":"1"});


created by Jessica Metro
last modified 02/08/13

Response is a CSS3 code sample I wrote to build responsive galleries based on CSS3 media queries. It functions by changing the number of columns displayed based on the user’s browser width or screen size.

So, a user would see:

  • five columns when browsing full-screen on a desktop computer or laptop
  • four columns when browsing a little less than full-screen on a desktop computer or laptop
  • three columns when browsing (horizontally) on an iPad or other 10” tablet
  • two columns when browsing on a vertical 7” tablet, such as the Galaxy Nexus or iPad mini
  • one column when browsing on a vertical smartphone

All of these numbers are of course customizable, especially depending on the size of tiles (and width of columns) desired.

In this code sample, I’ve used various sized tiles (1:1 and 2:1). On a smartphone, the 2:1 tiles would be too wide to be displayed fully and would look awkward. So, I included the ability for them to rotate to become 1:2, creating a smooth single column.

In order to create responsive tiles, you must first call the viewport in your HTML:

<meta name="viewport" content="width=device-width"/>

This <meta/> tag goes in your <head> tag, after the <meta charset=“utf-8”/> tag and before the link to your stylesheet. This allows your website to detect what screen size and browser size a user is viewing your site at.

It’s good practice to wrap your entire site in a div with id=“container”. That way, in your stylesheet, you can assign a max-width to the #container, enabling you to have left and right margins at the largest browser size rather than an endless view of columns — unless of course that is your goal. But, in my demo, I’ve used:

body {
	position: relative;

#container {
	max-width: 1240px;
	margin: 0px auto 0px auto;
	padding: 0px 0px 85px 15px; 		/* the extra 15px padding-left compensates for the padding in between each tile, as you’ll see later */
	overflow: auto;

In your HTML, you will also want to create a div for each tile and assign it class=“tile”; each div will contain an image (or two if you choose to implement a hover state with JavaScript, or different rotations) and any text you want (as I have done in this site). In my CSS, I have styled each tile as such:

.tile {
	position: relative;
	float: left;
	background-color: #fff;
	padding: 15px;		
	margin-right: 15px;	  		
	margin-bottom: 15px;	/* all of my calculations for my min-widths are based on the tile’s padding and margins */  
	border-radius: 2px; 		/* another fun addition with CSS3 */
	box-shadow: 0 0 1px rgba(0, 0, 0, .25); 		/* another fun addition with CSS3 */

Finally, in your CSS, you will want to use the new CSS3 Media Queries:

@media screen and (min-width: 230px) {   	/* anything less than 489px */
	#container {
		width: 245px;		     			/* 1 column will be displayed */
@media screen and (min-width: 675px) {    	/* between 675px and 734px */
	#container {
		width: 490px;		     			/* 2 columns will be displayed */
@media screen and (min-width: 920px) {   	/* between 920px and 979px */
	#container {
		width: 735px;		     			/* 3 columns will be displayed */
@media screen and (min-width: 1165px) {  	/* between 1165px and 1239px */
	#container {
		width: 980px;		     			/* 4 columns will be displayed */
@media screen and (min-width: 1440px) {  	/* between 1440px and infinity */
		#container {
			width: 1240px;		     		/* 5 columns will be displayed */

If this is all you want to do — if all of your tiles were the same aspect ratio, etc — then you are done! But, if you do want to use different aspect ratios (e.g. to make certain tiles stand out, etc) then you will need to give each tile additional classes (to distinguish each ratio you’re using — e.g. “feat”) as well as those additional images I mentioned earlier (also distinguished with classes — e.g. “horizontal” and “vertical”). In your CSS, you will want to add the following to @media screen and (min-width: 230px) (one column):

/* Note: I wrapped all of my tiles in another div id=”projects” to be more descriptive. You can, too, or not. */

#projects .feat .horizontal {
	display: none;
#projects .feat {
	width: 200px;
	height: 445px;

You will also want to add the following to @media screen and (min-width: 675px) (two columns):

#projects .feat .vertical {
	display: none;
#projects .feat .horizontal {
	display: block;
#projects .feat {
	width: 445px;
	height: 200px;

And that’s it for media queries!


created by Felix Gnass
last modified 02/08/13

Spin.js is a jQuery plugin that creates a custom spinner (for when something is loading) without the use of GIF images. It does not depend on CSS or jQuery, is resolution independent, and is supported by all major browsers. You can customize the exact spinner you want for your website by going to the spin.js plugin homepage and changing the number of lines, the length of each line, the width of each line, the radius of the negative space, the roundness of the corners, the rotation of the spinner, the trail opacity, the speed of the spinner animation, the dropshadow, and the acceleration (as it progresses).

This plugin could not be simpler to use. After you customize the spinner you want to embed, it will generate all of the code for you. Simply download the spin.js package, include it in your js folder, link to spin.js in your index.html file, create an element (div) with class= “spinner”, and copy + paste the generated code into your own scripts.js file.

$(document).ready(function() {
	var opts = {
	  lines: 9, // The number of lines to draw
	  length: 0, // The length of each line
	  width: 20, // The line thickness
	  radius: 0, // The radius of the inner circle
	  corners: 1, // Corner roundness (0..1)
	  rotate: 0, // The rotation offset
	  color: '#fff', // #rgb or #rrggbb
	  speed: 1.3, // Rounds per second
	  trail: 60, // Afterglow percentage
	  shadow: false, // Whether to render a shadow
	  hwaccel: false, // Whether to use hardware acceleration
	  className: 'spinner', // The CSS class to assign to the spinner
	  zIndex: 2e9, // The z-index (defaults to 2000000000)
	  top: 'auto', // Top position relative to parent in px
	  left: 'auto' // Left position relative to parent in px
	var target = document.getElementById('spinner');
	var spinner = new Spinner(opts).spin(target);


created by Joss Crowcroft
last modified 02/08/13

MotionCaptcha is a jQuery plugin (in BETA) that allows users to complete captchas with a gesture, rather than typing on a tiny screen. Whether or not they’re on a smartphone, tablet, or a full desktop computer, this jQuery plugin would allow users to skip deciphering the squiggly, illegible text in captchas and simply and effortlessly trace a shape to confirm that they are humans and not computers when submitting forms.

Read more about MotionCaptcha.

Follow on GitHub.

Subtle Patterns

curated by Atle Mo
last modified 02/08/13

Subtle Patterns is an online collection of beautifully designed patterns — all free to use. They work great as repeated background images on any div. If you feel the need to modify them (e.g. overlay a color, etc) you may do so in Photoshop, Gimp, or any other image editor. All the pattern creators ask is that you credit them somehow.

The pattern I used on this site is Cream Dust, created by Thomas Myrman. I overlayed the teal color on it by opening it in Photoshop, changing its color mode from Index to RGB Color, creating a new layer, filling it with #1F8F9D, setting the teal layer as the background, and changing the layer style of the pattern to Linear Burn. I then saved it for Web & Devices as a PNG-24.

Repeating an image as a background is very simple CSS.

background-color: #1F8F9D;  /* always set a background color so the background is not blank if the image takes a while to load or fails to load altogether */
background-image: url ('../images/patterns/cream_dust_edited.png');
background-repeat: repeat;  /* this repeats in all directions. you can also repeat in one direction (repeat-x or repeat-y) or no-repeat */

Web Fonts

last modified 02/08/13

Google Web Fonts and Lost Type provide some of the best-designed free-to-use web fonts. Designers have really been making giant strides in the capabilities of web typography.

Not too long ago, the only fonts you could use on your website were fonts common to both Windows and Mac — Arial, Comic Sans, Courier New, Georgia, Times New Roman, etc. For a while, you could purchase separate rights for a typeface you owned in order to embed it in your website. Now, there is a plethora of fonts that are already made for the web, ranging from well-designed to poorly-designed. But nevertheless, there are still quite a few beautiful typefaces that you can use on your site, for free, with attribution.

My two favorite resources for beautiful, free-to-use web fonts are Google Web Fonts and Lost Type. Google Web Fonts currently has 617 font families, many including a number of weights and styles. When embedding a font, you don’t need to host the font files yourself — Google does that for you, so you only need to link to them, making your site load faster.

Lost Type is a little different than Google Web Fonts in that its main focus is curating beautiful typefaces under a pay-what-you-want model (it’s always nice to pay the designer). Some of the typefaces are already packaged for web use. If a font doesn’t yet have the @font-face package, you can generate it — just make sure you always credit the designer and include the full package from Lost Type (including all original font files and the license).

If you ever want to embed your own typeface in your website, you first need to turn it into a @font-face. Font Squirrel has a @font-face generator that’s really easy to use.

  1. Upload your font file.
  2. Select ‘Basic’, ‘Optimal’, or ‘Expert’ (I always use ‘Optimal’).
  3. Agree to their terms (and don’t do anything illegal).
  4. Download your @font-face kit. It will take a minute to generate.
  5. Your @font-face kit will be folder containing different font files. Copy this entire folder into a ‘Fonts’ folder where your index.html file lives.
  6. A stylesheet.css file will be in the @font-face kit folder. You can link to this in your HTML, or — to save on style sheets and load time — copy and paste the contents into your main CSS file.
@font-face {
	font-family: 'myfontname';
	src: url ('myfontname-webfont.eot');
	src: url ('myfontname-webfont.eot?#iefix') format ('embedded-opentype'),
		url ('myfontname-webfont.woff') format ('woff'),
		url ('myfontname-webfont.ttf') format ('truetype'),
		url ('myfontname-webfont.svg#myfontname') format ('svg');
	font-weight: normal;
	font-style: normal;

If you have a burning desire to use a font from Adobe or other private type foundry on your site, you can pay for a monthly subscription for Typekit, gaining access to almost one hundred type foundries of fonts for the web.

On this site, I'm using Franchise, designed by Derek Weathersbee, from Lost Type, as well as Roboto designed by Christian Robertson, from Google Web Fonts.

Extended Resources