x-gui is a minimalist set of web components for building consistent web app user interfaces.
Link to online demo.
bower install x-gui/x-gui
- Avoid using a web component framework. Use only VanillaJS.
- Try to not create deep dependancies. Try to keep each component shallow.
- Consider only one of two of these components could be included without extra overhead.
- Do not use ShadowDOM, because the polyfill is expensive.
- Flexbox is used for layout and positioning.
Each component is placed in it's own directory, eg
/x-component-name. Within that directory there's
x-component-name.html and an example html file showing usage named
By convention components are prefixed with
x-. Custom elements are required to have a hyphen in the name. I consider
x as a short way of flagging "custom".
If a component is intended as only a library import, prefix it with
lib- instead of
x-. For example,
These web components are basic building blocks for rapidly putting together web apps. The goal is to have a consistent user interface across different web apps. These were create for Sandstorm apps, but can be used for anything.
For more information see my slides from my talk at a Sandstorm Meet Up: http://www.slideshare.net/ohm-ad3HoH/texteditor-designing-open-source-apps.
The /demos shows examples of composing these web components into an app.
This "x-gui" package contains a base set of components, but other components can can have their own packages.
This is a work in progress. Some of the components may be incomplete. See comments in source code.
- x-viz - Graphviz component
All welcome: Feedback, suggestions, issues, pull requests, etc.
- Richard Caceres (@rchrd2)