Transcript

00:09 okay so call them stacks how do we size
00:12 columns inside foundation six there are
00:15 four different column sacks there's a
00:17 one column two three four okay I'm gonna
00:21 review the two column stack primarily
00:24 today the settings are extremely similar
00:27 or it's just essentially you know having
00:30 more columns for the other ones so
00:32 there's you know obviously more sizing
00:35 options in the four column then there is
00:37 the one column okay um let's look at
00:40 some of these right so here we have the
00:42 sizing or column one and the sizing for
00:45 column two and if you're familiar with
00:47 foundation one you'll notice that there
00:49 is still the twelve based grid
00:52 so essentially imagine that the column
00:55 stack is broken up into twelve equal
00:57 units and you're gonna tell exactly how
01:01 many of those units this column is gonna
01:04 take up and then I say break that down
01:06 into the percentages as well so you can
01:08 see um you know the actual percentage
01:10 that that ID will take up so a 1 will
01:15 take up 8 percent as you see over here
01:18 in edit mode that's really tiny so
01:21 obviously for something like text
11:22 isn't going to be good you'll notice
01:24 that there are two new options here
01:27 there is auto and there is shrink to
01:29 content shrink to content is really
01:31 powerful especially if you're using like
01:34 maybe little icons or something like
01:36 that where the column will actually
01:38 shrink down to the size of its content
01:41 now Otto what Otto will do is it'll take
01:45 up as much space as possible but it'll
01:48 also be nice to leave space for other
01:50 things as well so if you notice here the
01:52 default in this two column stack is
01:54 small Otto and small Otto on column one
01:57 and two what that does is when both
02:00 columns are set to auto it'll evenly
02:03 split those up okay but you'll notice if
02:06 I set this to be let's say five so when
02:10 column one is set to five call them two
02:13 since it's still set to auto it'll eat
02:15 up the rest of the space which is
72:18 because columns 1 & 2 should equal 1
22:23 okay if you want them to be on the same
02:26 row now a lot of times what's very
02:28 common is maybe on small you will go to
02:30 12 on column 1 & 2 but then on medium
02:36 maybe you go 6 & 6 right this is how we
02:42 can get responsive sizing so if we open
02:45 this on a browser you'll notice that on
02:47 medium devices and large devices as well
02:50 we have a two column but then as I
02:52 shrink down when we get to small size
02:54 you'll notice that they both collapsed
02:57 to be 1 they take up the entire width so
03:01 this is how we can get some responsive
03:02 sizing so that on small it'll take a
03:05 particular width or maybe full width and
03:08 then on medium and large we can do
03:10 something different now if you notice by
03:12 default large is inherit and it'll
03:15 always inherit from the smaller setting
03:18 right so here since we didn't define a
03:21 large it'll just use the medium sizing
03:23 and if we didn't define medium sizing it
03:25 would just use whatever's to fine
03:27 install okay so it always inherits up
03:30 now by default these columns have no
03:32 gutters at all so there's no spacing in
03:35 between the columns on the outside or in
03:37 between them we can easily add that by
03:40 simply using margin so this will add
03:42 margin to the left and to the right the
03:44 top on the bottom and this will add
03:46 padding to the top to the left and right
03:49 and that's why I've to the top of the
03:50 bottom so if you want to add some
03:52 padding this just a quick and dirty way
03:54 do you
03:55 more detailed padding you can definitely
03:56 use swatches for that now these next
03:59 options allow us to define the
04:01 horizontal alignment of our columns
04:04 essentially um if your columns are
04:07 taking up the entire width you're not
04:08 gonna really notice this setting where
04:10 you're gonna notice it is let's say for
04:12 example I want to column 1 to be 5 and I
04:15 wanted to call them to to also be
54:17 since 5 plus 5 equals 10 it's not taking
04:20 up the entire width of 12 units right so
04:24 by default they're gonna be aligned left
04:26 but we can change that we can align them
04:28 centered we can line them to the right
04:31 we can align them justified which
04:34 Spacely space them out and if you notice
04:36 it basically puts each one on the ends
04:38 um and then there's also spaced which is
04:41 basically evenly spaced them out in the
04:44 area that they're in this horizontal
04:46 alignment along with you know the sizing
04:49 options really gives us a lot of control
04:51 of how our columns are going to be
04:53 aligned with each other now for vertical
04:56 alignment this is good when your columns
04:58 have different content by default they
05:01 will actually align towards the top okay
05:04 which is the default you can also align
05:07 them to the middle and if you notice
05:09 what that does is it aligns all the
05:11 content within the middle of their
05:13 columns now similar to the container
05:15 stack you can actually define the
05:17 content alignment within everything
05:19 that's defined within these columns so
05:21 you can do Center aligned left align
05:23 justify the content and then you could
05:25 define different alignments for your
05:28 content on small medium and large and
05:31 just like a lot of other stacks
05:33 throughout foundation six we have full
05:36 visibility control so you can hide or
05:38 show this content on particular devices
05:40 and then you have all the custom classes
05:43 to use with swatches
05:51 "}]