CSS Layout

@codekipple

 

Carl Hughes

Illustrations by

Workshop Details

  • 20 minute run through of the history of CSS Layout

 

  • 30 or 40 minute practical part, play with some examples complete some tasks. If you don't have a laptop try to work in pairs or groups with someone that does.

    Clone this repo.
    https://github.com/CodeHubOrg/css-layout

 

  • Conclusion, final questions

Straw poll

Who has used ... for layout before?

tables!

  • Not intended for page layout

floats

  • CSS Level 1 spec in 1996
  • Widely used from 2004
  • Not intended for page layout

[2] from css-tricks.com

floats

  • Grid items heights are not equalised

floats

  • Have to deal with clearing floats (responsive)

display:table

  • CSS Level 2 spec in 1998
  • No popular browser support until 2008/2009
  • Can be used to vertically align items
  • Not great for page layout (especially responsive)
  • Not intended for page layout

display:inline-block

  • No popular browser support until 2008/2009
  • Not intended for page layout

display:inline-block

  • unequal heights like float
  • no need to clear floats!
  • much better than floats for responsive layouts

display:inline-block

But!

  • We do have to deal with whitespace!

display:inline-block

  • Fighting whitespace with inline-block elements

flexbox

  • First proposed as a W3C spec in 2009
  • Is intended for page layout!

flexbox

  • Lay items out along a line (horizontally or vertically)
  • Justify the items
  • Control the start and end points of items
  • Align items (Vertical center!)
  • Change order independent of source
  • Can be used to progressively enhance a layout made
    with floats or inline-block
  • Cannot do multi dimensional layout

https://css-tricks.com/all-about-floats/

flexbox

Defined using the display property.

.container {
    display: flex;
}

This makes all of its direct children elements flex. Now you can control those elements in a variety of ways.

  • flex-direction
  • flex-wrap
  • justify-content
  • align-items
  • align-content

Flexbox lets you fill the available space. By default flex items height fill their container (equalised heights). They do what we have be achieving with floats and inline-block but are designed to to it.


https://css-tricks.com/snippets/css/a-guide-to-flexbox/

one / multi dimensional layouts

  • Float, inline-block, flexbox,
    All only support one dimensional layouts.
  • Multi dimensional layouts can be achieved by nesting 

one / multi dimensional layouts

  • This is a one dimensional layout 
  • Just column spanning

one / multi dimensional layouts

  • This is a also a one dimensional layout
  • The items are just wrapped, essentially they are just one long line.
  • Only column spans specified no row spans

one / multi dimensional layouts

  • Multi dimensional layout
  • It has both column and row and spanning

one / multi dimensional layouts

This multi dimensional layout could be constructed by creating three different grids and nesting them (floats, inline-block or flexbox)

CSS grid

  • First public draft specification in 2011
  • Put forward and developed by Microsoft. Early implementation in IE10, since then the spec has changed.
  • Currently has to be turned on by flags in firefox, chrome and opera
  • Is intended for page layout!

CSS grid

  • Can do multi dimensional layout!
  • Source order independence (be careful)
  • Define the grid, then place items on it

CSS grid

  • When defining a grid it helps to sketch it out to visualise it.
  • You have to define margins (for now)
  • Red numbers rows, green numbers (columns)

CSS grid

  • display:grid
  • define columns
  • define rows
  • 0.5em width margins
.grid {
    display: grid;
    grid-template-columns: auto 0.5em auto;
    grid-template-rows: auto 0.5em auto 0.5em auto;
}

CSS grid

  • place nav on grid
  • Comments show example using span keyword
  • This example is using line based placement
.grid nav {
    grid-column: 1 / 2;
    grid-row: 1 / 4;
    /* grid-column: 1 / span 1 */
    /* grid-row: 1 / span 3 */
}

CSS grid

  • place header on grid
  • Comments show example using span keyword
  • This example is using line based placement
.grid header {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    /* grid-column: 3 / span 1; */
    /* grid-row: 1 / span 1; */
}

CSS grid

  • place aside on grid
  • This example is using line based placement
.grid aside {
    grid-column: 1 / 2;
    grid-row: 5 / 6;
}

CSS grid

  • place article on grid
  • This example is using line based placement
.grid article {
    grid-column: 3 / 4;
    grid-row: 3 / 6;
}

CSS grid

other ways to layout grids:-

 

http://gridbyexample.com by Rachel Andrew is an excellent resource for exploring all the other properties and possibilities of grids.

Tasks!

Clone this repo.
https://github.com/CodeHubOrg/css-layout

 

30 or 40 minute practical part, play with some examples complete some tasks. If you don't have a laptop try to work in pairs or groups with someone that does.

Thanks

Text

Any questions?

CSS Layout

By codekipple