Foundation for Responsive Web Design Tutorial – 3 – Nesting and Dynamic Layouts

July 25, 2019 posted by

our a houses so in the last video we learned the really basic idea behind the grid system and foundation basically our layout is going to be made up of rows and inside those rows we need to fill 12 columns so this is what we did already and check it out behind the scenes foundation takes care of all of the responsive stuff for us we just have to worry about you know making the actual content for our website and none of the hard stuff pretty sweet so the next thing I want to demonstrate is how to nest rows in other words yeah right now we have some content in here just numbers that say four six and two but an actual website we're going to want to put you know content in their pictures buttons menus whatever so what we're going to actually do is we're going to build an entirely new row inside here instead of you know just a plain old number so show you guys how to do that it's incredibly simple and say that I want to build some content inside this column right here so I'm going to have a two column layout and I'll just say uh yeah I'll just stick with a really basic layout for this demo so let me do this so this is the first column and I'll just say parents column so inside here what we're going to do is we're just going to build an entirely new row so a new row and inside it the columns have to take up 12 so nothing new pretty much like we're starting from scratch so div class row and inside here we're going to make two divs I'm just going to have six and six so div class I'll just say medium six columns and just so we don't have anything boring I'll just write like bacon and so we can actually see it let me add a border so style border I'll say one pick solid red and let me add another one holy moley right there so we're pretty much going to have a layout inside a layout nothing that exciting but this is how you nest and let me add a comment that says nested row nested row so check it out so inside these individual columns we can also have sub layouts so if you want your layout to be a little bit more complex you can do that as well so that's the idea behind a nested row pretty much a row that you can stick inside a column alright let's move on to something a little bit more interesting if you will so that was too easy I'm sure you guys are getting you know antsy because you're like all right that foundation is going to be a little bit more hard challenging than this well check it out so up to now we have a single layout and we kind of let foundation take care of all of the responsiveness for us but what if we wanted to do something like this what if we said that we wanted to have a layout that whenever you're looking at it on a phone then you're just going to have it split perfectly down the middle so six on the left and six on the right now whenever you were looking at on the desktop you wanted to on the left so a skinny column and 10 on the right all right that sounds like it would be a lot of work right so what foundation allows you to do is really easily make different layouts for different devices and I'll give you guys a little cheat sheet right here so there are three key words that we need to remember small and whenever you see small just think of this like mobile and phones whenever you see medium think of this like tablets and armed with those small things like Chromebooks or little notebooks this would be a medium-size device and large this would just be something like desktop and this also includes most laptops since laptops have experience too so small medium and large for phones tablets and desktops and again don't follow these rules strictly because some laptops are really small so they may fall in here they started making phones really jumbo as of late so those might fall into medium but these are the general guidelines that you can use so let's design a layout that's different on a phone then a desktop and I'll show you guys the benefit of it so inside a row of course we always need to add up to 12 that rule never changes so for the class let's worry about small first so small I'll say 6 I'm going to make two columns for small so small six columns and I'll say the left and let me give this background to sew style background equal those light slamming and let me make one more for the right this is second time I did that embarrassing so this is going to be the right hand section of the screen and the background of this is going to be light one either one green so right now we have a layout that looks kind of like this so since we only have one stipulation in there of small no matter what size the vise we're looking at it this row right here is always going to be split perfectly down the middle left and right so this is the layout that I actually want to have for mobile devices for small devices but I'm looking at this on my desktop right now and I'm like you know uh this kind of looks goofy on my desktop the left should actually only be two and the rate should be ten so I'm going to hop back in here and I'm going to add another stipulation that says actually on large devices the first one the left column is going to be two and the right one is going to be ten so now I'm going to refresh this and check it out so right now since my screen is taking up the entire width it's treating it as a large screen device left which would be something like a menu in the right which would be our main content now since we don't want to have that on mobile when we start to shrink it look what happens whenever we get the small it automatically adapts so then everything is a really shrunken it's split right down the middle and you can actually have this have separate rules for small medium and large but usually whenever I make a website I just have small and large because I want on touch devices like tablets and mobile to act one way and large screen devices like tab I'm excuse me laptops and desktop to act another way but if you wanted you know even more control you can actually have medium in there to whatever you want to do follow your heart but that ladies and gentlemen is how you nest layouts or nest columns and also how you can make different layouts for different size devices in foundation so a lot of stuff coming to your brain but uh from now on and it it probably gets a little bit easier because we're going to be getting into kind of the fun stuff so now that we understand the basic concepts you're ready to move on good stuff next video see you then


18 Replies to “Foundation for Responsive Web Design Tutorial – 3 – Nesting and Dynamic Layouts”

  1. Fan Base says:

    Love this tutor, foundation is good when it come's in frame work. thanks to Bucky you are the best mentor i have been following your tutorials since 2014

  2. Michael Zech says:

    Well done.

  3. Robert Gass says:

    From what I've seen the cross browser compatibility of foundation is horrible. No wonder bootstrap is so much more popular.

  4. BoyNext Door says:

    i do the small-6 large-2 columns in the right and left small-6 large-10 however the two row always taking up the entire browser? I think its not with the laptop/

  5. Vivek Thakur says:

    I am getting each column in different rows. What are the errors in my code? Please suggest me

  6. Michael Devenport says:

    I highly recommend $this (responsive) design_tool_kit / framework.
    Successfully implemented in a tutorial I just completed ( a "Ruby on
    Rails" Build an Online Store with Foundation & Redis ) if interested
    find a ton of info & tips @ . Thank you so much much Bucky! – Michael 😉 + everybody here is Bucky's Twitter account (follow him!)

  7. Daniel Simpson says:

    Your voice sounds EXACTLY like Will Wheaton's voice.

  8. Mike Voets says:

    You are making a couple of mistakes here…
    1. It's salmon, not slamon.
    2. When you define a small and large only, the point where it will go to small is at medium.
    3. It does not show you large because you have a full size window, but because your window is large. On my phone, the browser is also at full size, but it still shows me small.

  9. MrAndrewrock says:


  10. SubVengeance says:

    0:00 Did you just call me a horse? WTF Bucky?!
    Awesome series! =)

  11. lester vizcarra says:

    No one explains better than you.

  12. Joshua Pickenpaugh says:

    Very helpful, thanks!

  13. Jedidiah Avelino says:

    "Whatever you wanna do, follow your heart." Best advice

  14. austin moyer says:

    what notepad program are you using?

  15. TornSka says:

    So if I only declared a large, the phone would see there is no small and use the large number?

  16. Craig Smith says:

    Foundation looks simple yet awesome, definitely be using in future projects


    what is difference between bootstrap and foundation???

  18. thnyanhub says:


Leave a Comment

Your email address will not be published. Required fields are marked *