CSS Chat Summary: 08 April 2021

The meeting took place here on Slack. @notlaura facilitated and @danfarrow wrote up these notes.

Housekeeping

  • Our next bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. scrub will be on 22 April at 8pm UTC. If anyone is interested in leading it please let us know in the #core-css channel

Discussion: CSSCSS Cascading Style Sheets. deprecation path

  • The issue initially came up via this ticket and will grow as we start to introduce custom properties into the WP Adminadmin (and super admin) CSS
  • @helen previously outlined an approach in this post – deprecated CSS would be moved to a deprecated file that plugins can still optionally enqueue. It would be helpful if it could run standalone, and if an example of how to implement and run it could be provided e.g. as a 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/ Action workflow
  • Deprecated CSS would generally be at the selector level
  • @sabernhardt provided the recent examples of .icon16 (raised in #35717) and .wp-ui-text-icon
  • We agreed that .icon16 would be a good deprecation candidate to test the process
  • @notlaura suggested adding deprecated selectors to a disallowed list in stylelint, and a PostCSS script to build the deprecated.css stylesheet. PostCSS & stylelint could share the same config file to track deprecated selectors
  • @Ahmed Saeed suggested adding a deprecation notice as a CSS custom property which would be discoverable in dev tools
  • @ryelle added that we would probably want multiple ways to flag deprecated CSS and @tellthemachines agreed it would need to be part of the build process
  • @notlaura suggested a deprecated-with-warnings.css file which is enqueued if WP_DEBUG is on
  • @ryelle clarified the two parts of the problem: identifying the deprecated CSS, and developing external tools for pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party developers

Next step

  • The next step would be writing a TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. ticketticket Created for both bug reports and feature development on the bug tracker. outlining the solution & raising it in dev chat
  • @tellthemachines offered to write the ticket

Discussion: CSS naming and usage conventions for JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. targeting (#40686)

  • The intention is to establish a convention for naming CSS classes which are intended for use with JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/.
  • There was some discussion to clarify the problem, but in relation to CSS deprecation we need to ensure we’re not deprecating CSS classes that are used by JavaScript
  • We agreed that a js- prefix would clarify that a particular classname is intended for JavaScript interaction

Open Floor + CSS Link Share

  • CSS Audit (#49582) @ryelle has updated the readme & started the process of transferring the repo over to the WordPress org
  • Custom property naming @ryelle has started drafting a make/coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. post about the custom property naming discussions which she’ll share in the channel before posting
  • @danfarrow reminded us that April 09 is the annual CSS Naked Day!

Thanks everyone!

#summaries

CSS Chat Summary: 01 April 2021

The meeting took place here on Slack. @notlaura facilitated and @danfarrow wrote up these notes.

Housekeeping

  • Reminder that the meeting time is now 9pm UTC (until later in the year when daylight saving time ends)
  • There will be a bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority.-scrub before next week’s meeting, which @ryelle offered to run, at 8pm UTC on 08 April

Color custom property naming mock-up share

  • @ryelle shared her mockup adding form elements to her previous pen
  • @notlaura shared her mockup of a dashboard widget
  • @notlaura’s mockup includes a non-colour custom property (border-size) to see how a naming pattern would accommodate values other than colours. For this she uses a [prefix]--[property]--[contextual name] naming pattern
  • By contrast, @ryelle’s [prefix]--[location]--[property]--[state] naming pattern is intended to name custom props containing colour values. The [property] part is the exact property which the custom prop will be applied to e.g. --background-color-- or --color--
  • After some discussion it became clearer that the custom property naming pattern we settle on will, in nearly all cases, only need to accommodate colour values
  • As the discussion had taken some time we’ll continue in future meetings!
  • @ryelle suggested it would be a good time to do another make/coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. post, following up on @kburgoine’s from earlier this year

Open Floor + CSSCSS Cascading Style Sheets. Link Share

Thanks everyone!

#core-css, #summaries

CSS Chat Agenda: April 8, 2021

Note: 1 hour before the meeting this week, @ryelle will lead a CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. CSSCSS Cascading Style Sheets. bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. scrub!

This is the agenda for the upcoming CSS meeting scheduled for Thursday, April 8, at 5:00 PM EST. 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, or if you have suggestions for discussion questions, please leave a comment below!

#agenda, #core-css

CSS Chat Agenda: April 1, 2021

This is the agenda for the upcoming CSSCSS Cascading Style Sheets. meeting scheduled for Thursday, April 1, at 10:00 PM BST. 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, or if you have suggestions for discussion questions, please leave a comment below!

  • Housekeeping
  • Discuss: Share mock-ups with color custom property naming for another UIUI User interface component besides the button.
  • Project Updates
  • Open Floor + CSS Link Share
#agenda, #core-css

CSS Chat Summary: 25 March 2021

The meeting took place here on Slack. @notlaura facilitated and @danfarrow wrote up these notes.

Housekeeping

  • Reminder that from next week (01 April) onwards the meeting time will change to 9pm UTC
  • The bugscrub time will similarly be brought forward one hour to 8pm UTC

Share mock-ups with color custom property naming

  • We had no mock-ups to share this week so we decided to move this to next week’s meeting: Please bring a mock-up of either the adminadmin (and super admin) bar or a dashboard 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., styled using CSSCSS Cascading Style Sheets. custom colour properties, to the meeting on 01 April!

Project updates

CSS audit (#49582)

  • @notlaura’s PR for the typography audit is ready for review
  • The next steps will be moving the repo to the WordPress org on 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/, then posting on Make to share the audit with the community

Colour scheming (#49999)

Open Floor + CSS Link Share

CSS deprecation

  • @tellthemachines brought up this issue and shared a link of the discussion on this topic from 2013
  • @ryelle supported the need for a CSS deprecation path, having recently found some CSS in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. for a feature that was removed 9 years ago!
  • @notlaura agreed and suggested we put this on the agenda for the meeting-after-next (08 April)

Thanks everyone!

#core-css, #summaries

CSS Chat Summary: 18 March 2021

The meeting took place here on Slack. @notlaura facilitated and @danfarrow wrote up these notes.

Housekeeping

  • Following last week’s discussion we agreed that, from 01 April onwards, the meeting time will advance from 10pm to 9pm UTC to accommodate daylight saving time
  • The bugscrub time will similarly be brought forward one hour from 01 April onwards

Project updates

CSSCSS Cascading Style Sheets. audit (#49582)

  • @ryelle‘s audit tool is nearly ready to share with the wider community once the “container audit” feature is in place
  • The PostCSS PR is tested & ready to merge. UPDATE: Now merged, thanks @ryelle!
  • @notlaura asked if the tool is ready to have its repo moved into the WordPress org. @ryelle will ask in #meta

Colour scheming (#49999)

  • We will have another mock-up share at the next meeting (25 March). If you’re able to please bring a mock-up of a component of your choice using custom properties
  • @ryelle reported having updated her mockup to use a roughly --prefix--location--property--state naming pattern e.g. --wp-admin--button-primary--hover
  • In @ryelle’s example some custom properties are derived from other custom properties e.g. --wp-admin--button-secondary--text: var(--wp-admin--button-primary). Users could override these derived values as required

Open Floor + CSS Link Share

With that the meeting drew to a close. Thanks everyone!

#core-css, #summaries

CSS Chat Agenda: March 25, 2021

Note: 1 hour before the meeting this week, @ryelle will lead a bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. scrub of CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. tickets!

This is the agenda for the upcoming CSSCSS Cascading Style Sheets. meeting scheduled for Thursday, March 25, at 10:00 PM UTC. 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, or if you have suggestions for discussion questions, please leave a comment below!

  • Housekeeping
  • Discuss: Share mock-ups with color custom property naming for another UIUI User interface component besides the button.
  • Project Updates
  • Open Floor + CSS Link Share

#agenda, #core-css

CSS Chat Agenda: March 18, 2021

This is the agenda for the upcoming CSSCSS Cascading Style Sheets. meeting scheduled for Thursday, March 18, at 10:00 PM UTC. 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, or if you have suggestions for discussion questions, please leave a comment below!

  • Housekeeping
  • Project Updates
    • CSS Audit (#49582)
    • Color Scheming (#49999)
      • Reminder: A next week’s meeting on March 25 we will share mock-ups with color custom property naming for another UIUI User interface component besides the button.
  • Open Floor + CSS Link Share

#agenda, #core-css

CSS Chat Summary: 11 March 2021

The meeting took place here on Slack. @danfarrow facilitated and wrote up these notes.

Housekeeping

  • @ryelle noted that daylight savings comes into effect in the US on March 13th and asked if we should change the meeting time
  • @danfarrow agreed that it would be good to move the meeting time but maybe not until UK daylight savings has come into effect at the end of the month, as otherwise the meeting would be at 11pm in the UK
  • We agreed that the next meeting should stay as 22:00 UTC and we can discuss the change then – if you have a preference please let us know!

Discussion: Ideas for custom property naming

  • @danfarrow shared his custom property naming for buttons mock-up which, with a little cheating, reduces the custom properties to --button-color,
    button-contrast-color and --button-active-color
  • @ryelle liked the use of the word contrast to clarify the intent of the custom property
  • @ryelle’s --color-$n approach received support from @audrasjb & @danfarrow, however it still has the issue of a lack of context. When defining the numbered colour values it’s not clear what the contrast relationships should be between them
  • We concluded by following up @notlaura’s idea from last week of having people mock-up another UIUI User interface component of their choice with custom properties. It would be great if people could bring their mock-ups to the March 25th meeting!

Project updates

  • There were no project updates this week

Open floor / CSSCSS Cascading Style Sheets. link share

  • @sabernhardt shared a link to ticketticket Created for both bug reports and feature development on the bug tracker. #52760: Color not accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) for AA which @ryelle offered to look at
  • @sabernhardt also asked for anyone with good flexbox knowledge to join the discussion on #28983: Adminadmin (and super admin) bar length or Admin bar on two line

With that our time was up. Thanks everyone!

#core-css, #summary

CSS Chat Agenda: March 11, 2021

This is the agenda for the upcoming CSSCSS Cascading Style Sheets. meeting scheduled for Thursday, March 11, at 10:00 PM UTC. 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, or if you have suggestions for discussion questions, please leave a comment below!

  • Housekeeping
  • Discussion: Ideas for custom property naming
    • Continuing our discussion from last week around ideas for naming custom properties for buttons
  • Project Updates
  • Open Floor + CSS Link Share
#agenda, #core-css