CSS-Shapes
CSS-Grid
& Flexbox Gutenberg!
The last couple years have given us a BUNCH of new tools!
Slide 3
Slide 3 text
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.
Slide 4
Slide 4 text
Rachel
Andrew
Grid by Example
Smashing Magazine
http://rachelandrew.com
Slide 5
Slide 5 text
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.
Slide 6
Slide 6 text
I come from print, and I’ve wanted to wrap type around shapes for YEARS.
Shapes! from Jen’s Labs.
Slide 7
Slide 7 text
CSS-Shapes!
Slide 8
Slide 8 text
shape-outside: ellipse;
Slide 9
Slide 9 text
This is the home page of her lab.
Slide 10
Slide 10 text
Now, this is part of a bigger lab where Jen makes a Mondrian responsive.
Slide 11
Slide 11 text
And here it is as a photo gallery. But oh, man. We’ve got better ways of doing that now!
Slide 12
Slide 12 text
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.
Slide 13
Slide 13 text
Ans another one …
Slide 14
Slide 14 text
And from the photo-theme site Imagely. When I saw this …
Slide 15
Slide 15 text
It made me want to do this.
Slide 16
Slide 16 text
Now, this is from 2013, done with four widget areas and floats.
Slide 17
Slide 17 text
So, yeah, you could probably have done this with floats too.
Slide 18
Slide 18 text
But wayyyy easier with Grid!
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
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.
Slide 23
Slide 23 text
5.xx:
Put stuff
where you want
to put stuff.
Slide 24
Slide 24 text
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.
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
So we’ve got that code in the theme - no reason to add blocks here.
Slide 28
Slide 28 text
But now — we do all the same things and more in the post!
Slide 29
Slide 29 text
The cover block.
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
Full-screen featured image with headline: SOLVED.
Gallery in a post: one click. Three seconds. No tweaks.
Slide 32
Slide 32 text
Front page: Easier with widget areas, like this Genesis child theme.
Slide 33
Slide 33 text
Or this one. Two. Hours. Flat. (For a demo last fall.)
Slide 34
Slide 34 text
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.
Slide 35
Slide 35 text
Lotta styles for the front end here. The good news is, everything we can possibly change is probably in this list of rules.
Slide 36
Slide 36 text
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.
Slide 37
Slide 37 text
K, Bessie. What else?
Oh that.
Slide 38
Slide 38 text
I lied about
WooCommerce.
Slide 39
Slide 39 text
Apparently we cannot yet in fact make WooCommerce products with the block editor. We still get to use this.
Slide 40
Slide 40 text
Turns out WooCommerce Blocks are for adding products we’ve already made to posts and pages.
Slide 41
Slide 41 text
Which can look a lot like our shop.
Slide 42
Slide 42 text
For the most part. I’m having a helluva time getting these two pages to measure out the same.