SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: Html & Css new

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Html & Css new

    What does CSS Responsive mean?

    What is Grid Layout?

    Please help me anyone understanding that.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Towhid001 View Post
    What does CSS Responsive mean?
    The layout adjusts to screen sizes (such as when you narrow your browser window, or when you view the page on a hand-held device). Here's a seminal article on the subject: http://alistapart.com/article/responsive-web-design
    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
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    As ralph mentioned 'responsive' is a term to describe a layout that changes, usually drastically at specific screen sizes. This is not to be confused with 'fluid' whcih merely adjusts. 'responsive' design usually employ CSS3 media queries.

    'grids' are just that 'grids'. similar to the concept in print design you design around an imaginary set of coulms.

    for example: you could have a 8 col. grid. each col being 120px wide for a total of 960px

    When you lay your elements out in a row you could have the following:

    row 1 head: (2col) ( 4 col) (2 col )
    row 2 content : (4col) ( 4 col)
    row 3 footer : (2col) ( 2 col) ( 2 col) ( 2 col)


    This is not only great aesthetically, but can serve for responsive layouts since you can do a little math and rearrange the layout w/o changing the size of the components . lets say only had a 480px screen you could rearrange the above this way (going from 8 col to 4 col grid) :


    row 1 head: (2col)(2 col )
    row 2 head: ( 4 col)
    row 3 content : (4col)
    row 4 content : (4col)
    row 5 footer : (2col) ( 2 col)
    row 6 footer : (2col) ( 2 col)

    hope that helps


Tags for this Thread

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
  •