Advanced CSS

class: middle center

# ~ Advanced css ~

---
class: middle

## Responsive css
Making a `responsive` website is about ensuring the css *responds* to different device conditions like mobile phones,
wide screen monitors and everything in between.

![chart](assets/stats.png)

---
class: middle

## Setting the meta viewport
The very first step to creating a `responsive` site is to tell the browser that the site is designed to handle various browser dimensions:
```html
<meta name="viewport" content="width=device-width,initial-scale=1">
```
Like the meta tag setting `charset="utf-8"` this tells the browser to set the width that css uses as the device width:
```html
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
```

---
class: middle

## Changing the layout based on browser dimensions
Now that we've told the browser we're accounting for dimensions, it's time to actually
change things when the browser size changes with **media queries**.

```css
body {
  font-size: 16px;
}

/* any browser window 320px and smaller will get these styles */
@media (max-width: 320px) {
  body {
    font-size: 12px;
  }
}
```
The `@media` can be placed after any rule that you'd like to change based on some condition

---
class: middle

There are extensive list of conditions you can target, another common one being print:
```css
#menu {
  /* menu css here... */
}

/* hide the menu when printing this page */
@media print {
  #menu {
    display: none;
  }
}

```

---
class: middle

## Powers of Ten example

[demo](https://m4rk3r.github.io/week3/pow10.html) / [css source](https://github.com/m4rk3r/m4rk3r.github.io/blob/master/week3/pow10.css)

---
class: middle li-spacing

## Responsive units?
Two main issues with using `px` for sizing fonts and elements are that:
+ actual `px` units are approximate, `1px` does not equal one screen pixel, there are all sorts of things that effect this: screen densities (retina screens),
scaling, screen types...
+ `px` are absolute, they override any user font size settings (accessibility), they're inflexible to screen
size differences, etc..

---
class: middle

## Using responsive units
Last week we recapped using `%` percentage and `px` pixel units in css.

Along with `%`, there are two other important responsive units: `em` and `rem`.

---
class: middle

## `em` units
The `em` unit refers to the *computed* font-size of that elements nearest parent's font size.
In most browsers, the default font size for the html root is 16px, so:
+ `1em` is equal to `16px`
+ `2em` is equal to `32px`

Therefore `em` units are an effective way to create a relative and responsive layout...

---
class: middle

One trick to simplify working with `em` units is to convert the container element to have a font size that's
easier to convert to whatever size you're trying to approximate...

---
class: middle

By default `1em` is equal to `16px`, if you wanted to make a font appear as `20px` you would want to set
it to `1.25em` (16 * 1.25 = 20).

But who wants to be doing math in css...

If we set our root element to be `10px`, then all we would need to do is move the decimal place one to the left
so `2.0rem` or just `2rem` (`1rem` is euqal to `10px` so `2rem` = `20px`)

---
class: middle

But setting our root element to `10px` would defeat the whole purpose of not using absolute units.. so the trick is
to use a `%` percentage unit to achieve the `10px`... so `62.5%` of `16px` is `10px`:
```css
html {
  /* we can have our 10px base and be responsive to user settings~ */
  font-size: 62.5%;
}
```
</section>

---
class: middle center

![maths](assets/maths.jpg)

---
class: middle
But...

Since `em` units are relative to their parent, they can have a cascading effect if they are nested:
```html
<style>
  html {
    font-size: 62.5%; /* aka 10px */
  }

.message {
    font-size: 2em;
  }
</style>
  
  <div class="message">
    Big
    
    <div class="message">
        Bigger
        
        <div class="message">
          Biggest!
          
          <div class="message">
            ahhhhh
          </div>
        </div>
    </div>
  </div>
```

</style>
  <div class="exp-message">
    Big
    <div class="exp-message">
        Bigger
        <div class="exp-message">
          Biggest!
          <div class="exp-message">
            ahhhhh
          </div>
        </div>
    </div>
  </div>

---
class: middle

This is what went wrong with what has become one of my [favorite websites.](https://webrecorder.io/m4rk3r/cool-old-web/20150313041327/http://www.sewingandembroiderywarehouse.com/embtrb.htm)

---
class: middle

To solve the possibility of runaway text sizing, a second safer responsive unit exists: the `rem`

It's just like the `em` unit, but the `r` stands for root. `rem` units only look at the root aka `html`
font-size to determine their size, eliminating any potential for nested chaos.

---
class: middle

## How to use responsive units
The true power of responsive units becomes clear when we start making responsive
sites that have different appearances for different browser sizes.

---
class: middle

With fixed `px` units:
```html
<style media="screen">
  section article h1 {
    font-size: 36px;
  }
  section article img {
    width: 100%;
    height: 200px;
    object-fit: contain;
  }
  section article p {
    font-size: 18px;
  }
  section article blockquote {
    font-size: 20px;
  }
  @media (max-width: 320px) {
    section article h1 {
      font-size: 24px;
    }
    section article img {
      height: 100px;
    }
    section article p {
      font-size: 12px;
    }
    section article blockquote {
      font-size: 16px;
    }
  }
</style>
<section>
    <article>
      <h1>My Blog Post</h1>
      <img src="blog-header.jpg">
      <p>Hi welcome to my first post...</p>
      <blockquote>I've always wanted to blog!</blockquote>
      <p>Finally I'm posting my blog..</p>
    </article>
</section>
```

---
class: middle

Simplified with responsive units:
```html
<style media="screen">
  html {
    /* this is the equivelent of setting 10px (16 * .625 = 10) */
    font-size: 62.5%;
  }
  section article h1 {
    /* 3.6em x the root element (10px) = 36px */
    font-size: 3.6rem;
  }
  section article img {
    width: 100%;
    height: 20rem;
    object-fit: contain;
  }
  section article p {
    font-size: 1.8rem;
  }
  section article blockquote {
    font-size: 2rem;
  }
  @media (max-width: 320px) {
    html {
      font-size: 50%;
    }
  }
</style>
<section>
    <article>
      <h1>My Blog Post</h1>
      <img src="blog-header.jpg">
      <p>Hi welcome to my first post...</p>
      <blockquote>I've always wanted to blog!</blockquote>
      <p>Finally I'm posting my blog..</p>
    </article>
</section>
```

---
class: middle

## Example
[px vs em units](https://m4rk3r.github.io/week3/units-example.html) / [source](https://github.com/m4rk3r/m4rk3r.github.io/blob/master/week3/units-example.html)

---
class: center middle

## Responsive formatting: `flexbox` & `grid`

---
class: middle

## CSS Flexbox
As the name implies, `flexbox` is a versatile way to arrange boxes.

Flexbox is most useful when you find yourself needing to align elements:
- centering something within a container
- aligning things in a single single dimension (row or column, like a nav or sidebar)
- rearranging the order of items in a row/column

---
class: middle

Flexbox is a `display` property, so to utilize it we first set an element to `display: flex;`:

By default `flexbox` works in the x-axis and bunches everything at the "front" of the element or in
flexbox terms `flex-start`:

```html
<style type="text/css">
  nav {
    display: flex;
    border: solid .1rem green;
  }
  nav a {
    padding: .5rem;
  }
</style>
<nav>
  <a href="#">about</a>
  <a href="#">blog</a>
  <a href="#">support us</a>
  <a href="#">Login</a>
</nav>
```
<nav id='nav-example'>
  <a href="#">about</a>
  <a href="#">blog</a>
  <a href="#">support us</a>
  <a href="#">login</a>
</nav>

---
class: middle two-column

Alignment can be adjusted for both axises. Adjusting the primary axis (x-axis in this case) we use `justify-content` which has the following options:
 + flex-start
 + center
 + space-around
 + space-between
 + flex-end

```html
<style type="text/css">
  nav {
      display: flex;
      border: solid .1rem green;
      justify-content: space-between;
  }
  nav a {
      padding: .5rem;
  }
</style>
<nav>
  <a href="#">about</a>
  <a href="#">blog</a>
  <a href="#">support us</a>
  <a href="#">Login</a>
</nav>
```
<nav id='nav-example' class="space-around">
  <a href="#">about</a>
  <a href="#">blog</a>
  <a href="#">support us</a>
  <a href="#">login</a>
</nav>

---
class: middle

The size of children will be dynamically calculated, making it easy to use things like `auto` to preform custom spacing:
```html
<style type="text/css">
  nav {
      display: flex;
      border: solid .1rem green;
  }
  nav a {
      padding: .5rem;
  }
  nav .login {
    margin-left: auto;
  }
</style>
<nav>
  <a href="#">about</a>
  <a href="#">blog</a>
  <a href="#">support us</a>
  <a href="#" class="login">Login</a>
</nav>
```
<nav id='nav-example'>
  <a href="#">about</a>
  <a href="#">blog</a>
  <a href="#">support us</a>
  <a href="#" class="login">login</a>
</nav>

---
class: middle

We can also change things to the vertical axis to make a mobile menu with the `flex-direction` property:
```html
<style type="text/css">
  nav {
      display: flex;
      /* recall that the default is `row` */
      flex-direction: column;
      border: solid .1rem green;
  }
  nav a {
      padding: .5rem;
  }
</style>
<nav>
  <a href="#">about</a>
  <a href="#">blog</a>
  <a href="#">support us</a>
  <a href="#">Login</a>
</nav>
```
<nav id='nav-example' class="column">
  <a href="#">about</a>
  <a href="#">blog</a>
  <a href="#">support us</a>
  <a href="#">login</a>
</nav>

---
class: middle

Let's also center those menu items into the middle of the nav, with the `align-items` property.

Align items is just like `justify-content` but operates on the opposite axis, so in this case our `flex-direction` is column (y-axis)
so it'll align things on the x-axis:
```html
<style type="text/css">
  nav {
      display: flex;
      flex-direction: column;
      align-items: center;
      border: solid .1rem green;
  }
  nav a {
      padding: .5rem;
  }
</style>
<nav>
  <a href="#">about</a>
  <a href="#">blog</a>
  <a href="#">support us</a>
  <a href="#">Login</a>
</nav>
```
<nav id='nav-example' class="column align-center">
  <a href="#">about</a>
  <a href="#">blog</a>
  <a href="#">support us</a>
  <a href="#">login</a>
</nav>

---
class: middle center

[There's a lot more `flexbox` can do~](https://developer.mozilla.org/en-US/docs/Glossary/Flexbox)

---
class: middle

## CSS Grid
Another handy `display` property for formatting interfaces is css `grid`.

---
class: middle

Unlike `flexbox`, `grid` is best for more complex layouts that span two dimensions:

![grid](assets/grid.png)

---
class: middle

Like `flexbox`, `grid` is a `display` property so we use it by setting:
```style
#site {
  display: grid;
}
```
Since grids work in two dimensions, we can define our grid by specifying how many rows and columns we want with
`grid-template-rows` and `grid-template-columns`:
```html
<style type='text/css'>
  #my-grid {
    display: grid;
    grid-template-rows: 5rem 5rem;
    grid-template-columns: 5rem 5rem 5rem;
    border: solid 1px black;
    width: max-content;
  }
</style>
<div id="my-grid"></div>
```
<div id="my-grid"></div>

---
class: middle

Now that we've defined a 3x2 grid, we can place elements within it with `grid-row` and `grid-column`:
```html
<style type='text/css'>
  #my-grid {
    display: grid;
    grid-template-rows: 5rem 5rem;
    grid-template-columns: 5rem 5rem 5rem;
    border: solid 1px black;
    width: max-content;
  }
  #box-1 {
    /* start at 1st column and end at 3rd */
    grid-column: 1 / 3;
    grid-row: 1;
    background: green;
  }
  #box-2 {
    grid-column: 3;
    grid-row: 2;
    background: orange;
  }
</style>
<div id="my-grid">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>
```
<div id="my-grid-2">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

---
class: middle

The `grid-column` and `grid-row` properties can specify two items:
```css
grid-column: <start column> / <end column>;
```
Another more intuitive way to set how many columns or rows an item extends through can be set with the `span` keyword:
```css
grid-column: <start column> / span <number of columns>;
```

[mdn reference](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)

---
class: middle

Same example using `span` keyword:
```html
<style type='text/css'>
  #my-grid {
    display: grid;
    grid-template-rows: 5rem 5rem;
    grid-template-columns: 5rem 5rem 5rem;
    border: solid 1px black;
    width: max-content;
  }
  #box-1 {
    /* start at 1st column and end at 3rd */
    grid-column: 1 / span 2;
    grid-row: 1;
    background: green;
  }
  #box-2 {
    grid-column: 3;
    grid-row: 2;
    background: orange;
  }
</style>
<div id="my-grid">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>
```
<div id="my-grid-span">
  <div id="box-span-1"></div>
  <div id="box-span-2"></div>
</div>

---
class: middle

## Grid cell units
While you can use `rem`, `px` and things like `auto` to size your grids, it can be more flexible to think
about them as fractions of the total grid instead of fixed values.

The `fr` or fraction unit is useful for this purpose. They'll divvy up the space in the grid instead of
having the cells determine the grid width and height.

---
class: middle

Replacing our previous example:

```html
<style type='text/css'>
  #my-grid {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    border: solid 1px black;
    width: 20rem;
    height: 10rem;
  }
  #box-1 {
    /* start at 1st column and end at 3rd */
    grid-column: 1 / 3;
    grid-row: 1;
    background: green;
  }
  #box-2 {
    grid-column: 3;
    grid-row: 2;
    background: orange;
  }
</style>
<div id="my-grid">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>
```
<div id="my-grid-3">
  <div id="box-3-1"></div>
  <div id="box-3-2"></div>
</div>

---
class: middle center

## Putting it all together ~

---
class: middle

```html
<style type="text/css">
  #site {
    display: grid;
    /* 6 column grid with 1 fraction aka equal columns */
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr auto 1fr;
    font-size: 12px;
  }
  #site header {
    background: rgba(100, 207, 69, 0.4);
    grid-column: span 6;
  }
  #site aside {
    background: rgba(99, 139, 98, 0.4);
    grid-column: span 1;
  }
  #site aside nav {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #side main {
    grid-column: span 5;
  }
  #site footer {
    grid-column: span 6
  }
</style>
<div id="site">
  <header>My blog~</header>
  <aside>
    <nav>
      <a href='/about'>about</a>
      <a href="/blog">blog</a>
    </nav>
  </aside>
  <main>
    <section>
      <article>
        <h1>my first post</h1>
        <p>...</p>
      </article>
    </section>
  </main>
  <footer><a href="#">Sign up for the mailing list</a></footer>
</div>
```

<div id="site">
  <header>My blog~</header>
  <aside>
    <nav>
      <a href='/about'>about</a>
      <a href="/blog">blog</a>
    </nav>
  </aside>
  <main>
    <section>
      <article>
        <h1>my first post</h1>
        <p>...</p>
      </article>
    </section>
  </main>
  <footer><a href="#">Sign up for the mailing list</a></footer>
</div>

---
class: middle

## Revisiting interactive elements
Using the example from last week, we can demonstrate the `transition` property.

```html
<style type="text/css">
  /* set the initial box color to green */
  #box5 {
    width: 50px;
    height: 50px;
    background-color: green;
    transition: background-color 1s ease-in-out;
  }
  /* and then use the :hover keyword to change it to orange */
  #box5:hover {
    background-color: orange;
  }
</style>