Building data-driven web apps with Pyramid and SQLAlchemy Transcripts
Chapter: Adding our design
Lecture: Our site design

Learn more about this course
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
0:01 Bootstrap and templates and so on
0:04 and apply them to actually put the design
0:07 for our website in place.
0:09 We might leave a few details out
0:11 until we get to the right location later
0:13 but for the most part, let's start by
0:15 ripping out this design and putting in a new design.
0:19 I'll try to not waste time doing this
0:21 but I'll also try not to skip over
0:23 too much stuff for you so hopefully
0:25 I can find a decent balance there
0:28 'cause there's a lot of details in
0:29 some of the CSS and so, alright.
0:30 So this is what we have so far.
0:32 We actually have this sort of
0:33 data-driven even though it's not
0:35 out of a database, it is you know
0:36 a model provided to the template, changing it here.
0:40 This is what we want.
0:42 Now if you look carefully this is not PyPI.org.
0:48 It's a slightly different version.
0:50 It has 96 projects and it's running on localhost.
0:54 So this is what we want to build.
0:55 I have the new releases here, some of the top stuff.
0:58 Click on it, you get details and history, all about it.
1:02 So we're going to build this and notice up here
1:04 I have a login and register.
1:06 Some of these things should look
1:08 a little more familiar to you
1:09 now that we've talked about Bootstrap
1:10 if they didn't already.
1:12 Notice where it says this is the fake site.
1:15 So this is is where we're going
1:16 and let's just focus on a couple of things.
1:18 Let's design out this front page here.
1:21 So over here, this is the red version that we have.
1:24 There's really two files that we're going to have to work with
1:26 in terms of the HTML.
1:28 We have our _layout and our index.
1:32 This does the navigation in the main top level
1:35 design as we saw, and then the content gets dropped in here
1:38 and that's going to be that special homepage
1:40 or the details of the package.
1:43 Let's do a little bit of extra work
1:45 to make things easier on us.
1:47 So let's go over here and let's do some organization.
1:50 First of all, this is going to become a true nightmare.
1:52 So let's do some organization here.
2:05 So far CSS images and JSON, and we'll put these things
2:10 in their various places.
2:15 We have to update them over here.
2:16 It wouldn't be new, so instead of static
2:18 we now have static img.
2:26 Let's go and set the title here.
2:29 Python Package Index Demo.
2:33 And this one's going to be CSS.
2:35 Let's just make sure everything is still working.
2:38 Yeah, it looks exactly the same.
2:40 That's what we want, okay.
2:41 So a little organization, reorganization worked okay.
2:45 Let's go and add a couple of things here.
2:48 I'm going to add a CSS file, called Site.
2:53 We're also going to want add one called Home.
2:57 Now Home is only going to appear in the homepage.
2:59 It's just going to style like that big top banner
3:01 and then Site is going to appear on all of the pages.
3:04 So we'll just work with that one for now.
3:06 Let's make sure we include it.
3:11 There we have our site, and we can just do a quick test
3:13 to make sure that, that's working.
3:22 Refresh it, and it looks like
3:23 it had some effect, okay, great.
3:25 Put it back.
3:27 Alright, everything seems to be working.