diff --git a/docs/en/Blog-Posts/2021-05-03-LeptonX/POST.md b/docs/en/Blog-Posts/2021-05-03-LeptonX/POST.md index f75dcec74b..6dc3b30580 100644 --- a/docs/en/Blog-Posts/2021-05-03-LeptonX/POST.md +++ b/docs/en/Blog-Posts/2021-05-03-LeptonX/POST.md @@ -1,10 +1,10 @@ # LEPTON NEXT GENERATION -We are delighted and proud to announce that the next generation of [Lepton Theme](https://leptontheme.com/) which will be referred as `LeptonX` is on the way. The initial version is built upon Bootstrap v4. It is because, when we started working on this project, Bootstrap v5 was still on beta versions. We've decided that it would be a good idea to start with a stable Bootstrap version and also to make it extremely easy for ABP users to switch to the `LeptonX` since ABP packages are already dependant on Bootstrap v4. +We are delighted and proud to announce that the next generation of [Lepton Theme](https://leptontheme.com/) which will be referred as `LeptonX` is on the way. The initial version has been built upon Bootstrap v4. It is because, when we started working on this project, Bootstrap v5 was still on beta versions. We've decided that it would be a good idea to start with a stable Bootstrap version and also to make it extremely easy for ABP users to switch to the `LeptonX` since ABP packages are already dependant on Bootstrap v4. ![An image showing a tablet, a mobile, and a laptop device with LeptonX theme on their screens](./all-devices.png) -## Lite vs Pro +## Lite vs Pro The previous version of Lepton Theme has been only available to Commercial ABP customers and it has never been as a standalone template. With `LeptonX`, we aim at a broader audience. With this goal in mind, `LeptonX` will come in different shapes as follows: - A template with HTML, VanillaJS, CSS @@ -28,7 +28,8 @@ When people talk about Responsive Web Applications, they usually refer to a side On the other hand, widely used native mobile applications usually employ a tab menu stick to the bottom of the screen. People have become acquainted with this type of experience. With this UX in mind, menus in the `LeptonX` theme switches to the tab menu on mobile resolution as opposed to the hamburger menu. -![An iPhone image showing LeptonX theme mobile application](./mobile1.png) +![Three iPhones showing LeptonX theme for mobile resolution in dark, dim and light themes](./mobiles.png) +![Three iPads showing LeptonX theme for tablet resolution in dark, dim and light themes](./tablets.png) ** In the Lite version, a hamburger menu will take its place and behave like a standard RWA. @@ -46,6 +47,8 @@ The following layout will be provided as default for both lite and pro versions. ![An image showing default layout for LeptonX lite and pro packages](./default-layout.png) +** The Context Menu shown on the side is only available in Pro. + ## Multiple Layouts (Pro Only) `LeptonX` is being developed with such an architecture that it will be easy to replace the layout. You will be given many options to choose any layout you prefer. diff --git a/docs/en/Blog-Posts/2021-05-03-LeptonX/all-devices.png b/docs/en/Blog-Posts/2021-05-03-LeptonX/all-devices.png index beb7668876..e8d1e72b96 100644 Binary files a/docs/en/Blog-Posts/2021-05-03-LeptonX/all-devices.png and b/docs/en/Blog-Posts/2021-05-03-LeptonX/all-devices.png differ diff --git a/docs/en/Blog-Posts/2021-05-03-LeptonX/default-layout.png b/docs/en/Blog-Posts/2021-05-03-LeptonX/default-layout.png index 50559daef1..91e3ce214c 100644 Binary files a/docs/en/Blog-Posts/2021-05-03-LeptonX/default-layout.png and b/docs/en/Blog-Posts/2021-05-03-LeptonX/default-layout.png differ diff --git a/docs/en/Blog-Posts/2021-05-03-LeptonX/mobile1.png b/docs/en/Blog-Posts/2021-05-03-LeptonX/mobile1.png deleted file mode 100644 index 79bb154867..0000000000 Binary files a/docs/en/Blog-Posts/2021-05-03-LeptonX/mobile1.png and /dev/null differ diff --git a/docs/en/Blog-Posts/2021-05-03-LeptonX/mobiles.png b/docs/en/Blog-Posts/2021-05-03-LeptonX/mobiles.png new file mode 100644 index 0000000000..56a8624e4f Binary files /dev/null and b/docs/en/Blog-Posts/2021-05-03-LeptonX/mobiles.png differ diff --git a/docs/en/Blog-Posts/2021-05-03-LeptonX/tablets.png b/docs/en/Blog-Posts/2021-05-03-LeptonX/tablets.png new file mode 100644 index 0000000000..e9944e15f7 Binary files /dev/null and b/docs/en/Blog-Posts/2021-05-03-LeptonX/tablets.png differ diff --git a/docs/en/Blog-Posts/2021-05-03-LeptonX/top-menu-layout.png b/docs/en/Blog-Posts/2021-05-03-LeptonX/top-menu-layout.png index 58cc254849..b0edab8974 100644 Binary files a/docs/en/Blog-Posts/2021-05-03-LeptonX/top-menu-layout.png and b/docs/en/Blog-Posts/2021-05-03-LeptonX/top-menu-layout.png differ