<p align="center">
<a href="https://lcui.org/">
<img src="https://lcui.lc-soft.io/static/images/lcui-logo-lg.png" alt="" width=72 height=72>
</a>
<h3 align="center">LCUI</h3>
<p align="center">
A small C library for building user interfaces with C, XML and CSS.
</p>
<p align="center">
<a href="https://github.com/lc-soft/LCUI/actions"><img alt="GitHub Actions" src="https://github.com/lc-soft/LCUI/workflows/C%2FC%2B%2B%20CI/badge.svg"></a>
<a href="https://codecov.io/gh/lc-soft/LCUI"><img src="https://codecov.io/gh/lc-soft/LCUI/branch/develop/graph/badge.svg" /></a>
<a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/github/license/lc-soft/LCUI.svg" alt="License"></a>
<a href="https://github.com/lc-soft/LCUI/releases"><img src="https://img.shields.io/github/release/lc-soft/LCUI/all.svg" alt="Github Release"></a>
<a href="https://github.com/lc-soft/LCUI/releases"><img src="https://img.shields.io/github/downloads/lc-soft/LCUI/total.svg" alt="Github All Releases"></a>
<img src="https://img.shields.io/github/repo-size/lc-soft/LCUI.svg" alt="Repo size">
<img src="https://img.shields.io/github/languages/code-size/lc-soft/LCUI.svg" alt="Code size">
</p>
</p>
## Table of contents
<!-- TOC -->
- [Table of contents](#table-of-contents)
- [Introduction](#introduction)
- [Features](#features)
- [Screenshots](#screenshots)
- [Related projects](#related-projects)
- [Design references](#design-references)
- [Quick start](#quick-start)
- [Use LCUI CLI](#use-lcui-cli)
- [Manual compilation and installation](#manual-compilation-and-installation)
- [Windows](#windows)
- [Ubuntu](#ubuntu)
- [Contribution](#contribution)
- [Documentation](#documentation)
- [FAQ](#faq)
- [License](#license)
<!-- /TOC -->
## Introduction
LCUI (LC's UI Library) is a small C library for building user interfaces.
[中文版说明文档](README.zh-cn.md)
### Features
- **Written in C:** Suitable for small applications written primarily in C.language designed for LCUI, it makes it easier to create interactive UIs.
- **Cross platform:** Support for Windows and Linux, you can write Windows Desktop apps and Universal Windows Platform apps, as well as Linux Desktop apps.
- **XML + CSS:** Includes XML and CSS parsers, you can use XML and CSS to describe interface structure and style.
- **Web-like development experience:** Since the design and implementation of LCUI's functions, including layout, CSS, and renderer, are mostly referenced from MDN documents and some popular web front-end development libraries, its development experience and interface effects will have some similarities to web pages. If you already have experience writing web pages with HTML and CSS, it will be easier to get started.
- **Flexible:** Support for adapting the interface to screens of different pixel densities by setting global scaling. Support for using screen density related sp and dp units to describe position and size of the elements.
### Screenshots
<table>
<tbody>
<tr>
<td>
<a class="thumbnail" href="https://github.com/lc-soft/LCUI/blob/develop/test/helloworld.c">
<img src="https://lcui.org/static/images/showcase/screenshot-lcui-hello.png" alt="Hello App"/>
</a>
</td>
<td>
<a class="thumbnail" href="https://github.com/lc-soft/LC-Finder">
<img src="https://gitee.com/lc-soft/LC-Finder/raw/develop/screenshots/2.jpg" alt="LC Finder"/>
</a>
</td>
</tr>
<tr>
<td>
<a class="thumbnail" href="https://github.com/lc-ui/lcui-router-app">
<img src="https://gitee.com/lc-ui/lcui-router-app/raw/master/screenshot.gif" alt="LCUI Router App"/>
</a>
</td>
<td>
<a class="thumbnail" href="https://github.com/lc-ui/lc-design">
<img src="https://lcui.lc-soft.io/static/images/showcase/lc-design-example-preview.png" alt="LC Design"/>
</a>
</td>
</tr>
</tbody>
</table>
### Related projects
Want to know what LCUI can do? You can view the following projects:
- [LCUI CLI](https://github.com/lc-ui/lcui-cli) - Command line interface for rapid LCUI development.
- [LCUI Router](https://github.com/lc-soft/lcui-router) - The official router for LCUI. It provides a similar development experience to the [Vue Router](https://github.com/vuejs/vue-router) and make building multiple views applications with LCUI a breeze.
- [LC Design](https://github.com/lc-ui/lc-design) - A UI component framework for building LCUI application.
- [LC Finder](https://github.com/lc-soft/LC-Finder) - An image manager, it uses most of the features of LCUI, and you can use it as a reference to evaluate whether LCUI's performance and development complexity meets your needs.
- [Trad](https://github.com/lc-soft/trad) - A language based on JavaScript syntax that can be compiled into C, it preset LCUI bindings, provides [React](https://reactjs.org/) like development experience, makes it painless to create interactive UIs based on LCUI.
- [LCUI Quick Start](https://github.com/lc-ui/lcui-quick-start) - A minimal LCUI application.
- [LCUI Router App](https://github.com/lc-ui/lcui-router-app) - A very simple browser-like application to show the LCUI and LCUI Router features.
- [LC Design App](https://github.com/lc-ui/lc-design-app) - A minimal LCUI application for preview LC Design component library.
### Design references
- [SDL](https://github.com/SDL-mirror/SDL/tree/master/src/video/x11) — X11 driver code reference
- [FreeType](https://www.freetype.org/freetype2/docs/design/design-3.html#section-1) — Data structure naming style reference
- [LevelDB](https://github.com/google/leveldb/blob/master/include/leveldb/c.h) — Function naming style reference
- [jQuery](https://jquery.com/) — Widget operation method naming style reference
- [MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS) — CSS standard reference
## Quick start
### Use LCUI CLI
LCUI CLI is a command line tool, you need to install [Node.js](https://nodejs.org/) before using it, and then run the following command to quickly experience it:
```bash
# Install lcui-cli and lcpkg
npm install -g @lcui/cli lcpkg
# Create an LCUI project named myapp
lcui create myapp
# Go into project directory
cd myapp
# set up the development environment for this project
lcui setup
# Build project
lcui build
# run project
lcui run
```
### Manual compilation and installation
#### Windows
1. Open CMD window, and run following command in the LCUI source directory to install the dependency libraries:
```bash
lcpkg install
# If you want compile for x64 CPU architecture
lcpkg install --arch x64
# If you want compile for Universal Windows Platform (UWP)
lcpkg install --platform uwp
lcpkg install --arch x64 --platform uwp
```
1. Rename `config.win32.h.in` in the include directory to `config.h`.
1. Open the `build/windows/LCUI.sln` file with [Visual Studio](https://visualstudio.microsoft.com/), and then build LCUI.
#### Ubuntu
```bash
# Install the dependencies
sudo apt-get install libpng-dev libjpeg-dev libxml2-dev libfreetype6-dev libx11-dev
# Clone this repository
git clone https://github.com/lc-soft/LCUI.git
# Go into the repository
cd LCUI
# Generate automake configure script
./autogen.sh
# Check the build environment and configure automake scripts
./configure
# Build
make
# If you wnat install LCUI
sudo make install
# Go into test directory
cd test
# Run helloworld application
./helloworld
```
> **Note:** If you want to customize the compiler, compile flags, install location, and other configuration items, read the [INSTALL](INSTALL) file.
## Contribution
Think LCUI is slow to update? there are many ways to [c