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: 2 months 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 (about 4 years ago)
• Default Branch: master
• Last Pushed: 2021-12-29T00:13:55.000Z (about 3 years ago)
• Last Synced: 2024-11-02T04:21:51.310Z (3 months ago)
• Topics: css, flex, flexbox, light, ui, xml, yoga-layout
• Language: C++
• Homepage: https://mlomb.github.io/flexui
• Size: 6.01 MB
• Stars: 42
• Watchers: 3
• Forks: 4
• 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)  

![docs/render.png](docs/render.png)

# 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).