e3cd0edeb6
* Initial refactor of jambonz-ui package library * Delete public/fonts directory * Jambonz UI test-app and some refinements * next lint * working on jambonz ui docs * Update package.json * Update package.json * Update package.json * Create package.json * typescript * Update components.tsx * Update components.tsx * Update utils.ts * Update icons.ts * Update components.tsx * Update components.tsx * Update icons.ts * Update components.tsx * Update _icons.scss * Update components.tsx * Update components.tsx * fix some thangs and compile all * wrap up the docs * Update tsconfig.json * icons refactor * refine docs * update readmes * update readme * fix props interfaces and test in TS app * Update components.tsx * button up some things * change package name... * include readme in pkg dist * use published package
2.3 KiB
Jambonz UI
The Jambonz UI library is a minimal, light-weight UI design package for developing frontends for jambonz apps. It's a kit-of-parts including fonts, a small set of CSS styles, a source set of SASS styles and JavaScript components. Whether you're developing a custom dev stack with tools like webpack or using a framework (like vite) you should have no issues utilizing the resources available in the Jambonz UI library package. You can view the available UI elements from the library on this site here. Also—this site is using the UI library!
What this is not is an overopinionated UI framework. Jambonz UI aims to provide foundational design materials like colors, fonts and typography as well as atomic design materials like buttons, icons etc. Currently the library is very lean but is expected to grow thoughtfully as jambonz frontend development continues to mature along this line of thinking.
A primary goal of the library is to have a small footprint. Current sizes:
| Output format | CSS size | JS size |
|---|---|---|
| Minified and Gzipped | 2 KB |
614 bytes |
| Minified | 10 KB |
2 KB |
| Compiled | 14 KB |
4 KB |
Installation
Installing the package is easy. You can use any typical package manager for frontend stacks.
npm install jambonz-ui # or yarn add jambonz-ui
General usage
The UI kit can be used in any typical way we pull things into our modern frontend stacks. You can import the CSS, SASS and JS directly into your specific target entry points for bundling or you can load them statically the good-old-fashioned way. For the latter the package provides a singular public directory that consists of all static assets: CSS, JS and fonts. You can literally just copy these assets into your jambonz applications static directory if you want to. This is also handy for serving extra static assets during development with tools like webpack-dev-server and also for copying just the raw static assets at build time when bundling.