SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Metro UI layout

  1. #1
    SitePoint Addict
    Join Date
    Oct 2005
    Posts
    285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Metro UI layout

    Whats the best way to code up in CSS a grid/tile type layout similar to Windows Metro UI?

    I know there is a framework out there called Metro UI CSS but I want to learn about raw CSS for now (I'd consider if for rapid development further down the line).

    If my page was to look something like this - http://understandingexistence.net/wp...ws-8-phone.jpg

    Do I construct it by rows or columns?

    How should i build the tile which is split into 4 smaller tiles?

    Thanks.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Divs and things like that are still the way to go. Do you need this to be responsive? You can learn a lot from the Metro UI site itself. Just use your web inspector to study the HTML and CSS.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Addict
    Join Date
    Oct 2005
    Posts
    285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I recently read about 'divitus' and I think I have it. I tend to wrap everything with DIVs so I can use it for layout purposes.

    Would be nice if the site was responsive, and also to work on IE6.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Just use divs where they are actually needed to accomplish the layout. Divitis occurs when far more divs are used than are needed.

    In terms of how to construct it, it depends on what content you want in there. Your image above doesn't give an indiction of what the page contains, other than boxes, which isn't a lot to go on. But I guess, as a general guideline, you'd start a layout like that with a wrapper div that contains three full width divs, one atop the other. In other words, you start your inner structure with three rows of divs.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •