SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: Html & Css new

  1. #1
    SitePoint Member
    Join Date
    Jul 2013
    0 Post(s)
    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
    Melbourne, AU
    460 Post(s)
    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:

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Madison, WI
    34 Post(s)
    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


Posting Permissions

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