View Posts By Tag » "CSS" » 2 Posts 
CSS Grid Layout » Aug 20, 2010 2:55 PM » Coding
I've been seeing more and more tool sets based around CSS grid layouts and I decided to build my own little basic framework in which to operate. This one is based on a 980px wide, 4 column grid. It has 4 types of basic box elements: 1:1 width, 1:2 width, 1:4 width and 3:4 width. These can then be combined to create upto a 4 column page with a 10px gutter.

There are then several styles that can be applied to the basic blocks to differentiate them from each other. This will allow for a huge pool of possible combination's with which to build pages.

The cool thing about this one however is that a little modified version of the jQuery Equal Heights plug-in that automatically goes through a standardizes the height for each row. It uses the ID attribute of the div to group the rows. For example "row1_1","row1_2" and "row1_3" are all set to the height of the tallest of those 3 elements.

More on this Retro-Tax project as is develops a little more. It's only got a very basic rough design at the moment.

Pretty cool!

Designing in HTML/CSS » Dec 30, 2009 3:45 PM » Coding
There was an interesting article on WebMonkey yesterday talking about the switch from mocking up designs in Photoshop to live HTML. This is actually something I've found myself doing a lot of lately.

I'm not in total agreement with the "Die Photoshop, Die" sentiment in the original article, but I do think there are many benefits to mocking-up in HTML, one being that you then don't have to spend time converting the PSD file into HTML, it's already done! The other is that, yes, it does give the client a more realistic impression of what the actual final product will look like, and how it could function.

Of course all this is possible because of the improvements that are coming/have come with CSS3. The problem is that browsers still handle these things differently (or not at all). As big a fan as I am of the @font-face properties, it's still not universal, same with the box-shadow and border radius.

Ultimately I think it's going to come down to the best tool for the job, and sometimes that's still going to be Photoshop.