Skip to content

Some code examples from my next level layout talk at smashing conf 2016

Notifications You must be signed in to change notification settings

chriswrightdesign/next-level-layout-talk

Repository files navigation

next-level-layout

Some of the examples from my next level layout talk given in Smashing Conf Oxford 2016

Component flow

Technique combining flex-wrapping and css columns so that the component doesn't need media queries

Progressive grid

How I progressively enhance from CSS Floats -> Flexbox - > CSS Grid

Auto-sizing

Technique for dealing with multiple items inside of a component

Equal columns

Technique for allowing you to have equal height columns

Reverse chronology

A simple technique for displaying a list in reverse to use on something like a twitter feed, comments, or an IRC Chat application

Source order

Demonstration of basic presentational source order shifting (Read about accessibility concerns: http://tink.uk/flexbox-the-keyboard-navigation-disconnect/). My recommendation is to only use this on presentational elements and things which won't be missed

Troubleshooting

Some of the interesting things I've come up against in using Flexbox with intrinsic sizing of iframes, SVG, and my workaround for responsive images.

About

Some code examples from my next level layout talk at smashing conf 2016

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published