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.
Stack
Box
Center
Cluster
Sidebar
Switcher
Cover
Grid
Frame
Reel
Imposter
Icon
Stack
Box
Center
Cluster
Sidebar
Switcher
Cover
Grid
Frame
Reel
Imposter
Icon
Forms
HTML patterns for creating simple accessible web 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?