Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Flask Basics

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Static Files

4:14 with Kenneth Love

When you give a browser some HTML, it's going to want a CSS. We can't expect our users to be happy with just raw HTML, can we? Flask makes it easy for us to use CSS and JavaScript in our apps.

The static/ directory is served automatically at /static while you're running your Flask app.

You also don't have to use every block in every child template. If you don't specify a new version of the block, Flask will just use whatever is there in the parent template.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    No website or app is complete without some styling. 0:00
    At the very least, you're gonna need a logo. 0:03
    But, let's not worry about images just yet. 0:05
    Flask makes static files just as easy as templates. 0:08
    Just add a directory and get busy. 0:11
    Well, so first we have to add a directory, like I mentioned. 0:13
    Templates live in this Templates directory. 0:17
    This really cool directory. 0:19
    And static files actually have their own directory as well, called static. 0:22
    Anything that we put inside here we can reference as slash static, 0:28
    which is pretty cool. 0:31
    So, we're gonna add a new file in there, which we will call styles.css. 0:33
    I'm a big fan of making something look kinda horrible and then refining it so 0:40
    it looks nicer, so 0:43
    I don't really want this style sheet to be awesome right off the bat. 0:44
    So I'm gonna put in some, some horrible stuff here. 0:48
    Let's do body. 0:50
    Background is gonna be beige, and color will be medium orchid. 0:52
    I also love all the crazy color names that CSS has. 1:00
    So we've got beige and we've got medium orchid, which is just horrid. 1:06
    So now we need to add this to our HTML. 1:11
    So we're gonna do that inside layout.html, 1:12
    because we want this applied to every page. 1:15
    So we're gonna add this to here below the title. 1:17
    We're gonna do link rel equals stylesheet. 1:19
    And then href is gonna start with /static, 1:23
    which is just a nice little thing that Flask gives us to where we can 1:26
    always refer to our static directory as slash static during development. 1:30
    And then we call the file styles.css, so that's what we're gonna reference here. 1:34
    Okay. 1:39
    Let's refresh and see if it works. 1:40
    It does! It's a wonderfully, amazing design site. 1:43
    Okay actually that's, that's kind of hideous. 1:48
    Let's, let's make it black on the beige. 1:49
    So our color, we can actually just take out that color altogether. 1:52
    And we just refresh. 1:57
    Yeah, there we go. 1:58
    Okay, that's a lot better. 1:59
    I can, I can live with that one. 2:01
    Let's add a little bit of JavaScript to the site, shall we? 2:03
    So File > New File. 2:06
    We're gonna call this scripts.js, cuz I'm very clever in naming. 2:09
    And I just want to have this do like, an alert box, nothing nothing crazy. 2:15
    So we're gonna do alert, Howdy! 2:20
    Cuz that's a cool thing to do. 2:25
    And then we're gonna go add that into our layout file. 2:28
    So down here before the end of the body, script source equals static scripts.js. 2:32
    And, we refresh. 2:41
    And hey, we've got a Howdy! 2:44
    So, that's pretty cool. 2:47
    But, you know what? I 2:50
    don't want this to happen on every single page. 2:50
    I want this to just happen on the home page. 2:52
    Because it can be really annoying if every time I want to add, it just, 2:55
    that's horrible. 2:59
    So, let's go add a new thing. 3:00
    So, what we're gonna do here is, let's do this block scripts. 3:02
    All right? And then we're going to cut this part out. 3:11
    So now we have this new block, scripts block. 3:15
    And on our index page, we're gonna add in our scripts block. 3:18
    All right. 3:27
    And then if we refresh this, on the ad page we shouldn't get anything. 3:31
    But if we come over here to the home page, it says Howdy! 3:37
    Cool, so we got exactly what we wanted there. 3:42
    Well at least I got what I wanted. 3:46
    Maybe you want it to be on every page, I don't know. 3:48
    But, this highlights a important thing of how easy it 3:51
    is to use blocks to control what pages certain styles or scripts show up on. 3:54
    So feel free to experiment with this. 3:59
    Add some more cool stuff in if you want to. 4:01
    With those design and JavaScript skills, I think I'm teaching the wrong subject. 4:03
    Okay, maybe not. 4:07
    In our next stage, we're going to use all the things we've learned to build 4:09
    a fully functional single page web app. 4:11

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up