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.
Box
Center
Cluster
Cover
Frame
Grid
Icon
Imposter
Reel
Sidebar
Stack
Switcher
Box
Center
Cluster
Cover
Frame
Grid
Icon
Imposter
Reel
Sidebar
Stack
Switcher
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?