Skip to content

Component Library Research

Jump to bottom
Zak edited this page Oct 26, 2020 · 6 revisions

Reference Material

Shared Experiences

  • Accessible - All leading design systems provide accessible experiences to all users
    • This includes cross-platform experiences as well - e.g. mobile, desktop, tablet, mac, windows, etc
    • Calling out specific caveats to using the application for the user, e.g. using <noscript> tags to inform the user some features may not work similar to how bootstrap does
    • Take advantage of browser support for accessibility whenever possible. e.g. using prefers-reduced-motion to disable animations & transitions when a user enables reduce motion settings within their device's OS settings & preferences
    • Link externally to every resource you use and over document everything you're doing or are aware of regarding accessibility
    • Experience is engaging for the user. State transitions are noticeable and it's clear when a user's action has triggered something
  • Conventions - All leading design systems establish a design language that translates between both design & development
    • A box is a box is a box, or is it?
  • They all solve for media content in some form or another. e.g. responsive imagery, iconography, maintaining aspect ratios, custom video UI, etc

Shared Styles

  • Themeable (within reason)
  • Global -> Scoped -> Specific degrees of definition & usage. i.e. they start big with very general, global variables and definition like blue-10 and slowly narrow scope to brand-primary and eventually button-background

Shared Components

  • Linkable headings that copies the direct URL to the clipboard when clicked (or they show clickable icon on hover that copies to clipboard)

Shared Misc

  • todo

Google Material UI

  • Bold, graphic, intentional. Subtle motion provides meaning and guides the user
  • Provides the building blocks to build consistent, accessible experiences
  • Colors are intentional and names are semantic - e.g. surface, background, error, primary, etc
  • Separates shape, elevation, status, & other styles into separate entities. Can be applied to elements freely
  • Surfaces are the core container element for building UI components (higher level, may not be low-level component?)
  • See default elevation values image for reference
  • Surfaces are different than Containers. Containers are used to contain general content, including surfaces.
    • Note - Surfaces appear to be the "accessible" or "interactive" component while "containers" are styleless elements used to group or contain others
  • Some components dynamically change from one "type" to another (e.g. sidenav to tabs on different screen sizes)
    • Take a deeper look at the other behaviors to explore possible solutions
    • Possible idea, all navigation sits under a single node which does not affect layout. At different break points this node's children may change their own layout, structure, or style without affecting any other elements on the screen
  • GENIUS SOLUTION ABOUT LAYERED UI STATES (I had the thought, then I saw Material did it!) - They use semi-transparent background colors in ::before pseudoelements to apply state effects. Stacking the same semi-transparent background color results in progressively stronger values of that color, so when you hover an element inside another element that has a hover effect, both of them stack for the nested element!

Twitter Bootstrap

  • Heavy use of data- attributes for managing / hooking in the JS functionality
    • Heavy use of JS for that matter. This is not unique, however Bootstrap follows a more jQuery-esque approach than other libraries
  • Returns custom events to the user instead of native browser events
    • Strongly consider leveraging a "mixed" approach. e.g. instead of returning just the original event OR a custom event object, return a combo of both
  • Extensive documentation on theming, overriding, extending, and otherwise using Bootstrap to fit your needs
  • Leverages a "utility classes" approach to styling elements. e.g. use btn to give anything button styles and .sr-only for content that should be hidden and accessible to screen readers
  • Layout - See Layout Overview for more information
    • Container element should only be used when defining a new grid context, generally at the page-level such as just inside the <body> tag
    • Container elements set properties such as max-width to support better experiences at various breakpoints and grid sizes
    • Containers operate in fixed-responsive and fluid modes where they respond to breakpoints or scale smoothly to the window size, respectively
    • Heavy reliance on media queries and breakpoints to manage layout on a wide variety of screen dimensions
    • Grid is predominately driven by the Container -> Row -> Column flow to arranging elements. See Snippet 1 below for examples of valid & invalid layouts
      • NOTE - This does not mean a Row cannot be inside of a Column. What this means, is the top-level grid element is always a Container, the next element(s) must be of type Row, and within a Row alternating nested Column & Row elements may be used to build increasingly complex layouts. Additionally, Row & Column elements should not be placed inside of other Row or Column elements, respectively.
    • Extensive documentation around their Grid system (which is honestly what they're most-known for) ensures even the most complex page layouts are trivial to design & implement
    • Uses padding to add space between items and negative margins to compensate for horizontal whitespace on the outside of columns to ensure the left/right edges of text continue to align even with nested Row & Column elements
  • Content - See Typography & other sections for more information
    • Utilize additional html tags such as small for styling text within text
  • General approach - Solve the problem using the right solution
    • HTML already has a wealth of semantic tags such as abbr, small, b, and many more. Build style solutions for those elements within the design system. Spend effort building web components that solve more technical problems like automagically switching layouts or components based on screen size
    • Applies styles to the html element directly so fewer classnames are needed, i.e. you get bootstrap just by including the stylesheet by default
    • "Just be a sandbox" - Bootstrap gives you access to everything they have and invites you to invent your own creation. They take care of all the hard work so you just have to follow their lead

Snippet 1

// valid
<Container>
  <Row>
    <Column>1 of 3</Column>
    <Column>2 of 3</Column>
    <Column>3 of 3</Column>
  </Row>
  <Row>
    <Column></Column>
    <Column>1 of 2</Column>
  </Row>
</Container>

// invalid
<Container>
  <Column>
    <Row>1 of 3</Row>
    <Row>2 of 3</Row>
    <Row>3 of 3</Row>
  </Column>
  <Column>
    <Row></Row>
    <Row>1 of 2</Row>
  </Column>
</Container>

Adobe Spectrum

  • Documentation for the system is very prescriptive and clear about how Spectrum should be used
    • This isn't for the product owners! It's for people who are getting their hands dirty
  • Lots of content - lost interest in doing research and just want to build some stuff...

Ideas to Explore

  • Build a "mask" component for applying shapes to content (see Transforming Material section for visual)
  • Build a layered UI using named slots and z-index to position top-level slots for specific application layers
    • Possible layers include: content, navigation, drawer, modal, alert
    • Note - this does not restrict a lower layer component from appearing as if it is at the same elevation as a higher layer component (via styles such as box-shadow), it means higher layer components will render above lower layer components, potentially blocking the content on lower layers
  • Single-theme style system - apply different themes by overriding one or more CSS variables
  • Build a layout component for handling layout across device sizes & orientations (likely w/ CSS Grid styles)
  • Look at web development with a set of fresh eyes - there are so many rich experiences to build just w/ CSS & vanilla html alone (see bootstrap's treatment of code and use of semantic markup for more inspiration, specifically the examples around kbd & var)
  • Consider building components that have default props / implementations that format themselves "obviously" to indicate they have not been configured yet
    • e.g. render an obnoxious pink background for a named slot on a layout that has not been populated with content

Clone this wiki locally