CSS Chat Summary: 25th June 2020

Full meeting transcript on Slack: https://wordpress.slack.com/archives/CQ7V4966Q/p1593118837002500

I (@notlaura) facilitated the meeting.

CSSCSS Cascading Style Sheets. audit updates

I added a summary comment with remaining items to the main CSS audit ticket, and confirmed with the group that we were in agreement to remove auditing CSS comments from the list. I also added property counts for letter-spacing and font-family to go along with the other typography-related properties.

There was general agreement that the “Determine methodology recommendations” sub-task ticketticket Created for both bug reports and feature development on the bug tracker. is complete since we have been using @ryelle excellent CSS audit tool. The next step will be determining how to automate the results, and @isabel_brison suggested that be a separate ticket. In addition to an automation ticket, I added that we will want to have a ticket to determine the display of audit data.

Color scheming updates

@ryelle mentioned the merged PR to GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ that successfully applied the adminadmin (and super admin) color scheme using a single base color with accompanying Sass mixin vs using the post-css themes approach we’ve looked at previously.

@danfarrrow mentioned the possibility of computing the color values in native CSS using custom properties. There was agreement that this would be ideal, but that Sass or PostCSS would be required at least in part, and we would need to test out some approaches, including something like outlined in this blog post. @youknowriad mentioned an issue with the approach outlined in the blogblog (versus network, site) posts ties the colors APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. to HSL values, and we would want to have the colors available in a more generic form. Still, some experimenting is in order before we fully rule out the possibility!

CSS Latest and Greatest Link Share

I shared the gap property that can be used for horizontal and vertical spacing between elements for both flexbox and CSS grid. While support is not green across the board yet, recent versions of Chrome have full support, so we are getting close and this blog post of mine gives an overview of using the gap property with a fallback.

#core-css, #summary