Technological Minimalism and Modernism Configuration

[openmindculture]

Follow-Up to wp_template: WP Classic Theme Configuration Variation: Technological Minimalism and Modernism

Variation of the base configuration, and some more specific adjustments in an optional feature branch, as it might not be relevant for the more general mainstream configuration (yet).

• more minimal: less tools (at least no SASS/SCSS), (less (3rd party) WordPress plugins? it depends),
• more modern or standards compliant: modern coding style and tools, less WordPress-specific legacy
• more framework-independent: prefer web standards, less WordPress-specific (mis)features like theme.json
• more robust: tend to test-driven and well-documented development

Requirements:

• As a website owner, I want to be able to edit my site content without requiring help or technical changes.
• As a technical webmaster, I want to ensure that the website owner can only edit their site without risking destroying the intended design and performance.
• As a WordPress developer, I want to conceive, publish, maintain, and showcase an actual WordPress site using a modern, minimalist, classic theme setup to prove that many annoying details of other WordPress projects can be avoided.

Checklist:

• [ ] ensure to comply to standalone classic theme requirements

  • [x] file structure (templates, css)
  • [ ] port back learnings and best practices from classic theme projects like KleiderOrdnung
  • [ ] remove unused remainders from full-site-editing block themes

• [ ] default to modern coding standards

  • [x] remove PHPCS and any other, WordPress-specific, rules
  • [ ] verify PHP configuration now conforms to PSR standards
  • [x] eslint config recommended / or rather ES3(?) which allows to use var etc. directly,
  • [x] stylelint config recommended / or rather CSS-next which allows native future CSS without SCSS
  • [x] editorconfig, prettierrc, etc. according to modern coding styles
  • [ ] prepare unit testing
  • [ ] for PHP
  • [ ] for JavaScript
  • [ ] example how to integrate optional third party JavaScript code like the juicer instagram feed

• [ ] setup / extend test coverage, and/or test manually otherwise

  • [ ] use codecept (or cypress or a similar tool) for front-end / end-to-end testing
  • [ ] prepare screenshot testing
  • [ ] prepare happy path click journey from the home page to different page types
  • [ ] integrate / automate accssibility audit, if possible
  • [ ] integrate / automate technical SEO / Lighthouse best practice audit, if possible
  • [ ] integrate / automate mobile / responsive check:
  • [ ] no content beyond screen
  • [ ] no overlapping elements
  • [ ] integrate / automate printable version check?

• [ ] setup, extend and update documentation (README) continuously

• [ ] replace SASS/SCSS with PostCSS configuration

  • [x] enable CSS native nesting according to the latest draft will be transpiled to classic CSS
  • [x] enable rewriting custom properties (CSS variables) to flat values wherever possible
  • [x] enable import / module usage
  • [x] example how to integrate third party software like animate.css
  • [x] prepare an example using all features described above

• [ ] possibly use automated critical CSS extraction

• [ ] replace child theme logic, markup, and design with CSS reset and basic styling

  • [ ] HTML head
  • [ ] very semantic markup structure inspired by and using typical WordPress class names
  • [ ] Twenty-Twenty-Three
  • [ ] GeneratePress
  • [ ] accessibly, SEO-friendly, HTML 5 boilerplate examples
  • [ ] CSS reset
  • [ ] basic styles
  • [ ] web fonts
  • [ ] favicon images

• [ ] setup / extend custom data structure

  • [ ] custom post type
  • [ ] custom field
  • [ ] custom taxonomy
  • [ ] custom shortcode

• [ ] setup wp-cli installation

  • [ ] using recommended plugins,
  • [ ] including a proper solution for cookie consent, if necessary

[openmindculture]

TODO: port back learnings and best practices from classic theme projects like KleiderOrdnung

[openmindculture]

TODO: shorten TODO-list following an 80/20 approach, and rather verify a working minimum than too many half-baked stubs