Skip to content

Instantly share code, notes, and snippets.

@potch

potch/components.md

Last active December 17, 2015 11:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save potch/5600972 to your computer and use it in GitHub Desktop.
Save potch/5600972 to your computer and use it in GitHub Desktop.
Download ZIP
Proposed list of web components for people building apps.
Raw
components.md

Web Components

First Draft- Names are not necessarily final.

For the purposes of this document, layout terminology assumes a small-screen handheld phone. Positions/appearances will likely differ on larger displays or with different input techniques.

Structural Components

'View'

  • Primary layout container, holds app structure.
  • Allows whole "app" space to have layout properties like flexbox without affecting

'App Bar' (header)

  • Contains top-level information and UI
  • Similar to a toolbar or roughly equivalent to Android's action bar

'Tab Bar' (navigation, footer)

  • Used to display an app-level navigation at the bottom of the UI
  • Usually a series of icons with labels.
  • Tabs are linked to panels/views. Changing tab changes the active panel, and changing the active panel changes the tab

'Panel'

  • Content container
  • Allows for dynamic content population

'Slidebox'

  • Allows a 'slide' effect between two views or panels

'Flipbox'

  • Similar to slidebox, but with a perspective flip effect.
  • May be combinable with slidebox and accessed via an option

'Shiftbox' ('Hamburger')

  • When triggered (via a swipe or button), content slides to reveal a menu.
  • Content does not fully slide out of the viewport.
  • May contain top level navigation

'Modal' (Overlay)

  • Content container that appears over current view context
  • Blocks interaction with underlying content

'Tooltip' (Callout)

  • Content container that appears over current view context
  • Associated with a trigger element in the underlying content
  • Does not necessarily block interaction with underlying content
  • Interacting with underlying content would dismiss the tooltip.

Navigation-like Components

'Action Bar' (responsive action menu)

  • Automatically detects available space and eats actions that overflow

'Select Menu'

  • Menu that slides in from below/above with options and a confirm button (UX/UI folks wanted this) Is this necessary? Many systems provide this on their own. Was trying to avoid replacing system Content Components Switch Visual style/design for an important boolean option e.g. on/off switch Toggle Unifies checkboxes and radios - devs just code, we figure out the shiz Toggle Bar (aka Radio Bar) A set of associated options of which only one at a time can be selected Designed to appear as a cohesive set Date Selection triggered by an input type='date' Ability to select a date. appearance is not yet determined ('reels' vs a calendar view) Map An easy-to-instantiate HTML5 Map component, requiring only an API key to activate propose using http://leafletjs.com/ to power it under the hood This is a heavier component, requiring much more JS to include. May be an optional component for the set. Spinner Simple indicator to show that an action is in progress Slider Polyfill on top of input type='range', providing a consistent UI regardless of whether type="range" is supported or not.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment