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
Well done!
You have completed Fluid Grids!
You have completed Fluid Grids!
Preview
In this video, we'll set up some basic CSS and get started on the first column in our layout. We'll also start our fluid grid calculations.
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
[?music?]
0:00
[Master Class: Fluid Grids: CSS: Part 1]
0:02
[Nick Pettit] We're now at a point where we're ready to get started on our CSS.
0:05
However, before we start coding, there are a few things that we need to go over.
0:10
First, I'd like to point out that the work that we'll be doing in this Master Class
0:15
is dependent on the wireframes, Photoshop documents and images that we created
0:19
in the previous Master Class about designing for responsive layouts.
0:24
If you haven't already downloaded those files, you may want to do so now.
0:28
For your convenience, they're included with the code for this Master Class.
0:32
Now, even though we discussed fluid grids in the previous Master Class,
0:36
we should take a moment to review because we're about to perform
0:41
numerous fluid grid calculations.
0:45
Before Ethan Marcotte wrote his now famous article for A List Apart
0:48
about responsive web design,
0:51
He wrote an article called "Fluid Grids."
0:53
The basic idea is to create a layout where all of the elements
0:56
are based on carefully calculated percentage widths.
1:00
In the web design community, fluid layouts have not enjoyed the same popularity
1:03
as fixed width layouts.
1:09
In a fixed width layout, the entire page is a set width,
1:11
like 950 pixels, for example,
1:15
and then that layout is centered using margin-auto on the left and right sides.
1:17
In a fluid layout, most elements are based on the percentages
1:22
or relative values, rather than fixed pixel values.
1:26
Now, the actual calculations for fluid grids tend to create unusual-looking numbers,
1:31
but they're actually pretty simple to understand.
1:37
You take the pixel value of the element that you want to be fluid
1:40
and then divide it by its parent element.
1:43
Or in other words, you take the target element divided by the context.
1:46
Then you apply the resulting percentage value
1:51
to your target element.
1:54
When you do this for every width and margin on the page,
1:56
the entire layout will dynamically resize with the browser window.
1:59
This only works to a certain point, of course,
2:03
and that's where media queries come into the picture,
2:06
but for now, we'll just focus on fluid grids.
2:09
To generate these exact pixel values for the calculations,
2:12
it's best to use a high fidelity mockup so that you can measure everything
2:15
in a program like Photoshop.
2:20
We're just about ready to dive into CSS, but there's one more thing I should mention.
2:22
While we are going to use relative units for our fonts,
2:27
we're not actually going to make any fluid grid calculations for them.
2:30
This does go against the grain a bit because font sizes are typically a part
2:35
of a fluid grid layout and a part of responsive web design.
2:40
With responsive typefaces, you can get into some unusual situations
2:44
where fonts become bit too large or too small for a particular screen resolution.
2:48
However, by manually setting our fonts in the fluid grid and later on using media queries,
2:54
we gain tighter control over readability.
3:00
This is my own personal decision, so you should feel free to either go along with it
3:03
or to disagree and set your type with responsiveness in mind.
3:09
Now, let's finally dive into the CSS.
3:12
We're now at a point in our project where we're ready to start adding our CSS.
3:17
But just to review first, here's what our site looks like without any styling
3:22
and just HTML, so we can kind of scroll through here
3:28
and we have some very large images for our features
3:32
and for our actual HTML5 video
3:36
and for our site logo, and those will all be resized when we start adding in our CSS
3:40
and our fluid grid calculations.
3:45
So let's go ahead and first switch over to TextMate
3:48
and we're going to go ahead and create a folder
3:53
for our CSS, and of course, we will call this folder CSS.
3:57
And inside of that folder, we're going to create a file
4:01
called application.css, and the reason that we're calling this application.css
4:05
is because it will contain all of our CSS that is specific to the application.
4:12
So we'll go ahead and create that, and the first thing that we want to do inside of here
4:20
is go ahead and create a comment flag, so we'll go ahead and type out some stars ****
4:24
and then we'll close that out.
4:31
The first thing that we're going to put in our document here is some reset code.
4:34
I have some reset code that I like to use,
4:40
but you can use pretty much any reset code that you want.
4:43
The reset code that I'm using is from Eric Meyer
4:47
and it is specific to HTML5, so you'll see lots of HTML5 tags in here
4:52
that are being reset.
4:58
So let's go ahead and copy and paste this flag.
5:00
We'll create some room to work here,
5:06
and the next section I'm just going to call BASE
5:08
because these are going to be our base styles that apply to pretty much the entire site.
5:13
So we'll go ahead and scroll down here and the first thing that we'll style
5:19
is our HTML element.
5:23
And for that, we'll say height: 100%;
5:25
and that's just going to help out with any sort of scrollbar issues
5:32
where scrollbars might be appearing or disappearing.
5:35
And next, we'll go ahead and select the body element,
5:39
and here, we're actually going to apply a few CSS3 gradients,
5:43
so we'll use our background: property, and first we'll do a Mozilla linear gradient
5:49
so we'll use the -moz- vendor prefix linear-gradient();.
5:56
And inside of here, we'll start at the top with a white color #FFFFF at 0%
6:03
and then we'll go to a middle gray color #C5C5C5 at 30%.
6:15
We'll close out that gradient and we'll say no-repeat;
6:23
and then we want to do a very similar background, only this time for -webkit.
6:29
So we'll go ahead and say -webkit-gradient(linear;
6:34
we'll start at the left top, and work our way down to the left bottom.
6:41
We'll go ahead and type out our first color-stop here,
6:45
so we'll say color-stop(0%
6:50
and of course, that will be white, just like our previous gradient.
6:56
And then, we'll type out our next color-stop and that will be at 30%,
7:00
just like our previous gradient.
7:07
We'll use the same middle gray color, and then, of course, we want this no-repeat.
7:09
Next, just like on the HTML element, we'll set the height to 100%.
7:19
Again, this will just help out with any sort of scrollbar issues.
7:24
We'll set the background-color to that same middle gray color
7:28
and this is just for browsers that may not support CSS3 gradients.
7:35
We'll set the text color for the entire site to just above black at #222;
7:42
and we'll set the font-family to Helvetica, arial, serif,
7:50
and we will be bringing in other fonts later on,
8:01
but Helvetica will be our default font.
8:04
Next is the image element, and this is very important for fluid grids.
8:09
We want to set all of the images on our page to have a max-width of 100%,
8:14
and basically, this will just make it so that images will fill their parent container
8:21
so we don't have to worry about all of our images stretching out to fill our containers.
8:28
Next, we'll go ahead and select all of our paragraphs
8:34
and set them to a line-height of 1.2em;.
8:38
We will select our wrapper div
8:43
and we just want to center this like a normal fixed width layout,
8:48
so we'll go ahead and say margin: 0
8:52
and then auto on the sides.
8:54
And then, we want to set our wrapper to have a width of 70%.
8:58
Now, we're not doing any fluid grid calculations here yet.
9:05
The 70% is just sort of arbitrary.
9:09
Because all of the widths on our layout are going to be fluid,
9:13
we can actually set this width to be whatever we want.
9:16
If we set it to a larger number, say 90 or 95%,
9:20
we'll have less room on the left and right sides
9:25
and this will be good for smaller mobile layouts
9:28
where we actually don't want to give up so much space to the left and right.
9:32
We actually need space for just the content.
9:36
So next, we're going to go ahead and style our first and last columns.
9:39
And of course, we called those #header and #misc,
9:46
so that's the column that's on the left
9:50
and the column that's on the right.
9:53
Now, we can style these together because they're actually going to be the same width;
9:55
however, this is the point where we need to start doing our fluid grid calculations.
10:00
So we'll go ahead and say width
10:04
and then we're going to go ahead and actually switch over to Photoshop
10:08
because we need to measure out a few things here.
10:13
So using our marquee tool and using the Info panel here,
10:17
we'll go ahead and measure out the pixel widths
10:22
and then get percentage values from those.
10:25
Now remember, to calculate a fluid width, they need to take the target divided by the context.
10:28
So first, we'll just go ahead and get the context
10:35
by selecting everything on the page because the page is the context in this case,
10:39
so the width of the page is 950 pixels.
10:45
And then, we want to go ahead and measure one of these columns,
10:49
so using our marquee tool, we'll go ahead and measure across
10:54
and the width there is 230 pixels, so we can go ahead and do this calculation now.
10:58
We'll switch over to TextMate and as a CSS comment,
11:05
we'll go ahead and say 230 / 950 just so that we can remember
11:12
how we actually got these numbers.
11:19
Next, we're going to switch over to our calculator and we're going to calculate this out.
11:22
So 230 divided by 950 gives us a really huge number.
11:28
Now, you might be thinking that you can just go ahead and round this off to say 24%,
11:35
but that's actually not good enough.
11:40
We need this many significant figures so that when we increase our layout
11:43
to a much larger size or much smaller size,
11:48
it will maintain the look of pixel accuracy.
11:51
So we're going to go ahead and copy this number and switch over to TextMate
11:54
and just paste it in right here.
12:00
Remember, this has to be a percentage, so we need to move the decimal point over by two
12:03
and we'll remove the extra here, and then we'll go ahead and add in a percentage there.
12:08
The next part is pretty easy.
12:16
Because this is a column, we want to float it to the left
12:18
and then, we have the margin-left, which once again we need to do a fluid grid calculation.
12:22
Now, we already know the context in this case,
12:29
but the target is what's a mystery.
12:33
So of course the context is 950 pixels across,
12:38
but to get the target, we need to switch over to Photoshop,
12:43
use our marquee tool, and just do this measurement.
12:46
So we want to get the margin-left of one of these columns
12:51
and it looks like that's about 40 pixels.
12:55
We'll go ahead and switch over to TextMate and put in 40 here.
13:00
And then, we'll go ahead and switch over to our calculator
13:07
and we'll say 40 divided by 950 and copy that number,
13:10
go ahead and switch over to TextMate and paste in this number right here,
13:16
move the decimal point by two.
13:21
We'll go ahead and delete the extra here and add a percentage and save it out.
13:25
So let's go ahead and switch over to our HTML and add in our CSS document.
13:34
We want to, of course, do that in the head of our document
13:39
and we'll do that right after our title tag.
13:42
So we'll type <link href=
13:45
and we'll do a relative link to the CSS directory
13:49
and of course, we called our style sheet application.css.
13:52
We'll set the media type to "screen"
14:00
relations="stylesheet"
14:03
and of course, type="text/css".
14:07
We'll go ahead and save that out, switch over to the browser and refresh,
14:13
and as you can see, we now have our gradient,
14:17
we have some styling on our text with our Helvetica font,
14:20
and there's a few other light stylings going on,
14:25
but really not a whole lot yet.
14:30
We'll start to see more things when we actually do more of our fluid grid calculations.
14:32
But so far, so good.
14:37
We'll go ahead and switch back to TextMate and switch over to our application.css file.
14:40
Next, we're going to go ahead and style our main content div,
14:48
so let's go ahead and select that.
14:52
We'll float this to the left
14:57
because it's going to be containing lots of floated elements.
15:00
We'll set the width to 100% because we actually want this to expand
15:05
to whatever the wrapper is set to.
15:11
We'll just set a margin-bottom of about 5% and we are using a percentage here,
15:14
but that actually has nothing to do with the fluid grid.
15:21
We just want about 5% of margin on the bottom.
15:24
So let's go ahead and scroll down here, and next we want to create a new section
15:28
for our header, so let's actually go ahead and copy one of our comment flags
15:34
and paste that in, and we'll call it HEADER.
15:41
First, we want to go ahead and style our logo in this section,
15:48
so we'll set a top margin of 100%, a right margin of 0, a bottom margin of 30px,
15:54
and a left margin of 0.
16:06
Then, on the first level headline that's inside of our logo,
16:10
we're going to set a text-indent of -20000px;.
16:15
Now, this is a neat little trick--let's actually go ahead and switch over to our HTML
16:23
so that we can see what's going on here.
16:27
Here, we have our logo and inside of that, we have our first level headline,
16:30
and right after that, we have an image.
16:35
Now, this image is the actual logo that is going to be rendered on the page,
16:39
so if we switch over to the browser, we can see that right here.
16:44
Now, just before that, we have that first level headline,
16:47
which is visible in plain text right now.
16:51
If we go ahead and switch back to TextMate, we can see
16:54
we have that first level headline followed by the image.
16:58
Now, by setting a text indent of -20000 to our first level headline,
17:01
it will actually hide that text, but the image will still be visible.
17:08
The reason why we want to include that text in addition to the image
17:13
is because we want the text to be there for accessibility reasons
17:18
and for search engine indexing.
17:22
We'll go ahead and switch back to our CSS
17:24
and we've set a negative text indent, so that would actually push that first level headline
17:29
to the left and we've set it to -20000 pixels, so that will push it to the left by 20000 pixels.
17:35
So it's actually still there; it's just so far over that it's unlikely
17:44
anyone will ever see it on a huge monitor.
17:50
So we'll go ahead and continue here, and we'll style our second level headline,
17:54
and this is sort of the tagline that comes right after the logo.
17:59
We'll set the text-align: right; because we want our tagline to be over to the right.
18:03
We'll set a margin-top of -5%
18:10
and that -5% margin will actually push that tagline up against the logo,
18:16
so it's kind of just like adjusting line height.
18:22
We'll set a font-size of 1.2em,
18:25
and then we're going to put a text-shadow on this.
18:29
Now, we'll go ahead and set the x offset to 0px, the y offset to 1px,
18:33
the blur radius to 1, and then we'll use the rgba function
18:39
and set this text shadow to white.
18:45
And then, we'll dial down the opacity to 90%.
18:50
This text-shadow actually won't look like a shadow at all;
18:54
rather, it will look like a highlight on the lip of the text
18:58
so that the text will look like it's actually pressed into the page,
19:02
as if it were letter-pressed.
19:06
So next, we'll go ahead and style the paragraphs inside of our header,
19:09
and if we just switch over to Photoshop so we can see what's going on here,
19:15
these paragraphs are actually right here,
19:20
and they just sort of give a brief blurb describing the application.
19:23
We'll go ahead and switch back to TextMate and on those,
19:28
we'll set a font-size of about 1.2em;
19:31
a margin-bottom of 24px;
19:35
and we'll set it to a middle gray color: #555;.
19:39
So let's go ahead and switch over to Google Chrome
19:43
and refresh the page, and here you can see we have our column
19:46
that's over on the left-hand side.
19:52
We have our logo with our subheader there, right below it.
19:55
We have our fonts, which are a little bit more styled now.
20:00
And if we scroll down, we can see that we don't have much else going on at this point,
20:03
but that's okay.
20:10
So let's go ahead and switch back to TextMate, and next,
20:11
we're going to actually work on the HTML5 video container.
20:16
So let's go ahead and grab one of these CSS flags and paste that in there,
20:21
and we're going to call this one VIDEO CONTAINER.
20:29
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