Install Layouts Forms Labcoat GitHub

⚗️ Alembic

Design tools for research projects

About

Alembic is a Design Toolkit built with Modern CSS based on Progressive Enhancement to deliver accessible experiences on the web. It works with the browser, embracing HTML and CSS & minimising JavaScript.

Made at and for Open Lab, building on best practices. Not made by silicon valley, instead tailored for the research we do.

Alembic is a living project and a work in progress. Inspired by CUBE CSS, EveryLayout, Bulma and Form design patterns.

Install

Add alembic to your project, depending on your setup.


Quick start – Add these tags and hack away!

<link rel="stylesheet" href="https://alembic.openlab.dev/everything.css">
<script type="module" src="https://alembic.openlab.dev/everything.js"></script>

This does not provide the best user experience but is quick for prototyping or one-offs.

Layouts

Building blocks for composing complex interfaces together with reusable components. Layouts

Stack

Stack

Box

Box

Center

Center

Cluster

Cluster

Sidebar

Sidebar

Switcher

Switcher

Cover

Cover

Grid

Grid

Frame

Frame

Reel

Reel

Imposter

Imposter

Icon

Icon

Stack

Stack

Box

Box

Center

Center

Cluster

Cluster

Sidebar

Sidebar

Switcher

Switcher

Cover

Cover

Grid

Grid

Frame

Frame

Reel

Reel

Imposter

Imposter

Icon

Icon

Forms

HTML patterns for creating simple accessible web forms. Forms

Showcase

These projects use alembic!

Under the hood

Information for developing on Alembic itself.

Something else?

Got something that should be a part of Alembic?
Contribute