Platform UI 2.0 ‐ Discussion Topics

Topics

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

Utilities

• Usage of !important
  • Backgrounds, other places

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

Ideas

Animation Library

• Build an animation library to compliment Platform UI

Component Library

• Consistent styles across projects
• Update in one spot versus many
• Provides a separation of concerns between UI and business logic
• Built with one or more of the following:
  • Web Components - framework agnostic, works anywhere JavaScript can run
  • Vue Components - Reactive JS framework most familiar to us, easily implement into our projects
  • React Components - Reactive JS Framework familiar to more developers and Integrity

Figma UI Kit

• Faster mockups / comps
• Better for collaboration

Grid Layouts

• Add Grid based layouts for easy view scaffolding

Icons

• Move away from icon font and towards SVG Sprite Sheets
  • Renders in browser rather than making another network call
  • Provides easier way to style icons (and animate)

JavaScript Utility Library

• Move commonly used JS utilities to Platform UI
  • Build Error String
  • Sluggification
  • Date Formatting
• Provides these common utilities in all our projects

Starter Kits

• Preconfigured setups for our common tools:
  • Vue / Nuxt Projects
  • dotnet projects
  • Astro projects

Ryan's Weird Ideas ™

Monorepo

• Build Platform UI as an ecosystem
• All related packages live together
  • Keep projects in-sync:
    • Example: Updating the Platform Icons package would automatically update the Platform UI package
  • Related Projects:
    • Platform UI
    • Platform Icons
    • Component Library
    • JavaScript Utility Library
    • Skelly
    • Handhold

No More Sass

• One less dependency!
• CSS very good nowadays:
  • Nesting
  • Custom Properties
  • Color Functions
  • Layers
  • Scoping
• Sass still provides:
  • Mixins
  • Loops
• Vite compiles many CSS files into one stylesheet

Typescript

• Rewrite component JavaScript with Typescript
  • Strengthen code with Type Safety
  • Opportunity to familiarize ourselves with Typescript

Tailwind

• Replace utility classes with Tailwind
• Tailwind has familiarity amongst developer community
• Highest coverage for utility classes
• Only ships what is used

Notes:

• Any breaking changes need to have an upgrade path
• Archive current Platform UI website for former versions
• Configurable breakpoints
• Selective Builds

For Later Versions:

• Built in Light / Dark Modes