PureUI

Documentation: Pure UI

Welcome to PureUI, a lightweight, customizable web component library based on Shoelace Style. PureUI extends Shoelace with advanced components designed for building responsive and interactive user interfaces with minimal effort.

PureUI is built with web components, which means that you can use them in any framework you like, such as React, Vue, Angular, or even vanilla JavaScript. Web components are also framework-agnostic, so you can easily switch between frameworks without having to rewrite your UI code. Additionally, web components are encapsulated, which means that they are self-contained and don't pollute the global namespace, making it easier to maintain and debug your code.

Table of Contents

1. Introduction
2. Installation
3. Usage
4. Components Overview
5. Customization
6. Examples
7. API Documentation
8. Contributing
9. License

1. Introduction

PureUI is a collection of web components designed to streamline the process of building modern UIs. It enhances Shoelace by adding more advanced components while maintaining simplicity and performance. With PureUI, you can easily integrate responsive, accessible, and themeable elements into your web applications.

Key Features:

• Customizable: Built with customization in mind, PureUI components can be easily themed and adjusted to fit your design needs.
• Responsive: PureUI provides components that adapt seamlessly to different screen sizes.
• Lightweight: Focused on performance and efficiency, PureUI is designed to stay lightweight and fast.
• Localization: Components can be easily localized using the lang attribute. This attribute allows you to specify a custom translation for any component.
• Advanced Components: Includes a wide range of UI components like Calendar, Data Table, Select Combobox, Pagination, Smart Container, File Upload, and more.

2. Installation

PureUI can be easily installed using npm, yarn, or a CDN.

npm

npm install pure-uikit

yarn

yarn add pure-uikit

CDN

Include the following script tag in your HTML file:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/cdn/themes/light.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/cdn/pure-ui-autoloader.js"></script>

3. Usage

Once installed, you can start using PureUI components in your HTML or JavaScript files. Here's an example of using a SmartContainer component.

<p-smart-container>
  <p>This is a responsive container.</p>
</p-smart-container>

4. Components Overview

Here’s a brief overview of some of the most common and advanced PureUI components:

• SmartContainer: A responsive container that adjusts its layout dynamically.
• Calendar: An interactive calendar component with support for date selection and events.
• Data Table: A powerful data table with sorting, filtering, and pagination features.
• Select Combobox: A customizable dropdown with search functionality.
• Paginate: A pagination component to navigate large datasets easily.
• File Upload: A flexible file upload component with drag-and-drop support.
• More: We encourage you to build more components and share them with the community. Please refer to the Community section for more information.

5. Customization

PureUI is designed to be highly customizable. You can override default styles using CSS variables or modify component behavior via attributes and methods.

Example:

To customize a Button, you can use the following CSS variables:

p-button {
  --button-background-color: #3498db;
  --button-text-color: #ffffff;
}

6. Examples

Basic SmartContainer Example

<p-smart-container>
  <h1>Welcome to PureUI</h1>
  <p>This container adjusts its layout based on the screen size.</p>
</p-smart-container>

Calendar Example

<p-calendar></p-calendar>

Data Table Example

<p-table>
  <!-- table data here -->
</p-table>

File Upload Example

<p-file-upload></p-file-upload>

7. API Documentation

Each component in PureUI comes with its own set of attributes, properties, and events.

For full API details, visit the API documentation page.

8. Contributing

We welcome contributions to PureUI! If you'd like to contribute, please follow the steps below:

1. Fork the repository.
2. Create a new branch.
3. Submit a pull request.

For detailed guidelines, check out our contribution guide.

9. License

PureUI is licensed under the MIT License. See the LICENSE file for more details.

Thank you for choosing PureUI! We hope this library helps you build amazing user interfaces quickly and easily. For more information, visit our official website.

What are you using to build Pure UI?

Components are built with LitElement, a custom elements base class that provides an intuitive API and reactive data binding. The build is a custom script with bundling powered by esbuild.

Support Me

If you like this project, please consider buying me a coffee. Your support helps me to keep the project alive and improving it.