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 is our stats slice as I call it here. So you can have these number of projects and releases and so on
0:08
and it's supposed to look really cool like this all laid out and in the center with gray and a little stand out border at the bottom and top
0:14
and yet it looks like this. So let's go work on that now. Should be actually quite easy. So the first thing we want to do
0:21
is you know see what those elements are. It's going to be PyPI stats here and within there we have a stat. So let's say PyPI stats
0:31
then .stat like that. And the first thing we want to do is have them go horizontal instead of vertical. So remember that display.
0:42
In line block it could be inline. It would also go horizontal but you couldn't set the box style like padding and stuff. All right kind of good.
0:50
Let's set the color. Over here we have this gray and so let's go up here and say .pypi-stats. Set the background color to be this thing
1:00
I've just copied because I just grabbed it from over here. There we go all right. That's some progress, some progress.
1:08
So let's give it a little more room here. Let's say padding is 10 PX and zero. So top and bottom 10 left and right zero. Little bit better.
1:20
And let's also say text align is center. Okay well it's in the middle. That's pretty good. Let's focus on these for a minute.
1:30
There's a few more settings I want to set like border and whatnot here. But let's go over here and set this. On this I want to set a minimum width
1:37
so they have that spacing around them and I'll set that to be 170 PX. Found that just by playing around with it. There we go.
1:45
Now they have that little bit of space there getting better. Let's set the padding around them to be 10 PX. Little more room.
1:53
Yeah starting to look more like it. Okay font side let's set that at 16 PX. How we doing? Mm-hm. Let's set the color. And there's the color
2:06
I just grabbed from pypi.org. Let's see what we've got. Okay there's the color. Oo looking quite good. There's still little nice borders
2:14
and stuff on the other one I'd like to add. So let's go over here. Save border at bottom. Make one PX solid. And let's use that color right there.
2:28
And we'll do the same for the top. Have a look. Yeah it's not super impressive but I like that little line just a little more dark gray
2:40
than what we had there. Yeah I think it's looking pretty good. The fonts are looking a little bit different. I did go and figure out
2:46
what fonts were being used on this page. So let me just show you that real quick. This is actually a Google font that we're using.
2:52
So we're linking over to fonts at googleapis.com to source sans pro and using that way up at the top setting the family like that.
3:04
Okay so that's why those look a little more similar. Also set the border radius on the input so it looks more like PyPI.
3:11
Okay I feel like you know these are not super exactly identical but they're close enough for what we're doing so far. So yay stats slice is done.