Category Development

CSS play button overlay

Create a responsive video play button overlay

A project I’m working on now involves redesigning an existing site, and converting it to a responsive design using the Bootstrap framework. One part of the home page has a list of video thumbnail images. We wanted to overlay a play button icon on the image to give an indication of what will happen when a user clicks on a thumbnail. This is pretty simple when you have a fixed size image, but it gets a little trickier with responsive images. The trick to making it work was adding a float to the containing element.

Responsive HTML and CSS starter templates

I’ve updated my internal HTML and CSS templates to include a responsive grid and other enhancements.

What is this?
For many projects, I’ve used my own collection of HTML and CSS to give me a starting point and speed up project development. I’m more likely to use Bootstrap or Foundation now, but my own internal templates are still useful on occasion and give me a chance to experiment and refine my process. My earlier set of HTML did not use a responsive design, and was getting outdated. This provided an opportunity to experiment with responsive design techniques, and also examine other frameworks in depth.

responsive CSS starter template grid

HTML5 and CSS starter templates

Back in 2008 while working on two large website redesign projects, I needed to create a set of common reusable styles and a series of basic HTML layout patterns. One of the projects needed a comprehensive style guide detailing the CSS usage. The project also required several layout variations in anticipation of different content configurations. Both projects shared some common layout features.

Unstyled jQuery Galleries

Over the past year or so, I’ve needed to create basic image galleries with some minor variations. It’s easy enough to reuse bits and pieces of code, but I’d rather have a basic gallery, free of any styling, to use as a starting point. Here are some variations, available at my personal site.

Upgrading to ExpressionEngine 2

I recently upgraded this site’s content management system from ExpressionEngine 1.7 to 2.2. I had been holding off on the upgrade, as it always ends up taking more time than expected. I also did not like some of the changes from version 1.x to 2.x, but there were enough advantages to finally merit an upgrade.

View MAMP sites via Parallels

This post describes how to view local sites using MAMP and Parallels with minimal configuration. I am using MAMP 1.7, Parallels 4.0 and Windows XP, and OS X 10.5.6. This is definitely not the only method, but it works for me, and it’s easy to set up. I realize MAMP is not completely necessary on OS X, but the one-click installation is nice and suits my purposes for now.