LibRext
LibRext (Librarium Textuum / Library of Frameworks) is a UI design system and component library developed by the Guild of St. Isidore (TO).
DOCUMENTATION
Code repository and design docs available on GitHub
Code Documentation
Docs for specific functions or codebase features can be found here.
USE CASES
LibRext aims to look consistent on Print, E-Reader, and Screen.
- has bounds
Screen
- ever-shifting
- interactive
- animations
- tactile feedback
E-Reader
- 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
USAGE
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>
Building Style Kits
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
DEVELOPMENT
Quickstart from the repo root:
npm install
npm run build
npm run dev
Project Roadmap
If you're interested in what's coming up, you can see the roadmap here
DESIGN
Check the LibRext Design (Overview), or more specific topics: