Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member
    Join Date
    Mar 2014
    Posts
    2
    Member #
    38796

    How to build a responsive grid? (example link)

    Hi all, first-timer here. I'm a beginning/intermediate level web design student, and I had a question about how a certain site I visited is built. I have a pretty solid understanding of HTML and CSS, and I'm currently learning JS basics so my knowledge is a bit limited there.

    Here's the site:
    Goodby Silverstein & Partners | Full-Service Integrated Ad Agency

    It seems to have media queries set up for different numbers of columns, and then in between those jumps it scales by percentage. What's baffling to me is how the boxes arrange themselves, and just how the grid is built in general. Are these using containers like divs at all, or is there some other trick at play here? Is there a way for JS to respect media queries as well? Placing the boxes in each column at each media query via JS is the only thing I can think of, but like I said, my knowledge is limited.

    My class is moving pretty slowly, and my professor is a busy guy and doesn't seem too open/available for random questions like this, so I figured I'd try asking online.

    Thanks!

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,966
    Member #
    5580
    Liked
    758 times
    I hate it when someone just tells a person to "Google It", but there are so many examples and tutorials, I don't even know where to begin.

    55+ Great and Useful Tools for Responsive Web Design

    That is just one of 10,000 sites I found that show examples and others are tutorials, templates, and explanations.

    You can always view the HTML source of any website to see how the HTML/CSS is scripted.

    Sorry for telling you to "Google It", but that's the best answer I can give.

    https://www.google.com/#q=responsive+grid+examples


  4. #3
    Junior Member
    Join Date
    Mar 2014
    Posts
    2
    Member #
    38796
    Fair enough. For some reason I assumed the explanation I was looking for wouldn't be so accessible through a Google search, but that's good to know. I'm still not super aware of what kind of resources are out there, so I'll explore that a bit more in the future. Thanks for the pointer.

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,139
    Member #
    27197
    Liked
    959 times
    Quote Originally Posted by Prismatic View Post
    Is there a way for JS to respect media queries as well?
    I try not to post links to my own stuff if I can help it, but...yes, there is.

    Take a look at this article and this video. Grid systems are not as bad as one might think.

    You can also use JS to grab the width of the browser window and set styles if a certain size is "true".
    Last edited by Ronald Roe; Mar 24th, 2014 at 08:39 PM.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


Remove Ads

Posting Permissions

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

Tags for this Thread

All times are GMT -6. The time now is 04:32 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com