Foundation for Responsive Web Design Tutorial - 2 - Grid System Video Lecture | Responsive Web Design: A Foundation Course for Beginners - Front-End Programming

alright guys so before I start teaching
you guys all of the different things
that you can add to your webpage the
menus the buttons the pictures all that
fun stuff I want to take a second and
explain exactly what this stuff is
that's included in the template so we
have a little bit better understanding
of our starting point now to be honest
most of the stuff is just to make
Internet Explorer work properly since
internet explorer is kind of a weird
browser and it's a pain in the butt for
web designers so that's what this is and
as you can see I added a little comment
normalize that CSS and moderniser so
normalize and moderniser these are just
libraries that were built to help with
Internet Explorer and other browsers um
be compatible so in other words whenever
we design a website we want it to look
the same on every single browser so
people built these things and then we
can just include them really easily so
you know we don't have to go to manually
and that's what all this stuff is of
course this foundation not CSS file just
the basic styling the default styling
for the components of course if we ever
want to make our own buttons that look
different we can do that as well and the
last thing are the script tags right
here and they just include jQuery and
some of the built-in JavaScript that you
need for foundation and I'll show you
guys why you need JavaScript later on
whenever I show you guys like the cool
pop-ups and stuff that you can use but
basically this is our starting point in
most of the code that we're going to be
typing is just going to go right in here
right after your first body tag simple
enough so again this is our starting
point a blank slate let's go ahead and
do something so before i start popping a
bunch stuff in there's one key concept
that you need to remember whenever you
make a responsive website it's going to
be based on a grid system and by grid of
course I just mean rows left and right
in columns up and down now you can have
as many rows as you want so the more
rows that you have of course the longer
or taller your web page is going to be
but whenever you use columns you always
have to have twelve columns I'm going to
repeat that because it's really
important whenever you use foundation
whenever you make any webpage using
foundation it's based on a twelve column
layout so you can have unlimited number
of rows but only twelve columns now you
don't actually have to have like twelve
individual columns so for example if you
only wanted a left menu and content on
the right then you could say that your
left menu is like four columns wide and
your right is eight columns wide so you
have two sections if you just want to
have one big section then you're just
going to have one column that's 12 wide
so you can't go over 12 and you can
combine them in any way you want and
that's where we're going to see right
now so like I said the first thing that
we always need is a row so for this
example it's going to be really easy
we're just going to make a single row
and in order to define row we just say
class row so hey foundation we're about
to make a row so now it says okay if
you're using foundation you need to
follow one rule you need to have 12
columns so I'm going to make a div and
I'll just say uh let's do 4 6 and 2 so
12 so 4 and I might as well do it this
way so whenever you make your first
column what you do is you say class
medium and see all these things medium -
10 medium - 12 this is saying how wide
is this column going to be well the
first one first one is just going to be
4 so my first column is going to be 4
wide so since we needed 12 we have 8
more to take care of so I'm going to say
6 and 2 so 6 6 and 2 and 2
just like that now we actually need to
add one other class these and that is
columns
so this div right here is going to span
four columns this one right here is
going to spend six and this one right
here is going to span two now if I just
run this right now it's going to be a
little bit difficult to see what's going
on so I'm actually going to add one
other background color just so it's
really easy to see and I'll just be like
background Oh light blue so let me just
set this one the light blue this won't
be like light uh salmon and this one
will just be like light green look at
this you see it gave me the suggestions
whenever I started typing but then when
it popped up for me it said there's a
typo in it well Chet brings you
shouldn'ta gave me the freaking
suggestion if there's a typo in it
that's your problem all right so check
it out so we made one row as we can see
right here and the reason that they are
different widths is because even though
this is twelve columns this div right
here spans four of them this one spans
six in this one spans two and like I was
saying if you just want to have one main
column then what you can actually do is
cut this and change this to twelve and
check it out so you can either have
twelve that take up one arm you can
either have you know one big column that
take up salt all twelve if you want to
have it exactly split then just have six
and six or whatever you want to do
that's up to you so actually let me just
go ahead and do this right now to show
you guys a little bit clearer what's
going on so for the first row I'm going
to make all my columns different and for
the second row I'll just um have a
layout that's divided exactly in half so
I'll be like light gray for this
so check it out and of course in here
what we would do is we typically put our
items and I'll show you guys all that
different items you can add later on so
maybe in this too if we wanted our
navigation on the right would add all
our navigation items if we wanted some
heading in this one we could do that
whatever we want to do but remember
whenever you're working with websites in
foundation every single layout is going
to be composed of rows however many you
want and inside those rows you're going
to have twelve columns so make sure that
your columns add up to twelve so there
you go we're now ready to move on to
some more advanced stuff it's going to
be awesome see you next video