Building Data-Driven Web Apps with Flask and SQLAlchemy Transcripts
Chapter: Adding our design
Lecture: Stats slice

Learn more about this course
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.