CSS Chat Summary: 2nd July 2020

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

I (@notlaura) facilitated the meeting.

CSSCSS Cascading Style Sheets. Audit Updates

@danfarrow made some formatting updates on the Google doc containing the audit data, and added an image of the longest selector on a mug:

Longest CSS selector found in WordPress on a mug

Brilliant!

@isabel_brison added an audit of z-index values to the list as well.

Color Scheming Updates

We discussed the ticketticket Created for both bug reports and feature development on the bug tracker. #50504 for a modern/higher contrast color scheme in 5.5 (mistakenly referred to it as a high contrast scheme, but it is higher contrast). @afercia asked what problem this new color scheme will solve, and why it is using the Sass variables instead of CSS custom properties. @ryelle indicated that we are moving slowly with this initiative, and that for now any new schemes should continue with existing conventions.

The rationale for the new color scheme is a conversation for the design channel, but @youknowriad understood it was meant to modernize the look/feel of WordPress adminadmin (and super admin), and to possibly be the default theme later. @ryelle mentioned it would also be a good pairing with dark mode. In terms of implementation, @youknowriad discussed that there will still be a need for Sass variables, and to be cautious about what values are exposed as CSS variables since it is a runtime 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.. A CSS variable for the main admin color makes a lot of sense.

@youknowriad noted an issue with the color schemes not applying to secondary buttons (secondary is a term used in 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/ though not in wp-admin, and refers to the outlined style of button) that he is working on in ticket #50537. @ryelle noted that that may be intentional for color contrast, and that a specific variable for secondary/default button colors would help with this issue. @youknowriad indicated the colors are adapted for secondary buttons in Gutenberg, and this should be consistent with coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. @afercia noted that a related change was submitted in 5.3 but reverted. It is unclear if that was specifically about the button color or possibly inputs, but in any event, the functionality is inconsistent with core and Gutenberg.

I asked if there are any notes from this incident that we should take into account with the color scheming work, and @afercia mentioned that styling changes in the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor that are intended to be adopted in core, should be discussed in TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. vs. GithubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/. I proposed an idea that the same CSS variables that are now used Gutenberg should be used in wp-admin. @youknowriad said this would be great for post-5.5 work.

We then discussed a bit of the distinction between wp-admin CSS and Gutenberg CSS, and the history of the #core-css channel. The #core-css channel came about at the beginning of this year as a avenue for discussing how to use more modern CSS practices in wp-admin. The Gutenberg CSS architecture conversations occurred in the #core-js channel.

@ryelle asked if anyone was actively owning the task to annotate screenshots, and I committed to coming up with at least a starting point to discuss at the next meeting.

CSS Latest and Greatest Link Share

@kburgoine shared “a latest but maybe not greatest” link for CUBE CSS, a new CSS methodology that’s been floating around. Like any methodology, it depends!

That was all for this week. I’m super late posting these notes, but better than not posting them!

#summary

CSS Chat Agenda: 2nd July 2020

This is the agenda for the upcoming CSSCSS Cascading Style Sheets. meeting scheduled for Thursday, July 2, 2020, 5:00 PM EDT.

This meeting will be held in the #core-css channel in the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

If there’s any topic you’d like to discuss, please leave a comment below!

  • CSS audit status update
  • Color scheming update
    • #50504 Higher contrast color scheme in 5.5
  • CSS Latest and Greatest Link Share
#agenda, #core-css

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

CSS Chat Agenda: 25th June…

CSSCSS Cascading Style Sheets. Chat Agenda: 25th June 2020

This is the agenda for the upcoming CSS meeting scheduled for Thursday, June 25, 2020, 5:00 PM EDT.

This meeting will be held in the #core-css channel in the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

If there’s any topic you’d like to discuss, please leave a comment below!

  • CSS audit status update
  • Color scheming updates
  • CSS Latest and Greatest Link Share

#agenda, #core-css

CSS Chat Summary: 18th June…

CSSCSS Cascading Style Sheets. Chat Summary: 18th June 2020

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

I (@notlaura) facilitated the meeting.

CSS audit updates

@isabel_brison updated the Audit Google Doc with some unique counts of layout and typography related properties with a focus on those than overuse px in a way that effects responsive behavior, and added a list of all properties using px values.

We then discussed @joyously‘s suggestion from a few weeks back that we create a task list for the audit. The doc is useful, but very informal and might be hard to follow for anyone who doesn’t have existing knowledge about the initiative. There was general agreement that a specific task list would be useful. I mentioned that it seems like we are nearing completion of the smaller audit tickets (Create a Report Outline and Determine Methodology Recommendations), and that in a few weeks we will want to discuss what’s next. Exciting! I volunteered to take stock of the remaining work and update the main audit ticket.

Color scheming updates

Last week we discussed naming conventions with the design team, and I mentioned that the notes from that meeting are a good overview of the color scheme initiative for newcomers.

@isabel_brison pointed us to a message that @youknowriad shared a PR adding admin color schemes to Gutenberg. Pretty cool that folks are dropping PRs in our channel!

I mentioned that, in the last meeting, we determined a next step of creating annotated screenshots to start iterating on the color names and abstraction names, and wondered if we should proactively seek out help from the design team for this. @isabel_brison mentioned that whatever the solution, the naming needs to work for designers and devs, and @kburgoine suggested we could propose some names and ask design for feedback. Overall, it will be a collaborative process and doesn’t need to be done by a specific team. We also discussed what exactly would be in an annotated screenshot – a full page? A specific module? I suggested that we start small, maybe with a widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. or the toolbar.

CSS Latest and Greatest Link Share

I shared a new property I learned about that has good browser support: max-inline-size

@kburgoine shared a lovely tool that shows sorted named CSS colors.

That was all for this week!

#summary #core-css

CSS Chat Agenda: 18th June…

CSSCSS Cascading Style Sheets. Chat Agenda: 18th June 2020

This is the agenda for the upcoming CSS meeting scheduled for Thursday, June 18, 2020, 5:00 PM EDT.

This meeting will be held in the #core-css channel in the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

If there’s any topic you’d like to discuss, please leave a comment below!

  • CSS audit status update
  • Color scheming updates
  • CSS Latest and Greatest Link Share
  • Open floor

#agenda, #core-css

CSS Chat Summary: 11th June…

CSSCSS Cascading Style Sheets. Chat Summary: 11th June 2020

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

I (@notlaura) facilitated the meeting.

Discussion on color naming with the design team

We started out by reviewing some goals of this color scheme initiative with regards to wp-adminadmin (and super admin):

  1. Easily create full-feature color schemes that apply to the entire wp-admin (e.g. dark mode)
  2. Improve existing wp-admin CSS

@joyously asked if this applies to properties like CSS filters and blend mode, and @kburgoine and I indicated that it would likely be limited to defining a base color palette and color values.

I then asked how the designers currently name colors in designs – @michael-arestad replied that he uses hex codes, and for colors named according to intent, it is only the accent color. @ryelle linked to this WordPress Colors CodePen. @nrqsnchz agreed that we should aim to use names that specify the use of the color vs. the color itself.

@michael-arestad linked to a couple of example projects where colors were organized into “sets”: the main colors (5-10 most common), a primary accent color, additional accent colors. Here is one example with multiple levels of abstraction and an older version.

I mentioned another goal – or perhaps an elaboration of what “easily create color schemes” means – is that creating a new color scheme should be a matter of updating a predefined set of variables with different colors values. One should not have to write any new CSS (save custom property definitions at a high level) to create a new color scheme, and to achieve this, multiple levels of abstraction will be required (e.g. assigning #FFF to --button-color, and thencolor: var( --button-color );).

@michael-arestad noted the importance of providing a range of lighter/darker versions of a colors to ensure folks aren’t coming up with slightly different shades of the same color, even though providing those options is important.

We discussed a next step of annotating some designs with potential color palettes and names – for example, a screenshot of wp-admin with the default color scheme and a screenshot in dark mode, with a Figma palette with the colors used in each. The intent of the annotations is not to determine specific color names yet, but to get an idea of the higher level “color buckets” or categories (e.g. color-primary, color-accent), and the UIUI User interface elements they may be applied to (e.g. --button-text-color, --sidebar-background-color).

Next, we talked about options for naming the variations in the colors – a couple of approaches mentioned were using terms lightest/lighter/light/dark/darker/darkest or using number 100-900 to allow for middle ranges. @ryelle mentioned another approach where 50 was used as a cutoff and above or below 50 indicated contrast with white/black, and we discussed the ideal of a naming system that would help ensure proper contrast ratio between colors. I shared an example of how we are handling our color naming at my job.

To conclude the meeting, I re-iterated / refined the goals of the color scheme initiative:

  • Creating a new color scheme should be similar to filling out a form with color values
  • All colors in the wp-admin should be controlled by the color schemes
  • Reduce the number of colors in use by providing default color palettes with varying shades

Our next steps are to start determining the “color buckets” and categories/mappings of the UI abstractions that will be used to apply the colors. We can start this process by annotating screenshots two screenshots (one of light mode and one of dark mode) with potential color names and corresponding color palettes.

Help Needed
Is someone with design knowledge up for creating these annotations? @michael-arestad offered to provide guidance and access to Figma where needed.

Latest and Greatest in CSS Link Share

@kburgoine shared Hybrid positioning with CSS variables and max() from Lea Verou (who’s website is using the default theme to great effect! 😄).

That was all for this week!

#summary #core-css

CSS Chat Agenda: 11th June…

CSSCSS Cascading Style Sheets. Chat Agenda: 11th June 2020

This is the agenda for the upcoming CSS meeting scheduled for Thursday, June 11, 2020, 5:00 PM EDT.

This meeting will be held in the #core-css channel in the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

If there’s any topic you’d like to discuss, please leave a comment below!

  • CSS audit status update
  • Discussion on color naming with the design team
  • Additional color scheming updates
  • Latest and Greatest in CSS Link Share

#agenda, #core-css

CSS Chat Summary: 4th June…

CSSCSS Cascading Style Sheets. Chat Summary: 4th June 2020

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

I (@notlaura) facilitated the meeting.

Acknowledging Racial Injustice

I didn’t feel comfortable leading our usual meeting without explicitly acknowledging the racial injustices that have lead to the Black Lives Matter protests in the US and around the world. I invited meeting attendees to converse in a thread during the meeting, if they wanted.

CSS audit updates

I update the Google Doc with the PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 files that contain CSS, and we discussed how to approach the JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. files that contain CSS, and what specifically to note about the styles in PHP. @kburgoine suggested to focus on any CSS that includes colors and units of measurement that may change in the future.

Color Scheming Updates

Next week, we will have an agenda item to discuss color naming conventions with the design team, but we did have a cursory discussion this week.

@ryelle has been experimenting a PostCSS plugin she mentioned last week that will pull out all colors and replace them with custom properties named according to their selector and property. While it has promise, there will need to be some manual work involved since it creates so many properties and very long property names due to long selectors.

@michael-arestad outlined a couple of alternative approaches that may reduce the amount of the custom properties, but may require selective overrides and may be more difficult to understand. We went back and forth a bit exploring these options and that it would be valuable to have foreground and background colors paired together, and perhaps there is a way with the concept of design tokens to achieve that.

We concluded that a next step would be getting an idea of the scale of actual color values required, and @squarebracket shared a very interesting approach for programming Sass-like color functons with custom properties that would could incorporate into our iteration.

CSS Latest and Greatest Link Share

The clamp() function has very good browser support these days! Here is a great blog post about it – just look at that huge Less/Sass mixin we no longer have to write!

Also, @netweb is doing some work on getting the Stylelint config and tooling into coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. for #wceu Contributor DayContributor Day Contributor Days are standalone days, frequently held before or after WordCamps but they can also happen at any time. They are events where people get together to work on various areas of https://make.wordpress.org/ There are many teams that people can participate in, each with a different focus. https://2017.us.wordcamp.org/contributor-day/ https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-contributor-day/.! Very cool.

That was all for this week!

#summary #core-css

CSS Chat Agenda: 4th June…

CSSCSS Cascading Style Sheets. Chat Agenda: 4th June 2020

This is the agenda for the upcoming CSS meeting scheduled for Thursday, June 4, 2020, 5:00 PM EDT. I am posting it very late…sorry 🙁

This meeting will be held in the #core-css channel in the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

If there’s any topic you’d like to discuss, please leave a comment below!

  • Acknowledging racial injustice
  • CSS Audit Updates
  • Color Scheming Updates
  • CSS Latest and Greatest Link Share

#agenda #core-css