Here’s what we’ve published this week:

✻ The Lodge is Now Free:
Our training courses on design and development are now free for everyone to enjoy. Chris also talks about the new CSS-Tricks redesign and you can help give us feedback over on the Forums.

✻ Creating an SVG Icon System with React: Sarah Drasner demonstrates how React can help keep our icon code modular, but Sarah also reminds us of some SVG best practices to keep in mind, too.
✻ Leveling Up With React: React Router: part one of a three-part series by Brad Westfall. This post is particularly useful for folks that have already checked out a lot of tutorials but want to take their React skills to the next level.

✻ Use `rem` for Global Sizing; Use `em` for Local Sizing: looking back at the old “em versus rem” font-sizing debate suggests that we should use both values in our designs depending on the circumstances.

✻ What is a Headless CMS?: Chris describes the differences between a traditional CMS for a website and a CMS that can be used for multiple sources. This is pretty much like how NPR’s backend has been designed to Create Once Publish Everywhere. Lots of recommendations in the comments.

What we’ve been reading, listening and watching

Ire Aderinokun has a lot of great ideas when it comes to styling broken images with pseudo elements: 
Broken images are ugly. But they don’t always have to be. We can use CSS to apply styles to the element to provide a better experience than the default.
Paul Robert Lloyd runs through his thoughts on flexbox layout
Like getting to grips with any new tool, only by using it for real can its various nuances and limitations be understood. Finally able to discard the many counter-intuitive hacks I’ve gathered over the years, I find it hard not to create a flex layout without wearing a broad grin. Vertical centring? Easy. Equal height columns? By default. While Flexbox may not be suitable for every situation, it solves a great number. And with CSS Grids just around the corner, web layout nirvana feels pretty damn close.
Subsequently, Paul links to a great tutorial by Sam Provenza on the subject of aligning children elements in a flex container: Flexbox’s Best-Kept Secret.

In other news around the web
A note from the archives

Although Flexbox certainly makes centering things a whole lot easier, it’s really not all that difficult to align components horizontally or vertically with CSS. A while ago we made an extensive guide to centering that shows which method you need to use depending on the situation.

What have you learnt this week?

Sarah Drasner: A friend and I were sitting around, doing as old web devs do sometimes, making fun of our sites from the 90s and early 2000s recently. We started talking about the interesting things we used to do to get cool effects. One of them was “fake masking”- we used to make an image look like it was cropped by CSS by coloring parts of it the same color as the background.

We were then comparing it to how far we’ve come. We have great articles on how to use CSS shapes, along with awesome tools like Bennett Feely’s clippy to get us going. 

We can use clip-path to make some really nice and unique layouts. We can use clip-path to cut out the inner part of an element. We can create masks and vignettes, and we can even wrap the text around these complex shapes

The support for some of these features is still growing, but in an age where we’re considering breaking out of our typical layouts, it’s really exciting to see the possibilities grow around us.

Until next time!
Team CSS-Tricks
Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list