https://github.com/mlomb/flexui
A light UI for C++ with XML and CSS support
https://github.com/mlomb/flexui
css flex flexbox light ui xml yoga-layout
Last synced: about 1 year ago
JSON representation
A light UI for C++ with XML and CSS support
- Host: GitHub
- URL: https://github.com/mlomb/flexui
- Owner: mlomb
- License: mit
- Created: 2020-11-29T02:04:46.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-12-29T00:13:55.000Z (over 4 years ago)
- Last Synced: 2025-05-04T01:28:44.631Z (about 1 year ago)
- Topics: css, flex, flexbox, light, ui, xml, yoga-layout
- Language: C++
- Homepage: https://mlomb.github.io/flexui
- Size: 6.01 MB
- Stars: 43
- Watchers: 2
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# flexui
*Still in very very early development, for now just prototyping*
A light UI for C++ with XML and CSS support.
### Example
```xml
Some text:
A button
```
```css
* {
font-family: "Roboto-Regular.ttf";
font-size: 24px;
}
.container {
background-color: white;
color: black;
height: 90px;
padding: 25px;
align-items: center;
}
#some {
margin-right: 5px;
}
Button {
background-color: #1266f1;
color: white;
align-items: center;
padding: 5px;
border-color: #0d6efd;
border-width: 1px;
border-radius: 4px;
cursor: pointer;
}
Button:hover {
/* ... */
}
```
Render using OpenGL (and GLFW)
# Demo
Online demo available here: https://mlomb.github.io/flexui
Note that the demo is a build of the master branch for now, it may contain anything I'm currently working on (and probably broken)
# Goals
* Support a subset of CSS
* Support XML for building elements
* Fully based on a Flex layout engine (the same engine used by [React Native](https://reactnative.dev), [Yoga Layout](https://yogalayout.com))
* All lists to be virtualized out of the box
* Be render agnostic, the library should only generate vertices and indices
* Be system agnostic, the library should not handle window creation or events
# Non-goals
* Be a browser
* Implement a script layer (no JS or similar)
# Dependencies
* [FreeType](https://www.freetype.org), an open source font rasterizer
* [Yoga Layout](https://yogalayout.com), an open source layout engine
* An embedded copy of [tinyxml2](https://github.com/leethomason/tinyxml2), a fast XML parser
We may require harfbuzz-ng for complex text later on.
# License
MIT, see [LICENSE](LICENSE).