Building Data-Driven Web Apps with Pyramid 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 With our hero in place, the next thing
0:01 just let's work top to bottom
0:03 to focus on is this, what I'm going to call the stats slice.
0:06 And that's here we have
0:07 number of projects, number of releases, number of users.
0:10 Now what we're going to get is getting a little bit of gray
0:12 a little bit darker, and then three little segments
0:15 maybe in the middle third.
0:17 Alright, let's do that.
0:19 So here's what we're working with.
0:21 We've got a divet that is PyPI stats
0:24 and in there we have stat, stat and stat.
0:27 Let's go and put that down here.
0:29 We have the stats.
0:31 This part is still going to be the gray slice
0:34 so we'll set the padding at 10 px and 0
0:37 so up and down but not on the right.
0:40 We'll set the background color.
0:42 Now, I've already copied this, or copied it down before.
0:45 It's ec, ec is the gray, so let's see
0:49 how we're doing already.
0:53 Looking pretty good.
0:54 Color seems to match, but of course
0:57 the text pieces not so much.
1:00 Let's set a border bottom
1:04 one PX solid and then a little bit darker
1:07 is going to be d3.
1:11 How does that look?
1:12 And there's a little border coming in
1:15 some orderly on the top.
1:18 I'll have the same thing, and then
1:20 let's set everything to align center.
1:24 How's it looking now?
1:26 Better, looking better.
1:28 Of course, that stuff's not vertical.
1:30 It has new lines in it because these are divs
1:32 but we can tell them to be in-line blocks
1:34 rather than block display, which we will fix those.
1:37 So let's focus on that part now.
1:41 So those are going to be contained within here
1:43 and they have the class stat so we can set
1:46 their style right here.
1:47 The display is going to be an in-line block
1:52 which should fix that wrapping or new lines.
1:56 I set the width to the other all equal space to 170.
2:01 If you wonder how I came up with these numbers
2:02 I was just playing with it before and that's what I came up
2:05 with that seemed decent.
2:06 So now they are kind of spaced out like we were hoping.
2:11 Let's do a little bit of padding.
2:12 Font size is 16, and then the color we have set to this
2:17 Again, I just got this straight off PyPI and wrote it down
2:19 so we could use it here.
2:21 There we go. Now it's looking pretty close.
2:26 It's not exactly right because we're not using
2:29 the same fonts, so let's go ahead and fix that now.
2:32 We're going to use fonts from Google
2:35 some of Google's free web fonts, and let's go ahead
2:37 and put those right here like so.
2:40 So we're going to use Source Sans Pro
2:45 and we're also going to use Font Awesome as well.
2:47 So let's go ahead and drop those in there, and that way
2:50 we can make things look a little bit nicer.
2:52 So if we come up to the body, come up here and set the font
2:56 to be Source Sans Pro or Helvetica or Arial
2:59 and then just some kind of Sans Serif.
3:01 So now we should be a little closer.
3:03 There we go.
3:04 Now, that's the final step to make these two
3:07 look exactly the same, okay, besides the Nav bar.
3:11 That's pretty good, right?
3:12 I think that little slice is here.
3:14 Now, no data is being passed in, right?
3:17 We're not actually computing that yet.
3:19 We'll do that when we get to the SQLAlchemy section.
3:21 But for now at least the place holders are there
3:24 and then when we get here we just need to say something like
3:29 this project count, like that, something to that effect.
3:33 Maybe a little more formatting.
3:35 But we don't have those numbers yet so we're just going to leave 0 for now.
3:39 Alright, that's the first two slices.