Elix project vision

The Elix project aims to create a universal library of all general-purpose user interface patterns commonly found in desktop and mobile UIs, where each pattern is implemented as a well-designed, attractive, high-quality, performant, accessible, localizable, and extensively customizable web component.

Core Principles

usability excellence

Each component tries to provide the best implementation possible of a very common user interface pattern, freeing you from having to worry about small details, and letting you focus on your application’s core value. Elix includes universal access in its definition of usability excellence.

as good as html

These components are measured against the Gold Standard checklist for web components, which uses the built-in HTML elements as the quality bar to which web components should aspire. Elix components should work predictably and reliably in a wide variety of contexts.

good building blocks

Elix components are designed to be usable as-is. Since no design can meet every situation, the components are factored into smaller elements and mixins that you can readily recombine to create solid components to meet your needs.

usable everywhere

By virtue of being web components, these elements can be used with any front-end framework. We use the web platform to the maximum extent possible to get the best performance, and to ensure the longest useful lifetime for UI built with these elements.

styleable to suit your brand

Each component comes with a bare minimum of styling. They can be extensively customized to achieve more distinctive visual effects or branding to blend seamlessly with your application’s own style.

work in all browsers

This includes the latest versions of Apple Safari and Mobile Safari, Google Chrome and Chrome for Android, Microsoft Edge (Chromium-based) and Mozilla Firefox.

Comprehensive list of user interface patterns

The list below includes the general-purpose patterns which are candidates for the Elix project. Patterns we have already implemented as components are indicated with a link to the relevant component documentation.

1. Accordion. A list that can have a single item or multiple items expanded to show more detail.
2. AlertDialog. Asks a single question the user can answer with a set of choices.
3. Alphabetic indices. Renders the characters in a culture’s alphabet in standard order (e.g., as a vertical or horizontal strip). If supplied with a set of strings (or array of objects with key pointing to the important data member?), the UI will disable those characters which are not found as the initial character of any string.
4. Async operation button. A button whose caption changes to reflect an operation in progress (e.g., changing from “Sign In” to “Signing In...”) until the operation completes. The button is disabled during the operation to avoid confusion and to prevent unnecessary extra clicks.
5. AutoCompleteInput. A text input field that helps the user quickly enter strings from a known list.
6. AutoCompleteComboBox. A ListComboBox that auto-completes the user's text against the list items.
7. Auto-format. Applies a collection of heuristics for formatting text: adding smart quotes, converts double hyphens to en dashes, etc.
8. AutoSizeTextarea. Text area that grows to accommodate its content.
9. Backdrop. Shows a background region of non-interactive elements behind the region’s main contents.
10. Breadcrumb bar. Indicates the user’s position in a navigational hierarchy.
11. Button. A base class for a custom button.
12. CalendarDay. Shows a single calendar day.
13. CalendarDays. Shows a 7-column grid of dates in a given range.
14. CalendarDayNamesHeader. Shows the localized names of the days of the week.
15. CalendarMonth. Shows a single calendar month, localized for a given locale.
16. CalendarMonthDay. Shows the days of a single calendar month without headers.
17. CalendarMonthNavigator. Lets the user select a date, typically in the near future, by navigating through calendar months.
18. Calendar months. Shows multiple months from a calendar.
19. CalendarMonthYearHeader. A header showing the localized month name and the year.
20. Calendar year.
21. Carousel. Shows a single item from a navigable collection of items (often images or including imagery).
22. CarouselSlideshow. Slideshow with carousel controls.
23. CarouselWithThumbnails. Carousel showing a thumbnail for each image.
24. CenteredStrip. Horizontal strip of items with selected item centered.
25. CenteredStripHighlight. Centered strip showing selected item with a highlight color.
26. CenteredStripOpacity. Centered strip showing unselected items with partial opacity.
27. Checked list box. A list box showing a check box next to each item; the user can create a multiple selection by checking the boxes.
28. Close box. A platform-sensitive representation of a button that will close the current dialog or window.
29. Closable panel. Shows information (e.g., a warning, or the result of a completed operation) that can be dismissed to remove the panel from the visible page.
30. Color wheel. Lets the user select a color in a variety of color spaces.
31. Combed text box. A text box sporting tick marks or vertical lines to visually indicate how many characters should be entered. (Combine with masked input?)
32. ComboBox. Text panel paired with a popup that can be used as an alternative to typing.
33. Content with banner(s). Such as toolbar (on top) or status bar (on the bottom).
34. Content with sidebar(s) on the left and/or right side.
35. CrossfadeStage. A stage that exhibits a crossfade effect when transitioning between items.
36. Current anchor. A link that changes its style when the link's destination points to the current page (or site area).
37. DateComboBox. Lets the user type a date or choose one from a dropdown calendar.
38. Date range calendar. Lets the user select a date range, typically in the near future.
39. Date text box. Lets the user type a date in several culture-specific formats.
40. Delimited list. A list of items interspersed with a decorative element (bullet, vertical bar, etc.) for cleaner delineation.
41. Dialog. A modal overlay.
42. Drawer. Modal panel that slides in from the side of the page.
43. DropdownList. A button that shows the current choice made from a menu of choices.
44. Editable in place. An element that supports its own in situ editing.
45. Editable list. A meta-component that presents a data-driven list of items as well as UI for creating, editing, and deleting items.
46. Editable text. A piece of static text data which can be clicked to produce a text box that can then be used to edit the data.
47. ExpandablePanel. Expands/collapses in place with an animated transition.
48. Expandable summary. A block of content with a “More” link at bottom; clicking this reveals the remainder of the content.
49. Explorer. Synchronizes two elements that both support selection, typically a larger "stage" element showing a single selected item at a time, and a list of proxies for the complete set of possible choices.
50. Fade overflow.
51. File uploader. Allows the user to click or drag-and-drop to supply a single file for upload.
52. FilterComboBox. A ListComboBox that filters the items in the list as the user types.
53. FilterListBox. A list that can filter its items to show only those matching a text query. It highlights the matching portion of each item.
54. Full screen expandable. A region supporting a mode in which the region will expand to fill the entire screen.
55. Full screen. A region which fills the viewport, independent of the size of the page content.
56. Gesture navigation. Allows the user to move between pages with swipe gestures.
57. HamburgerMenuButton. Button that invokes a mobile navigation menu.
58. Infinite list. A list which asynchronously loads additional contents as the user scrolls.
59. Labeled input. An HTML input control (generally a check box or radio button) with an associated clickable label.
60. Lazy list.
61. Link list. Uses a platform-sensitive presentation of a set of links (or items that behave like links).
62. ListBox. Single-selection list of items.
63. ListExplorer.
64. ListComboBox. A combo box which presents its choices as a dropdown list.
65. Marquee selection. An area that lets the user select items by dragging out a rectangle.
66. ListWithSearch. A list with an input element that filters the list to show matching items and highlight matching text.
67. List with swipe commands. The user can swipe an item with touch or a trackpad to reveal commands that operate on the item.
68. ModalBackdrop. A Backdrop whose visual design signals that the overlay on top of it is modal.
69. Media specific. Conditionally shows contents based on the type of device being used and/or device capabilities.
70. Masked text. A text box which only accepts specified input characters.
71. Menu bar. A row of menus.
72. Menu. A popup menu, often in a menu bar.
73. MenuButton. An element (by default, a button) that invokes a Menu.
74. MenuItem. A command in a menu.
75. MenuSeparator. A line separating commands in a menu.
76. Mobile date/time picker. Platform-sensitive collection of elements which emulate the platform’s native date/time picker.
77. ModalBackdrop. Semi-transparent backdrop for a modal overlay.
78. Modes. Shows a single panel at a time.
79. Multi list box. A list that supports multiple selection, including keyboard navigation.
80. Multiple file uploader. Allows the user to click or drag-and-drop to supply multiple files for upload.
81. NumberSpinBox. A SpinBox optimized for a simple numeric value.
82. Number with units. Facilitates entry of a number with units (e.g., “10 in.”, “5 minutes”, “60 kg”). Accepts an array of allowable units.
83. Overlay. A transparent or semi-transparent blanket over the entire page which absorbs interactions outside a modal element. May be able to use Polymer’s overlay component.
84. OverlayFrame.
85. Packed columns. Packs its children into a dynamic number of columns of roughly equal height (e.g., see the Pinterest home page).
86. PageDot. A small dot used as a proxy element for an item in a Carousel.
87. Page number navigator. Indicates the number of pages, e.g. of search results, and also allows navigation to a particular page of results.
88. Page transitions. Navigates between pages with animated transitions that can vary between navigation operations.
89. Palette window. A persistent set of tools adjacent to, or superimposed on, a work surface, providing tools for manipulating the information on the surface.
90. Panel with overflow menu. A panel fixed in width or height which allows any items which don't fit to overflow into a dropdown menu.
91. Persistent header. A scrolling list in which the header for the group of items currently at the top of the visible list remains visible until the user scrolls the next group to the top. At this point, the new group header pushes the previous group header out of sight.
92. Persistent navigation bar. When user scrolls page, the navigation bar shrinks to a smaller, but persistent size.
93. Persistent panel. A panel whose contents will bump up against the top or bottom of a scrolling parent so as to remain always visible.
94. Popout. An item that can expand (e.g., on hover) without affecting the visual position of surrounding items.
95. Popup. An modeless element which temporarily pops up over other things.
96. PopupSource. An element which invokes a Popup.
97. Process steps. Shows a numbered list of steps in a task. Steps which are not yet available are disabled.
98. Progress bar. Indicates the fraction of an operation which has been completed.
99. ProgressSpinner. Representation of an ongoing operation whose expected duration is unknown.
100. PullToRefresh. A region which the user can pull down to reload content.
101. Radio button list. A list box showing a radio button next to each item; an alternative way to represent selection in a single-selection list.
102. Range slider. Lets the user drag/swipe/click to select the start and end points of a range on an axis/timeline.
103. Resolved entity list. Lets the user enter free-form text descriptors for entities that are resolved into discrete entity representations. Example: the To/Cc/Bcc fields in an email editor allow the user to enter plain text email addresses, then resolves these to create pill buttons for each recognized user in the To/Cc/Bcc list.
104. Ribbon. A space-sensitive presentation of a set of commands.
105. Rich text editor. Supports the basics: bold, italic, insert link, etc.
106. Scrolled anchors. A scrollable region containing sections marked by anchors (e.g., name="introduction"). As the user scrolls, the document URL updates to reflect the current section ("page.html#introduction").
107. Scroll-up bar. Appears only when user scrolls down, then up. (See article.)
108. Seamless iframe.
109. Search box. A text box with standard decorations (magnifying class, customizable “Search” hint) to suggest a search field.
110. Shimmer. A content panel which, during the asynchronous loading of content, shows placeholder elements with a shimmer effect (gray gradient moving from left to right).
111. Slider. Accepts a discrete number in a constrained range.
112. Slideshow. Plays through a collection of items with a simple crossfade transition.
113. SlideshowWithPlayControls. Slideshow with buttons for controlling playback.
114. SlidingPages. Primitive carousel supporting multiple input modes but no UI of its own.
115. SlidingStage. Slides between selected items on a horizontal axis.
116. SpinBox. Input with buttons to increment/decrement across a continuous range.
117. Splitter. A movable line sitting between two panels which can be dragged to change their relative sizes.
118. Stacked navigation pages. As the user navigates deeper in an app, a small residual portion of the previous page remains visible (typically on the left); the user can swipe away the top page to navigate back to an earlier point.
119. Star rating. Lets the user rate something (a restaurant, product, etc.) using the conventional star system.
120. TabButton. Generic tab button with a text label.
121. Tabs. Basic tabs structure for navigation and configuration.
122. TabStrip. Strip of tab buttons.
123. Tag text box. Tokenizes text input into a set of tags, and provides auto-completion against a set of existing tags.
124. Text box with button. A control with a content area (usually some form of text box) and an associated button (“Go”, “Submit”, etc.).
125. Time combo box / time picker. On desktop, lets the user type a time or choose one from a dropdown time picker. On mobile, opens a half-screen or full-screen time picker.
126. Timeline. Positions items on a horizontal time axis.
127. Toggle button. A button the user can tap/click to toggle its selected state.
128. Toggle switch. A toggle that can be tapped/clicked, or swiped left/right, to toggle its selected state. See the Material Design Switch.
129. ToolTip. A popup that appears when hovering the mouse over another element, providing more detail about that element.
130. Toast. A message which briefly appears on a page before automatically disappearing. Typically used to display feedback after an operation has completed (e.g., “Message sent”) without requiring user acknowledgement.
131. Tree view. Visually renders a hierarchy of items as a tree whose branches can be expanded and collapsed.
132. Validating text input. Verifies that text input content meets some criteria.
133. Vote up/down. A pair of buttons to vote something up or down; can reflect the current state of the user’s vote.
134. Wizard. Steps the user through a task through a small set of pages.

In our ongoing study of user interface patterns, we occasionally add new patterns to the list. We have also found that implementing a pattern often uncovers variations or new patterns that we ultimately add to the list.

We welcome new ideas. Please keep in mind that our goal is to provide great implementations of the patterns people are already using widely in production apps, not to design or promote novel user interface patterns.

When we're successful

• Designers and developers will be able to readily adopt any common UI pattern without hesitation, and without concerns of implementation cost.
• Instead of wasting time reinventing wheels, app teams will be able to focus on their energy on the specific needs of their users and the unique value of their application.
• Users will enjoy applications whose fundamental interactions are more predictable and satisfying.
• We will see more experimentation and variation on common UI patterns. Teams will extensively customize generic components or build new variations that reuse substantial behavior from existing generic components.
• Designing and implementing UI will be significantly cheaper and less labor-intensive.
• Good UI designs will spread faster.
• People with disabilities will encounter fewer obstacles in app UIs.