03-04, CSS Part 2: Layout

Matt Price

Recap

  • selector syntax: selector > string {property: value;}
  • colors: #RRGGBB or rgba(RRR, BBB, GGG, 0.alpha)
  • sizes: px or em (or rem)

Today

Box Model

wpid-boxmodel.png
  • content
  • padding
  • border
  • margin

"Russian Dolls"

flex-order-page.svg

Display: Block vs. Inline

mGTYI.png
  • block elements have their own boxes
  • inline elements do not have boxes. height, width, padding, work inconsistently.
  • inline-block elements don't make "true" boxes but allow you to set height and width.

Normal Flow

  • page processed sequentially
  • each block-level element gets its own line
  • inline elements displayed inside those lines
  • heights of lines set by height of content

Layout: Overriding "normal" flows

  • instruct elements to either step out of the normal flow or set new rues for their "internal" or "external" flow

Layout Methods

  • display property
  • position property
  • float property

We focus on display but dip into the other methods

Display

values we care about:

  • display: none
  • display: block/inline/inline-block
  • display: flex
  • display: grid

Default View

<style>
 main {
     display: block;
 }

 header {
     display:block;
     color: magenta;
 }
</style>

<main>
    <header>
        <h1>header</h1>
    </header>
    <article>
        <p>article p</p>
    </article>
    <footer>footer</footer>
</main>

Display: None

hide element completely so that it takes up no space at all 

<style>
 main {
     display: block;
 }

 header {
     display: none;
 }
</style>

<main>
    <header>
        <h1>header</h1>
    </header>
    <article>
        <p>article p</p>
    </article>
    <footer>footer</footer>
</main>

Display: Flex

<style>
 main {
     display: flex;
     align-items: center;
     justify-content: stretch;
 }

main>* {
     flex-grow: 1;
 }

header {
     color: magenta;
}
</style>

<main>
    <header>
        <h1>header</h1>
    </header>
    <article>
        <p>article p</p>
    </article>
    <footer>footer</footer>
</main>
  • one-dimensional layout
  • "content-out"
    • container determines direction & a few defaults
    • most styling still in children
  • revolutionary!

Flex Concepts: Container and Items

  • the container has display: flex;
  • the items are direct children of the container
  • container controls direction and wrapping behaviour, as well as default box alignments;
  • items control most other properties

Flex Concepts: Direction (container!)

flex_terms.png
  • main axis: horizontal if flex-direction: column; vertical if flex-direction: row
  • cross axis: vertical if flex-direction: column; horizontal if flex-direction: row

Flex Concepts: Alignment, Justification (container and items!)

  • align-items: default cross-axis alignment (stretch, flex-start, flex-end)
  • justify-content: default main-axis alignment (flex-start, flex-end, space-around, space-between)
  • align-self: item cross-axis
  • order: placement in flex-container (relative, not absolute!!)

Display: Grid

  • two-dimensional layout
  • "container-in"
    • container determines almost all layout properties
    • children choose their position within the grid
  • revolutionary!
<style>
 main {
     display: grid;
     height: 100%;
     grid-template-rows: 1fr 4fr 1fr;
     grid-template-columns: 1fr 2fr;
 }
 main>* {
     min-width: 100%;
     border: 2px green solid;
 }
header,footer {
    grid-column: 1/3;
    color: magenta;
}
</style>

<main>
    <header>
        <h1>header</h1>
    </header>
    <aside>
    aside
    </aside>
    <article>
        <p>article p</p>
    </article>
    <footer>footer</footer>
</main>

A lot like flex!

  • many ideas come from flex
  • finer control
  • 2 dimensions, not one

Grid Concepts: Container and Items

  • as in flex

Grid Concepts: Templates and Areas (container)

  • set patterns for the 2-d grid
  • grid-template-columns: how many columns, and what size?
  • grid-template-rows: how many rows, and what size?
  • grid-template-areas: names the areas, and allows items to set their own areas

Placing Items

  • grid-column: n/m: place items by column-number
  • grid-row: n/m: place items by row-number
    • (note how these allow spanning)
  • grid-area: area-name: place by named area
    • does not allow spanning

Resources

Media Queries

  • CSS rules that only come into effect under certain conditions
  • we will only use for screen size
  • allows creation of responsive sites
@media screen and (min-width: 500px;) {
    normal.selector > here {
        normal-rule: normal-value;
    }
}

@media screen and (max-width: 499px) {
    normal.selector > here {
        normal-rule: normal-value;
    }    
}