Loom73 Logo - Back to homepage Loom73

Components

The included components that handle the recurring parts in application development.

Ink drawing of heddle, shed and warp mechanism in 19th century looms.
The Heddle/Shuttle/Warp mechanism of 19th century looms.

Heddle

Manages authentication, roles, permissions, sessions, abilities and guards.

Ledger

Meaningful user actions and audit trail.

Yarn

Asset management with types, data ownership and visibility.

Logger

Operational activity of Loom73 logging.

Weave API

Read only JSON API layer, GET only.

Flash Messages

Integrated user feedback system.

Stitch

Lightweight SVG icon system and utilities.

Explore the icon collection

Frontend Utilities

Vanilla JS utilities for common UI patterns.

Explore Loom73 UI utilities

Shuttle

CLI tools for installation, maintenance and backend operations.

Learn more about Shuttle

Theming

Support for custom themes.

Coming Soon

Frontend Utilities

Loom73 ships with a handful of useful, vanilla JS frontend utilities. Recurring, always handy, in every project.

These utilities are all data-attribute driven. It is likely you'll never need to open up the JS file.

Loom73 utilities are accessible by default. They support keyboard navigation and standard ARIA attributes where necessary and/or relevant.

Data Tables

Tables with live search, sorting (with data-type recognition), paging.

View the Tables Example

In-view (intersection observer)

Manage intersection observers with a data attribute on the HTML element.

A zoomed image of carpets, used to show the behaviour of the intersection observer. It shows up on screen only when the DOM element enters the viewport.
Showing up only when the element enters the viewport.
Photo by J M on Unsplash

Forms

Frontend field validation with feedback on :user-invalid and checks the submit event.

View the Forms Example

Dialogs

Modern modals. Vanilla JS for the interactivity, everything else is CSS.

Example dialog

Hey there!

Tooltips

These are always handy. One data attribute, accessible, automatic top/bottom placement.

Flash Messages/Dismissables

Dismiss/remove an element from the page.

Everything went well!
An interesting and informative callout, isn't it?

Responsive Navs

Add responsiveness to any nav element in your application with the well-established make-it-a-hamburger pattern.

References

Read the docs