Let's Get Visual!

Combine modern CSS with the new block editor in WordPress, and what do you get? Better-looking pages and posts. More printlike layout options. And entire afternoons back from building typical WordPress patterns, like grids of posts and full-screen header images with type overlays.

Transcript

1. Let’s get visual! So what looks great now?
2. CSS-Shapes CSS-Grid
 & Flexbox Gutenberg! The last couple years have given us a BUNCH of new tools!
3. Real art direction
 on the web with modern CSS. http://labs.jensimmons.com Layout Land on YouTube Mozilla Developer Advocate The first three of those come largely from Jen Simmons, who with Rachel Andrew has been teaching us all modern CSS and real design for the web.
4. Rachel 
 Andrew Grid by Example Smashing Magazine http://rachelandrew.com
5. Real art direction
 on the web with modern CSS. http://labs.jensimmons.com Layout Land on YouTube Mozilla Developer Advocate The first three of those come largely from Jen Simmons, who with Rachel Andrew has been teaching us all modern CSS and real design for the web.
6. I come from print, and I’ve wanted to wrap type around shapes for YEARS. Shapes! from Jen’s Labs.
7. CSS-Shapes!
8. shape-outside: ellipse;
9. This is the home page of her lab.
10. Now, this is part of a bigger lab where Jen makes a Mondrian responsive.
11. And here it is as a photo gallery. But oh, man. We’ve got better ways of doing that now!
12. Now some themes! Here’s the site we’re all working on, according to one joke making the rounds. Kinda symmetrical - a Genesis child theme.
13. Ans another one …
14. And from the photo-theme site Imagely. When I saw this …
15. It made me want to do this.
16. Now, this is from 2013, done with four widget areas and floats.
17. So, yeah, you could probably have done this with floats too.
18. But wayyyy easier with Grid!
22. 4.xx: 
 Put widgets where you want to put stuff. If the theme has widget areas where you want them, it doesn’t, really. But if it doesn’t, before Gutenberg, you had to put widget areas where you wanted stuff.
23. 5.xx: 
 Put stuff
 where you want 
 to put stuff.
24. Again - before Gutenberg: enqueue Backstretch and add several other functions to the functions file. Got an hour? We can go through it all if you want.
27. So we’ve got that code in the theme - no reason to add blocks here.
28. But now — we do all the same things and more in the post!
29. The cover block.
31. Full-screen featured image with headline: SOLVED. Gallery in a post: one click. Three seconds. No tweaks.
32. Front page: Easier with widget areas, like this Genesis child theme.
33. Or this one. Two. Hours. Flat. (For a demo last fall.)
34. Bessie wants you to know: A couple caveats from Bessie here: We’re still writing CSS. (Unless you want someone adding bold purple subheads and picture captions to a very non- purple theme…) Not so much page/post Loop templating, but probably still some hooks in block templates.
35. Lotta styles for the front end here. The good news is, everything we can possibly change is probably in this list of rules.
36. Here’s a square button. / An outline button. An outline button that does some other things. Course, that means we’ll want to curate this list pretty heavily if we’re building client sites that need to stay on brand.
37. K, Bessie. What else? Oh that.
38. I lied about WooCommerce.
39. Apparently we cannot yet in fact make WooCommerce products with the block editor. We still get to use this.
40. Turns out WooCommerce Blocks are for adding products we’ve already made to posts and pages.
41. Which can look a lot like our shop.
42. For the most part. I’m having a helluva time getting these two pages to measure out the same.
43. Mary Baum @marybaum