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.
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.
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.
I’m working to incorporate some more varied fonts into a new design without resorting to Flash or image replacement.
Updated: IE 8 Release Candidate 1 fixes this problem.