Dashboard

Mode

Skin

Theme

Philosophy

An ashlar library.

An ashlar is a finely cut block of stone — small, regular, ready to assemble. Cathedrals are built from ashlars. So are walls.

ln-ashlar gives you the blocks. Tokens, mixins, components — small primitives, well-formed, predictable. You stack them into the building you actually need.

How

Token-driven. Spacing, color, radius, shadow — every value lives in --size-*, --color-*, --radius-*. Change one token, every consumer reacts. No hardcoded literals in components.

Recipe + application. Each pattern has two layers: a @mixin (the recipe) and a default selector (the application). Use the default, apply the recipe to your own semantic selector, or rebind the surface tokens. Three first-class paths.

Zero dependencies. Vanilla JS IIFE components, CustomEvent communication, MutationObserver auto-init. No framework, no runtime — drop the SCSS and JS into any project.

Themes are palette only. A theme rebinds vocabulary tokens at its own :root. It never restructures a component. Switching themes is a token swap, not a rewrite.

Why

A library should give you primitives and get out of the way. Most CSS frameworks give you a finished building — beautiful for one project, awkward for the next.

ln-ashlar gives you the stones. Stack them however your project needs. The stones are simple. The buildings can be as complicated as you want.

  • Components

    18

  • JS Modules

    10

  • SCSS Files

    22

  • Demo Pages

    14

Modal

Basic Modal

This is a basic modal with a title and content.

Press ESC or click close.

Edit User

Update the user's details below.

Tabs

Content of the Overview tab. Tabs are synchronized with the URL hash.

Change the URL hash to #users to see.

Toggle — Collapsible

Server Status
ServerStatusUptime
web-01OK99.9%
web-02OK99.7%
db-01Down95.2%

Progress

  • CPU — 72%

  • RAM — 45%

  • Disk — 89%

Toast Notifications

Upload

Drop files here or click to upload pdf, doc, docx, jpg, png

    ln-ajax — AJAX Navigation

    Component for AJAX navigation and form submission. Links and forms inside a data-ln-ajax container are automatically processed via fetch.

    <div data-ln-ajax>
    <a href="/users">Users</a>
    <form method="POST" action="/users">...</form>
</div>

<!-- JSON response -->
{
    "title": "Title",
    "content": { "main": "<p>HTML</p>" },
    "message": { "type": "success", "title": "OK", "body": "Saved!" }
}
    AttributeDescription
    data-ln-ajaxContainer — all <a> and <form> inside are AJAX
    data-ln-ajax="false"Exclude a specific element from AJAX processing

    CSRF token automatically from <meta name="csrf-token">. History pushState for links and GET forms.

    Quick Integration

    <link rel="stylesheet" href="dist/ln-ashlar.css">
<script src="dist/ln-ashlar.iife.js" defer></script>

<!-- Or as npm module -->
import 'ln-ashlar';
import 'ln-ashlar/dist/ln-ashlar.css';