The primary technology of ESL is web components. ESLBaseElement is a base class for custom tag based components.
diff --git a/site/views/overview/quick/02-core/02-custom-attributes.njk b/site/views/overview/quick/02-core/02-custom-attributes.njk
index 9b26b0d16..d6f5c87c7 100644
--- a/site/views/overview/quick/02-core/02-custom-attributes.njk
+++ b/site/views/overview/quick/02-core/02-custom-attributes.njk
@@ -5,7 +5,8 @@ tags: overview-quick
parent: 00-core
---
-
In addition to custom tags powered by web components standard, ESL UI library provides a way to create components based on custom attributes.
ESLMixinElement is a base class for such components and it gives you this capability in almost the same way as ESLBaseElement does for custom tags.
diff --git a/site/views/overview/quick/02-core/04-event-listener.njk b/site/views/overview/quick/02-core/04-event-listener.njk
index 90209b82d..dc80707fb 100644
--- a/site/views/overview/quick/02-core/04-event-listener.njk
+++ b/site/views/overview/quick/02-core/04-event-listener.njk
@@ -5,23 +5,26 @@ tags: overview-quick
parent: 00-core
---
-
{{ title }}
+
{{ title }}
+
ESL Event Listener is an embedded ESL module that take care of the event listeners management and provide extended utilities to work with events.
- ESL provides ability to register event listeners in declarative way using TS @listen
decorator.
+ ESL provides ability to register event listeners in declarative way using TS @listen decorator.
Module supports event delegation, custom event targets. Listeners registration works on the "host" concept that allows you to link the listener to the specific component instance (to manage subscriptions automatically.
-{% code 'typescript', 'code-block' %}
- class MyComponent extends ESLBaseElement {
- @listen({event: 'click', selector: 'button'})
- onBtnClick(event) {
- console.log('Button click catched with delegation', event);
- }
+
+ {% code 'typescript', 'code-block' %}
+ class MyComponent extends ESLBaseElement {
+ @listen({event: 'click', selector: 'button'})
+ onBtnClick(event) {
+ console.log('Button click catched with delegation', event);
+ }
- @listen({event: 'resize', target: ESLResizeObserverTarget.for})
- onResize(event) {
- console.log('Component resized', event);
+ @listen({event: 'resize', target: ESLResizeObserverTarget.for})
+ onResize(event) {
+ console.log('Component resized', event);
+ }
}
- }
-{% endcode %}
+ {% endcode %}
+
diff --git a/site/views/overview/quick/02-core/05-media-query.njk b/site/views/overview/quick/02-core/05-media-query.njk
index 6726d3067..229609f1e 100644
--- a/site/views/overview/quick/02-core/05-media-query.njk
+++ b/site/views/overview/quick/02-core/05-media-query.njk
@@ -5,13 +5,34 @@ tags: overview-quick
parent: 00-core
---
-
{{ title }}
+
{{ title }}
-{% code 'typescript', 'code-block' %}
- ESLMediaQuery.for('@XS').matches; // true if XS
-{% endcode %}
+
+ ESLMediaQuery is an extended browser MediaQueryList object and related utils such as rule-value pairs
+ called ESLMediaRuleList.
+
-{% code 'typescript', 'code-block' %}
- @listen({event: 'change', target: ESLMediaQuery.for('@XS or @SM')})
- onMediaQueryChange(event) {/*...*/}
-{% endcode %}
+
+ In addition to the standard MediaQueryList API, ESLMediaQuery provides support of Breakpoint and media condition aliases,
+ extended boolean logic.
+
+
+
+ {% code 'typescript', 'code-block' %}
+ ESLMediaQuery.for('@XS').matches; // XS breakpoint declared globally
+ {% endcode %}
+
+
+
+ {% code 'typescript', 'code-block' %}
+ @listen({event: 'change', target: ESLMediaQuery.for('@XS or @SM')})
+ onMediaQueryChange(event) {/* It is true event target */}
+ {% endcode %}
+
+
+
+ {% code 'typescript', 'code-block' %}
+ ESLMediaRuleList.parse('@XS | @SM | @MD', '1 | 2 | 3').value // 1, 2 or 3 according to current breakpoint
+ ESLMediaRuleList.parse('@XS => 1 | @SM => 2 | @MD => 3').value // alternative way to define the same
+ {% endcode %}
+
diff --git a/site/views/overview/quick/02-core/06-traversing-query.njk b/site/views/overview/quick/02-core/06-traversing-query.njk
index e22e25e48..48c9b34e3 100644
--- a/site/views/overview/quick/02-core/06-traversing-query.njk
+++ b/site/views/overview/quick/02-core/06-traversing-query.njk
@@ -5,13 +5,20 @@ tags: overview-quick
parent: 00-core
---
-
{{ title }}
+
{{ title }}
-{% code 'typescript', 'code-block' %}
- const $base = ...; // some base element (as context)
+
+ ESLTraversingQuery is a set of utilities to simplify DOM traversing, element selection and filtering.
+
- ESLTraversingQuery.find($base, '::find(button)::visible'); // find all visible buttons in the base element
- ESLTraversingQuery.find($base, '::find(button)::nth(2)'); // find second button in the base element
- ESLTraversingQuery.find($base, '::next'); // get next sibling of the base element
- ESLTraversingQuery.find($base, '::prev(a)'); // get previous sibling of the base element that is an anchor
-{% endcode %}
+
+ {% code 'typescript', 'code-block' %}
+ const $base = ...; // some base element (as context)
+
+ ESLTraversingQuery.first($base, '::next'); // get next sibling of the base element
+ ESLTraversingQuery.first($base, '::prev(a)'); // get previous sibling of the base element that is an anchor
+ ESLTraversingQuery.first($base, '::find(button)::nth(2)'); // find second button in the base element
+ ESLTraversingQuery.all($base, '::next'); // find all next siblings of the base element
+ ESLTraversingQuery.all($base, '::find(button)::visible'); // find all visible buttons in the base element
+ {% endcode %}
+
diff --git a/site/views/overview/quick/03-components/00-components.njk b/site/views/overview/quick/03-components/00-components.njk
index 74fd04a94..732b93583 100644
--- a/site/views/overview/quick/03-components/00-components.njk
+++ b/site/views/overview/quick/03-components/00-components.njk
@@ -4,7 +4,7 @@ hash: components
tags: overview-quick
---
-
ESL Built-in Components
+
ESL Built-in Components
In addition to the core ESL library, ESL provides a set of built-in components.
diff --git a/site/views/overview/quick/03-components/01-component-list.njk b/site/views/overview/quick/03-components/01-component-list.njk
index ebeeb81ca..3a6daa4d7 100644
--- a/site/views/overview/quick/03-components/01-component-list.njk
+++ b/site/views/overview/quick/03-components/01-component-list.njk
@@ -6,7 +6,7 @@ cls: full-width
parent: 00-components
---
-
Here is a list of all component modules available in ESL.
+
Here is a list of all component modules available in ESL.
{% from 'navigation/collection-grid.njk' import grid with context %}
diff --git a/site/views/overview/quick/03-components/02-flexibility.njk b/site/views/overview/quick/03-components/02-flexibility.njk
index 1f440ac58..497c3ace8 100644
--- a/site/views/overview/quick/03-components/02-flexibility.njk
+++ b/site/views/overview/quick/03-components/02-flexibility.njk
@@ -1,10 +1,15 @@
---
title: Components Combination
hash: flexibility
+cls: text-center
tags: overview-quick
parent: 00-components
---
+
ESL components are designed to be flexible and can be combined in various ways to create complex interfaces.
diff --git a/site/views/overview/quick/03-components/04-responsiveness-n-flexibility.njk b/site/views/overview/quick/03-components/04-responsiveness-n-flexibility.njk
index ec268cc35..cd2d379aa 100644
--- a/site/views/overview/quick/03-components/04-responsiveness-n-flexibility.njk
+++ b/site/views/overview/quick/03-components/04-responsiveness-n-flexibility.njk
@@ -5,17 +5,18 @@ tags: overview-quick
parent: 00-components
---
-
Built-In Responsiveness and Flexibility
+
Built-In Responsiveness and Flexibility
-
+
ESL components can adapt their behavior based on patterns or device sizes.
-
+
+
The same Tab component can be presented as an Accordion on smaller screens without needing separate markup—just change
one parameter!
-
+
See Example