How to follow along

benlk.github.io/talk-wordcamp-columbus-2016

Go here in your browser now!

Once you have that open in your browser, open your browser's dev tools:

• Safari
• Chrome/Chromium
• Firefox
• Internet Explorer 11

Units

• px
• %

The root CSS unit is the pixel, px. It's equal to one pixel on your device, unless you've got a high-Dots-Per-Inch device like an iPhone or a 4K laptop or a Macbook or really any high-end device made in the last two years.

From the CSS pixel are built the units of absolute length, which ^usually don't change while the page is loaded:

• in: Inches: 96 pixels per inch, usually. Most high-DPI devices shim this to 96 px per device screen inch.
• mm: Millimeters
• cm: Centimeters
• pt: Points, equal to 1/72 of an inch and commonly used in printing
• pc: Pica, also used in printing

Remember, those aren't physical units. They're based on the ideal of 1in = 96px. You're probably not going to use them unless you're doing CSS for print stylesheets.

There are units that scale with the font size:

• em: The width of an m in the font, typographically speaking, but actually the calculated height of the font-side of this element, or the value inherited from its parent.
• ex: The height of the x character, so the x-height of the language. Usually equal-ish to 0.5 em.
• ch: The width-ish of the character 0 zero.
• rem: The font-size of the root element of the document, which is usually html.

Then there are the units that scale with the size of the browser's viewport:

• vh: 1/100 of the height of the viewport
• vw: 1/100 of the width of the viewport
• vmin: 1/100 of whichever is smaller, the width or height of the viewport
• vmax: 1/100 of whichever is larger, the width or height of the viewport

Those don't have the best IE support.

If you're not sure what to use, it's safe to stick to px.

If you're not sure if the unit is supported on a device, check here.

And then there's this funky character:
%

% is not a unit

.narrow { width: 30%; } 

When you use percent for the value of a property, it references the parent element's property value.

If the parent element's property is a percent, then the parent needs to have a width that isn't a percent.

If it's percents all the way up to the root element, then you're probably good.

If it's percents all the way up to an element with a fixed value, you're good.

If it's percents up to an element that doesn't have a fixed value, it's an invalid property and your browser will ignore it. This breaks the rule.

Grids

What do you get when you combine margins, padding, widths and floats?

Grid systems!

• Bootstrap
• Foundation
• Bourbon Neat
• Skeleton
• Tachyons

Media Queries

Some resources:

• Mozilla Developer Network
• Media Queries for Standard Devices: a list of screen sizes
• Different Stylesheets for Differently Sized Browser Windows

Two ways to do media queries:

In the HTML

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />

In the CSS

Media queries aren't limited to browser width

• The current standard
• The Media Queries Level 4 proposal, bringing things like a media query to determine whether JavaScript is enabled

Using Media Queries for Resposive Web Design

• Responsive Web Design, the article in A List Apart, and the book
• Really, everything from A Book Apart
• From Smashing Magazine, How To Use CSS3 Media Queries To Create a Mobile Version of Your Website
• From CSS-Tricks, CSS Media Queries and Using Available Space

In general:

• Don't use CSS to hide elements from your readers based on the size of the screen.
• Use CSS to change the presentation of those elements.

Where can you go from here?

Learning resources:

• The W3C CSS page, the definitive resource for CSS
• WebPlatform.org, run by the W3C
• Mozilla's CSS tutorial
• Mozilla Developer Network, a fantastic resource for HTML, CSS, JavaScript, and obscure browser Js APIs
• Codecademy's web track, which will walk you through HTML and CSS to build your own résumé
• LONELY CODERS, HERE'S HOW TO GET THINGS DONE from Source
• CSS-Tricks, which is what it says on the box.

What's the best way to learn?

Resize your browser.

Play around with things on your own. Build a portfolio site. Use your browser's inspector tools to see how other people build their sites. See if you can reproduce that style.