Foundation for Responsive Web Design Tutorial - 3 - Nesting and Dynamic Layouts Video Lecture | Responsive Web Design: A Foundation Course for Beginners - Front-End Programming

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