A modular UI pattern system.
Currently a work in progress, Gable collects a whole bunch of UI patterns and CSS library code that I’ve used on many different apps and websites over the past few years, often copy/pasted between projects. I wanted one place to put it and a clean way to install it.
It doesn’t currently include JavaScript or React implementations but it might in future.
npm install gable
Import production-ready compiled CSS from the bundle path.
Assuming a JavaScript build pipeline in place (eg: style-loader and css-loader in Webpack), you can bundle the full set of Gable styles using the following import at your app’s entry point:
import "gable/bundle/gable.css";For projects using Sass, you can import the source files directly:
@import "~gable/foundation";
@import "~gable/components/breadcrumbs";Tentative future direction for the library.
- Breadcrumbs
- Badge
- Button
- Sidebar
- Topbar
- Workspace
- Calendar
- input-date
- input-text
- input-number
- input-money