Jen Simmons just ushered in this new name for the way(s) web design is changing. She has been adding great videos on her YouTube channel, Layout Land, for about the past two months. She gave this presentation at An Event Apart in Seattle yesterday. There are notes on what she said here and here.
Oh, yeah, her talk is titled “Everything You Know About Web Design Just Changed.”
Now we can use white space in web design, for real.
We can squish, or shrink, or stretch. Deliberately.
Even media queries are changing. This is beyond responsive design, which has been our paradigm for eight years (!) already.
See Simmons’s cool examples of grid and more.
Also this great video series of how to write CSS that works in every browser.
Reviewing some flexbox concepts today. Flexbox is really handy for coding things like a row of social icons, as shown in this image:
- “A flex container expands items to fill available free space, or shrinks them to prevent overflow.”
- “Flexbox layout is good at small-scale layouts, whereas the (emerging) Grid layout is intended for larger-scale layouts.”
- “Instead of talking about horizontal (inline) and vertical (block), flexible boxes use the terms main axis and cross axis. … The main axis is the axis along which the flex items follow each other. The cross axis is the axis perpendicular to the main axis.” (source)
In today’s browsers (2017), this calls for various prefixes and several lines of CSS to declare the main axis:
Having supplied those four lines of CSS, you’ve determined that the main axis of the element is horizontal. Following the flexbox standards, you can write simply
flex-direction: row; and then (when you’ve written all your CSS) run the file through a formatter (such as Atom’s autoprefixer package) to get all the extra lines added for you.
“By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed” with
flex-wrap: wrap; (source). This is important to consider if you have a lot of things in a row (such as the social icons above), and you don’t want them to shrink to little dots on a vertical phone screen — which they will do if you don’t wrap the line. Using wrap will make the icons do this on a phone:
Since I don’t use flexbox often, I always have to look this stuff up.