• Lots of old techniques out there have been outdated.
  • Layout methods have not.
  • Still using the same techniques as we did years ago.
  • Increasingly we’re using frameworks.
  • Add markup.
  • CSS processors.
  • Hopes for layout:
    • Flexbox
    • CSS Grid Layout
    • Box alignment module
  • Give us source oder separation from visual layout
  • precise alignment control
  • relationships to each other
  • Remember Faux Columns? (2004)
  • people jumped at display:table; give us a relationship between columns
  • Separation of content and markup
  • Separation of source and display
  • A bit of a failed promise
  • Need compromises, usually
  • Flexbox and Grid Layout helps to display items in every order
  • Default positioning
  • grid-auto-flow helps to fill gaps maisonette.js style
  • Kind of scary, especially if you think about accessibility.
    • Got a lot to learn
    • Good = Creating the best source with the best markup and then displaying it best for the breakpoint
    • Bad = So, I don’t need to care about the source order
    • Terrible = Flattening out the source order and do everything using CSS grid and flexbox
  • Relationship of the items but independent from source order
  • Control of alignment
  • Box alignment module level 3
    • flexbox alignment to use for other specs
    • VERTICALLY CENTER ALL THE THINGS!
    • Distributed alignment
      • justify-content
      • align-items
        • stretch
        • center
      • justify-self
      • align-self
    • In CSS grid layout
      • Chrome canary
      • align-items center in a css grid with repeated columns
      • instead of stretch
  • Responsive by default
    • Flexbox:
    • CSS Grid:
      • fr (fraction) unit – similar to flex grow
        • grid-template-columns: 1fr, 1fr, 1fr -> same width
        • grid-template-columns: 600px, 1fr, 1fr -> remaining space is shared between column 2 & 3
      • grid-template-areas -> ASCI Art building of layouts
  • But what about old browsers?! I can’t use that stuff!
    • We must to cater for the web of today, but we need to look forward and use progressive enhancement.
    • No layout is not an option.
    • Need to think about feature support differently in a world of evergreen browsers.
    • Business case: How long will the website that you build right now be active, the site will be updated when users upgrade.
    • CSS Grid Layout
      • Early implementation in IE10,11 & edge
      • Current spec in Chrome, Opera (experimental flag)
      • Prefixed in Webkit Nightlies
      • Partial in Firefox Nightly
      • In near future
      • High priority on edge
    • This is not all or nothing. You can begin with small UI elements, use the modern methods for finessing
    • Flexbox in the real world: Zoe M. Gillenwater Enhancing Responsiveness With Flexbox
    • Check stats and compare feature support, for example that is supported by gaug.es
    • Separate mobile and desktop stats – mobile might be more advanced
    • Use such tools for prototyping – you learn how they work, and you immediately can work with it while it is developed
    • You can give feedback to the Working group and it has an effect and they get implemented.
    • It is too late to comment when the things are out in browsers. If you want to be involved, do it now.
    • gridbyexample.com
    • Slides & more information: https://rachelandrew.co.uk/presentations/css-grid

4 thoughts on “Rachel Andrew – But what about old browsers?!? #fronteers15

Comments are closed.