There are many ways to build CSS column grids; all of which have their pros and cons. In fact CSS3 has begun to implement a built-in model for columns which will be most useful in the future. However, until all the browsers our users surf the interwebs with are capable of this, we’ll have to rely on the good old CSS2 tricks to do it.
For a good while I used defined width floats for my grids. This means you have to calculate the width of each column and fix it (either with pixels or something more flexible like ems or percentages). That method is flawed due to rounding errors and general problems with flow when resizing. A better method is to use a mix of floats and negative margins for positioning. When I need to create a CSS column grid, I use this method.
However, when I was recently asked to share my method—which was outlined to me by a good friend and CSS guru—I had to remind myself how to do it. These are the perils of becoming a manager and developing less. In the interests of remembering next time (and also sharing the knowledge), I’ve decided to document the method in this article.
Continue reading “Flexible Responsive CSS Grids”…In case you’ve been living under a rock for the past couple of years, Vagrant is the latest development in easily controlled virtualised environments. In their own words:
The vision of the project is to create a tool to transparently manage all the complex parts of modern development within a virtual environment without affecting the everyday workflow of the developer too much.
Vagrant automates creation and provisioning of virtual machines within VirtualBox via the command line, whilst also allowing for easy distribution and reuse across multiple projects. In this article, I’m going to look at how it can make life considerably easier when dealing with development environments.
Continue reading “Vagrant Virtualised Dev Environments”…If you’re looking at the site and not the feed you’ve probably noticed some significant changes. After 5 long years of a heavily doctored Wordpress implementation with custom templates I’ve finally gotten around to rebooting the site, bringing it more in line with my requirements.
It’s more of a realignment rather than a redesign. I’ve trimmed back the cruft, and improved what I believe is important—and I’ve also made some more drastic changes which can be reversed should I want to.
So, without further ado, let me just take some time to explain my reasons…
Continue reading “Spring Reboot”…Back in October of last year Google Apps underwent a fairly extensive redesign. The overall intent of this realignment was to improve the user interface design, which has traditionally seemed to be a stumbling point for Google.
Personally I think the new designs are excellent and really appreciate the fact that they address my need to access my Google Apps from a variety of devices. I also like the fact that they allow me my own preference for the visual density of content within the page.
In fact this is such a killer feature that I reverse engineered it to better understand it. I’ll be looking to use this knowledge in some of my future work. Whilst I wouldn’t really refer to this deconstruction as such, plagiarism is the sincerest form of flattery. Unfortunately, due to extensive work commitments, I’ve only just gotten around to writing up my work…
Continue reading “User-controlled Content Density”…Back in April 2007, I wrote a short article on HTML element identifiers for the .net magazine “Expert Advice” section. I have never republished it online—despite it being 400 words, nicely to the point and suitably succinct—and have long been meaning to reexamine the subject in more detail.
By a total coincidence a discussion in a recent front-end code review and a discussion over the past couple of days on Twitter both relate to the use of HTML element identifiers. The former, a discussion on semantic value and remembering that HTML should not prognosticate styling; the latter, a discussion on the validity of using IDs to target CSS. With both of these considerations I’m going to study the fundamentals of writing good element identifiers within this article.
Continue reading “On HTML Element Identifiers”…Categories: