✻ Alessandro Vendruscolo wrote an intro to Bedrock, a toolset that brings quite a bit of modern tooling to WordPress development. For example, doing deployment through Capistrano, handling configuration through phpdotenv, and dealing with dependencies through Composer.

✻ Robin Rendle concludes his trilogy of posts on CSS Modules. This time he makes a more realistic project with React and shows how we might want to organise our components and templates. He also made a repo where you can check out the code working in the browser.

✻ Wrapping up a great ShopTalk episode with Val Head and Sarah Drasner about animation, Chris suggests we should be using `ease-out` when we animate an element and `ease-in` when an element is animating its way out:

Think of a knight's squire. When the knight calls them, they better arrive at a run, and slow down into place. When the knight sends them away, they'd better very quickly get moving out of there.

That feels like a best practice. Like the animation is being courteous and obedient on both sides. Get here in a hurry, but compose yourself. Get out of here even faster and without delay.

Rachel Smith explains with even more clarity

What we’ve been reading, listening and watching

Colin Ford, a type designer at Hoefler & Co., has made a short history of emoji which is entirely fascinating:
By 2008, emoji were an essential part of communication in Japan, despite the difficulties in crossing carrier lines. Communication companies looking to make a market in Japan left them out at their own peril.  

He follows up in part two about the standardisation process and how that began with Google and Apple.


A note from the archives

A while back Chris wrote about creating “a web type lockup” where complex typographic layouts really steal the show:
A type lockup is a typographic design where the words and characters are styled and arranged very specifically. Like the design is literally locked in place. This idea is slightly at-odds with the responsive web that we know and love, where text is fluid and wrappable and whatnot. Yet, the design possibilities of lockups are very appealing. I think we can hang onto what makes them awesome while still holding onto what makes the web awesome.

If you’re interested in this sort of thing then following the Letterform Archive is a must.

 

❥ Sponsor

What have you learnt this week?

Chris Coyier: I was working on design this week where I basically wanted to inject a line break into a header tag. Of course, I could just use a
tag. No shame in that, and in fact, that can be pretty useful (e.g. hide/showing the
at different breakpoints). But, I was curious if it was possible to inject a break through CSS, like, before a . 

Turns out, there isn't exactly a straightforward solution. I documented the journey here. The most clever working solution is display: table; on the span. In the comments there is a flexbox solution.

Also, as I said, no big deal just using a
.
 

Until next time!
Team CSS-Tricks

Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list