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