Friday, April 30, 2010

More than one way to skin a cat or webpage

If you haven't heard of the saying "More than one way to skin a cat", it pretty much means that there are more than one way to do something, or that there are several possible ways of achieving something. This saying cannot be more true in terms of web designs. Web designing methods are constantly changing as new languages and technologies come out. The once popular table layouts are quickly being replaced by the use of CSS.

Even within CSS, there are multiple ways of creating the same layout and style. This is mainly due to new implementations within the language. Majority of current CSS layout on the web are column-like created by using the "float" property in CSS2. With the development of CSS3, it introduces a new box model called "flexible box model". This new box model is optimized for fluid design. The children within the box are laid out either horizontally or vertically, and unused space can be assigned to a particular child or distributed among the children allowing for easy expansion.

The latest "skin"(theme) I made for my current CSS project is a UNLV (University of Las Vegas) theme. The layout that I followed was the one on their main page: www.unlv.edu. For this theme, instead of using the usual float property to create the layout, I used the flexible box model from CSS3. Because CSS3 is still in the development phase, this feature is still experimental and requires browser specific tags. Even with these tags, its still sometimes glitchy and requires you to refresh your browser a few times until you see the changes. And this feature is not supported at all with Internet Explorer, so if I can't get it to work atleast 100% on the other main browsers (Firefox, Safari, Chrome), I will probably change the layout back to using the stable float property.

Below is a screenshot of my UNLV theme for the Dorm Energy Competition.


If you want to find out more about the flexible box mode, check out these sites:
  • future of CSS: the flexible box model

  • flexible box model specifications on w3.org
  • 0 comments:

    Post a Comment