diff --git a/site/introwebdev/week-11-flexbox-2.html b/site/introwebdev/week-11-flexbox-2.html new file mode 100644 index 0000000..c2c753a --- /dev/null +++ b/site/introwebdev/week-11-flexbox-2.html @@ -0,0 +1,66 @@ +[!] +[=title "Week 11: Flexbox 2"] +[=content-] +
+ If you haven't already, read Flexbox 1. +
+
+ To complete our discussion of flexbox, we need to talk first about axes. The core idea is that a flexbox is
+ an axis: it puts content vertically or horizontally. It can violate this with flex-wrap,
+ but please don't do that. We say the axis along which content is distributed is the primary axis:
+ for default flexboxes, this is left/right (horizontal), but they can also be up/down (vertical).
+
+ You control the primary axis with the flex-direction property.
+ flex-direction: row; will set the flexbox' primary axis to horizontal,
+ and flex-direction: column; will set the flexbox' primary axis to vertical.
+ The secondary axis will always be the remaining option.
+
+ Along the secondary axis (up/down for a horizontal flexbox, left/right for a vertical flexbox), elements
+ may be centered, stretched, or justified to either end: you do this with the align-items
+ property. For instance, align-items: center; will bring all of the elements
+ to the center of the secondary axis. This is pretty useful for building centered layouts!
+
+ Using align-items: center; justify-content: center; centers along both axes (remember, justify-content controls
+ the primary axis!), so for example:
+
+ Note that we can also force elements to stretch to fill up the secondary axis with
+ align-items: stretch;:
+
+ What if we want to mix the two? It turns out that we can do that with the
+ align-self property! Note that there is no justify-self property;
+ align-self works because of the assumption that there is only one element
+ at any point on the secondary axis (an assumption violated by flex-wrap, but we won't talk about that here).
+ If we do align-self: center; for the first element...
+
+ All three properties also support two strange values: start and end.
+ Doing justify-content: end; on the flexbox and align-self: start; on
+ the second content:
+
+ Strange! end simply means "the furthest point across the axis" - which is usually
+ as far right (or as far down) as possible. start just means the opposite.
+
+ We've already talked briefly in class about fonts - we're going to do a deeper dive today. +
+
+ Fonts are one of the most crucial styles on the internet. All text has a font!
+ The most impactful CSS property controlling fonts is font-family: this
+ is a deceptive property which can set either a family of fonts or
+ a single font. A family of fonts is a set of fonts that look similar:
+ for instance, sans-serif fonts. On this website, the default is font-family: sans-serif;:
+ you're probably more familiar with the universal default of font-family: serif; (set automatically
+ when you don't have your own - your websites most likely still use it!), which looks like
+ this. Also useful in some areas is font-family: monospace;,
+ which I use for code - it looks like this.
+
+ Surprisingly, these look different across systems! There is no one universal sans-serif font;
+ instead, your operating system and your web browser pick something reasonable. This is generally fine,
+ and indeed helps compatibility (you don't have to guess which fonts are installed!), but does
+ mean pages look slightly different across platforms.
+
+ If you want to use a single specific font to ensure the webpage looks the same everywhere,
+ you also use font-family! Instead of one of the actual families (sans-serif, serif, monospace, etc),
+ you use a font's name. For instance, a common font available on the web is Arial - Arial is often
+ the sans-serif default. It looks like this (if that looks
+ the same as the rest of the text, that means your browser is already using it for sans-serif!)
+
+ W3Schools has an exhaustive list of CSS-safe web fonts at this page. +
+
+ What if we want more variation? It turns out there are a few properties for this.
+ The simplest is font-size: this sets the height of the characters in text.
+ You can set a font-size to any CSS length, but it's recommended to use specifically the em unit:
+ 1em is always the default height of text, so 2em is twice as large as default text, etc.
+ Importantly this is always the same on every platform: some browsers have different default heights
+ for text in pixels, but the height is always the same in em.
+
+ For instance, this is 2em text. +
+
+ We can also set the font-weight: this is actually what the <b> tag changes.
+ for instance, this text has font-weight: bold;.
+
+ It's possible to add new fonts not in the CSS-safe list! The easiest way is with Google Fonts.
+ They give you embed codes - a few HTML tags that load the font into your page. You can then use the font in font-family
+ normally. For instance, after embedding Roboto, you'd be able to just font-family: Roboto;, which looks like
+ this (use the web inspector to find the Google Fonts embed code for that!)
+