Preview
Video Player
00:00
00:00
Basic One and Two Column Layouts
9:17We’ll see how to set up one and two column layouts for our Preamble, Benefits, and Requirements section.
Hey again and welcome back.
0:00
We just styled the header of our CSS Zen
Garden.
0:02
And now we want to jump into typesetting
some of our body text in a one and
0:05
two-column layout.
0:09
We've got our line height, vertical rhythm
and
0:10
sizes down, so this shouldn't be too much
of a chore.
0:13
From our concept sketches, I want our
preamble, benefits, and
0:16
requirements sections to be one column.
0:20
And our explanation and participation
sections to be two column.
0:23
We see our benefits are set up as a small
aside for larger size screens.
0:27
But we want to style them in our basic
format for smaller sizes.
0:31
Then, through media queries, adjust it for
larger.
0:35
[BLANK_AUDIO]
0:37
We'll start by setting up our one column
layouts.
0:39
Using Trent Walton's technique,
0:42
I've placed asterisks at the 45th and 75th
characters into our HTML.
0:43
Remember, we'll be removing these later,
so
0:49
that's okay to put them in now as these
are gonna help us determine our measure.
0:52
Our line should break somewhere between
the two.
0:56
For these sections,
0:58
I'm gonna wanna set em apart through
different background changes.
1:00
So, lets head over to our CSS.
1:04
So for our preamble and
1:06
requirements, I want to set our background
to be that navy tone we've been using.
1:07
[BLANK_AUDIO]
1:11
And I'll also wanna give it some padding
of 4M for the top and bottom and 6% for
1:14
the left and right, as this is gonna give
our content good space within the block.
1:18
For our benefits, I wanna do a similar set
up, but
1:23
I wanna give it an even darker shade of
our navy for the background.
1:26
[BLANK_AUDIO]
1:29
So I'll save and let's go check that out.
1:36
Great.
So
1:39
our backgrounds are definitely setting
apart these sections, but
1:39
our type inside them now needs some help.
1:43
We can't even see our body copy.
1:45
So let's go in and
1:47
set that at a sandy tone of white and
let's also setup our measure.
1:48
So I head over here.
1:52
And notice how I'm selecting the H3's and
P's of our preamble and requirements.
1:54
Because our HTML cannot change and we
can't add another div or class into
1:59
the mix, we'll need to use these classes
and elements to set our measure.
2:03
I felt like a max width of 34 rim felt
like a good reading measure and
2:08
is just at the cusp of the 75th character
mark.
2:12
We'll also need to set our margins to 0
auto to keep our content block in
2:15
the middle of the page.
2:19
And for our H3, we'll give it a bottom
margin of .62m to keep it in line with
2:21
the rhythm that we set up.
2:25
Now, I'll copy this and paste it into our
P tags.
2:26
And remove that .62m of bottom margin as
it's no longer necessary.
2:30
And then I'll also set it's color to be
our white.
2:35
Let's save and check out how that's
looking.
2:39
All right.
2:42
That's much better.
2:42
Our measure is in a much more readable
place.
2:43
And notice the two asterisks are on two
different lines.
2:46
So that's good.
2:49
And our benefits down here still need some
help.
2:50
So let's go style those out.
2:53
We'll want to set our H3s up in a similar
way.
2:55
So I'll grab that copy and paste it down
here for our benefits H3.
2:58
But let's change the color of it to be our
lighter shade of gray.
3:03
[BLANK_AUDIO]
3:06
Let's set our paragraphs of our benefits
section to be the same as these.
3:08
But we're gonna want to change the color.
3:13
So I'll paste that in there.
3:15
And then our color will be a tad darker
shade of that gray.
3:16
So we'll do 606f81.
3:20
This'll make our H3 stand out just a bit
more.
3:23
So let's check that out.
3:26
Great.
That's much better, and
3:28
it has a nice feel and contrast with the
background.
3:29
Now in our requirements section,
3:33
things are styled in a similar way to our
preamble.
3:34
But notice now, our links need some tender
loving care.
3:37
So let's fix those.
3:40
So for our requirements class link style,
I'll set the color to be the same white as
3:42
the copy and give it a border bottom of
one pixel solid with the same color.
3:47
[SOUND] When these are hovered over, I
want them to turn green.
3:51
So on our hover selector, we'll set a
color of green and border of green.
3:59
[SOUND]
4:03
Let's save and refresh.
4:05
So great.
4:14
That's much better.
4:15
They actually look like links because they
have a border bottom here, and
4:16
they're hover state is nice.
4:19
And notice how building a good foundation
in the first video made this
4:21
process a whole lot easier for our one
column layouts.
4:25
Now, we'll be getting into the two column
layout area of our design.
4:29
After our preamble,
4:33
we see from our sketch that we want our
content to split into two columns.
4:34
It would be great here if our backgrounds
also differed,
4:38
which would further distinguish each
content block.
4:41
Again, our vertical rhythm, margins, and
line height are already set, so
4:44
this should be pretty straightforward.
4:49
These content blocks are similar lengths.
4:52
So it can work well to place them side by
side.
4:54
If they were longer pieces of content or
if just one was longer,
4:58
then it wouldn't make sense as the reader
would have to scroll through one,
5:02
then scroll back up to read the other.
5:05
Notice how asterisks have been placed at
the 40th and
5:08
50th characters to help us with our
measure for a multiple column layout.
5:12
To style these out, let's head over to our
CSS and we'll target our explanation and
5:17
participation classes.
5:21
We'll set a width of 50%, so that each
class takes up half of the browser.
5:23
And I'll set our box-sizing to border-box,
so
5:27
that when we adjust padding, it won't
adjust our width past the 100% mark.
5:30
On my explanation class, I'll give it a
float of left.
5:36
And padding of 4m for the top.
5:42
10% for the right.
5:44
4m for the bottom.
5:45
And 8% for the left.
5:47
This will float or position our content
block to the left and
5:49
space our content well within the block
through our padding.
5:52
Notice how our top and bottom padding are
consistent with our other sections of 4m.
5:56
For this explanation section, I'll keep
the background and
6:00
text the same colors as our body
6:04
[BLANK_AUDIO]
6:06
We're gonna wanna change that to be white.
6:35
So I'll go up here and grab a sample of
our white, and
6:37
head down to our participation H3 and
paste that in.
6:41
[BLANK_AUDIO]
6:45
Let's save and refresh.
7:01
[BLANK_AUDIO]
7:03
All right.
7:05
Things are looking really nice here.
7:06
So the div's, they're aligning well.
7:07
And our measure is good because the
asterisks are falling on two
7:09
different lines.
7:12
These asterisks are here to help us make
decisions, not make decisions for us.
7:14
If we felt like the measure needed to be
adjusted, then we should adjust it.
7:18
Lastly, notice our links and
7:23
our participation section could use some
nice styling.
7:25
So let's go help them out.
7:28
[BLANK_AUDIO]
7:29
Now let's check it out.
8:05
Great.
That's looking a whole lot better and
8:07
jives more with the content.
8:09
Lastly, notice this HTML and CSS are still
in all caps,
8:12
because they're set in links and they
don't have ABBR tags around them.
8:16
We can actually use some code to target
those two links and
8:21
change them to be small caps.
8:24
So let's check out how.
8:26
I'm gonna grab our small-caps copy up
here.
8:28
And then down here for our links,
8:32
notice I'm using these pseudo-selectors to
select our last paragraph.
8:34
And then our first link in the last
paragraph.
8:38
And our second link in the last paragraph.
8:41
These correspond to the HTML and CSS links
in that last paragraph.
8:44
So I'll set these to be small caps with a
text transform of lower case.
8:48
Let's save and check it out now.
8:53
Great.
So now those links are styled in
8:55
our small caps.
8:57
This was just a minor touch.
8:58
But I think it really helps style the
content.
8:59
Great.
Our content is really starting to
9:02
flow well.
9:04
And through color and arrangement, we're
clearly presenting these
9:05
different blocks of text in one and two
column layouts.
9:08
Next, we're gonna take a look at our
footer.
9:12