Lecture 7.2 (March 3, 2016)

What we've seen:

• Remembering state with sessions
• Authenticating users (simple)
• Preventing cross-site request forgery attacks

Today's agenda:

• Add some styling to our ugly animals example
• Introducing the Pure toolkit to do this

Review: CSRF

What is the csrf_token?

• A random value saved in the session
• Included with each form
• Verified to make sure the form is real

Base Layer

We've done some light styling on our animals, but so far not very much.

Moving forward, we will use the Pure CSS toolkit to help us style things nicely. Pure provides:

• A baseline that makes things more consistent across browsers.
• Utilities for styling forms, buttons, and tables.
• Utilities for building menus.
• A responsive grid to make it easier to build site layouts.

There are other toolkits that provide many more features; two common ones are Bootstrap and Foundation.

We will be learning Pure because it is small, and does not require additional tooling.

To add Pure, pull in its stylesheet:

<link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/pure-min.css">

You can also download the CSS files and include them in your project.

Setting the Viewport

There's one more thing we should really add to all of our files.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Exactly what this means is… subtle. For now, this is magic sauce that makes things work better on mobile. It enables some auto-scaling logic in the renderer.

Adding Fonts

So far, we have used system fonts. But the Web lets us use many more fonts!

We're going to use Google's font hosting service, as it is the easiest way to include fonts.

So we can:

1. Visit https://www.google.com/fonts
2. Pick fonts — we will pick Open Sans
3. Click ‘Use’ to obtain code to use the fonts – select font settings, and copy code.
4. Use the new font in our CSS styles.

Styling the Forms

To start seeing Pure take effect, we need to mark parts of our site as being styled with Pure.

Pure defines a bunch of classes that we can use to mark things. Let's start with our search form:

• add the pure-form class to the form to mark it as a form.
• make sure we have a fieldset element around the fields.
• add pure-button and pure-button-primary to our button.

It's starting to take a bit more of a modern look.

Overriding Styles

Everything in Pure is just CSS. Because we loaded it before our CSS, we can write rules in our CSS to override Pure's defaults. For example, let's make primary buttons purple:

.pure-button-primary {
    background-color: rebeccapurple;
}

We can inspect the elements to see the things that are applied.

Now style the other form.

Making links into buttons

Sometimes, we want something to look like a button, but maybe just be a link. We can put the pure-button class on a link (a) to make it look like a button. Good idea for the logout link.

The Grid

Right now, we've been doing basic text layouts. What if we want something fancier, like the menu at the side of the screen on the web site?

The easy way is to use a grid layout. Pure helpfully provides grid-layout support.

Grid packages typically have us lay things out in

• Grids.
• Sometimes — rows (Pure does not have rows).
• Units, which are individual blocks placed into the grid.

For example:

<div class="pure-g">
<div class="pure-u-1-3">One Third</div>
<div class="pure-u-2-3">Two Thirds</div>
</div>

Cool!

Let's put our log in/out controls over in a separate bar.

Now, this doesn't work very well on mobile. show off.

We want to make it responsive. Pure packages the responsive grid separately, so let's add it (copy from Pure site).

Now, we can specify the base grid layout, and then the layout for larger screens.

<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3">One Third</div>
<div class="pure-u-1 pure-u-md-2-3">Two Thirds</div>
</div>

Voila! Resize works.

Pure also lets us nest grids, which is useful.

When using the grids, we do have to make some changes to how we set up fonts.

If time is left

Start talking about Python modules.