Serenity UI Lite is an open source library built upon the same core as Serenity UI, a FREE JavaScript library that extends the jQuery UI framework.
While the Serenity UI core is not open source, it is included with Serenity UI Lite as the foundation for the Serenity UI Lite Classes, Modules and Widgets.
The following table provides a comparison between Serenity UI Lite and Serenity UI.
| Feature | Source Code Provided | Serenity UI Lite | Serenity UI |
|---|---|---|---|
| Core | |||
| serenity functions | ⚪ | 🔵 | 🔵 |
| Class | ⚪ | 🔵 | 🔵 |
| DataSource | ⚪ | 🔵 | 🔵 |
| DataWidget | ⚪ | 🔵 | 🔵 |
| Router | ⚪ | 🔵 | 🔵 |
| ViewModel | ⚪ | 🔵 | 🔵 |
| Widget | ⚪ | 🔵 | 🔵 |
| Classes | |||
| Model | 🔵 | 🔵 | 🔵 |
| Overlay | 🔵 | 🔵 | 🔵 |
| Widgets | |||
| Autocomplete | 🔵 | 🔵 | 🔵 |
| Chart | ⚪ | ⚪ | 🔵 |
| Colorpalette | ⚪ | ⚪ | 🔵 |
| Combobox | 🔵 | 🔵 | 🔵 |
| Contextmenu | 🔵 | 🔵 | 🔵 |
| Dropdownlist | 🔵 | 🔵 | 🔵 |
| Filtermenu | 🔵 | 🔵 | 🔵 |
| Grid | ⚪ | ⚪ | 🔵 |
| Intervalselection | ⚪ | ⚪ | 🔵 |
| Kanban | ⚪ | ⚪ | 🔵 |
| Listview | 🔵 | 🔵 | 🔵 |
| Notification | 🔵 | 🔵 | 🔵 |
| Notificationpanel | 🔵 | 🔵 | 🔵 |
| Pagerpanel | 🔵 | 🔵 | 🔵 |
| Panel | 🔵 | 🔵 | 🔵 |
| Rating | 🔵 | 🔵 | 🔵 |
| Scheduler | ⚪ | ⚪ | 🔵 |
| Splitter | ⚪ | ⚪ | 🔵 |
| Table | 🔵 | 🔵 | 🔵 |
| Tagcloud | ⚪ | ⚪ | 🔵 |
| Timepicker | 🔵 | 🔵 | 🔵 |
| Tree | ⚪ | ⚪ | 🔵 |
| Tree (Lite) 🔺 | 🔵 | 🔵 | 🔵 |
🔺 - The Serenity UI Lite widget offers the "basic" functionality of the Serenity UI widget.
Download the Serenity UI Lite repository. The repository contains the following folders:
- css - CSS files, fonts and themes for Serenity UI and third party open source libraries.
- demos - Demos of the Serenity UI Lite classes and widgets.
- js - JavaScript files for Serenity UI and third party open source libraries.
To use Serenity UI, copy the css and js folders to your web application.
EXAMPLE
Assuming the Serenity UI Lite css and js folders were copied to your web application root folder.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Serenity UI CSS for Third Party Open Source Libraries -->
<link href="css/serenityui-lite-libs.min.css" rel="stylesheet" />
<!-- Serenity UI Theme -->
<link href="css/themes/base/serenityui-lite.min.css" rel="stylesheet" />
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- Serenity UI Lite for Third Party Open Source Libraries -->
<script src="js/serenityui-lite-libs.min.js"></script>
<!-- Serenity UI Core -->
<script src="js/serenityui-core.min.js"></script>
<!-- Serenity UI Lite -->
<script src="js/serenityui-lite.min.js"></script>
</head>
<body>
</body>
</html>