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.


Quick Examples


List of components

Library utils

Installation Guide

  1. 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.
  2. Install esl npm dependency:

    npm i @exadel/esl --save
  3. Import Components/Modules you need.

    • core module entry usually represents main part of the module
      import '@exadel/esl/modules/esl-component/core';
    • 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
  4. [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);
  5. 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:

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

  • Interactive Documentation + demo site redesign
  • ESL Carousel component
  • UI Playground integration to demo site
  • More helpers and sugar of ESLBaseElement (event listener helpers and decorators)
  • Stable version of ESL Footnotes and ESL Popup components
  • Extension of esl-form elements (custom form base, helpers, validation and more)
  • Anchor Navigation component
  • ESLToast component
  • More components in the library