Flexible grids

Question 1

Before RWD, what was a dominant approach to website structure?

Answer 1

Thinking in fixed proportions. Elements had a certain size and did not adjust if the viewport changed?

Question 2

What do we mean by viewport?

Answer 2

The size of browser window (generally measured in pixels)

Question 3

How would we mark up the body element to center it on the page and set its width to 960 pixels?

Answer 3

We’ll write a CSS rule

body {
width: 960px;
margin: 0 auto;
}

Question 4

Is there anything wrong with setting type in pixels?

Answer 4

No.

What it does mean is type is set at a size and cannot be adjusted by the user.

Question 5

What’s the formula for calculating proportions

Answer 5

target / context = result

Question 6

So taking formula how would we translate a 24pt headline into a relative value?

Answer 6

Take the default text size for the browser (probably 16px)

take the value of the headline and divide it by 16

24 / 16 = 1.5

We then assign 1.5em as the text size for our headline.

We use ems as these are proportional unit that will resize with a different sized viewport.

Question 7

Say we have the following

<h1>Get more spuds<a>click here!</a></h1>

Assume a default font-size of 16px.

Say we know we want our h1 to be 24px and our link to be 11px. If we wanted to express this as ems what.

Why is that?

Answer 7

The context chnages. We talking about a link inside a header tag. Not just a link by itself.

11 / 24 = 0.45833333333

so a {
font-size: 0.4583333333em;
}

Question 8

You’ll sometimes need to decide how wide the body of a page will be as a percentage? Say we have body tha’s 960px wide. How do we decide how wide that should be in %?

Answer 8

Ethan recommends testing out options and then. There’s not really a set recommendation.

Question 9

When calculating width of elements and expressing in proportional terms what units should we use?

Answer 9

Use % for size of block level elements (e.g. div, html5 structural elements)

Question 10

What would be the problem with fixed margins and padding in a flexible layout?

Answer 10

At different viewport sizes, the padding and margins won’t adjust breaking our layout.

With box / block elements we’ll specify the measurement in % using the target/conext=result formula.

The context is always the elements containing element.

Question 11

Can we have negative proportional margins and padding?

Answer 11

Yes, You sure can!