I recently made a tiny tooltip menu for a project and decided to put it out there. It doesn’t solve any problems (that I’m aware of), unless you simply need a pattern like this and would prefer not to cherry pick one from a framework.

At any rate, I kept it small in size and flat in design. Enjoy.

View the demo or download on Github.

Follow me on Twitter

<form>
	<label>The opposite of hot.</label>
	<input type="text" required pattern="cold" />
	<button type="submit">Submit</button>
</form>

This combination notifies the browser that the field in question is required and has a criteria, and will prompt users to complete the field with a warning. Pretty cool.

A few caveats to consider:

• By using a simple pattern like the one I outlined above, you’ve hidden the answer to the question in plain sight. Not overwhelmingly smart.
• If you’re using it to validate email addresses, a typical pattern like: [pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}”] will support most, but not all valid email addresses, which poses a usability concern.
• The warnings/prompts are rendered differently between browsers, but some consistency can be achieved with CSS.
• It’s currently not supported in Safari, Mobile Safari, and Android.

Overall, I think this is a helpful tool that can speed up development time, but it should be used with discretion as it won’t work everywhere.

Reference:

• http://www.deque.com/accessible-client-side-form-validation-html5
• http://www.catswhocode.com/blog/html5-code-snippets-to-take-your-website-to-the-next-level
• http://blog.staffannoteberg.com/2012/03/01/html5-form-validation-with-regex

Follow me on Twitter

There are a variety of approaches to obtain equal column height in CSS. The CSS tables method (as outlined below) is not a new one, but I’ve presented it in its simplest form for ease of use:

<div class="container">
	<div class="primary"></div>
	<aside></aside>
</div>

The CSS:

.container {
	display: table;
}
.primary, aside {
	vertical-align: top;
}
.primary {
	width: 70%;
	display: table-cell;
}
aside {
	width: 30%;
	display: table-cell;
}

View Demonstration

Follow me on Twitter

About a year ago I jumped on the bandwagon and authored my own CSS framework. At the time, I was starting a lot of new, small-scale web projects that required similar design patterns, and it became clear that I needed a tailor-made starting point to help me turn them out. I eventually open-sourced the framework, and while I saw a bit of industry success with it, I was mostly satisfied with having my own personalized platform to build websites on. But over time, as all things do, the framework became antiquated and less relevant to the things I was working on.

As a result, I released a reconstructed version of the framework, which includes an extended, future-friendly twelve-column grid, updated presets for type and layout, better media queries, and support for retina images. The result: a resource that suits my current demands, and I hope it will prove useful to other web craftsmen also!

Visit the framework homepage for a demo, or download the framework directly on Github.

Also, I love receiving feedback from people. Give me a shout on Twitter or email me at hello@timothy-long.com.

Follow me on Twitter

I’ve also tried cherry picking certain components from the framework and using them elsewhere, but those too needed to be stripped down and optimized.

As a product designer for a leading job search engine, I think a lot about pagination and a lot more about optimization. When you’re designing for search, CSS bloat is a transgression to be avoided at all costs.

In an effort to address that, I put together a simple (and responsive) adaptation of Bootstrap’s very nicely designed pagination:

View the working demo and code.

Follow me on Twitter

As an afterthought to several tried and true methods^[1][2] of creating sticky footers, I wanted to make something that would support a varying footer height in a responsive layout.

I found some success with the following method:

<section class="container">
	<header class="block"></header>
	<div class="block push"></div>
	<footer class="block"></footer>
</section>

The CSS:

html, body {
	height: 100%;
}
.container {
	display: table;
	height: 100%;
}
.block {
	display: table-row;
	height: 1px;
}
.push {
	height: auto;
}

Demo it.
Download the snippet on Github.

1. http://www.cssstickyfooter.com
2. http://ryanfait.com/sticky-footer

Follow me on Twitter

I married.

Follow me on Twitter

We all want progress. But progress means getting nearer to the place where you want to be. If you are on the wrong road, progress means doing an about-turn and walking back to the right road; and in that case the man who turns back soonest is the most progressive man.

C.S. Lewis
Mere Christianity

Follow me on Twitter

Pictured above: A photo of a friend during a recent visit to the Salton Sea.

Photography was a big part of my early twenties. I spent countless hours with my camera, developing a (modest) level of skill and tirelessly shooting surf and climbing trips. I found a natural ease in taking good quality pictures. It provided a great career opportunity for a number of years and was a great way to get out and feel productive.

I’ve since gone on to pursue a different vocation, and while I still like to consider myself a photographer, I haven’t made a whole lot of time for it in recent years.

Not long ago, I took a pair of day trips with photographer and friend Anthony Wallace to a couple photo-worthy destinations. It wasn’t magical, but I came home with some work that I’m proud of. That’s all it took to remember, and it’s good to be back.

You can view my portfolio, albeit shamefully outdated. I intend on getting it up to speed after the new year.

Follow me on Twitter

I’m about seven weeks shy of marrying a beautiful woman.

Photo: Mikey Tnasuttimonkol

Follow me on Twitter