Demo Pototype

Welcome to pure UI:

This is a lightweight UI framework that focuses solely on client-side rendering for user experience. The framework itself is dedicated to enhancing user experience. The core idea is to define interface states purely with CSS and to use pure JavaScript for interaction and state switching.

Why pure UI

This framework succinctly encapsulates the core concepts of UI design, compressing most important concepts into less than 20 keywords. This ensures that anyone using the framework, as long as they understand its core concepts, can easily grasp any knowledge point within the system and apply it elsewhere.

What need Learn before use it

If you are familiar with and understand the meanings of the following words, then you have mastered the core concepts of this framework:
  • xhorizontal setting,
  • yvertical setting,
  • gapgap size
  • largepreset large size of gap
  • smallpreset small size of gap
  • normalpreset default size of gap
  • xsphone device
  • smtablet device
  • mddekstop device
  • lglarge desktop device
  • gridgrid system layout for multiple items like array
  • flexflex system layout for one item like an object with fields
  • 0-9value of color or size, lowest: 0, highest: 9

Color

0
1
2
3
4
5
6
7
8
9

Button

Tag

Collapse

This is a lightweight UI framework, the goal is to create a UI solution that simplifies the memory extension markup. The principle of code writing is to achieve as many UI components as possible through html standards so as to reduce unnecessary dependencies.
This is a lightweight UI framework, the goal is to create a UI solution that simplifies the memory extension markup. The principle of code writing is to achieve as many UI components as possible through html standards so as to reduce unnecessary dependencies.

Tab

Tab1
Tab2
Tab3

Player

Playershow Image One Playershow Image Two

Album

album photos

Dialog

DefaultFullscreenDropdown
Forms

Textbox

Lazyload

demo image 1 demo image 1 demo image 1 demo image 1 demo image 1 demo image 1 demo image 1