Install Layouts Forms GitHub

⚗️ Alembic

Design system for research projects

About

Alembic is a Design System 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, distilling knowledge from past deployments. 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 & dirty – Add these tags and hack away! Not for production.

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

It's not 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