Welcome to the world of LCDesign! This UI component framework is designed for building applications using LCUI. With a set of flexible styles and utilities, you’ll find it easy to craft beautiful and functional user interfaces. In this guide, we will walk you through the process of getting started with LCDesign, from installation to usage.

Table of Contents

• Introduction
• Components
• Quick Start
• Build
  • Prerequisites
  • Build Targets
• Install
• Design Reference
• Creator
• Legal

Introduction

LCDesign, or LCs Design, is a powerful UI component framework that is built to enhance the LCUI application experience. It offers a variety of styles for typography, simple layout systems, and CSS components. The framework closely follows the principles of Bootstrap, meaning it will feel familiar if you’ve worked with that before.

Important Note: This framework is not meant for web front-end development. To experience its features, you need to download the source code, build it, and run the demo properly.

Components

LCDesign is rich in components that enhance user interaction. Here’s a brief overview of the main categories:

• General
  • Button
  • Icon
  • Typography
• Navigation
  • Dropdown
• Data Entry
  • Checkbox
  • Radio
  • Rate
  • Switch
• Data Display
  • Tooltip
• Feedback
  • Alert
  • Modal
  • Message
  • Notification
  • Spinner

Quick Start

Ready to dive in? Here are two quick ways you can get started with LCDesign:

• Clone and Run the lc-uilc-design-app repository:

# Clone this repository
git clone https://github.com/lc-uilc-design-app
# Go into the repository
cd lc-design-app
# Install NodeJS dependencies
npm install
# Install C/C++ dependencies for x64 CPU architecture
lcpkg install --arch x64
# Run the app with debug mode
lcpkg run start --mode debug

• Install with lcpkg:

# Install with default options
lcpkg install github.com/lc-uilc-design
# For x64 CPU architecture
lcpkg install github.com/lc-uilc-design --arch x64
# For Universal Windows Platform (UWP)
lcpkg install github.com/lc-uilc-design --arch x64 --platform uwp

• Download the Latest Release: You can also find the latest build on its releases page here.

Build

For those on Linux or other platforms without a binary package, you need to manually download the source code and build it yourself.

Prerequisites

To build LCDesign, ensure you have installed the following tools:

• XMake – A build tool for compiling C source code.
• NodeJS – A JavaScript runtime needed for building tools.
• Python – Required for running various build scripts.

Once installed, run this command to gather the other dependencies:

pip install misaka pygments
npm install

Build Targets

Depending on your needs, different build commands are available:

npm run build                           # Build all targets.
npm run build-bin                        # Build binary files.
npm run build-css                        # Build CSS file.
npm run build-font                       # Build icon font file.
npm run build-demo                       # Build demo application.
npm run build-demo-assets                # Build demo application assets.
npm run build-demo-bin                   # Build demo binary file.
npm run build-demo-css                   # Build demo CSS file.
npm run build-demo-docs                  # Build demo application documentation.
npm run demo                             # Run demo application.

Install

To include LCDesign in your project, move the files from the dist directory into your own project directory, and configure the asset paths properly. We recommend the following directory structure:

yourapp
└── app
    ├── assets
    │   ├── stylesheets
    │   │   ├── app.css
    │   │   └── lcui.css
    │   ├── views
    │   │   └── app.xml
    │   └── fonts
    │       └── iconfont.ttf
    └── images

This layout helps in easily managing files and integrating LCDesign components smoothly.

Design Reference

For deeper insights into design principles, you can check:

• Bootstrap
• Ant Design
• Element UI

Creator

LCDesign is crafted by Liu Chao. You can connect with him through:

• Website
• GitHub Profile

Legal

This project is licensed under the MIT License.

Troubleshooting

If you encounter issues during setup or building, consider the following troubleshooting tips:

• Ensure all prerequisites are accurately installed.
• Check your directory structure; it should match the recommended structure.
• Review your console errors for specific indicators of what may have gone wrong.
• Make sure you are using compatible versions of NodeJS and Python.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.