Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, we'll work on the features sections towards the bottom of the page, and finish things up.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[Master Class Fluid Grids] [CSS: Part 4]
0:00
We have our basic 3 column layout completed, and now it's time to finish things up.
0:05
Next, we're going to work on the features down at the bottom of the page.
0:11
Go ahead and switch back to TextMate and move on.
0:16
We'll copy our comment flag here and paste it in, and the next section is going to be called
0:21
"Features" and the features, just to remind you, appear at the bottom of the page.
0:29
So let's go ahead and switch over to Photoshop, and we'll close this smart object
0:35
and scroll down here, and this is going to be the features section.
0:40
Now, these features are actually separate from our 3 column layout at the top,
0:45
and we're going we're going to style each individual feature because each one has
0:50
a slightly different icon, but there will still be shared styles among them.
0:55
So we'll go ahead and switch back to TextMate
1:00
and we'll make some room to work here, and first we'll just select the entire "Features" div
1:05
and we'll float it to the left.
1:13
Now inside of the features div we have a bunch of feature classes.
1:16
We're going to select the features list again and select each list item inside of it
1:21
which is identified by the class "feature."
1:28
Now, let's go ahead and switch over to our html just so
1:31
we can get an idea of what this actually looks like.
1:35
Like I said, features is actually an unordered list, and then each feature is a list item
1:39
inside of that, and of course, inside of each list item we have a few elements.
1:45
We have a div with an image inside of it for the icon, and then we have a div called "info"
1:52
with a 3rd level headline and a paragraph just sort of describing that feature a little bit.
1:58
So let's go ahead and switch back to our css, and for the feature we need to set a width, and
2:05
once again, this needs to be a fluid width.
2:11
So let's go ahead and switch over to Photoshop and select our marquee
2:14
tool and measure this out.
2:19
We're going to select this entire feature here and according to our info panel,
2:21
the width is 310 and this needs to be calculated against the context
2:27
of the entire page, which is 950.
2:33
So let's go ahead and switch back to TextMate and just make a comment in the margin here.
2:37
So we'll say 310 divided by 950 and we'll switch over to our calculator
2:43
and do this calculation.
2:50
So 310 divided by 950 gives us about 32% so we'll copy that number, paste it
2:52
in here, make it a percent and then move the decimal point over.
3:00
Just like that.
3:07
We want each feature to be floated to the left, and then we want to set a minimum height on
3:09
these of 200 pixels because they are in a fairly dynamic environment with fluid widths, but
3:17
we never want their height to go below 200 pixels, otherwise the text will start to wrap
3:25
strangely, and the icons could be offset and so on.
3:31
Next, we're going to go ahead and style the icons inside of each feature.
3:35
So we'll say "#features.feature.icon" and then we'll go ahead and float those icons
3:41
to the left and we need to set a width on these icons and of course, these icons are images
3:49
that will be scaled, and so we need to set a fluid width on these.
3:56
So we'll go ahead and switch back to Photoshop here, select one of our icons,
4:00
and it looks like the width is 71 pixels there, and this needs to be calculated against the
4:06
context of a feature which has a width of 310.
4:14
So we'll switch back to TextMate and we'll say the target of 71 pixels divided by the context
4:18
of 310 pixels, and we'll calculate that using our calculator,
4:29
and we'll say 71 divided by 310 and that gives us about 22%.
4:35
So we'll go ahead and copy and paste that in, move the decimal point
4:42
and set it to a percentage.
4:47
Then, we need to set a margin right on these icons, so we'll go ahead and type out
4:50
"margin-right" and this is of course along the x axis so we need to calculate
4:55
a fluid width for this as well.
5:01
So we'll go ahead and switch over to Photoshop and using our marquee tool,
5:03
we'll go ahead and measure out the margin right of this icon, and the margin right will just
5:08
give the icon some separation from our 3rd level headline and from the paragraph text.
5:14
So it looks like the width there is 10 pixels, and this will be measured against the
5:20
context of the entire feature class, which is a width of 310.
5:25
So we'll go ahead and switch back to TextMate, and we'll put a comment in the
5:31
margin, and we'll say 10 divided by 310 and we'll calculate that using our calculator,
5:36
10 divided by 310 and that gives us about 3%.
5:45
So we'll copy that from our calculator, paste it into our css document, move the
5:50
decimal point, and set it as a percentage.
5:55
And now, we just need to say height 100% on our icon just so that the icon fills the entire
5:59
width and height of its parent element.
6:08
Next, we're going to go ahead and select "#features.feature.info" and this is the
6:11
div that contains the 3rd level headline in the paragraph text to the right of the icon.
6:20
We're going to float this to the left, and we can just sort of approximate this and give it a
6:26
width of about 73% and we'll give it a margin top of about 2%, and then we'll style the
6:34
3rd level headline, and I want to give this the same Pacifico font
6:46
that we used on the quotes earlier.
6:54
So I'll go ahead and say "Pacifico" for the font, and I'll set some fall backs just like that.
6:57
I'll set the font size manually to 1.8 ems, and then I'll give it a margin bottom of about 16
7:07
pixels and again, this is on the h3 so this margin bottom is separating the 3rd level
7:15
headline from the paragraph text.
7:22
So we'll skip down here some more, and we'll move on to the actual paragraph text,
7:26
and this is pretty simple.
7:32
We want it to be slightly smaller than the 3rd level ,and we'll give it a lighter color
7:34
just so it has a little bit less emphasis.
7:40
Next, I'm going to go ahead and set a margin left on each one of our features.
7:43
However, if we switch over to Photoshop, we can see
7:49
that this 1st and 3rd feature are going to have a different margin left
7:53
than this 2nd and 4th feature.
7:59
So in order to accommodate this, we're actually going to use a css 3 selector.
8:03
So let's go ahead and switch back to TextMate, and we'll skip down here,
8:09
and then we'll select the features list and select a feature,
8:14
and we'll use the pseudo selector "nth-child" and give it a value of 1.
8:21
I'll go ahead and copy that and paste it on the next line, and we'll change this
8:28
value to 3 and we're going to give this a margin left, and in order to calculate this
8:34
we need to switch over to Photoshop.
8:41
Now, this margin left is going to be everything that's to the left of
8:44
this first feature and this 3rd feature.
8:49
So it looks like that's a width of 121, and this needs to be calculated against
8:53
the entire width of the page, which is 950, so we can go ahead and switch over
8:58
to TextMate and put that in the margin, and then we'll put that into our calculator.
9:04
So 121 divided by 950.
9:09
We'll switch over to our calculator and clear out what we have and say 121 divided by 950
9:13
and that gives us a value of about 12%.
9:21
So we'll go ahead and copy that and paste it into our css document.
9:24
We'll move the decimal point and remove the extra and set it to a percentage.
9:29
Next, we just need to style our 2nd and 4th children so we'll go ahead and say
9:35
"#features.feature:nth-child" and give it a value of 2 this time, and then we can
9:42
just go ahead and copy that and paste it down on the next line, and we'll give it a value of 4.
9:51
Now we need to say margin-left and we'll go ahead and switch over to Photoshop so that
9:58
we can calculate this and this is going to be everything to the left of our 2nd and 4th feature
10:05
up until our 1st and 3rd feature.
10:12
So it looks like this is a value of 90, so we'll go ahead and calculate that against
10:15
the width of the entire page.
10:21
So we'll put this in our margin as a comment just so we know how this is being calculated.
10:23
We'll say 90 divided by 950, switch over to our calculator, clear out what we have and say
10:29
90 divided by 950 and copy that, which looks to be about 9%.
10:36
We'll move the decimal point over just like that and then we'll set this to a percentage,
10:43
and save it out.
10:51
Now let's go ahead and switch over to Google Chrome, and we'll refresh the page and if
10:53
we scroll down here you can see that we now have these features.
10:59
We have a nice icon with a 3rd level headline next to it with the Pacifico font,
11:02
and then we have our paragraphs right below our 3rd level headline in a slightly lighter
11:09
colored font in the Helvetica font and if we go ahead and adjust the width
11:15
of our browser here, you can see that because we have a fluid grid, everything just resizes
11:22
itself automatically.
11:28
So let's go ahead and scroll up so we can see what the 3 columns actually
11:30
looks like when we do that.
11:34
If we just resize you can see that the percentages
11:36
automatically resize 3 columns.
11:39
Now, we're not quite done here.
11:42
We still need to get into responsive design because as you can see, when we get down
11:44
to these smaller sizes, the layout really starts to break down and our percentages don't quite
11:49
support the layout anymore.
11:56
That about wraps things up for this Master Class.
11:58
By now, you should have a pretty good idea of how to calculate and set up a fluid grid layout.
12:00
Our design is not completely responsive yet because we haven't added in our
12:07
css 3 media queries.
12:11
We also haven't done any cross browser testing.
12:13
However, setting up the fluid grid is an essential
12:16
step in creating a full, responsive design.
12:19
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up