JavaScript Utilities
JavaScript utilities provide reusable functionality for common interactions and behaviors.
EcoResize
Provides resizable functionality for any element with drag-to-resize handles.
Features
- Horizontal and vertical resizing
- Configurable min/max sizes
- Customizable resize handle
- Callbacks for resize events
Usage
const resize = new EcoResize(element, {
direction: 'horizontal', // 'horizontal' or 'vertical'
minSize: 200,
maxSize: 500,
handleWidth: 4,
onResize: (size) => {
console.log('New size:', size);
},
onResizeEnd: (size) => {
console.log('Resize complete:', size);
}
});
Demo
Resize me by dragging the right edge
EcoCollapser
Provides collapse/expand functionality for any element with state persistence.
Features
- Horizontal and vertical collapsing
- Optional localStorage persistence
- Smooth animations
- Custom callbacks
- Automatic trigger button binding
Usage
const collapser = new EcoCollapser(element, {
collapsedClass: 'eco-collapsed',
triggerSelector: '.collapse-btn',
direction: 'horizontal',
collapsedValue: '0',
expandedValue: null, // auto
persistState: true,
storageKey: 'sidebarCollapsed',
onCollapse: () => console.log('Collapsed'),
onExpand: () => console.log('Expanded')
});
Demo
Collapsible content
EcoModal
Manages modal dialogs with backdrop, keyboard, and focus handling.
Features
- Backdrop overlay
- Keyboard navigation (ESC to close)
- Focus trapping
- Animation support
Usage
const modal = new EcoModal(modalElement);
modal.open();
modal.close();
Demo
Demo Modal
This is a modal dialog example.
Click Off
Standardized click-outside listener for closing dropdowns, menus, and popovers.
Usage
import { onClickOff } from './utilities/click-off.js';
onClickOff(element, (event) => {
// Close the element
element.style.display = 'none';
});
Popper
Positioning utility for tooltips, popovers, and dropdowns.
Usage
import { createPopper } from './utilities/popper.js';
const popper = createPopper(triggerElement, popoverElement, {
placement: 'bottom',
offset: 8
});
Media Query
JavaScript utility for responsive breakpoint detection.
Usage
import { useMediaQuery } from './utilities/media-query.js';
const isMobile = useMediaQuery('(max-width: 768px)');
if (isMobile) {
// Mobile-specific code
}
CSS Utilities
CSS utility classes provide common styling patterns and layout helpers.
Spacing Utilities
Utility classes for consistent spacing using design tokens.
Available Classes
/* Margin */
.m-1, .m-2, .m-3, .m-4, .m-5, .m-6, .m-8, .m-10, .m-12, .m-16, .m-20, .m-24
/* Padding */
.p-1, .p-2, .p-3, .p-4, .p-5, .p-6, .p-8, .p-10, .p-12, .p-16, .p-20, .p-24
/* Margin Top/Bottom/Left/Right */
.mt-*, .mb-*, .ml-*, .mr-*
.mx-* (horizontal), .my-* (vertical)
/* Padding Top/Bottom/Left/Right */
.pt-*, .pb-*, .pl-*, .pr-*
.px-* (horizontal), .py-* (vertical)
Flexbox Utilities
Utility classes for flexbox layouts.
Available Classes
/* Display */
.flex, .inline-flex
/* Direction */
.flex-row, .flex-row-reverse, .flex-col, .flex-col-reverse
/* Wrap */
.flex-wrap, .flex-nowrap, .flex-wrap-reverse
/* Justify Content */
.justify-start, .justify-end, .justify-center, .justify-between, .justify-around, .justify-evenly
/* Align Items */
.items-start, .items-end, .items-center, .items-baseline, .items-stretch
/* Align Self */
.self-start, .self-end, .self-center, .self-baseline, .self-stretch
/* Gap */
.gap-1, .gap-2, .gap-3, .gap-4, .gap-5, .gap-6, .gap-8
Grid Utilities
Utility classes for CSS Grid layouts.
Available Classes
/* Display */
.grid, .inline-grid
/* Columns */
.grid-cols-1, .grid-cols-2, .grid-cols-3, .grid-cols-4, .grid-cols-5, .grid-cols-6, .grid-cols-12
/* Rows */
.grid-rows-1, .grid-rows-2, .grid-rows-3, .grid-rows-4, .grid-rows-5, .grid-rows-6
/* Gap */
.gap-1, .gap-2, .gap-3, .gap-4, .gap-5, .gap-6, .gap-8
Typography Utilities
Utility classes for text styling.
Available Classes
/* Font Size */
.text-xs, .text-sm, .text-base, .text-lg, .text-xl, .text-2xl
/* Font Weight */
.font-regular, .font-medium, .font-semibold, .font-bold
/* Text Align */
.text-left, .text-center, .text-right, .text-justify
/* Text Transform */
.uppercase, .lowercase, .capitalize
/* Line Height */
.leading-tight, .leading-normal, .leading-relaxed, .leading-loose