Building Data-Driven Web Apps with Pyramid and SQLAlchemy Transcripts
Chapter: Adding our design
Lecture: Our site design
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
It's time to take what we've learned about Bootstrap and templates and so on and apply them to actually put the design for our website in place.
0:10
We might leave a few details out until we get to the right location later but for the most part, let's start by
0:16
ripping out this design and putting in a new design. I'll try to not waste time doing this but I'll also try not to skip over
0:24
too much stuff for you so hopefully I can find a decent balance there 'cause there's a lot of details in some of the CSS and so, alright.
0:31
So this is what we have so far. We actually have this sort of data-driven even though it's not out of a database, it is you know
0:37
a model provided to the template, changing it here. This is what we want. Now if you look carefully this is not PyPI.org.
0:49
It's a slightly different version. It has 96 projects and it's running on localhost. So this is what we want to build.
0:56
I have the new releases here, some of the top stuff. Click on it, you get details and history, all about it.
1:03
So we're going to build this and notice up here I have a login and register. Some of these things should look a little more familiar to you
1:10
now that we've talked about Bootstrap if they didn't already. Notice where it says this is the fake site. So this is is where we're going
1:17
and let's just focus on a couple of things. Let's design out this front page here. So over here, this is the red version that we have.
1:25
There's really two files that we're going to have to work with in terms of the HTML. We have our _layout and our index.
1:33
This does the navigation in the main top level design as we saw, and then the content gets dropped in here and that's going to be that special homepage
1:41
or the details of the package. Let's do a little bit of extra work to make things easier on us. So let's go over here and let's do some organization.
1:51
First of all, this is going to become a true nightmare. So let's do some organization here. So far CSS images and JSON, and we'll put these things
2:11
in their various places. We have to update them over here. It wouldn't be new, so instead of static we now have static img.
2:27
Let's go and set the title here. Python Package Index Demo. And this one's going to be CSS. Let's just make sure everything is still working.
2:39
Yeah, it looks exactly the same. That's what we want, okay. So a little organization, reorganization worked okay.
2:46
Let's go and add a couple of things here. I'm going to add a CSS file, called Site. We're also going to want add one called Home.
2:58
Now Home is only going to appear in the homepage. It's just going to style like that big top banner
3:02
and then Site is going to appear on all of the pages. So we'll just work with that one for now. Let's make sure we include it.
3:12
There we have our site, and we can just do a quick test to make sure that, that's working. Refresh it, and it looks like
3:24
it had some effect, okay, great. Put it back. Alright, everything seems to be working.