@exadel/esl v4.16.0
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
Utilities
Installation Guide
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 ES6 modules are available for consumption.
Install esl npm dependency
npm i @exadel/esl --save
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
orcore.less
- mixin version
core.mixin.less
for custom tagname definition
- 'ready to use'
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);
Register components via
register
static method callESLImage.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
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.
10 days ago
10 days ago
19 days ago
23 days ago
27 days ago
29 days ago
1 month ago
2 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
6 months ago
9 months ago
7 months ago
6 months ago
8 months ago
10 months ago
8 months ago
11 months ago
11 months ago
1 year ago
11 months ago
1 year ago
1 year ago
1 year ago
11 months ago
1 year ago
11 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago