This talk is brought to you in part by:
The Medieval and Renaissance Performer's Guild
We want you to dress up in costume and act silly!
That's last week.
That's next week, and it will be covered by Open Source Club president Eli Gladman.
This talk is brought to you in part by:
The Medieval and Renaissance Performer's Guild
We want you to dress up in costume and act silly!
Go here in your browser now!
Once you have that open in your browser, open your browser's dev tools:
Last week, I used a few different measures in the examples:
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: Millimeterscm: Centimeterspt: Points, equal to 1/72 of an inch and commonly used in printingpc: Pica, also used in printingRemember, 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 viewportvw: 1/100 of the width of the viewportvmin: 1/100 of whichever is smaller, the width or height of the viewportvmax: 1/100 of whichever is larger, the width or height of the viewportThose 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.
Pseudo-elements are not found in your HTML.
Example text. Loren ipsum dolor sit amet quis adipiscing three point one four one five nine two six.
You can use them to add decorative symbols, to add decorative labels or triangles, or really for whatever purpose you need a single element for.
This will be covered more in detail next week, in Eli's talk.
Most things are position: relative;, but they don't have to be.
Let's check out MDN's article and then do some experimentation on a WordPress site with a fixed top navbar.
And then let's play around with z-indices, getting elements on the page to appear above and underneath that fixed navbar.
What do you get when you combine margins, padding, widths and floats?
Grid systems!
The best resources for this are Google and Mozilla Developer Network
If you're looking for some philosophy of responsive web development, check out the source of the philosophy
Learning resources:
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.