LibRext (Librarium Textuum / Library of Frameworks) is a UI design system and component library developed by the Guild of St. Isidore (TO).
Code repository and design docs available on GitHub
Docs for specific functions or codebase features can be found here.
LibRext aims to look consistent on Print, E-Reader, and Screen.
- has bounds
- ever-shifting
- interactive
- animations
- tactile feedback
- something of a blend between the two
- older E-Readers have a long update time and small screens
- more advanced (expensive) ones are bigger, with a quicker refresh rate
LibRext builds a set of global stylesheets. Users can access the styles and design tokens through CSS variables:
.widget-set .widget {
background-color: var(--lbrxt-col-grey4);
width: 100%;
margin: 2rem 0;
text-align: center;
}
or HTML class names:
<h1 class="lbrxt-title lbrxt-col-grey9">Universal Declaration of Human Rights</h1>
This will generate a style kit using the default (librext) styles.
npm run build:docs
A few style presets are available for building:
npm run build:docs --variant="sw"
npm run build:docs --variant="gsi"
npm run build:docs --variant="inc"
As of v0.5.4, these variants will be generated in /docs/style/variant-file-prefix/, like so:
/docs/style/sw/index.html/docs/style/gsi/index.html/docs/style/innico/index.html
Quickstart from the repo root:
npm install
npm run build
npm run dev
If you're interested in what's coming up, you can see the roadmap here
Check the LibRext Design (Overview), or more specific topics: