Skip to content

Platform UI 2.0 ‐ Discussion Topics

Ryan Trimble edited this page Apr 8, 2024 · 3 revisions

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