docs: update README.md (#176)

Author: lc-soft

CODE_OF_CONDUCT.md

@@ -0,0 +1,76 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, sex characteristics, gender identity and expression,
+level of experience, education, socio-economic status, nationality, personal
+appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+  advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies within all project spaces, and it also applies when
+an individual is representing the project or its community in public spaces.
+Examples of representing a project or community include using an official
+project e-mail address, posting via an official social media account, or acting
+as an appointed representative at an online or offline event. Representation of
+a project may be further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at root@lc-soft.io. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see
+https://www.contributor-covenant.org/faq

CODE_OF_CONDUCT.zh-cn.md

@@ -0,0 +1,53 @@
+# 参与者公约
+
+## 我们的保证
+
+为了促进一个开放透明且友好的环境，我们作为贡献者和维护者保证：无论年龄、种族、民族、性别认同和表达（方式）、体型、身体健全与否、经验水平、国籍、个人表现、宗教或性别取向，参与者在我们项目和社区中都免于骚扰。
+
+## 我们的标准
+
+有助于创造正面环境的行为包括但不限于：
+
+* 使用友好和包容性语言
+* 尊重不同的观点和经历
+* 耐心地接受建设性批评
+* 关注对社区最有利的事情
+* 友善对待其他社区成员
+
+身为参与者不能接受的行为包括但不限于：
+
+* 使用与性有关的言语或是图像，以及不受欢迎的性骚扰
+* 捣乱/煽动/造谣的行为或进行侮辱/贬损的评论，人身攻击及政治攻击
+* 公开或私下的骚扰
+* 未经许可地发布他人的个人资料，例如住址或是电子地址
+* 其他可以被合理地认定为不恰当或者违反职业操守的行为
+
+## 我们的责任
+
+项目维护者有责任为「可接受的行为」标准做出诠释，以及对已发生的不被接受的行为采取恰当且公平的纠正措施。
+
+项目维护者有权利及责任去删除、编辑、拒绝与本行为标准有所违背的评论 (comments)、提交 (commits)、代码、wiki 编辑、问题 (issues) 和其他贡献，以及项目维护者可暂时或永久性的禁止任何他们认为有不适当、威胁、冒犯、有害行为的贡献者。
+
+## 使用范围
+
+当一个人代表该项目或是其社区时，本行为标准适用于其项目平台和公共平台。
+
+代表项目或是社区的情况，举例来说包括使用官方项目的电子邮件地址、通过官方的社区媒体账号发布或线上或线下事件中担任指定代表。
+
+该项目的呈现方式可由其项目维护者进行进一步的定义及解释。
+
+## 强制执行
+
+可以通过 root@lc-soft.io，来联系项目团队来举报滥用、骚扰或其他不被接受的行为。
+
+任何维护团队认为有必要且适合的所有投诉都将进行审查及调查，并做出相对应的回应。项目小组有对事件回报者有保密的义务。具体执行的方针近一步细节可能会单独公布。
+
+没有切实地遵守或是执行本行为标准的项目维护人员，可能会因项目领导人或是其他成员的决定，暂时或是永久地取消其参与资格。
+
+## 来源
+
+本行为标准改编自[贡献者公约][homepage], 版本 1.4 可参阅：https://www.contributor-covenant.org/zh-cn/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
+
+有关此行为准则的常见问题的答案，请参阅：https://www.contributor-covenant.org/faq

README.md

@@ -19,18 +19,18 @@
 
 ## Table of contents
 
-- [Table of contents](#Table-of-contents)
-- [Introduction](#Introduction)
-  - [Features](#Features)
-  - [Missing features](#Missing-features)
-  - [Related Projects](#Related-Projects)
-- [Documentation](#Documentation)
-- [Building](#Building)
-  - [Prerequisites](#Prerequisites)
-  - [Building On Windows](#Building-On-Windows)
-  - [Bootstrap](#Bootstrap)
-- [Contribution](#Contribution)
-- [License](#License)
+- [Introduction](#introduction)
+    - [Features](#features)
+    - [Missing features](#missing-features)
+    - [Related projects](#related-projects)
+    - [Design reference](#design-reference)
+- [Quick start](#quick-start)
+    - [Windows](#windows)
+    - [Ubuntu](#ubuntu)
+- [Contribution](#contribution)
+- [Documentation](#documentation)
+- [FAQ](#faq)
+- [License](#license)
 
 ## Introduction
 
@@ -40,16 +40,11 @@ LCUI is a freely available software library for building user interfaces. It is
 
 ### Features
 
-- **Written in C:** Suitable for small applications written primarily in C.
-- **Trad language binding:** [Trad](https://github.com/lc-soft/trad) is a language designed for LCUI, it makes it easier to create interactive UIs.
+- **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 parsing:** Support for using XML markup language to describe the structure of the graphical user interface.
-- **CSS parsing:** Support for using a simplified version of CSS to describe the presentation of the graphical user interface. The CSS version used does not support all the features of CSS, like `transition`, `transform`, `animation`, `@media`, `@key-frames` etc, you can read the file [css_parser.c](https://github.com/lc-soft/LCUI/blob/53e268251a53bf371ca7aaa7862ec69fb4d0015a/src/gui/css_parser.c#L550) for more details.
-- **HTML-Like layout:** Support the **block**, **inline-block** and simple **flex** layout, If you have web page development experience, then LCUI will be familiar.
+- **XML + CSS:** Support the use of XML and CSS to describe the GUI layout and style, saving interface development time and maintenance costs.
 - **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.
-- **Text rendering:** Support for the text to set the global font, line height, horizontal alignment, and also support to set the color, background color, bold, italic for some text blocks separately.
-- **Font management:** Support for loading multiple font files and using fonts of different families, weights and styles.
-- **Image processing:** Provide image read interfaces: support for reading jpg, png and bmp format images.
+- **Simple image reading:** Provide jpg, png and bmp image read APIs.
 - **Touch:** Supports multi-touch, but currently only on Windows platforms.
 
 ### Missing features
@@ -62,77 +57,239 @@ What is "simple"? It means fewer features, for example:
 - Cannot select text and copy it on user interface.
 - Cannot use CTRL+C to copy content, and cannot use CTRL+V to paste content to input boxes.
 - Cannot use the Input Method Engine to input non-ASCII characters, like Chinese, Japanese, etc.
-- Rounded corner borders are not supported in this version.
 - Layout system is simple. Grid and table layouts are not supported.
 - No English documentation, it is hard to use.
 
-If you can solve any of the above problems, you can provide technical support to the author by submitting an issue or pull request.
+There are many similar open source projects(E.g: [SDL](https://github.com/SDL-mirror/SDL), [imgui](https://github.com/ocornut/imgui)) that can be referenced today, most of the missing features in LCUI can find relevant implementations from these projects, so the development cost of LCUI is also reduced a lot. One of the reasons for open source this project is to conduct technical exchanges. If you have research experience in similar projects, please consider providing improvements to this project.
 
-### Related Projects
+### Related projects
 
 Want to know what LCUI can do? You can view the following projects:
 
-- [Trad](https://github.com/lc-soft/trad) - A lightweight and C based language for building user interfaces. it is a language designed for LCUI, with this language you can easily implement data binding and event binding in the UI.
-- [LCUI.css](https://github.com/lc-ui/lcui.css) - A UI component framework for building LCUI application.
-- [LCFinder](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.
+- [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 pre-built LCUI bindings, with its language features and JSX syntax support to easily create interactive graphical interfaces based on LCUI.
 
-## Documentation
+### Design reference
 
-- Tutorial: [https://docs.lcui.lc-soft.io/](https://docs.lcui.lc-soft.io/) 
-- Changelog: [docs/CHANGES.md](docs/CHANGES.md)
+- [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
+
+### Windows
+
+clone and run the [lc-ui/lcui-quick-start](https://github.com/lc-ui/lcui-quick-start) repository to see a minimal LCUI app in action:
+
+```shell
+# Clone repository
+git clone https://github.com/lc-ui/lcui-quick-start
+
+# Go into the repository
+cd lcui-quick-start
+
+# Install NodeJS dependencies
+npm install
+
+# Install C/C++ dependencies for x64 CPU architecture
+lcpkg install --arch x64
 
-The English version of the documentation is not available, please check the files in the [test](test) directory and the source code of the related projects above.
+# Run the app with debug mode
+lcpkg run start --mode debug
+```
 
-## Building
+Want to write an LCUI application from scratch? you can use [lcpkg](https://github.com/lc-soft/lcpkg) to quick install LCUI in your project directory:
 
-### Prerequisites
+```shell
+# Initialize the lcpkg configuration file to tell lcpkg about your project
+lcpkg init
 
-If you want to build full-featured LCUI, we suggest you install the following
- dependent libraries:
+# Download and install the compiled LCUI library from GitHub
+lcpkg install github.com/lc-soft/LCUI
+```
 
- * [libpng](http://www.libpng.org/pub/png/libpng.html) — PNG image compression library
- * [libjpeg](http://www.ijg.org/) — JPEG image compression library
- * [libxml2](http://xmlsoft.org/) — The XML C parser and toolkit
- * [libx11](https://www.x.org/) — X11 client-side library
- * [freetype](https://www.freetype.org/) — Font engine
- * [fontconfig](https://www.freedesktop.org/wiki/Software/fontconfig/) — Font configuration & location
+After successful installation, follow the help documentation output by lcpkg to configure your project's build configuration.
 
-If your system is Ubuntu, you can run following command to install dependencies:
+If you want to manually compile LCUI from source code, use lcpkg in the LCUI source directory to install the dependency libraries:
 
-    apt-get install libpng-dev libjpeg-dev libxml2-dev libfreetype6-dev libx11-dev libfontconfig1-dev
+```shell
+lcpkg install
+```
 
-### Building On Windows
+After that, [Visual Studio](https://visualstudio.microsoft.com/) to open the `build/windows/LCUI.sln` file, and then build LCUI.
 
-LCUI is mainly developed in the Windows environment, currently only Visual Studio solution file are available, you can use [Visual Studio](https://visualstudio.microsoft.com/) to open the file `build/windows/LCUI.sln` and build LCUI.
+### Ubuntu
 
-Installing a dependency library in windows is troublesome, but you can choose to use [vcpkg](https://github.com/Microsoft/vcpkg) to solve it:
+```shell
+# Install the dependencies
+sudo apt-get install libpng-dev libjpeg-dev libxml2-dev libfreetype6-dev libx11-dev
 
-    ./vcpkg install freetype libxml2 libjpeg-turbo libpng
+# Clone this repository
+git clone https://github.com/lc-soft/LCUI.git
 
-### Bootstrap
+# Go into the repository
+cd LCUI
 
-To bootstrap the build you need to run `./configure` (in the root of the source tree).
+# Generate automake configure script
+./autogen.sh
 
-In the simplest case you would run:
+# Check the build environment and configure automake scripts
+./configure
 
-    git clone https://github.com/lc-soft/LCUI.git
-    cd LCUI
-    ./autogen.sh
-    ./configure
-    make
-    make install
+# Build
+make
 
-If you want to experience the demo, please run:
+# If you wnat install LCUI
+sudo make install
 
-    cd test
-    make
-    ./helloworld
+# Go into test directory
+cd test
 
-If you want to use custom building options, please read the [INSTALL](INSTALL) file for more details.
+# 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
 
-Please read through our [contributing guidelines](/.github/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
+There are many ways to [contribute](CONTRIBUTING.md) to LCUI.
+
+- [Submit bugs](https://github.com/lc-soft/LCUI/issues) and help us verify fixes as they are checked in.
+- Fund to you interested issue on [IssueHunt](https://issuehunt.io/r/lc-soft/LCUI) to attract other developers to contribute.
+- Support this project on [OpenCollective](https://opencollective.com/LCUI).
+- Review the [source code changes](https://github.com/lc-soft/LCUI/pulls).
+- [Contribute bug fixes](CONTRIBUTING.md).
+
+LCUI has adopted the code of conduct defined by the Contributor Covenant. This document is used across many open source communities, and we think it articulates our values well. For more, see the [Code of Conduct](CODE_OF_CONDUCT.md).
+
+## Documentation
+
+- Tutorial: [https://docs.lcui.lc-soft.io/](https://docs.lcui.lc-soft.io/) (Chinese version only)
+- Changelog: [docs/CHANGES.md](docs/CHANGES.md)
+
+The English version of the documentation is not available, because the author does not have time to write the English version, please read the files in the [test](test) directory and related projects to learn how to use LCUI.
+
+## FAQ
+
+1. Why develop it?
+
+   - To explore and experiment new GUI development way
+   - Get more good job and make more money
+   - Leave a mark on the world
+   - Pass the time
+
+1. Is this a browser kernel? Or a development library like Electron that integrates the browser environment?
+
+    No, you can think of it as a traditional GUI development library that applied some Web technologies.
+
+1. Why do I choose the LCUI instead of Electron?
+
+    In contrast to fully functional Electron, small file size and low memory usage doesn't matter, except for technical research and communication, there's no reason to use LCUI.
+
+1. Is it the same as writing a web page?
+
+    Not exactly, there are the following differences need to be noted:
+
+    - The interface description file format is XML, slightly different from HTML.
+    - You need to implement all the features of your application in C code, which is much less development efficiency than JavaScript.
+    - No `<script>` tag, you can't embed JavaScript or C code like HTML.
+    - The widget is the basic layout element, not the text, and there is no `inline` display type.
+    - The scrollbar is a widget, and the `overflow: scroll;` style doesn't show scrollbars automatically, you need to create it and specify the container and scroll layer.
+    - All text is rendered by the TextView widget, which has a display type of `block` instead of `inline`.
+    - The widget does not overflow the bounding box of the parent widget, and the effect is similar to the applied style: `overflow: hidden;`.
+    - An absolutely positioned widget is always relative to its parent widget, not the first non-statically positioned widget of the parent.
+    - There are no tools like [Chrome Devtools](https://developers.google.com/web/tools/chrome-devtools) to debug graphical interfaces, you need to rely on your own imagination and development experience to verify that the bug is from your code or LCUI.。
+
+1. How about CSS support?
+
+    The following is a list of supported CSS features. Checked is supported (But does not mean full support). Unlisted properties are not supported by default.
+
+    <details>
+      <summary>CSS feature coverage</summary>
+
+      - at rules
+        - [x] `@font-face`
+        - [ ] `@keyframes`
+        - [ ] `@media`
+      - keywords
+        - [ ] `!important`
+      - selectors
+        - [x] `*`
+        - [x] `type`
+        - [x] `#id`
+        - [x] `.class`
+        - [x] `:hover`
+        - [x] `:focus`
+        - [x] `:active`
+        - [x] `:first-child`
+        - [x] `:last-child`
+        - [ ] `[attr="value"]`
+        - [ ] `:not()`
+        - [ ] `:nth-child()`
+        - [ ] `parent > child`
+        - [ ] `a ~ b`
+        - [ ] `::after`
+        - [ ] `::before`
+        - [ ] ...
+      - units
+        - [x] px
+        - [x] dp
+        - [x] sp
+        - [x] pt
+        - [x] %
+        - [ ] rem
+        - [ ] vh
+        - [ ] vw
+      - properties
+        - [x] top, right, bottom, left
+        - [x] width, height
+        - [x] visiblility
+        - [x] display
+          - [x] none
+          - [x] inline-block
+          - [x] block
+          - [x] flex
+          - [ ] inline
+          - [ ] grid
+          - [ ] table
+          - [ ] table-cell
+          - [ ] table-row
+          - [ ] table-column
+          - [ ] ...
+        - [x] position
+          - [x] static
+          - [x] relative
+          - [x] absolute
+          - [ ] fixed
+        - [x] box-sizing
+          - [x] border-box
+          - [x] content-box
+        - [x] border
+        - [x] border-radius
+        - [x] background-color
+        - [x] background-image
+        - [x] background-position
+        - [x] background-cover
+        - [ ] background
+        - [x] pointer-evnets
+        - [x] font-face
+        - [x] font-family
+        - [x] font-size
+        - [x] font-style
+        - [x] justify-content
+          - [x] flex-start
+          - [x] center
+          - [x] flex-end
+        - [ ] float
+        - [ ] transition
+        - [ ] transform
+        - [ ] flex
+        - [ ] ...
+    </details>
 
 ## License
 

README.zh-cn.md

@@ -4,7 +4,7 @@
   </a>
   <h3 align="center">LCUI</h3>
   <p align="center">
-    面向 C 的图形界面开发库，可借助 XML 和 CSS 构建简单的跨平台桌面应用
+    C 的图形界面开发库，可借助 XML 和 CSS 构建简单的跨平台桌面应用
   </p>
   <p align="center">
     <a href="https://travis-ci.org/lc-soft/LCUI"><img src="https://travis-ci.org/lc-soft/LCUI.png?branch=master" alt="Build Status"></a>
@@ -20,138 +20,297 @@
 ## 目录
 
 - [介绍](#介绍)
-- [许可](#许可)
-- [文档](#文档)
-- [构建](#构建)
-- [社区](#社区)
+    - [主要特性](#主要特性)
+    - [缺少的特性](#缺少的特性)
+    - [相关项目](#相关项目)
+    - [设计参考](#设计参考)
+- [快速上手](#快速上手)
+    - [Windows](#windows)
+    - [Ubuntu](#ubuntu)
 - [贡献](#贡献)
+- [文档](#文档)
+- [常见问题](#常见问题)
+- [许可](#许可)
 
 ## 介绍
 
-LCUI 是一个图形界面开发库，主要使用 C 语言编写，支持使用 CSS 和 XML 描述界面结构和样式，可用于构建简单的桌面应用程序。
+LCUI 是一个桌面端图形界面开发库，主要使用 C 语言编写，支持使用 CSS 和 XML 描述界面结构和样式，可用于构建简单的桌面应用程序。
 
 ### 主要特性
 
 - **C 语言编写：** 适用于体积较小且主要使用 C 语言实现的应用程序，以及偏向使用 C 语言编写简单应用的开发者。
-- **Trad 语言绑定：** [Trad](https://github.com/lc-soft/trad) 是一个专为 LCUI 而设计的语言，它能使创建交互式 UI 变得轻而易举。
 - **跨平台：** 支持 Windows 和 GNU/Linux 系统，可开发简单的 Windows 桌面应用和通用应用，以及 Linux 桌面应用。
-- **XML 解析：** 支持使用 XML 标记语言描述界面的结构，更少的代码量，更直观的表达方式，易于开发和维护。
-- **CSS 解析：** 支持使用 CSS 代码描述界面元素的位置、大小、背景、字体、边框等样式，与应用程序的逻辑分离，易于使用和修改。
-- **类 HTML 布局：** 与浏览器处理的网页布局类似，但目前只支持块级（block）、内联块级（inline-block）和简单的弹性（flex）布局，如果你有网页开发经验的话会比较容易上手。
-- **界面缩放：** 支持通过设置全局缩放比例来让界面适应不同像素密度的屏幕，也支持使用基于屏幕密度的 sp 和 dp 单位表示界面元素的位置和大小。
-- **文本绘制：** 支持为文本设置全局字体、行高、水平对齐方式，支持对局部文本块单独设置颜色、背景色、加粗、斜体。
-- **字体管理：** 支持加载多个字体文件，支持自定义界面中的标题、正文、引用、强调等类型的文本所使用的字体字族和风格。
-- **图片处理：** 提供图片读取接口，支持读取 jpg、png 和 bmp 格式的图片。支持逐行读取，可在读取图片的过程反馈读取进度。
+- **XML 和 CSS 解析：** 使用 XML 和 CSS 来描述界面的结构和样式，易于开发和维护。
+- **可缩放：** 支持全局缩放，支持使用基于屏幕密度的 sp 和 dp 单位表示界面元素的位置和大小。
+- **图片处理：** 支持读取 jpg、png 和 bmp 格式的图片。
 - **触控：** 支持多点触控，但目前只支持 Windows 系统。
 
 ### 缺少的特性
 
-LCUI 是一个个人项目，其主要用途是方便作者能够开发简单的图形界面应用，简单也就意味着功能很少，比如：
+LCUI 的主要用途是方便作者开发简单的图形界面应用，简单也就意味着功能很少，比如：
 
 - 没有硬件加速，图形渲染效率低下。
 - 不支持剪切板，你不能选中和复制界面中的文本，也不能从其它程序复制文本到 LCUI 程序中。
 - 输入法支持差，在 Linux 中仅支持输入英文字母和符号。
-- 当前版本并不支持渲染圆角边框。
 - 布局系统简单，不支持网格、表格等布局。
 
-如果你有上述问题的相关解决经验，可以通过提交问题（Issue）或拉取请求（Pull Request）来向我们提供技术支持。
+如今可参考的同类开源项目有很多，例如：[SDL](https://github.com/SDL-mirror/SDL)、[imgui](https://github.com/ocornut/imgui)，LCUI 中大部分缺少的特性都能在这些项目中找到相关实现，新功能的开发成本和复杂度也因此而降低了很多。开源此项目的原因之一是进行技术交流，如果你有同类项目的研究和使用经验，可以考虑向此项目提供改进方案。
 
 ### 相关项目
 
 想要了解 LCUI 具体能做什么？你可以查看以下项目：
 
-- [Trad](https://github.com/lc-soft/trad) - 一个专为简化 C 开发而设计的语言。凭借 LCUI 与其的语言绑定，能使创建交互式 UI 变得更简单。
-- [LCUI.css](https://github.com/lc-ui/lcui.css) - LCUI 组件库，包含了一些通用组件和 css 样式。
-- [LCFinder](https://github.com/lc-soft/LC-Finder) - 图片管理器，LCUI 的旗舰级应用程序，你可以将它作为参考对象，以此评估 LCUI 的性能、界面效果和开发复杂度是否符合你的需求。
+- [LC Design](https://github.com/lc-ui/lc-design) — 专为 LCUI 开发的组件库，包含了一些通用组件和 css 样式。
+- [LC Finder](https://github.com/lc-soft/LC-Finder) — 图片管理器，LCUI 的旗舰级应用程序，你可以将它作为参考对象，以此评估 LCUI 的性能、界面效果和开发复杂度是否符合你的需求。
+- [Trad](https://github.com/lc-soft/trad) — 一个基于 JavaScript 语法且可编译为 C 的语言，预置 LCUI 绑定，凭借其语言特性和 JSX 语法支持可轻松地基于 LCUI 来创建交互式的图形界面。
 
-## 许可
+### 设计参考
 
-LCUI 采用的开源许可证是 [MIT](http://opensource.org/licenses/MIT)。
+- [SDL](https://github.com/SDL-mirror/SDL/tree/master/src/video/x11) — x11 的驱动代码参考
+- [FreeType](https://www.freetype.org/freetype2/docs/design/design-3.html#section-1) — 数据结构的命名风格参考
+- [LevelDB](https://github.com/google/leveldb/blob/master/include/leveldb/c.h) — 函数命名风格参考
+- [jQuery](https://jquery.com/) — 部件操作接口的命名风格参考
+- [MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS) — CSS 标准参考
 
-## 文档
+## 快速上手
 
-- 在线教程：[https://lcui.lc-soft.io/guide/](https://lcui.lc-soft.io/guide/)
-- 更新日志：[CHANGELOG.zh-cn.md](CHANGELOG.zh-cn.md)
+### Windows
 
-目前还没有 API 参考文档，你可以参考头文件、源代码、示例程序以及作者开发过的相关程序来了解基本用法。
+从已有的[示例项目](https://github.com/lc-ui/lcui-quick-start)快速开始：
 
-## 构建
+```shell
+# 克隆这个仓库
+git clone https://github.com/lc-ui/lcui-quick-start
 
-### 依赖项
+# 进入仓库
+cd lcui-quick-start
 
-如果你想构建全特性的 LCUI，建议安装以下依赖库：
+# 安装 NodeJS 依赖包
+npm install
 
-- [libpng](http://www.libpng.org/pub/png/libpng.html) — PNG 图像压缩库
-- [libjpeg](http://www.ijg.org/) — JPEG 图像压缩库
-- [libxml2](http://xmlsoft.org/) — XML 解析器及相关工具集
-- [libx11](https://www.x.org/) — X11 客户端库
-- [freetype](https://www.freetype.org/) — 字体渲染引擎
+# 安装适用于 x64 CPU 架构的 C/C++ 依赖库
+lcpkg install --arch x64
 
-如果你的系统是 Ubuntu，可运行以下命令来安装依赖：
+# 以调试模式运行应用程序
+lcpkg run start --mode debug
+```
 
-    apt-get install libpng-dev libjpeg-dev libxml2-dev libfreetype6-dev libx11-dev
+想从零开始编写一个 LCUI 应用程序？你可以在你的项目目录里使用 [lcpkg](https://github.com/lc-soft/lcpkg) 来快速安装 LCUI：
 
-### 引导
+```shell
+# 初始化 lcpkg 配置文件，告诉 lcpkg 你的项目相关信息
+lcpkg init
 
-你需要运行 `./configure` (在源码根目录中) 以引导项目的构建。
+# 从 GitHub 下载安装已编译好的 LCUI 库
+lcpkg install github.com/lc-soft/LCUI
+```
 
-在最简单的情况下，你可以运行：
+安装成功后，按照 lcpkg 输出的帮助文档来配置你项目的编译参数。
 
-    git clone https://github.com/lc-soft/LCUI.git
-    cd LCUI
-    ./configure
+如果你想手动从源码编译 LCUI，请在 LCUI 的源码目录中使用 lcpkg 安装依赖库：
 
-如果未找到 ./configure，请运行 ./autogen.sh 脚本生成它。
+```shell
+lcpkg install
+```
 
-在 `./configure` 执行完后，运行以下命令编译源代码并安装 LCUI 的函数库和头文件：
+之后，使用 [Visual Studio](https://visualstudio.microsoft.com/) 打开 `build/windows/LCUI.sln` 文件，然后编译生成 LCUI。
 
-    make
-    make install
+### Ubuntu
 
-如果需要自定义编译器、编译参数、安装位置等配置，请阅读 [INSTALL](INSTALL) 文件了解详情。
+```shell
+# 安装依赖库
+sudo apt-get install libpng-dev libjpeg-dev libxml2-dev libfreetype6-dev libx11-dev
 
-测试和示例程序都存放在 test 目录中，如果需要运行他们请运行以下命令：
+# 克隆代码库
+git clone https://github.com/lc-soft/LCUI.git
 
-    cd test
-    make
+# 进入源码目录
+cd LCUI
 
-运行 helloworld 示例：
+# 生成配置脚本
+./autogen.sh
 
-    ./helloworld
+# 配置环境及构建工具
+./configure
 
-### 在 Windows 中构建
+# 构建
+make
 
-LCUI 主要是在 Windows 系统环境下开发的，目前只提供 Visual Studio 的解决方案文件（.sln）,你可以使用 [Visual Studio](https://visualstudio.microsoft.com/) 打开 `/build/windows/LCUI.sln` 文件，然后编译生成 LCUI。如果你用的是其它 IDE，请尝试按该 IDE 的方式创建项目并将源文件添加至项目内，然后编译。
+# 如果需要安装的话
+sudo make install
 
-上述的依赖库中除 Windows 系统用不到的 libx11 库外，都可以在 Windows 系统环境下编译生成，具体的编译方法你可以在教程中找到。如果你觉得编译这些依赖库很麻烦，可以使用 [vcpkg](https://github.com/Microsoft/vcpkg) 来安装它们，只需在命令行里输入如下命令：
+# 进入测试程序目录
+cd test
 
-    ./vcpkg install freetype libxml2 libjpeg-turbo libpng
+#  运行 helloworld 程序
+./helloworld
+```
 
-[发行版](https://github.com/lc-soft/LCUI/releases)的附件列表中一般也会有一个包含所有依赖库的压缩包可供使用。
+> **提示：** 如果需要自定义编译器、编译参数、安装位置等配置，请查阅 [INSTALL](INSTALL) 文件。
 
-## 社区
+## 贡献
 
-相信很多人已经习惯于看到那些活跃的开源项目，也习惯于向开源社区索取着各种资源，这些项目有着完善的文档、丰富的示例、活跃的社区还有成群的贡献者一起参与项目，即使自己什么都不用做，他们也能积极的发展下去。然而 LCUI 只是个个人项目，并未拥有这些资源，LCUI 的大多数功能都是按作者的需求而开发的，因此，如果你有什么需求，请先阅读以下内容。
+有很多方式可以为此项目的发展做贡献：
 
-- 遇到问题时请尽量花时间自己独立解决，实在无法解决的话，请再花些时间准备好详细的问题描述，然后按照下面给出的方法提交问题。
-- 普通的使用问题，请在[开源中国社区（问答板块）](https://www.oschina.net/question/tag/LCUI)、[SegmentFault](https://segmentfault.com/search?q=LCUI) 或 [Stackoverflow](https://stackoverflow.com/search?q=LCUI) 上提交问题并 @ 作者，这样作者在帮助你解决问题后至少能赚点积分/声望值，还能让搜索引擎多收录一条 LCUI 相关的内容，帮助其他遇到类似问题的人。
-- BUG、新功能建议、代码改进建议等核心开发相关的问题请提交至 [Issues](https://github.com/lc-soft/LCUI/issues) 页面中。
-- 如果你想提交自己的代码改进方案，请先向作者确认这个方案是否符合要求，确认之后再开始编写代码，务必遵循[现有代码风格](docs/CodingStyle.zh-cn.md)。在代码完成后，请提交拉取请求(Pull Request)，让作者决定是否拉取你的分支里的代码并合并至主分支，必要的话请补充单元测试。
-- 文档相关问题、需求及改进建议，请提交至 [LCUI-Guide](https://github.com/lc-ui/LCUI-Guide/issues) 项目里。
+- [反馈问题](https://github.com/lc-soft/LCUI/issues)并在问题关闭时帮助我们验证它们是否已经修复
+- 在 [IssueHunt](https://issuehunt.io/r/lc-soft/LCUI) 上为感兴趣的 issue 设置悬赏，吸引其他开发者参与开发
+- 在 [OpenCollective](https://opencollective.com/LCUI) 上赞助此项目
+- 审查[源代码的改动](https://github.com/lc-soft/LCUI/pulls)
+- 修复已知问题
 
-## 贡献
+本项目采用了参与者公约定义的行为准则，该文档应用于许多开源社区，有关更多信息，请参阅[《行为准则》](CODE_OF_CONDUCT.zh-cn.md)。
+
+## 文档
 
-LCUI 还有很多需要完善的地方，例如：
+- 在线教程：[https://lcui.lc-soft.io/guide/](https://lcui.lc-soft.io/guide/)
+- 更新日志：[CHANGELOG.zh-cn.md](CHANGELOG.zh-cn.md)
 
-- 部分头文件设计不合理，依赖太强。
-- 部分模块代码耦合度高。
-- 标识符命名不够规范。
-- 目录规划不够合理。
-- 不支持输入法。
-- 文档太少。
-- 示例太少。
-- 组件太少。
+目前还没有 API 参考文档，你可以参考头文件、源代码、示例程序以及上述的相关项目来了解基本用法。
+
+## 常见问题
+
+1. 为什么开发它？
+
+   - 探索和实验新的 GUI 开发方式
+   - 给职业生涯赚点加分项
+   - 找点存在感
+   - 打发时间
+
+1. 这是一个浏览器内核吗？或者是像 Electron 这样的集成了浏览器环境的开发库？
+
+    不是，你可以当成是一个应用了部分 Web 技术的传统 GUI 开发库。
+
+1. 我为什么要用 LCUI，而不是 Electron？
+
+    相较于功能完备的 Electron 而言，文件体积小、内存占用低并没有什么用，除了技术研究和交流外，你没有理由用 LCUI，
+
+1. 适合哪些人使用？
+
+    适合有 GUI 应用开发经验、熟悉 Web 前端开发技术、有意向参与开源项目的 C 开发者使用，最好是具备两年 C 开发经验和一年 web 前端开发经验。以时间来衡量上手门槛可能有点模糊，以下按照技术方向分别列出了一些主要条件，你可自行判断自己是否能够快速上手。
+
+    C：
+
+    - 熟悉 C 语言及编译相关工具链的配置，能解决编译问题
+    - 熟悉至少一种图形库和 GUI 库/框架，了解 GUI 应用程序的工作原理
+    - 熟悉多线程编程，能够解决线程安全、线程同步等问题
+    - 能熟练使用调试工具定位问题
+    - 有较多的开源项目源码阅读经验
+
+    Web 前端：
+
+    - 熟练掌握常见布局
+    - 熟悉 CSS 盒子模型和常用属性
+    - 有良好的 CSS 编码风格
+
+1. 和写网页一样吗？需要注意什么？
+
+    不完全一样，主要有以下差异需要注意：
+
+    - 界面描述文件格式是 XML，与 HTML 有一点区别。
+    - 本质上是在写 C 代码，开发效率比 JavaScript 低很多。
+    - 没有 `<script>` 标签，你不能像 HTML 那样内嵌 JavaScript 或 C 代码。
+    - 部件是基本的界面布局元素，不是文字，不支持图文混排，不存在 `inline` 显示类型。
+    - 滚动条是一个独立的部件，使用 `overflow: scroll;` 样式不会自动出现滚动条，你需要主动创建它并指定容器和滚动层。
+    - 所有文本由 TextView 部件渲染，它的显示类型为 `block` 而不是 `inline`。
+    - 部件不会溢出父级部件的边界框，效果类似于已应用样式：`overflow: hidden;`。
+    - 绝对定位的部件始终相对于其父级部件，而不是父级第一个非静态定位的部件。
+    - 没有像 [Chrome Devtools](https://developers.google.com/web/tools/chrome-devtools) 这样的工具来调试图形界面，你需要凭借自己的想象力和开发经验来验证 BUG 是来自你的代码还是 LCUI 内部的。
+
+1. CSS 支持度如何？
+
+    以下是支持的 CSS 特性列表，已勾选的是表示已支持（至少支持基本功能），未列出的属性则默认不支持。
+
+    <details>
+      <summary>CSS 特性覆盖范围</summary>
+
+      - at rules
+        - [x] `@font-face`
+        - [ ] `@keyframes`
+        - [ ] `@media`
+      - keywords
+        - [ ] `!important`
+      - selectors
+        - [x] `*`
+        - [x] `type`
+        - [x] `#id`
+        - [x] `.class`
+        - [x] `:hover`
+        - [x] `:focus`
+        - [x] `:active`
+        - [x] `:first-child`
+        - [x] `:last-child`
+        - [ ] `[attr="value"]`
+        - [ ] `:not()`
+        - [ ] `:nth-child()`
+        - [ ] `parent > child`
+        - [ ] `a ~ b`
+        - [ ] `::after`
+        - [ ] `::before`
+        - [ ] ...
+      - units
+        - [x] px
+        - [x] dp
+        - [x] sp
+        - [x] pt
+        - [x] %
+        - [ ] rem
+        - [ ] vh
+        - [ ] vw
+      - properties
+        - [x] top, right, bottom, left
+        - [x] width, height
+        - [x] visiblility
+        - [x] display
+          - [x] none
+          - [x] inline-block
+          - [x] block
+          - [x] flex
+          - [ ] inline
+          - [ ] grid
+          - [ ] table
+          - [ ] table-cell
+          - [ ] table-row
+          - [ ] table-column
+          - [ ] ...
+        - [x] position
+          - [x] static
+          - [x] relative
+          - [x] absolute
+          - [ ] fixed
+        - [x] box-sizing
+          - [x] border-box
+          - [x] content-box
+        - [x] border
+        - [x] border-radius
+        - [x] background-color
+        - [x] background-image
+        - [x] background-position
+        - [x] background-cover
+        - [ ] background
+        - [x] pointer-evnets
+        - [x] font-face
+        - [x] font-family
+        - [x] font-size
+        - [x] font-style
+        - [x] justify-content
+          - [x] flex-start
+          - [x] center
+          - [x] flex-end
+        - [ ] float
+        - [ ] transition
+        - [ ] transform
+        - [ ] flex
+        - [ ] ...
+    </details>
+
+1. 我想要 ???? 功能，就像 ???? 里的那样。
+
+    请先[新建 issue](https://github.com/lc-soft/LCUI/issues/new/choose)，按照已有的模板补全内容。
+
+1. 求添加 JavaScript/Python/Go/Rust/PHP/C#/Java 语言绑定
+
+    已有官方支持的 [Trad](https://github.com/lc-soft/trad) 语言绑定，不考虑添加其它语言绑定。如果你实在需要的话可以自己动手设计，毕竟你比作者更懂这些语言的编程思想和设计哲学，也算是一个展现技术实力的好机会。
 
-由于 LCUI 是一个与作者职业无关的项目，在此项目上投入过多时间对于作者的意义并不大，因此受限于时间成本问题，像图形渲染优化、输入法支持、文档撰写、琐碎小功能等这类耗时长、收益低的工作，现阶段都不会安排在主线分支上。除去这里简单说明的一些待改进的地方外，在 LCUI 的源代码中也会有一些被 FIXME 注释标记的待改进的代码，通常这些注释还会说明为什么改进它，以及怎么改进它，如果你感兴趣，可以留意源代码中的 FIXME 注释内容，或者[直接搜索 FIXME 注释](https://github.com/lc-soft/LCUI/search?q=FIXME&unscoped_q=FIXME)。
+## 许可
 
-本项目是以技术交流为主要目的而开放源代码的，如果你有相关问题解决经验，可以向此项目提供支持，与其他人分享你的经验，但在参与贡献之前，请先阅读[这篇贡献指南](CONTRIBUTING.md)。
+LCUI 采用的开源许可证是 [MIT](http://opensource.org/licenses/MIT)。