Hey friends,

Welcome to

Intro to Layout

Brought to you by P'unk Ave

My name is

Matt

@mattmcmanus

mcmanus@punkave.com

I've been making websites for 12 years

Assumptions about your prior experience

  • You know what a div and span is
  • You've added a class attribute to an element
  • You've played with CSS and have a sense of what it does
  • You still think that CSS is a frustrating black art

WTF is layout?

Layout

is the arrangement of content into some sort of visual hierarchy (ie: What's important)

it is not styling (gradients, colors, images, etc)

The browser is your surrogate. Get to know it.

Blocks and lines

The heart and soul of HTML

Inline elements

em, strong, links, spans, etc

Block level elements

Headers (h1, h2, etc), p, div, etc

The Box Model

The box model consists of:

  • Block level elements
  • Height & width
  • Borders
  • Padding
  • Margins

Demonstration time!

Positioning all those boxes

The wonders & mystery of position:

static

I'm statically placed!

fixed

I'm fixed! (ie: I won't move when you scroll)

relative

I'm -100px to the left and -400px from the top of where the browser thinks I am

absolute

I'm absolutely sure i'm in the bottom left corner of my container

I'm a hands on learner!

Real talk

Let's get practical

Code smell

Signs that you're probably doing it wrong

  • You're throwing floats on everything but you don't know why that fixes it
  • You're throwing around clear:both with similar indiscretion
  • You should only use z-index when you are intentionally layering elements
  • You'll learn many more of these

What the hell am I supposed to do now, jerk?

  • As frustrating as it is, try and learn this. Its good to know
  • Use and learn from the work of those smarter than you
  • Learn to use developer tools

Resources: