Platform UI; 2 Fast 2 Furious

[hougasian]

Roadmap

We've decided to drop Sass entirely from this build to take advantage of the progress/evolution of CSS.

Customization

• Colors
  • Naming conventions
  • Color Space
  • More Colors
• CSS Custom Properties
  • Refactor components to use more generic custom properties
• Design Tokens
  • JSON file for configuring custom properties
• Spacing
  • Logical Properties
  • Fluid Spacing Scale
  • Refactor spacers to prevent overrides and clashing
• Theming
  • Support Custom Themes
• Typography
  • Fluid Typographical Scale
  • Font Families
    • default font family: system-ui
  • Line height and other spacing

Components

Existing Components

• Accordions
  • Support non-JavaScript approach using <details> and <summary>
  • Drop the header background color on hover and active
• Block Quotes
  • Need examples in the Launch Pad
• Buttons
  • Naming conventions
  • Revisit default stylings
    • Hover styles
    • Border radius
• Cards
  • Remove extraneous classes: card__header and card__content
  • Refactor towards pattern used by Steph Eckles in workshop
• Carousel
  • Lives in the Platform 2.0 Branch
• Drawers
  • Remove extraneous classes: drawer__inner and drawer__header
• Forms
  • Spacing within forms
  • Remove unnecessary modifiers: form--fancy, form--bordered, form--rounded, and form--light - maybe handled via configuration file
  • Replace Checkboxes & Radios with Shop & Enroll style inputs
  • Revisit form states: error, success
  • Required/Optional Field stylings
  • Toggle styles: Needs tightened up, determine default stylings
  • Revisit form stylings
• Figures
  • Refactor to be simpler
• Image Round
  • Revisit need, may be able to replace with a circle class
• Loaders
  • Revisit default stylings
• Menus
  • Add more examples to Launch Pad
  • Site Menu
    • Refactor to make simpler
  • Fixed Header
    • Should not depend on the + adjacent sibling selector
    • Alternate approach could be adding a class to body
  • Icon Menu
    • Review if necessary, might be recreated using utility classes
• Messages
  • Review data-header attribute
• Modals
  • Implement as dialog element
• Pills
  • Might not need Pill Circle as it could use circle as noted in Image Round notes
• Tables
  • Make more customizable, such as background color on table rows
• Tabs
  • Refactor away from radio buttons for tabs due to issues related to z-index and responsiveness
• Tooltips
  • Candidate for popover for non-JavaScript approach

New Components

• Disclosure Component
• Collapsing Table Component ?
• Hero Component
• Icon Component
• Image Gallery Component
• Media Component
• Off-Canvas Navigation Component

Methodology

• Discuss BEM methodology
  • Figure out how we want to approach this CSS Class naming conventions Eliminate double-dash, double-underscore classnames like: component__header Utility classes, translate to single dashes as well. Components should still have top-level class names, but can style based on semantic HTML structure example: accordion will have .accordion class, but could use
    semantics

Utilities

• Usage of !important
  • Backgrounds, other places
  • Remove !import in favor of CSS Layers

Existing Utilities

• Borders
  • Discuss adding rounded (border radius utility) to borders
• Cursors
  • We only have one, should we add more?
• Height and Width
  • More granular height options
• Layouts
  • Block layout - revisit box model
  • Remove direction up in responsive block utility names
    • laptop-up-3 => laptop-3
  • Use gap property to provide gutter to block utilities
  • Review modifiers: block--shrink, block--fill, and block--full
• Max Container
  • Maybe max-container should be rolled into block-container
    • possibly just a container class
• Screen Readers
  • Re-name sr-only to visually-hidden
• Spacers
  • Use CSS Logical Properties
    • What does that mean for naming? padding-top does not necessarily equate to padding-block-start
      • Maybe: pxs pys pxe pye
  • Refactor p- and m- to prevent overriding individually set sides

New Utilities

• CSS Grid Utilities
• gap utilities
• Flow utility
• "Exception" utilities
  • :not(.fullbleed)
  • more research / examples

[mrtrimble]

Platform UI 2.0 Discussion - 4-9-2024

Notes

• Setup project structure in new repo
• CSS Class naming conventions
  • Eliminate double-dash, double-underscore classnames like: component__header
    • Utility classes, translate to single dashes as well.
  • Components should still have top-level class names, but can style based on semantic HTML structure
    • example: accordion will have .accordion class, but could use <details> <summary> semantics
• Spacers
  • Fluid spacing scale that adjusts with browser viewport by default
    • https://utopia.fyi/
  • Default spacings can be overridden by config / design tokens
• Independent Packages
  • Utilities
    • Utilize Sass for loops
    • Need way to communicate defaults / configuration between packages to import CSS custom properties
  • Icon Font
    • Find a path towards SVG Sprites
    • https://ryantrimble.com/blog/what-the-heck-is-an-svg-sprite-sheet/
• Remove !import in favor of CSS Layers
• Layouts
  • Grid
    • Grid utilities - https://codepen.io/mrtrimble/pen/MWZWaja/342f35e920083a42522e0dd859ee0ee1
    • Page Layouts - Pre-configured layouts to scaffold pages
  • Improving blocks to use gap instead of padding/margin
• Typography
  • Fluid Typographical Scale
    • https://utopia.fyi/
  • Default font family: system-ui
  • Solid defaults:
    • Line height and spacing
    • Headings, paragraphs, etc...
• Reimagine Components
  • Buttons
  • Loaders
  • Messages
  • Tabs
  • Infobox - maybe progressively enhance with popover / JavaScript
  • Menus
  • Icon Menu - offload to Platform, remove from Platform UI

Questions:

• Monorepo
  • What problems does this present?
    • Infrastructure / Github Actions need updated to support
  • What problems does this solve?
    • Better Developer Experience
      • Easier to work between multiple projects at once
    • Packages will stay up-to-date

[mackenziegates]

closing. not moving forward at this time.