Building Data-Driven Web Apps with Flask and SQLAlchemy Transcripts
Chapter: Adding our design
Lecture: Stats slice
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
The next thing we want to style
0:01
is our stats slice as I call it here.
0:03
So you can have these number of projects
0:05
and releases and so on
0:07
and it's supposed to look really cool like this
0:08
all laid out and in the center with gray
0:11
and a little stand out border
0:12
at the bottom and top
0:13
and yet it looks like this.
0:15
So let's go work on that now.
0:17
Should be actually quite easy.
0:19
So the first thing we want to do
0:20
is you know see what those elements are.
0:22
It's going to be PyPI stats here
0:25
and within there we have a stat.
0:27
So let's say PyPI stats
0:30
then .stat like that.
0:33
And the first thing we want to do
0:35
is have them go horizontal instead of vertical.
0:37
So remember that display.
0:41
In line block it could be inline.
0:43
It would also go horizontal
0:44
but you couldn't set the box style
0:46
like padding and stuff.
0:47
All right kind of good.
0:49
Let's set the color.
0:51
Over here we have this gray
0:52
and so let's go up here and say .pypi-stats.
0:57
Set the background color to be this thing
0:59
I've just copied because I just grabbed it
1:01
from over here. There we go all right.
1:04
That's some progress, some progress.
1:07
So let's give it a little more room here.
1:09
Let's say padding is 10 PX and zero.
1:12
So top and bottom 10 left and right zero.
1:17
Little bit better.
1:19
And let's also say text align is center.
1:24
Okay well it's in the middle.
1:26
That's pretty good.
1:27
Let's focus on these for a minute.
1:29
There's a few more settings I want to set
1:30
like border and whatnot here.
1:31
But let's go over here and set this.
1:34
On this I want to set a minimum width
1:36
so they have that spacing around them
1:38
and I'll set that to be 170 PX.
1:41
Found that just by playing around with it.
1:43
There we go.
1:44
Now they have that little bit of space there
1:46
getting better.
1:48
Let's set the padding around them to be 10 PX.
1:51
Little more room.
1:52
Yeah starting to look more like it.
1:54
Okay font side
1:56
let's set that at 16 PX.
1:59
How we doing? Mm-hm.
2:02
Let's set the color.
2:04
And there's the color
2:05
I just grabbed from pypi.org.
2:07
Let's see what we've got.
2:09
Okay there's the color.
2:10
Oo looking quite good.
2:12
There's still little nice borders
2:13
and stuff on the other one I'd like to add.
2:17
So let's go over here.
2:19
Save border at bottom.
2:21
Make one PX solid.
2:25
And let's use that color right there.
2:27
And we'll do the same for the top.
2:33
Have a look.
2:34
Yeah it's not super impressive
2:36
but I like that little line
2:38
just a little more dark gray
2:39
than what we had there.
2:40
Yeah I think it's looking pretty good.
2:42
The fonts are looking a little bit different.
2:44
I did go and figure out
2:45
what fonts were being used on this page.
2:47
So let me just show you that real quick.
2:48
This is actually a Google font that we're using.
2:51
So we're linking over to fonts
2:53
at googleapis.com to source sans pro
2:56
and using that way up at the top
3:00
setting the family like that.
3:03
Okay so that's why those look
3:04
a little more similar.
3:05
Also set the border radius on the input
3:07
so it looks more like PyPI.
3:10
Okay I feel like you know these are not
3:12
super exactly identical
3:14
but they're close enough
3:15
for what we're doing so far.
3:17
So yay stats slice is done.