CSS, Sass, and Playwriting
I join Ari, Ben, and Tessa to talk about getting into CSS from other languages, the absurdly massive problem CSS is designed to solve, and the mental model behind the language.
Podcast
post type
2020 Posts
-
see all Case Study posts
Case Study post typeTypographic Superpower Game
A meditation on typography
A meditation on typography, Adobe Fonts’ Game allows players to choose the fonts that they feel apply best to different scenarios. Players’ input helps Adobe Fonts continue to improve on their new browse-by-tags feature. We worked closely with Adobe to create animated & interactive illustrations using GreenSock, NuxtJS, and CSS – while maintaining high performance standards and responsive, accessible design.
Video post typeDesign Engineering Handbook
Thoughts on the design & development process
Learn how design engineering brings together form and function in this new Design Better book written by Natalya Shelburne, Adekunle Oduye, Kim Williams, and Eddie Lou – including interviews with Miriam and others.
-
see all Link posts
Link post typeUsing Custom Property “Stacks” to Tame the Cascade
Since the inception of CSS in 1994, the cascade and inheritance have defined how we design on the web. Both are powerful features, but as authors we’ve had very little control over how they interact. Selector specificity and source order provide some minimal “layering” control, without a lot of nuance – and inheritance requires an unbroken lineage. Now, CSS Custom Properties allow us to manage and control both cascade and inheritance in new ways.
Video post typeDesign Systems AMA
Jina and I answer questions about CSS, Sass, Design Systems, and more!
Podcast post typeAuthoring the future of CSS
A spinoff of the Party Corgi Network discord. I chat with Chris Biscardi about The CSS Working Group, open-source projects, art, and music.
Article post typeW3C Invited Expert on the CSS Working Group
Helping define the future of styles on the web
I’ve joined the CSS Working Group as a W3C Invited Expert to help to develop the next level of Cascading & Inheritance, in addition to other CSS standards. I’m also currently active in the CSS4 and Design Token Community Groups.
2019
Link post typeEmbracing the Universal Web
CSS-Tricks asked a number of web builders the same question…
“What about building websites has you interested this year?” There are constantly new features appearing in browsers – from subgrid to variable fonts to better developer tools. It’s a really great time to be re-thinking everything we know about design on the web. Responsive design has served us…
Video post typeEdit CSS Shapes in the Browser
For quick visual adjustments directly on the page
Have you ever wanted to create more interesting shapes on the web, or flow text around the details of an image? Shape paths can be hard to code without a visual reference, but Firefox provides a shape editor to make it quick and clear.
Link post typeIt’s My Job, and Yours
CSS-Tricks asked a number of web builders the same question…
“What about building websites has you interested this year?” The role of ethics in our modern web space has been on my mind for the past few years and I suspect it will occupy my thoughts increasingly as I move forward. With each encounter of a questionable feature…
Video post typeUse new selectors responsibly with selector queries
Just in time for Selectors Level 4
Firefox 69 was the first to implement selector feature queries, but other browsers are following suit. I’ll show you how it works, and how to start using this new feature query right away.
Video post typeHow do you wrap long words in CSS?
None of the solutions are perfect, but we have some options
Horizontal text overflow has always been difficult to manage on the web. The default visible overflow is designed to make sure content remains accessible no matter the size of a containing box, but it’s not our only option.
Video post typeScroll Snap in CSS
Without any JavaScript or “scrolljacking”
When we’re scrolling down a page, or through a gallery of images, snap-targets can help guide us from one section or image to the next. In the past, developers have used JavaScript to hijack scrolling, but now we can manage scroll alignment directly in CSS with only a few lines…
Video post typeInner & Outer Values of the Display Property
Allow us to be more explicit & expressive about layouts
The
displayproperty has been in CSS from the beginning, handling everything fromblockandinlineboxes tolist-itemsand full layout systems likeflexboxorgrid. Now thedisplaysyntax is getting an upgrade to match it’s multiple uses.
Podcast post typeOn Sass & CSS
I drop by the show to talk about Sass in 2019, design tokens, OddBird, unused CSS, new CSS properties, and Dave & Chris’ explanation of revert.
