CSS Layouts

---

class: left, middle
# Box Model
<figure style="text-align: center">
    <img src="images/dog-mantra.jpg" width="450"/>
</figure>

---

Every element is a rectangle box can be represented with figure:

---
class: left, middle
# Box Model

---
class: left, middle

# Box models in browsers

1. Internet Explorer. IE in quirks mode defines box dimensions by adding together dimensions of the content, padding and border.
2. Other browsers define box dimensions by the content width only, by the W3C standards.

</figure>

---
class: center, middle

# When miscalculated with width

<figure style="text-align: center">
    <img src="images/jump.gif" width="500"/>
</figure>
---
class: left, middle

# Border-box

There is a rule in CSS that tells all browsers to follow the more logical IE approach.

```css
    box-sizing: border-box;
```

This is particularly helpful when dealing with fluid layouts or creating mobile-friendly sites.

<br>

<a target="_blank" class="jsbin-embed" href="http://jsbin.com/poyisuv/2/edit?css,output">Live example</a>

---

# Box displays

**Display** is a CSS rule that helps us redefine the default box treatment of elements.

.columns[.col-40[
``` css
    span {display: block;}
```
].col-60[
``` css
      // Make any element a block-level element. This
      span will have all the properties of a block
      element, and will be taking the whole container
      width.
```
]]

.columns[.col-40[
``` css
    div {display: inline;}
```
].col-60[
``` css
      // Make any element an inline-level element.
      This div will lose all it's block properties.
```
]]

.columns[.col-40[
``` css
      a {display: inline-block;}
```
].col-60[
``` css
      // Gives the block properties to an element,
      but doesn't take up the whole container width.
      Treats spaces within element like spaces in the text.
```
]]

.columns[.col-40[
``` css
      section {display: table;}
```
].col-60[
``` css
      // Makes a box to behave like a table. Then it's
      children can be styled using properties like
      {display: table-cell}, {display:table-row} etc.
```
]]

.columns[.col-40[
``` css
      p {display: none;}
```
].col-60[
``` css
      // This just removes an element from a
      document flow.
```
]]

---

# Box displays

**Display** is a CSS rule that helps us redefine the default box treatment of elements.

.columns[.col-40[
``` css
      div {display: flex;}
```
].col-60[
``` css
      // Enables the flexbox model. Flexbox is a
      new layout mode in CSS3. Use of flexbox
      ensures that elements behave predictably when
      the page layout must accommodate different
      screen sizes and different display devices.
```
]]

.columns[.col-40[
``` css
      .container{ display: grid}
      .container{ display: inline-grid}
```
].col-60[
``` css
      // Enables the grid model. This CSS module
      defines a two-dimensional grid-based layout
      system, optimized for user interface design.
      In the grid layout model, the children of a
      grid container can be positioned into arbitrary
      slots in a predefined flexible or fixed-size
      layout grid.
```
]]

.columns[.col-40[
 
].col-60[
[Read more about grid layout](https://css-tricks.com/snippets/css/complete-guide-grid/)
]]

---

# CSS Calc

``` html
/* property: calc(expression) */
width: calc(100% - 80px);
```
The calc() CSS function can be used anywhere with length, frequency, angle, time, number, or integer is required.

.columns[.col-60[
``` html
<div class="outer">
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
</div>    
```
].col-40[
``` css
.inner {
    width: calc(100%/3);
    float: left;
    border: 1px solid black;
}
```
]]

.demo[
<div class="outer">
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
</div>  
]

---

# Margin Collapsing

Top and bottom margins of blocks are sometimes combined into a single margin whose size is the largest of the margins combined into it, a behavior known as **margin collapsing**.
<a href="http://jsbin.com/gutaju/1/edit?html,output">Proof</a>

## Parent and first/last child

If there is no border, padding, inline content, or clearance to separate the margin-top of a block with the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block with the margin-bottom of its last child, then those margins collapse. **The collapsed margin ends up outside the parent**.
<a href="http://jsbin.com/bagode/4/edit?html,output">Proof</a>

## Do not collapse

Margins of floating and absolutely positioned elements never collapse.
---
## Visible

---

## Overlap

---

## Hidden

---

## Auto

---

## Scroll

---

# Positioning

```css
    div {
        position: static // default positioning element in the document flow
    }
```

```css
    div {
        position: relative; // positions element relative from it's default coordinates
        top: 10px; // moves it to 10px to the bottom
        left: 10px; // moves it to 10px to the left
    }
```

---

# Positioning. Continued.
```css
    div {
        position: absolute; // positions element relative to the nearest non-static parent 
        top: 10px; // moves it to 10px to the bottom
        left: 10px; // moves it to 10px to the left
    }
```

```css
    div {
        position: fixed; // fixes element relative to the deocument 
        top: 10px; // moves it to 10px to the bottom
        left: 10px; // moves it to 10px to the left
    }
```

Further reading at <a href="http://css-tricks.com/almanac/properties/p/position/">css-tricks</a>

---
class: left, middle
# Z-Index

```css
div {
  z-index: 1;
}
```
<img src="images/download.png" height="164" width="307">

Z-index controls the vertical stacking of non-static blocks. The higher the value, the closer the item is on stack to the user.

Further reading at <a href="http://css-tricks.com/almanac/properties/z/z-index/">css-tricks</a>

---
class: left, middle
#Floats

The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.

<figure style="text-align: center;">
    
<img src="data:image/png;base64,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"/>
</figure>
---
class: left, middle
#How it looks

.middle[
<p>In this example, the image will float to the right in the paragraph, and the text in the paragraph will wrap around the image.</p>

<p><img style="float: right; margin: 0 0 10px 10px;" src="http://www.w3schools.com/css/w3css.gif" alt="W3Schools.com" width="100" height="140">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
</p>
]
.middle[
      ```html
<style>
img {
  float: right;
  margin: 0 0 10px 10px;
}
</style>
<p>text</p>
<p>
  <img src="w3css.gif" alt="W3Schools.com" width="100" height="140">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet
</p>
      ```
]

---
class: left, middle

# Setting up the float
```css
    div {
        float: left; // can be the following: "left", "right", "inherit", "none"
        width: 100px;
    }
```

The floated element automatically asumess **display: block**.

If the parent element contains only floated elements, it's **height will equal to 0**

---
class: left, middle

# When do we use floats?

---
class: left, middle
# Clearing floats

To solve the issue of collapsing parents we can use several techniques:

```css
    .parent {overflow: hidden;}
```

```css
    .nextnonfloated_element {clear: both;}
```

```css
    .parent:after { 
       content: "";
       visibility: hidden; 
       display: block; 
       height: 0; 
       clear: both;
    }
```

Further reading at <a href="http://css-tricks.com/almanac/properties/f/float/">css-tricks</a>
      
---
class: center, middle

#Flexbox

.center[
[Browser support](http://caniuse.com/#feat=flexbox)
]
.center[
      [Read more](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
]

---
class: center, middle

#Flexbox

---
.center[
<img src="images/flex-direction-terms.svg" alt="">
      ]
      <style>
        .flex-description {
          font-size: 19px;
        }
        .flex-description b {
          font-size: 21px;
        }
      </style>
<ul class="flex-description">
  <li> <b>main axis</b> - The main axis of a flex container is the primary axis along which flex items are laid out.</li>
  <li> <b>main-start | main-end</b> - The flex items are placed within the container starting on the main-start side and going toward the main-end side.</li>
  <li><b>main size</b> - A flex item’s width or height, whichever is in the main dimension, is the item’s main size. The flex item’s main size property is either the width or height property, whichever is in the main dimension.</li>
  <li><b>cross axis</b> - The axis perpendicular to the main axis is called the cross axis. It extends in the cross dimension.</li>
  <li><b>cross-start | cross-end</b> - Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side.</li>
  <li><b>cross size</b> - The width or height of a flex item, whichever is in the cross dimension, is the item’s cross size. The cross size property is whichever of width or height that is in the cross dimension.</li>
</ul>
---

# Container Properties

## display: flex | inline-flex;

This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children.
```css
      .container {
        display: flex | inline-flex;
      }
```

---

# Container Properties

## flex-direction
      
This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns.
.center[<img src="images/flex-direction1.svg" width="700" alt="">]

```css
      .container {
        flex-direction: row | row-reverse | column | column-reverse
      }
```

---

# Container Properties

## flex-wrap

By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap
.center[<img src="images/flex-wrap.svg" alt="" width="700">]
```css
      .container {
        flex-wrap: nowrap | wrap | wrap-reverse;
      }
```

---

# Container Properties

## flex-flow
This is a shorthand flex-direction and flex-wrap properties, which together define the flex container's main and cross axes. Default is row nowrap.

```css
      .container {
        flex-flow: <‘flex-direction’> || <‘flex-wrap’>
        /*flex-flow: column nowrap*/
      }
```

---
# Container Properties

## justify-content

This defines the alignment along the main axis.
.center[<img src="images/justify-content.png" alt="" width="700">]
```css
      .container {
        justify-content: flex-start | flex-end | center | space-between | space-around;
      }
```
---
# Container Properties

## align-items
This defines the default behaviour for how flex items are laid out along the cross axis on the current line.
.center[<img src="images/align-items.png" alt="" width="">]

```css
      .container {
         align-items: flex-start | flex-end | center | baseline | stretch;
      }
```
---
# Container Properties

## align-content
This aligns a flex container's lines within when there is extra space in the cross-axis.
.center[<img style="height: 350px" src="images/align-content.png" alt="">]

```css
      .container {
         align-content: flex-start | flex-end | center | space-between | space-around | stretch;
      }
```
      
---
# Elements Properties

**Note**: `float`, `clear` and `vertical-align` do not work with flex-elements

## order
 The order property controls the order in which they appear in the flex container.
.center[<img style="height: 350px" src="images/order-2.svg" alt="">]

```css
      .item {
        order: <integer> | default = 0;
      }
```

---
# Elements Properties

## flex-grow
 This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.
.center[<img style="" src="images/flex-grow.svg" alt="" width="700">]

```css
      .item {
        flex-grow: <number>; /* default 0 */
      }
```

---
# Elements Properties

## flex-shrink
 This defines the ability for a flex item to shrink if necessary.

```css
      .item {
        flex-shrink: <number> (default 1)
      }
```

<br><br>
## flex-basis
 This defines the default size of an element before the remaining space is distributed.
The `auto` keyword means "look at my width or height property"

```css
      .item {
        flex-basis: <length> | auto; /* default auto */
      }
```
---
# Elements Properties
## flex
 This is the shorthand for flex-grow, flex-shrink and flex-basis combined.
The second and third parameters (`flex-shrink` and `flex-basis`) are optional. Default is 0 1 auto.

```css
      .item {
        flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
      }
```
---
# Elements Properties
## align-self
 This allows the default alignment (or the one specified by `align-items`) to be overridden for individual flex items.
.center[<img style="height: 300px;" src="images/align-self.svg" alt="">]

```css
      .item {
        align-self: auto | flex-start | flex-end | center | baseline | stretch;
      }
```

---
class: center
# Grow. How to calculate ([spec](https://www.w3.org/TR/css-flexbox-1/#resolve-flexible-lengths))
.center[<img style="" src="images/grow.png" alt="">]
.center[
  > Available space = (container size - flex-basis siblings total)
]
.center[
  > Available space = 600 - 300 = 300
]
<BR>
<BR>
.center[
  > Grow unit = (Available space / Sum Grow siblings total)
]
.center[
  > Grow unit = 300 / ( 2 + 0 + 2 ) = 75
]
<BR>
<BR>
.center[
  > Flex item size = (Flex basis + (Grow Unit * flexGrowNum))
]
.center[
  > Flex item size (1) = (100px + (75 * 2)) = 250px
]
.center[
  > Flex item size (2) = (150px + (75 * 0)) = 150px
]
.center[
  > Flex item size (3) = (50px + (75 * 2)) = 200px
]

---
class: center
# Shrink. How to calculate ([spec](https://www.w3.org/TR/css-flexbox-1/#resolve-flexible-lengths))
.center[<img style="" src="images/shrink.png" alt="">]
.center[
  > Container width of 600px and a negative available space (-200px)
]
<BR>
<BR>
.center[
  > Item 1 (1x 200) + Item 2 (2 x 200) + Item 3 (3 x 200) + Item 4 (1 x 200) = Total items (1400)
]
<BR>
<BR>
.center[
  > Item 2 shrink factor = Item 2 (2 x 200px) / Total Items (1400) = 0.286
]
<BR>
<BR>
.center[
  > Space removed from Item 2 = Item 2 shrink factor (0.286) x Negative space (-200px) = -57.142. Rounded down to 57.
]
---
class: center, middle
# Play with flexboxes

[Flexbox](https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/)

---
class: center, middle
# Practice
.center[[Float](images/float_layout.png)]
<br>
.center[[Flex](images/flex_layout.png)]

---
class: left, middle
# Additional links

- [CSS-Tricks Almanac](http://css-tricks.com/almanac/)
- [Codecademy CSS lessons](http://www.codecademy.com)
- [Learn Layout](http://learnlayout.com)
- [Fun with flexbox](http://flexboxfroggy.com/)