Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Lastly, we’ll put some polishing touches on our design to really refine and finesse it to its final form.
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
Guess what guys?
0:00
You are in the home stretch.
0:02
Are page has really come together, and
we've got our media queries set for
0:03
smaller sizes.
0:06
So now, let's look at how to polish and
finesse our design.
0:08
Some of the things I have in mind are
styling our content at
0:10
the bottom to be a drop down nav of the
top.
0:14
Arranging our benefits section as an aside
to our requirements section.
0:17
And adding some nice transitions and
animations.
0:20
First, let me explain the extra credit
from the last video and
0:24
how we achieved this drawer effect for our
aside content at larger screen sizes.
0:27
We set a break point of 64.125em, which is
0:33
just slightly larger than our 1024 pixel
or 64em break point.
0:37
The reason behind this is we'll be
utilizing a CSS hover effect
0:43
that won't work on touch screens.
0:46
And most touch screens are under this
pixel break point.
0:49
Since we don't have access to the HTML or
JavaScript to create on click event,
0:51
we'll utilize this media query to show
this draw effect for our desktops.
0:56
It's not a perfect solution.
1:01
But's it's our next best option since we
don't have access to
1:02
other tools to create a bullet proof one.
1:05
So with our min width at 64.125em.
1:08
I've set our aside to have a position of
absolute.
1:11
A top of -26.5.
1:15
So the majority of it's hidden above our
header section.
1:17
And a transition of all 0.4 seconds and
1:21
ease to create that nice sliding out
effect.
1:24
Next, I've set the hover state to be a top
of -1em,
1:27
which will be where it slides to once it's
hovered over.
1:30
Then, I've added a symbol button-like plus
symbol with
1:34
the pseudo selector after on our aside and
set its content to be a plus symbol.
1:37
We've also positioned it to be absolute
with the text aligned off center.
1:43
It's background same as our aside.
1:47
It's color is our sandy white tone.
1:49
It's font size is 20 pixels.
1:52
And it's okay to utilize a fixed font size
and
1:54
width here, as I don't want these elements
to change.
1:56
And they're so small that it won't make a
difference on smaller screen sizes.
1:59
Next, the width, height and
2:03
border radius are all 30 pixels, which
will make this element a circle.
2:06
I want to position it in the center with
the dark navy meets the sandy white.
2:10
So I gave it a bottom setting of -.65eM.
2:15
A left of 50%.
2:18
And a margin left of -15 pixels which is
half of our 30 pixel width.
2:19
Let's check it out just once more to see
how it looks.
2:25
The drawer and it's function is noticeable
through the use of our plus symbol here.
2:28
And it's sliding transition effect is a
nice touch.
2:32
Notice how it disappears under the 1024
pixel mark, and
2:36
moves now back to the bottom of the page.
2:39
Now let's get in to styling out our
benefit section.
2:44
I want this content here to work as a
subtle sidebar next to
2:47
our requirement section once there's
enough room to fit it in.
2:50
I've done some testing and found that at
752 pixels or
2:55
our 47em media query, is a good place to
start.
2:59
Anything below that would be too tight to
try and fit it in as a sidebar.
3:03
This is also nice, because the size falls
right below the iPad screen size, so
3:08
people reading this on an iPad will still
get the sidebar layout.
3:12
To do this, I'll set my benefits class to
have a position of
3:16
absolute, a background of none, a float to
left.
3:19
This will allow us to position it within
the requirement section.
3:27
I found that I like where it sits with a
max width of 7.5 rem.
3:31
I text the line overwrite.
3:38
And a margin top of 12em.
3:43
To position it to the left of the content,
I've given it a left of 50% and
3:50
a margin left of -25.5 rim.
3:55
[BLANK_AUDIO]
3:57
This technique aligns the piece in the
middle of the page and
4:00
then moves it back to the left through a
negative left margin.
4:03
This helps line up the content near the
left margin of our
4:06
main content block for requirements.
4:09
Let's see what that looks like now.
4:11
I'll save and refresh.
4:13
All right.
4:17
That's a good start.
4:17
But let's continue to hone it in by
decreasing it's font size and
4:18
styling out our content a bit more.
4:22
For our benefits H3 here, I want a font
size of 1em, so
4:26
it's gonna be a lot smaller, and a margin
of zero.
4:30
I also want this to be small caps as it
will create hierarchy to
4:35
the content below it.
4:38
So I'll copy that small caps code.
4:39
[BLANK_AUDIO]
4:41
And I'll set it's font style to be normal
since our base H3 is Italic.
4:47
Now for our paragraph copy and our
benefits class,
4:52
I'll set it's font size to be 0.75em, the
next size down in our scale.
4:56
With a line height of 1.4,
5:00
so it's a bit tighter, because our measure
is a little tight here.
5:02
Let's save and see what that looks like.
5:07
Great.
5:10
Our benefits has been nicely arranged to
the right side of
5:10
our requirements section.
5:13
This will need some tweaking as the
browser expands because the font
5:15
sizes change in our media queries.
5:18
So let's fix it up.
5:20
As we increase our browser size, we notice
our font change here.
5:23
Our measure for our benefit section is now
a little bit tight and
5:27
a little bit too close to the edge of our
requirements.
5:30
So let's fix that up.
5:33
Our min width media query will correspond
to our max width one.
5:36
So we have this one set up at 54em.
5:41
I'll change our benefits class to have a
slightly larger measure of 8 rem and
5:43
give it a margin top of 12.5em.
5:48
And in margin left of -28 rem,
5:51
which will position it well within our
requirements class again.
5:54
Let's check out what that looks like.
5:57
Good deal.
5:59
It's starting to work well for medium
sizes here and
5:59
feels positioned well within the
container.
6:02
[BLANK_AUDIO]
6:04
With a font size increase at 64em our
benefits class could use
6:06
some more changes.
6:10
So I'll go in and adjust our max width,
our margin top, and
6:11
our margin left here to align it well
within the container again.
6:14
[BLANK_AUDIO]
6:18
Let's refresh and check that out.
6:32
Nice.
6:34
Our benefits are now looking good for our
mid to larger-sized screens.
6:35
We're getting close, but we're not done
yet.
6:39
I wanna make two more media queries for
large to extra large screen sizes.
6:41
People usually sit a little further back
from large displays.
6:46
So it's nice to have a font size increase
for comfortable reading.
6:49
We're not going to be able to view larger
browser sizes here,
6:52
because the max width of of this video
screencast is 1280 pixels.
6:56
So I'll just talk through what our code is
doing here.
7:00
If you have a larger screen size,
7:05
then feel free to build out this code in
your own workspace and test it out to see.
7:07
I've created a min width media query at
94em or
7:11
1472 pixels and upped our body font size
to 1.375 or 22 pixels.
7:15
Most of our typography still held up well
here.
7:22
But we needed to adjust a few things, like
the measure of our summary and
7:25
benefits classes.
7:28
And I've adjusted the width of our
explanation and participation H3s and Ps,
7:30
so their content measure doesn't go
overboard for those two columns.
7:35
I also did one last media query at 124em
or 1920 pixels.
7:39
I've increased our body font size once
more to 1.5em or 24 pixels.
7:44
This new size meant we needed to adjust
the measure on our summary class, all our
7:50
columns and we needed to slightly change
the margin left of our benefit section.
7:55
Again, if you have a large screen, be sure
to resize your browser and
8:00
check out these changes and how they
actually look on the web page.
8:03
Now, let's add a few final touches to the
design to really finesse it.
8:07
So first, I want all my links to have a
smooth transition effect.
8:12
So, I'll go up here to my a link tag and
add a transition of all 0.4 s and es.
8:17
Let's save and check out the difference.
8:22
[BLANK_AUDIO]
8:27
So I'll refresh our page.
8:30
And up here in our links, we see we have
them slowly transitioning into their
8:32
color instead of just jumping to that
color.
8:36
It's funny how something so simple can add
so much to a design.
8:39
I'll also wanna enable kerning and
ligatures on my body through
8:43
the font features settings with the
necessary prefixes.
8:47
So I'll write out that property and
8:50
paste in these other prefixes for browser
support here.
8:51
This code is what we went over in our
lesson on advanced typography.
8:55
Lastly, I want my header and top drawer to
fade in as someone lands on the page.
8:58
We'll use the CSS animation property along
with the necessary prefixes for
9:03
browser support.
9:08
Since this isn't so much typography, I'm
just gonna paste this in at the bottom and
9:09
explain it to you guys.
9:13
Here's our key frames for our animation,
and they're going to be fading in with,
9:17
first with an opacity zero and then
landing on one for that fade-in effect.
9:22
This other code down here includes the
necessary browser prefixes.
9:26
[BLANK_AUDIO]
9:29
So I'll add in an animation of fade in two
seconds to our aside for
9:33
that media query where it's at the top.
9:37
And I'm gonna copy that and add that to
our header.
9:39
[BLANK_AUDIO]
9:41
[SOUND] Let's save and check that out.
9:53
yeah, that's nice.
9:56
Just in case you missed it, I'll do that
one more time.
9:58
That's the stuff.
10:02
Great work.
10:03
Our design is now complete, polished, and
fully responsive.
10:04
No matter the case,
10:08
be sure to test your typography on
multiple browsers and devices.
10:09
In summary, we analyzed the content, chose
a typeface pair to work with,
10:13
put together a color palette, set up our
web fonts and
10:18
typographic scale, laid out type with good
measure and
10:21
rhythm, created typographic hierarchy in
the design and polished it responsively.
10:24
[BLANK_AUDIO]
10:29
We've covered a lot of ground over this
project.
10:32
So be sure to download and
10:35
look into the final CSS for a better
understanding if needed.
10:36
Also, for extra credit, try creating your
own Zen Garden and submitting the own
10:40
design, as this is a great way to
participate in the web community.
10:44
I hope you guys leave this course with a
better understanding and appreciation for
10:47
web typography, and know how to execute it
well.
10:51
Go forth creating websites with nice type.
10:54
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