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:
0 comments:
Post a Comment