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 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 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.

Talk Python's Mastodon Michael Kennedy's Mastodon