The Layout

One of the things I enjoy about web development is making the user interface. It's fun for me to make elements appear on the browser and move it around. But the thing the I really hate the most about web development is also connected to the interface - I'm talking about making the markup behave consistently across different monitor resolutions, different browsers, different devices, and different content lengths. 

This has been the bane of my work life; thankfully I've gained knowledge over the two and a half years I've been in my company. The very first thing I learned was how to keep the content centered with even margins on both sides; that's just setting margin-left and margin-right to auto, natch. The second thing I learned was to use grid systems. It's very much like the old days when people used columns to arrange the layout of their newspapers; the bonus is that a layout made with a grid system will be perfect regardless of the browser or screen resolution. I started out with the 960 Grid then Bootstrap; right now I'm leaning toward Blueprint.

For some time I came to accept that form elements have varying renders depending on the browser; and then I heard about the Formalize CSS; cue mind being blown. I checked this beast from IE 5 to 9, Chrome, Firefox, Safari - it was all the same. Uniform and consistent. Until you've tried designing across browsers, this thing might seem trivial - but I assure you it is not. With the grid system and the form normalizer in place, one can for the same amount of work make a UI that doesn't break over a ton of situations. It's amazing for productivity.

The last thing to complete this was guidance from cssstickyfooter.com. This brilliant web page provided insight into solving the thing which has plagued me ever since I was a beginner developer - how to set up a footer that expanded with the content and was always at the bottom of the viewport. I've found that different CSS systems can interfere with this fix - for example, Bootstrap needs a completely different markup. That's why my preferred styles now are Formalize and Blueprint. It's so much simpler and unobtrusive.

I've been experimenting with this setup and I'm really satisfied with how easy it is to create my own custom styles. The styles for the labels and textboxes are an example, I just lengthened the boxes' width and added the colors for the labels.

Fixing the buttons meanwhile was quite fun. Turns out the Formalize style took precedence and even if I added a class of my own my changes would be canceled out. It would work with an inline style, but that would make the markup clunky. What I did was dive in the Formalize code, find the part concerned with the link button, and copy the style. I then used this for my own class, minus the attributes I needed changed of course.

You can see that I used the :not selector starting from line 68, this was to exclude those elements with my class. Unfortunately, this caused the Blueprint link hover style to display. It was no problem though, just had to do the same thing to line 43 of the Blueprint style:

I got the tip from Mr. Dudley Storey's site. I recommend you all visit, very cool website it is. I used this for the Submit button, and I left a Cancel button with the inline style for comparison. Anyway, here's a download link to the code I was playing around with (needs 7Zip to unpack, and Visual Studio 2013 to run). The markup I got from the Formalize demo, they used tables to layout the elements and it was a bit annoying to have to translate everything to Blueprint grid. It was good practice though, so all's good.