Design tools for research projects
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.
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.
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
HTML patterns for creating simple accessible web forms.
These projects use alembic!
Information for developing on Alembic itself.
Got something that should be a part of Alembic?