Preview
Video Player
00:00
00:00
Polishing Touches
10:57Lastly, we’ll put some polishing touches on our design to really refine and finesse it to its final form.
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