Exadel Smart Library ⚙

Exadel Smart Library (ESL) is a web components based library that gives you a set of lightweight and flexible custom elements to easily create basic UX modules and make your websites super fast.

Demo Site (draft)

Library Structure

Components

• ESL Image

• ESL Media

• ESL Scrollbar

• ESL A11yGroup

• ESL Toggleable

• ESL Trigger

• ESL Panel and Panel Group

• ESL Tab and Tabs

• ESL Alert

• ESL Popup (beta)

Form Components

• ESL Select

• ESL Select List

Utilities

• ESL Base Element

• ESL Media Query

• ESL Traversing Query

• ESL Utils

---

Installation Guide

0. Preconditions:

   • Make sure you have all needed polyfills to support browsers from your browser-support list. See Browser support & Polyfills for details.
   • Use bundler to build your project. Currently, only ESL modules are available for consumption.

1. Install esl npm dependency

   npm i @exadel/esl --save
   

2. Import Components/Modules you need.

   import '@exadel/esl/modules/esl-component/core';

   • core module entry usually represents main part of the module;
   • include optional sub-features directly. See component's documentation for details.

   import '@exadel/esl/modules/esl-media/providers/iframe-provider';

   • Some modules contain cumulative all entries.
   • Styles are distributed in two versions:
     • 'ready to use' core.css or core.less
     • mixin version core.mixin.less for custom tagname definition

3. [Optional] Setup environment configuration, e.g. custom screen breakpoints.

   import {ESLMediaBreakpoints} from '@exadel/esl/modules/esl-media-query/core';
   
   // define XS screen breakpoint for up to 800px screen width
   ESLMediaBreakpoints.addCustomBreakpoint('XS', 1, 800); 

4. Register components via register static method call

   ESLImage.register();

   You can pass custom tag name to 'register' function, but use this option only in an exceptional situation.

Browser support & Polyfills

Exadel Smart Library does not have dependencies but uses the following list of native browser features:

• Ecma Script 6 features
  • Array.from (no Iterable Objects support required)
  • Array.prototype.find
  • Array.prototype.findIndex
  • Array.prototype.include
  • Object.is
  • ES6 Promises
• Web API
  • Custom Events
  • Node.isConnected
  • Element.matches
  • Element.closest
  • Element.toggleAttribute
  • KeyboardEvent.key
  • IntersectionObserver
  • ResizeObserver
  • Custom Elements

All of them are fully supported by modern browsers, such as Chrome, Firefox, Safari or Edge (>43).

In order to make ESL work in older browsers you can use a "light" polyfills list of IntersectionObserver, ResizeObserver and Custom Elements (Older versions of Edge and Safari)

Or make the library work in IE11 or Edge (<14) by using the "full" polyfills list provided.

See more details on what polyfill approach might look like in the test-server examples.

Also, ESL has built-in polyfills for some of DOM and ES6 features. They are available under ./polyfills directory.

---

Roadmap

• UI Playground (will be available soon) demo server
• More helpers and sugar of ESLBaseElement (event listener helpers and decorators)
• Extension of esl-utils
• Dynamic Footnotes component
• Extension of esl-form elements (custom form base, helpers, validation and more)
• ESLCarousel component
• ESLToast component
• More components in the library

---

Development Information for contributors

If you are a part of ESL team or want to contribute to the project you can find useful information about the project processes and agreements here:

• Development: Scripts

• Development: Styleguide

• Development: Commit Convention

• Contributor Licence Agreement

---

ESL Core Team: Alexey Stsefanovich, Julia Murashko, Yuliya Adamskaya.

ESL Contributors: Aliaksandr Auseyeu, Andrey Belous, Dmytro Shovchko, Dzianis Mantsevich, Liubou Masiuk, Natallia Harshunova, Yana Bernatskaya.

Exadel, Inc.