README
Exadel Smart Library
Exadel Smart Library (ESL) is an open-source lightweight and flexible UI component library based on web components. Increase your site’s performance by building UX models with custom components from our library. The ESL web UI components library is compatible with any framework, which makes ESL ideal for projects regardless of their tech stack.
★ Check out our UI component library and support it with a star ★
Overview
Exadel Smart Library, or ESL for short, is a free web UI components library that reduces routine tasks and lets you efficiently create websites with multiple web components at hand. When you’re deciding which is the best UI component library for your site, keep in mind that it should be compatible with other libraries and frameworks — like ESL is!
ESL UI component library allows you to access a toolkit full of reusable components. You can utilize these web components to complement projects or build your infrastructure from the ground up using ESL alone. Our web UI components library is high-quality, so the only thing you’ll have to focus on is applying styles to meet your project needs.
ESL is based solely on Web API and ECMAScript 6 features, which let our web UI components library work well across all modern browsers such as Firefox, Chrome, Safari, Opera, and Edge. ESL can also work on IE11 when the whole list of polyfills is provided (see Browser support & Polyfills for more details)
Library Structure
While building the UI component library, we included components, form components, and utilities that solve complex project architecture problems and comply with the DRY principle. See the rundown of web components and read the specs.
Base Elements
With our UI component library, you get flexible syntax sugar meant for building on top of basic components and controlling their life cycle.
Components
Our HTML UI component library provides you with all the elements you’ll need to construct UX modules with excellent performance.
ESL Image
ESL Media
ESL Scrollbar
ESL Toggleable
ESL Trigger
ESL Panel and Panel Group
ESL Tab and Tabs
ESL Alert
ESL Animate (beta)
ESL Popup (beta)
ESL Select
ESL Select List
Utilities
Our web UI components library equips you with utilities to build components using simplifying syntax sugar and a big set of helpers.
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 {ESLScreenBreakpoints} from '@exadel/esl/modules/esl-media-query/core'; // define XS screen breakpoint for up to 800px screen width ESLScreenBreakpoints.addCustomBreakpoint('XS', 1, 800);
Register web 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.
Roadmap
- ESL Carousel component (v4.0.0)
- More helpers and sugar of ESLBaseElement (event listener helpers and decorators) (v4.0.0)
- Migration to multi-package structure (v5.0.0)
- Interactive Documentation and more demo site features
- Sharable assets from demo site (styles components)
- Demo pages UI Playground integration
- Stable version of ESL Footnotes and ESL Popup components
- Extension of esl-form elements (custom form base, helpers, validation and more)
- Anchor Navigation component
- More components in the library
Development Information for Contributors
If you are part of ESL team or want to contribute to the project, you can find useful information about the project processes and agreements here:
ESL Core Team
People who architect, maintain, and keep the idea of the ESL
Alexey Stsefanovich |
Julia Murashko |
Yuliya Adamskaya |
Dmytro Shovchko |
Anna Barmina |
ESL Contributors:
People who are actively contributing to the ESL
Anna-Mariia Petryk Developer |
Anastasiya Lesun Developer |
Feoktyst Shovchko Developer |
Natallia Harshunova Developer |
Yana Bernatskaya Developer |
Iryna Pavlenko Designer |
Aliaksandr Auseyeu Consultant |
Andrey Belous Consultant |
Dzianis Mantsevich Consultant |
Liubou Masiuk Consultant |
Exadel, Inc.