π¨ Reactive & Stream & Driver based UI framework build on Mobius Utils, equipped with neumorphism-derived & utility-first styles.
π English Doc Β |Β π δΈζζζ‘£
π¨ Reactive & Stream & Driver based UI framework build on Mobius Utils, equiped with neumorphism-derived & utility-first styles.
This repo will shows latest stage of Mobius GUI before I surely complete the first stable version. We are now on the alpha stage.
The alpha
stage means that most (over 70%) of the major features have been developed, and while there are still some uncertainties, there are already far fewer than the preview
stage.
The main tasks in alpha stage are refining the base examples, developing complex components and writing documentation.
π¬ Check todos & roadmaps for more information.
For a quickest preview: visit Mobius GUI preview.
Avatar Center |
Preview Site |
Empty Seat... |
Simple Use Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobius CSS</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@we-mobius/[email protected]/release/styles/mobius.css">
</head>
<body>
<div class="mobius-width--100vw mobius-height--100vh mobius-layout__vertical">
<div class="mobius-padding--xl mobius-margin--auto mobius-shadow--normal mobius-rounded--base">
<div class="mobius-layout__vertical mobius-flex-items--center mobius-select--none">
<img width="200px" src="./assets/mobius-gui-preview-site-qr.jpg" alt="Scan to preview full feature of Mobius GUI">
<p class="mobius-text--center mobius-text--xl mobius-font--fantasy">
<span class="mobius-text--3xl">Hi</span>, developers !
</p>
<p>
Scan to meet full features of Mobius GUI.
</p>
</div>
</div>
</div>
</body>
</html>
Visit πSimple Use Example to see what it looks like.
Since it's just a pure CSS library, you can use it in your own projects with confidence.
However, for insurance purposes, before making sure that you and your team are fully familiar with the 'utility-first' way of CSS organization, it is still recommended that first use it in toy projects.
Here are some tips for you:
<link>
tag import, it is recommended to enable server compression in production. Due to the large number of verbose variables, use gzip
will reduce it from ~110 KB to less than 15 KB (84% compressed, brotli
done better). <link>
tag in your pages instead of local build.All the relative documentations of detail, pls check ./docs
οΌwhich contains:
Mobius GUI is inspired by such great works:
This project is licensed under the GPL-3.0 License - see the LICENSE file for details.