esl Exadel Smart Library
  • Core
  • Components
  • Examples
Get started
Exadel Smart Library
  • Search
  • Introduction
    • Installation Guide
    • Browser Support
    • Our Roadmap
  • Core
    • ESL Base Element
    • new ESL Mixin Element
    • ESL Media Query
    • ESL Traversing Query
    • new ESL Event Listeners
    • ESL Utils
  • Components
    • beta ESL A11y Group
    • ESL Alert
    • beta ESL Animate
    • beta ESL Footnotes
    • ESL Image
    • ESL Media
    • ESL Panel
    • ESL Panel Group
    • beta ESL Popup
    • ESL Scrollbar
    • beta ESL Select
    • beta ESL Select List
    • ESL Tabs
    • ESL Toggleable
    • ESL Trigger
  • Examples
    • Accordion
    • beta Animate
    • Embedded Audio
    • Embedded Video
    • beta Footnotes
    • Image
    • Menu
    • Notification
    • beta Popup
    • Scrollbar
    • beta Select Dropdown
    • beta Select List
    • Tabs
    • Toggleable

Installation Guide

  1. Preconditions:
    Make sure you have all the 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.js entries.
  4. Styles are distributed in two versions:

    • 'ready to use' core.css or core.less
    • mixin version core.mixin.less for custom tag name definition
  5. [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);
    
  6. Register components via register static method call

    ESLImage.register();
    

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


ESL v4.2.0 © 2023 Exadel, Inc
Core Team Contributors: Alexey Stsefanovich, Julia Murashko, Yuliya Adamskaya, Dmytro Shovchko, Anna Barmina, Anastasiya Lesun
Design by Iryna Pavlenko