diff --git a/docs/en/UI/AspNetCore/Basic-Theme.md b/docs/en/UI/AspNetCore/Basic-Theme.md new file mode 100644 index 0000000000..3435e94a8b --- /dev/null +++ b/docs/en/UI/AspNetCore/Basic-Theme.md @@ -0,0 +1,3 @@ +# ASP.NET Core MVC / Razor Pages: The Basic Theme + +This document is in progress. See the [Theming](Theming.md) document. \ No newline at end of file diff --git a/docs/en/UI/AspNetCore/Theming.md b/docs/en/UI/AspNetCore/Theming.md index e41545635c..adce1e8e34 100644 --- a/docs/en/UI/AspNetCore/Theming.md +++ b/docs/en/UI/AspNetCore/Theming.md @@ -1,3 +1,75 @@ -# ASP.NET Core MVC / Razor Pages Theming +# ASP.NET Core MVC / Razor Pages: UI Theming -TODO \ No newline at end of file +ABP Framework provides a complete **UI Theming** system with the following goals: + +* Reusable [application modules](../../Modules/Index.md) are developed **theme-independent**, so they can work with any UI theme. +* UI theme is **decided by the final application**. +* The theme is distributed via NuGet/NPM packages, so it is **easily upgradable**. +* The final application can **customize** the selected theme. + +In order to accomplish these goals, ABP Framework; + +* Determines a set of **base libraries** used and adapted by all the themes. So, module and application developers can depend on and use these libraries without depending on a particular theme. +* Provides a system that consists of [navigation menus](Navigation-Menu.md), [toolbars](Toolbars.md), [layout hooks](Layout-Hooks.md)... that is implemented by all the themes. So, the modules and the application to contribute to the layout to compose a consistent application UI. + +## The Current Themes + +Currently, two themes are **officially provided**: + +* The [Basic Theme](Basic-Theme.md) is the minimalist theme with the plain Bootstrap style. It is **open source and free**. +* The [Lepton Theme](https://commercial.abp.io/themes) is a **commercial** theme developed by the core ABP team and is a part of the [ABP Commercial](https://commercial.abp.io/) license. + +There are also some community-driven themes for the ABP Framework (you can search on the web). + +## The Base Libraries + +All the themes must depend on the [@abp/aspnetcore.mvc.ui.theme.shared](https://www.npmjs.com/package/@abp/aspnetcore.mvc.ui.theme.shared) NPM package, so they are indirectly depending on the following libraries: + +* [Twitter Bootstrap](https://getbootstrap.com/) as the fundamental HTML/CSS framework. +* [JQuery](https://jquery.com/) for DOM manipulation. +* [DataTables.Net](https://datatables.net/) for data grids. +* [JQuery Validation](https://jqueryvalidation.org/) for client side & [unobtrusive](https://github.com/aspnet/jquery-validation-unobtrusive) validation +* [FontAwesome](https://fontawesome.com/) as the fundamental CSS font library. +* [SweetAlert](https://sweetalert.js.org/) to show fancy alert message and confirmation dialogs. +* [Toastr](https://github.com/CodeSeven/toastr) to show toast notifications. +* [Lodesh](https://lodash.com/) as a utility library. +* [Luxon](https://moment.github.io/luxon/) for date/time operations. +* [JQuery Form](https://github.com/jquery-form/form) for AJAX forms. +* [bootstrap-datepicker](https://github.com/uxsolutions/bootstrap-datepicker) to show date pickers. +* [Select2](https://select2.org/) for better select/combo boxes. +* [Timeago](http://timeago.yarp.com/) to show automatically updating fuzzy timestamps. +* [malihu-custom-scrollbar-plugin](https://github.com/malihu/malihu-custom-scrollbar-plugin) for custom scrollbars. + +These libraries are selected as the base libraries and available to the applications and modules. + +### Abstractions / Wrappers + +There are some abstractions in the ABP Framework to make your code independent from some of these libraries too. Examples; + +* [Tag Helpers](Tag-Helpers/Index.md) makes it easy to generate the Bootstrap UIs. +* JavaScript [Message](JavaScript-API/Message.md) and [Notification](JavaScript-API/Notify.md) APIs provides abstractions to use the Sweetalert and Toastr. +* [Forms & Validation](Forms-Validation.md) system automatically handles the validation, so you mostly don't directly type any validation code. + +## The Layouts + +The main responsibility of a theme is to provide the layouts. There are **three pre-defined layouts must be supported by all the themes**: + +* **Application**: The default layout which is used by the main application pages. +* **Account**: Mostly used by the [account module](../../Modules/Account.md) for login, register, forgot password... pages. +* **Empty**: The Minimal layout that has no layout components at all. + +Layout names are constants defined in the `Volo.Abp.AspNetCore.Mvc.UI.Theming.StandardLayouts` class. + +### The Application Layout + +This is the default layout which is used by the main application pages. The following image shows the user management page in the [Basic Theme](Basic-Theme.md) application layout: + +![basic-theme-application-layout](../../images/basic-theme-application-layout.png) + +And the same page is shown below with the [Lepton Theme](https://commercial.abp.io/themes) application layout: + +![basic-theme-application-layout](../../images/lepton-theme-application-layout.png) + +As you can see, the page is the same, but the look is completely different in the themes above. + +TODO... \ No newline at end of file diff --git a/docs/en/images/basic-theme-application-layout.png b/docs/en/images/basic-theme-application-layout.png new file mode 100644 index 0000000000..353e294056 Binary files /dev/null and b/docs/en/images/basic-theme-application-layout.png differ diff --git a/docs/en/images/lepton-theme-application-layout.png b/docs/en/images/lepton-theme-application-layout.png new file mode 100644 index 0000000000..3d89929abc Binary files /dev/null and b/docs/en/images/lepton-theme-application-layout.png differ