This week we welcome Miriam Suzanne to team CSS-Tricks! She’ll be doing a lot more writing for the community and so we decided to interview Miriam to get to know her better. We chatted about open source projects that she’s worked on, like Susy, and upcoming CSS features that have piqued her curiosity.
 
From the blog

✻ With all the excitement about the new package manager Yarn over the past few days, Chris rounds up everything you need to know. Here’s an excerpt from the official announcement:

We’re pleased to announce the open source release of Yarn, a collaboration with Exponent, Google, and Tilde. With Yarn, engineers still have access to the npm registry, but can install packages more quickly and manage dependencies consistently across machines or in secure offline environments.

✻ Trishah Woolley shows us all the ways to add an ID to the body element in WordPress. This is useful when you might want to change the look of a specific page that otherwise doesn't have a unique selector. For example, styling the header differently via body#about .header {} vs. body#contact .header {}.

✻ Have you ever taken a look inside an SVG? In this article on the SVG path syntax, Chris helps explain what all those eye-glazing numbers and letters are inside.

✻ Next up, Chris wrote about CSS Grids and wondered whether if we’ll be flattening our HTML because of the lack of subgrid support. CSS Grids lets us layout columns and rows of text just like in InDesign or Photoshop, but without subgrids we can’t easily nest grids within one another.

Eric Meyer made a similar call for subgrid support a while back:

First impressions matter. CSS itself suffered for years from the initial impressions designers formed of “boring, boxy” layouts, and it still suffers from the handicap of being a presentation system without a layout engine at its core. Grid layout is the first serious candidate to fill that hole in the past two decades, and I don’t want to see them hamstrung from the outset. Subgrids are essential to the adoption of grids. I hope they’ll be implemented as soon as possible, and before grids are pushed into public release channels.

Here’s an example of what’s possible in CSS Grids by Jen Simmons:


✻ In SVG → Letterpress Chris walks us through the process of making a letterpress print from an SVG animation. Seriously though, is this not the coolest thing ever?


✻ John Jameson has researched the various methods in which to underline text on the web. Here’s a list of the ways he mentions:

  • text-decoration
  • border-bottom
  • box-shadow
  • background-image
  • SVG filters
  • Underline.js
  • text-decoration-*

That’s a lot of different methods! Each is best for a specific use case so make sure to explore all the demos, too.

✻ Chris made a quick note about the annoying mobile double-tap link issue which is created when certain browsers handle :hover states in an unexpected way. Chris sort of simplifies his advice for this behaviour though:

If anything, design your site such that clicks or taps are required to reveal other things, but make that as obvious as you can and don’t trap normal unwilling links inside of those elements.


What we’ve been reading, listening and watching

Anton Kovalyov wrote about Medium’s new approach to CSS:

...sometimes components didn’t behave the way you expected them to behave from reading their declared classes. You would see a primary button with classes `button` and `button–primary` expecting it to look just like any other primary button on the website. But that wasn’t always the case.

✻ ✻ ✻

A short while back Una Kravets made You Might Not Need JavaScript that shows how just how far browsers have come in the past couple of years: carousels, modals and lightboxes are now all possible with CSS and HTML alone.

✻ ✻ ✻

Aaron Gustafson wrote about Offline First where he loves the idea but not the name. His argument is that…

“Offline first” requires network connectivity too! You don’t see many websites delivering their content on USB drives, so all of the code required to make the offline experience possible in the first place requires an initial (and stable) connection to the Web. In other words, offline can’t be first.

Also, as a side note, that kinda reminds me of this funny thing that Jenn Schiffer once said.

✻ ✻ ✻

@letsencrypt: Yesterday, for the first time, @Mozilla telemetry shows more than 50% of page loads were encrypted with HTTPS.

✻ ✻ ✻

styled-components is an interesting new project that effectively let’s you write CSS in a JavaScript component:


A note from the archive

Late last year Robin wrote about how to make charts with SVG. There are all sorts of ways to make them depending on whether you need pie charts, bar or line graphs and even scatter graphs. Yay for SVG!

If this stuff is of further interest to you, then you should definitely pick up Chris’ book on the topic: Practical SVG.


What have you learnt this week?

Robin Rendle: After what seems like many years of stagnation, there appears to be a great deal of interest in new design tools lately. Take Typeshift for example, an app that helps you prototype designs in the browser. Or Subform, an app and Kickstarted project that’s designed specifically for digital product design. Of course, that’s not setting aside FigmaAdobe XDSketchOrigami, Abstract or Framer either.

Phew! It’s a wonderfully exciting time to be working in the space between design and development these days.

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