Xel (DEMO)

Xel is a HTML 5 widget toolkit for building native-like Electron and Chrome apps.

Xel follows the Keep It Simple principle and thus is written using plain JS, HTML and CSS. It does not make use of any preprocessors or heavy abstraction layers.

Widgets:

• Buttons
• Tabs
• Sliders
• Selects
• Checkboxes
• Switches
• Radios
• Menus
• Menubars
• Context menus
• Text inputs
• Number inputs
• Cards
• Dialogs
• Drawers
• Popovers
• Progressbars
• Throbbers
• Swatchs
• Steppers

Visit xel-toolkit.org for a complete list of all supported widgets with demos and documentation.

Themes

Thanks to advanced theming capabilities, Xel can imitate native widgets.

The themes currently shipped with Xel are:

• Material - implements Material Design Guidelines
• MacOS - implements macOS Human Interface Guidelines
• Vanilla - generic light theme

Supported browsers

The project makes heavy use of bleeding edge Web Platform features such as Custom Elements v1, Shadow DOM v1, SVG 2 and ES2017 and therefore works only on the following browsers:

• Chrome >= 58
• Chromium >= 58
• Opera >= 45
• Atom Electron >= 1.7
• NW.js >= 0.23
• Android WebView >= 58

Setup

1. Install Xel

$ npm install xel

2. Link Xel theme

Add to the `` one of the following:

• MacOS theme

• Material theme

• Vanilla theme

3. Link Xel

Add to the ``:

4. Link fonts

Some themes require additional fonts to be linked or embedded. Use Google Fonts service to generate necessary code.

• Material and Vanilla themes - Roboto and Roboto Mono. For non-latin scripts, also include Noto Sans.
• MacOS theme - Relies on fonts provided by the operating system, you don't have to link anything.

Development

1. Install Xel and its dev dependencies

$ git clone https://github.com/jarek-foksa/xel
$ cd xel
$ npm install

2. Launch the dev server

$ ./project.js serve

3. Open https://localhost:5000 in your browser