Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Let's Get Visual!

Mary Baum
March 16, 2019

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.

Mary Baum

March 16, 2019
Tweet

More Decks by Mary Baum

Other Decks in Design

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!

  19. None
  20. None
  21. None
  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.
  25. None
  26. None
  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.

  30. None
  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