From 1e9faf2efec7218d5fe96ac0c60b2100fabd66bf Mon Sep 17 00:00:00 2001
From: Awilum <awilum@msn.com>
Date: Wed, 15 Jan 2020 23:41:01 +0300
Subject: [PATCH] feat(admin-plugin): Migrate to Tailwind CSS

---
 .../admin/app/Controllers/ApiController.php   |  18 +-
 .../app/Controllers/EntriesController.php     |  48 +--
 .../app/Controllers/FieldsetsController.php   |  18 +-
 .../app/Controllers/PluginsController.php     |  14 +-
 .../app/Controllers/SettingsController.php    |   4 +-
 .../app/Controllers/SnippetsController.php    |  18 +-
 .../app/Controllers/TemplatesController.php   |  26 +-
 .../app/Controllers/ThemesController.php      |  14 +-
 .../admin/app/Controllers/ToolsController.php |  20 +-
 site/plugins/admin/assets/src/content.css     |  56 +++
 site/plugins/admin/assets/src/main.css        |  11 +
 site/plugins/admin/assets/src/nav.css         |  48 +++
 site/plugins/admin/assets/src/styles.css      |   9 +
 site/plugins/admin/assets/src/table.css       |  38 ++
 site/plugins/admin/dependencies.php           |  16 +-
 site/plugins/admin/gulpfile.js                | 176 +++------
 site/plugins/admin/package.json               |  53 +--
 site/plugins/admin/tailwind.config.js         |   5 +
 .../admin/templates/partials/base.html        | 367 +++++++-----------
 19 files changed, 490 insertions(+), 469 deletions(-)
 create mode 100644 site/plugins/admin/assets/src/content.css
 create mode 100644 site/plugins/admin/assets/src/main.css
 create mode 100644 site/plugins/admin/assets/src/nav.css
 create mode 100644 site/plugins/admin/assets/src/styles.css
 create mode 100644 site/plugins/admin/assets/src/table.css
 create mode 100644 site/plugins/admin/tailwind.config.js

diff --git a/site/plugins/admin/app/Controllers/ApiController.php b/site/plugins/admin/app/Controllers/ApiController.php
index 56d0767c..a000113d 100644
--- a/site/plugins/admin/app/Controllers/ApiController.php
+++ b/site/plugins/admin/app/Controllers/ApiController.php
@@ -35,7 +35,7 @@ class ApiController extends Controller
                     'api' => [
                         'link' => $this->router->pathFor('admin.api.index'),
                         'title' => __('admin_api'),
-                        'attributes' => ['class' => 'navbar-item active'],
+                        'attributes' => ['class' => 'btn active'],
                     ],
                 ],
             ]
@@ -63,12 +63,12 @@ class ApiController extends Controller
                     'api' => [
                         'link' => $this->router->pathFor('admin.api.index'),
                         'title' => __('admin_api'),
-                        'attributes' => ['class' => 'navbar-item'],
+                        'attributes' => ['class' => 'btn'],
                     ],
                     'api_tokens' => [
                         'link' => $this->router->pathFor('admin.api_tokens.index') . '?api=' . $api,
                         'title' => __('admin_' . $api),
-                        'attributes' => ['class' => 'navbar-item active'],
+                        'attributes' => ['class' => 'btn active'],
                     ],
                 ],
                 'buttons' => [
@@ -102,17 +102,17 @@ class ApiController extends Controller
                     'api' => [
                         'link' => $this->router->pathFor('admin.api.index'),
                         'title' => __('admin_api'),
-                        'attributes' => ['class' => 'navbar-item'],
+                        'attributes' => ['class' => 'btn'],
                     ],
                     'api_tokens' => [
                         'link' => $this->router->pathFor('admin.api_tokens.index') . '?api=' . $api,
                         'title' => __('admin_' . $api),
-                        'attributes' => ['class' => 'navbar-item'],
+                        'attributes' => ['class' => 'btn'],
                     ],
                     'api_tokens_add' => [
                         'link' => $this->router->pathFor('admin.api_tokens.add') . '?api=' . $api,
                         'title' => __('admin_create_new_' . $api . '_token'),
-                        'attributes' => ['class' => 'navbar-item active'],
+                        'attributes' => ['class' => 'btn active'],
                     ],
                 ],
             ]
@@ -197,17 +197,17 @@ class ApiController extends Controller
                     'api' => [
                         'link' => $this->router->pathFor('admin.api.index'),
                         'title' => __('admin_api'),
-                        'attributes' => ['class' => 'navbar-item'],
+                        'attributes' => ['class' => 'btn'],
                     ],
                     'api_tokens' => [
                         'link' => $this->router->pathFor('admin.api_tokens.index') . '?api=' . $api,
                         'title' => __('admin_' . $api),
-                        'attributes' => ['class' => 'navbar-item'],
+                        'attributes' => ['class' => 'btn'],
                     ],
                     'api_tokens_add' => [
                         'link' => $this->router->pathFor('admin.api_tokens.add') . '?api=' . $api,
                         'title' => __('admin_create_new_' . $api . '_token'),
-                        'attributes' => ['class' => 'navbar-item active'],
+                        'attributes' => ['class' => 'btn active'],
                     ],
                 ],
             ]
diff --git a/site/plugins/admin/app/Controllers/EntriesController.php b/site/plugins/admin/app/Controllers/EntriesController.php
index da2a5ec9..c29d0c5f 100644
--- a/site/plugins/admin/app/Controllers/EntriesController.php
+++ b/site/plugins/admin/app/Controllers/EntriesController.php
@@ -104,14 +104,14 @@ class EntriesController extends Controller
                                         'entries' => [
                                                 'link' => $this->router->pathFor('admin.entries.index'),
                                                 'title' => __('admin_entries'),
-                                                'attributes' => ['class' => 'navbar-item active']
+                                                'attributes' => ['class' => 'btn active']
                                             ]
                                         ],
                             'buttons'  => [
                                         'create' => [
                                                 'link'       => 'javascript:;',
                                                 'title'      => __('admin_create_new_entry'),
-                                                'attributes' => ['class' => 'float-right btn', 'data-toggle' => 'modal', 'data-target' => '#selectEntryTypeModal']
+                                                'attributes' => ['class' => 'btn', 'data-toggle' => 'modal', 'data-target' => '#selectEntryTypeModal']
                                             ]
                                         ]
                             ]
@@ -155,12 +155,12 @@ class EntriesController extends Controller
                                         'entries' => [
                                             'link' => $this->router->pathFor('admin.entries.index'),
                                             'title' => __('admin_entries'),
-                                            'attributes' => ['class' => 'navbar-item']
+                                            'attributes' => ['class' => 'btn']
                                         ],
                                         'entries_add' => [
                                             'link' => $this->router->pathFor('admin.entries.add') . '?id=' . $this->getEntryID($query),
                                             'title' => __('admin_create_new_entry'),
-                                            'attributes' => ['class' => 'navbar-item active']
+                                            'attributes' => ['class' => 'btn active']
                                             ]
                                         ]
                         ]
@@ -346,12 +346,12 @@ class EntriesController extends Controller
                                 'entries' => [
                                     'link' => $this->router->pathFor('admin.entries.index'),
                                     'title' => __('admin_entries'),
-                                    'attributes' => ['class' => 'navbar-item']
+                                    'attributes' => ['class' => 'btn']
                                 ],
                                 'entries_type' => [
                                     'link' => $this->router->pathFor('admin.entries.type') . '?id=' . $this->getEntryID($query),
                                     'title' => __('admin_type'),
-                                    'attributes' => ['class' => 'navbar-item active']
+                                    'attributes' => ['class' => 'btn active']
                                     ]
                                 ]
                         ]
@@ -452,12 +452,12 @@ class EntriesController extends Controller
                                 'entries' => [
                                     'link' => $this->router->pathFor('admin.entries.index'),
                                     'title' => __('admin_entries'),
-                                    'attributes' => ['class' => 'navbar-item']
+                                    'attributes' => ['class' => 'btn']
                                 ],
                                 'entries_move' => [
                                     'link' => $this->router->pathFor('admin.entries.move'),
                                     'title' => __('admin_move'),
-                                    'attributes' => ['class' => 'navbar-item active']
+                                    'attributes' => ['class' => 'btn active']
                                     ]
                                 ]
                         ]
@@ -529,12 +529,12 @@ class EntriesController extends Controller
                                 'entries' => [
                                     'link' => $this->router->pathFor('admin.entries.index'),
                                     'title' => __('admin_entries'),
-                                    'attributes' => ['class' => 'navbar-item']
+                                    'attributes' => ['class' => 'btn']
                                 ],
                                 'entries_type' => [
                                     'link' => $this->router->pathFor('admin.entries.rename') . '?id=' . $this->getEntryID($query),
                                     'title' => __('admin_rename'),
-                                    'attributes' => ['class' => 'navbar-item active']
+                                    'attributes' => ['class' => 'btn active']
                                     ]
                                 ]
                         ]
@@ -666,29 +666,29 @@ class EntriesController extends Controller
                             'entries' => [
                                 'link' => $this->router->pathFor('admin.entries.index') . '?id=' . implode('/', array_slice(explode("/", $this->getEntryID($query)), 0, -1)),
                                 'title' => __('admin_entries'),
-                                'attributes' => ['class' => 'navbar-item']
+                                'attributes' => ['class' => 'btn']
                             ],
                             'edit_entry' => [
                                 'link' => $this->router->pathFor('admin.entries.edit') . '?id=' . $this->getEntryID($query). '&type=editor',
                                 'title' => __('admin_editor'),
-                                'attributes' => ['class' => 'navbar-item']
+                                'attributes' => ['class' => 'btn']
                             ],
                             'edit_entry_media' => [
                                 'link' => $this->router->pathFor('admin.entries.edit') . '?id=' . $this->getEntryID($query) . '&type=media',
                                 'title' => __('admin_media'),
-                                'attributes' => ['class' => 'navbar-item']
+                                'attributes' => ['class' => 'btn']
                             ],
                             'edit_entry_source' => [
                                 'link' => $this->router->pathFor('admin.entries.edit') . '?id=' . $this->getEntryID($query) . '&type=source',
                                 'title' => __('admin_source'),
-                                'attributes' => ['class' => 'navbar-item active']
+                                'attributes' => ['class' => 'btn active']
                             ],
                         ],
                         'buttons' => [
                             'save_entry' => [
                                             'link'       => 'javascript:;',
                                             'title'      => __('admin_save'),
-                                            'attributes' => ['class' => 'js-save-form-submit float-right btn']
+                                            'attributes' => ['class' => 'js-save-form-submit btn']
                                         ],
                         ]
                 ]
@@ -708,22 +708,22 @@ class EntriesController extends Controller
                             'entries' => [
                                 'link' => $this->router->pathFor('admin.entries.index') . '?id=' . implode('/', array_slice(explode("/", $this->getEntryID($query)), 0, -1)),
                                 'title' => __('admin_entries'),
-                                'attributes' => ['class' => 'navbar-item']
+                                'attributes' => ['class' => 'btn']
                             ],
                             'edit_entry' => [
                                 'link' => $this->router->pathFor('admin.entries.edit') . '?id=' . $this->getEntryID($query) . '&type=editor',
                                 'title' => __('admin_editor'),
-                                'attributes' => ['class' => 'navbar-item']
+                                'attributes' => ['class' => 'btn']
                             ],
                             'edit_entry_media' => [
                                 'link' => $this->router->pathFor('admin.entries.edit') . '?id=' . $this->getEntryID($query) . '&type=media',
                                 'title' => __('admin_media'),
-                                'attributes' => ['class' => 'navbar-item active']
+                                'attributes' => ['class' => 'btn active']
                             ],
                             'edit_entry_source' => [
                                 'link' => $this->router->pathFor('admin.entries.edit') . '?id=' . $this->getEntryID($query) . '&type=source',
                                 'title' => __('admin_source'),
-                                'attributes' => ['class' => 'navbar-item']
+                                'attributes' => ['class' => 'btn']
                             ],
                         ]
                 ]
@@ -750,29 +750,29 @@ class EntriesController extends Controller
                             'entries' => [
                                 'link' => $this->router->pathFor('admin.entries.index') . '?id=' . implode('/', array_slice(explode("/", $this->getEntryID($query)), 0, -1)),
                                 'title' => __('admin_entries'),
-                                'attributes' => ['class' => 'navbar-item']
+                                'attributes' => ['class' => 'btn']
                             ],
                             'edit_entry' => [
                                 'link' => $this->router->pathFor('admin.entries.edit') . '?id=' . $this->getEntryID($query) . '&type=editor',
                                 'title' => __('admin_editor'),
-                                'attributes' => ['class' => 'navbar-item active']
+                                'attributes' => ['class' => 'btn active']
                             ],
                             'edit_entry_media' => [
                                 'link' => $this->router->pathFor('admin.entries.edit') . '?id=' . $this->getEntryID($query) . '&type=media',
                                 'title' => __('admin_media'),
-                                'attributes' => ['class' => 'navbar-item']
+                                'attributes' => ['class' => 'btn']
                             ],
                             'edit_entry_source' => [
                                 'link' => $this->router->pathFor('admin.entries.edit') . '?id=' . $this->getEntryID($query) . '&type=source',
                                 'title' => __('admin_source'),
-                                'attributes' => ['class' => 'navbar-item']
+                                'attributes' => ['class' => 'btn']
                             ],
                         ],
                         'buttons' => [
                             'save_entry' => [
                                             'link'       => 'javascript:;',
                                             'title'      => __('admin_save'),
-                                            'attributes' => ['class' => 'js-save-form-submit float-right btn']
+                                            'attributes' => ['class' => 'js-save-form-submit btn']
                                         ],
                         ]
                 ]
diff --git a/site/plugins/admin/app/Controllers/FieldsetsController.php b/site/plugins/admin/app/Controllers/FieldsetsController.php
index efcdbcf9..77bb3b22 100644
--- a/site/plugins/admin/app/Controllers/FieldsetsController.php
+++ b/site/plugins/admin/app/Controllers/FieldsetsController.php
@@ -29,14 +29,14 @@ class FieldsetsController extends Controller
                     'fieldsets' => [
                         'link' => $this->router->pathFor('admin.fieldsets.index'),
                         'title' => __('admin_fieldsets'),
-                        'attributes' => ['class' => 'navbar-item active'],
+                        'attributes' => ['class' => 'btn active'],
                     ],
                 ],
                 'buttons' => [
                     'fieldsets_add' => [
                         'link' => $this->router->pathFor('admin.fieldsets.add'),
                         'title' => __('admin_create_new_fieldset'),
-                        'attributes' => ['class' => 'float-right btn'],
+                        'attributes' => ['class' => 'btn'],
                     ],
                 ],
             ]
@@ -55,12 +55,12 @@ class FieldsetsController extends Controller
                     'fieldsets' => [
                         'link' => $this->router->pathFor('admin.fieldsets.index'),
                         'title' => __('admin_fieldsets'),
-                        'attributes' => ['class' => 'navbar-item'],
+                        'attributes' => ['class' => 'btn'],
                     ],
                     'fieldsets_add' => [
                         'link' => $this->router->pathFor('admin.fieldsets.add'),
                         'title' => __('admin_create_new_fieldset'),
-                        'attributes' => ['class' => 'navbar-item active'],
+                        'attributes' => ['class' => 'btn active'],
                     ],
                 ],
             ]
@@ -121,19 +121,19 @@ class FieldsetsController extends Controller
                     'fieldsets' => [
                         'link' => $this->router->pathFor('admin.fieldsets.index'),
                         'title' => __('admin_fieldsets'),
-                        'attributes' => ['class' => 'navbar-item'],
+                        'attributes' => ['class' => 'btn'],
                     ],
                     'fieldsets_editor' => [
                         'link' => $this->router->pathFor('admin.fieldsets.edit') . '?id=' . $request->getQueryParams()['id'],
                         'title' => __('admin_editor'),
-                        'attributes' => ['class' => 'navbar-item active'],
+                        'attributes' => ['class' => 'btn active'],
                     ],
                 ],
                 'buttons' => [
                     'save_entry' => [
                         'link' => 'javascript:;',
                         'title' => __('admin_save'),
-                        'attributes' => ['class' => 'js-save-form-submit float-right btn'],
+                        'attributes' => ['class' => 'js-save-form-submit btn'],
                     ],
                 ],
             ]
@@ -166,12 +166,12 @@ class FieldsetsController extends Controller
                     'fieldsets' => [
                         'link' => $this->router->pathFor('admin.fieldsets.index'),
                         'title' => __('admin_fieldsets'),
-                        'attributes' => ['class' => 'navbar-item'],
+                        'attributes' => ['class' => 'btn'],
                     ],
                     'fieldsets_rename' => [
                         'link' => $this->router->pathFor('admin.fieldsets.rename') . '?id=' . $request->getQueryParams()['id'],
                         'title' => __('admin_rename'),
-                        'attributes' => ['class' => 'navbar-item active'],
+                        'attributes' => ['class' => 'btn active'],
                     ],
                 ],
             ]
diff --git a/site/plugins/admin/app/Controllers/PluginsController.php b/site/plugins/admin/app/Controllers/PluginsController.php
index b80bf924..64b4ef8c 100644
--- a/site/plugins/admin/app/Controllers/PluginsController.php
+++ b/site/plugins/admin/app/Controllers/PluginsController.php
@@ -39,14 +39,14 @@ class PluginsController extends Controller
                     'plugins' => [
                         'link' => $this->router->pathFor('admin.plugins.index'),
                         'title' => __('admin_plugins'),
-                        'attributes' => ['class' => 'navbar-item active'],
+                        'attributes' => ['class' => 'btn active'],
                     ],
                 ],
                 'buttons' =>  [
                     'plugins_get_more' => [
                         'link' => 'https://github.com/flextype/plugins',
                         'title' => __('admin_get_more_plugins'),
-                        'attributes' => ['class' => 'float-right btn', 'target' => '_blank'],
+                        'attributes' => ['class' => 'btn', 'target' => '_blank'],
                     ],
                 ],
             ]
@@ -133,12 +133,12 @@ class PluginsController extends Controller
                     'plugins' => [
                         'link' => $this->router->pathFor('admin.plugins.index'),
                         'title' => __('admin_plugins'),
-                        'attributes' => ['class' => 'navbar-item'],
+                        'attributes' => ['class' => 'btn'],
                     ],
                     'plugins_information' => [
                         'link' => $this->router->pathFor('admin.plugins.information') . '?id=' . $request->getQueryParams()['id'],
                         'title' => __('admin_information'),
-                        'attributes' => ['class' => 'navbar-item active'],
+                        'attributes' => ['class' => 'btn active'],
                     ],
                 ],
             ]
@@ -193,19 +193,19 @@ class PluginsController extends Controller
                     'plugins' => [
                         'link' => $this->router->pathFor('admin.plugins.index'),
                         'title' => __('admin_plugins'),
-                        'attributes' => ['class' => 'navbar-item'],
+                        'attributes' => ['class' => 'btn'],
                     ],
                     'plugins_settings' => [
                         'link' => $this->router->pathFor('admin.plugins.settings') . '?id=' . $request->getQueryParams()['id'],
                         'title' => __('admin_settings'),
-                        'attributes' => ['class' => 'navbar-item active'],
+                        'attributes' => ['class' => 'btn active'],
                     ],
                 ],
                 'buttons' => [
                     'save_plugin_settings' => [
                         'link' => 'javascript:;',
                         'title' => __('admin_save'),
-                        'attributes' => ['class' => 'js-save-form-submit float-right btn'],
+                        'attributes' => ['class' => 'js-save-form-submit btn'],
                     ],
                 ],
             ]
diff --git a/site/plugins/admin/app/Controllers/SettingsController.php b/site/plugins/admin/app/Controllers/SettingsController.php
index 6fe241f0..52a05e4d 100644
--- a/site/plugins/admin/app/Controllers/SettingsController.php
+++ b/site/plugins/admin/app/Controllers/SettingsController.php
@@ -102,14 +102,14 @@ class SettingsController extends Controller
                     'settings' => [
                         'link' => $this->router->pathFor('admin.settings.index'),
                         'title' => __('admin_settings'),
-                        'attributes' => ['class' => 'navbar-item active'],
+                        'attributes' => ['class' => 'btn active'],
                     ],
                 ],
                 'buttons'  => [
                     'save' => [
                         'link'       => 'javascript:;',
                         'title'      => __('admin_save'),
-                        'attributes' => ['class' => 'js-save-form-submit float-right btn'],
+                        'attributes' => ['class' => 'js-save-form-submit btn'],
                     ],
                 ],
             ]
diff --git a/site/plugins/admin/app/Controllers/SnippetsController.php b/site/plugins/admin/app/Controllers/SnippetsController.php
index 4eaff181..32cae9d2 100644
--- a/site/plugins/admin/app/Controllers/SnippetsController.php
+++ b/site/plugins/admin/app/Controllers/SnippetsController.php
@@ -36,14 +36,14 @@ class SnippetsController extends Controller
                     'snippets' => [
                         'link' => $this->router->pathFor('admin.snippets.index'),
                         'title' => __('admin_snippets'),
-                        'attributes' => ['class' => 'navbar-item active'],
+                        'attributes' => ['class' => 'btn active'],
                     ],
                 ],
                 'buttons' => [
                     'snippets_create' => [
                         'link' => $this->router->pathFor('admin.snippets.add'),
                         'title' => __('admin_create_new_snippet'),
-                        'attributes' => ['class' => 'float-right btn'],
+                        'attributes' => ['class' => 'btn'],
                     ],
                 ],
             ]
@@ -67,12 +67,12 @@ class SnippetsController extends Controller
                     'snippets' => [
                         'link' => $this->router->pathFor('admin.snippets.index'),
                         'title' => __('admin_snippets'),
-                        'attributes' => ['class' => 'navbar-item'],
+                        'attributes' => ['class' => 'btn'],
                     ],
                     'snippets_rename' => [
                         'link' => $this->router->pathFor('admin.snippets.add'),
                         'title' => __('admin_create_new_snippet'),
-                        'attributes' => ['class' => 'navbar-item active'],
+                        'attributes' => ['class' => 'btn active'],
                     ],
                 ],
             ]
@@ -126,19 +126,19 @@ class SnippetsController extends Controller
                     'snippets' => [
                         'link' => $this->router->pathFor('admin.snippets.index'),
                         'title' => __('admin_snippets'),
-                        'attributes' => ['class' => 'navbar-item'],
+                        'attributes' => ['class' => 'btn'],
                     ],
                     'snippets_editor' => [
                         'link' => $this->router->pathFor('admin.snippets.edit') . '?id=' . $id,
                         'title' => __('admin_editor'),
-                        'attributes' => ['class' => 'navbar-item active'],
+                        'attributes' => ['class' => 'btn active'],
                     ],
                 ],
                 'buttons' => [
                     'save_snippet' => [
                         'link'       => 'javascript:;',
                         'title'      => __('admin_save'),
-                        'attributes' => ['class' => 'js-save-form-submit float-right btn'],
+                        'attributes' => ['class' => 'js-save-form-submit btn'],
                     ],
                 ],
             ]
@@ -183,12 +183,12 @@ class SnippetsController extends Controller
                     'snippets' => [
                         'link' => $this->router->pathFor('admin.snippets.index'),
                         'title' => __('admin_snippets'),
-                        'attributes' => ['class' => 'navbar-item'],
+                        'attributes' => ['class' => 'btn'],
                     ],
                     'snippets_rename' => [
                         'link' => $this->router->pathFor('admin.snippets.rename') . '?id=' . $request->getQueryParams()['id'],
                         'title' => __('admin_rename'),
-                        'attributes' => ['class' => 'navbar-item active'],
+                        'attributes' => ['class' => 'btn active'],
                     ],
                 ],
             ]
diff --git a/site/plugins/admin/app/Controllers/TemplatesController.php b/site/plugins/admin/app/Controllers/TemplatesController.php
index 7a41c894..b43a51b7 100644
--- a/site/plugins/admin/app/Controllers/TemplatesController.php
+++ b/site/plugins/admin/app/Controllers/TemplatesController.php
@@ -43,19 +43,19 @@ class TemplatesController extends Controller
                     'themes' => [
                         'link' => $this->router->pathFor('admin.themes.index'),
                         'title' => __('admin_themes'),
-                        'attributes' => ['class' => 'navbar-item'],
+                        'attributes' => ['class' => 'btn'],
                     ],
                     'templates' => [
                         'link' => $this->router->pathFor('admin.templates.index') . '?theme=' . $theme,
                         'title' => __('admin_templates'),
-                        'attributes' => ['class' => 'navbar-item active'],
+                        'attributes' => ['class' => 'btn active'],
                     ],
                 ],
                 'buttons' => [
                     'templates_create' => [
                         'link' => $this->router->pathFor('admin.templates.add') . '?theme=' . $theme,
                         'title' => __('admin_create_new_template'),
-                        'attributes' => ['class' => 'float-right btn'],
+                        'attributes' => ['class' => 'btn'],
                     ],
                 ],
             ]
@@ -83,17 +83,17 @@ class TemplatesController extends Controller
                     'themes' => [
                         'link' => $this->router->pathFor('admin.themes.index'),
                         'title' => __('admin_themes'),
-                        'attributes' => ['class' => 'navbar-item'],
+                        'attributes' => ['class' => 'btn'],
                     ],
                     'templates' => [
                         'link' => $this->router->pathFor('admin.templates.index') . '?theme=' . $theme,
                         'title' => __('admin_templates'),
-                        'attributes' => ['class' => 'navbar-item'],
+                        'attributes' => ['class' => 'btn'],
                     ],
                     'templates_add' => [
                         'link' => $this->router->pathFor('admin.templates.add') . '?theme=' . $theme,
                         'title' => __('admin_create_new_template'),
-                        'attributes' => ['class' => 'navbar-item active'],
+                        'attributes' => ['class' => 'btn active'],
                     ],
                 ],
             ]
@@ -162,24 +162,24 @@ class TemplatesController extends Controller
                     'themes' => [
                         'link' => $this->router->pathFor('admin.themes.index'),
                         'title' => __('admin_themes'),
-                        'attributes' => ['class' => 'navbar-item'],
+                        'attributes' => ['class' => 'btn'],
                     ],
                     'templates' => [
                         'link' => $this->router->pathFor('admin.templates.index') . '?theme=' . $theme,
                         'title' => __('admin_templates'),
-                        'attributes' => ['class' => 'navbar-item'],
+                        'attributes' => ['class' => 'btn'],
                     ],
                     'templates_editor' => [
                         'link' => $this->router->pathFor('admin.templates.edit') . '?id=' . $request->getQueryParams()['id'] . '&type=' . ($request->getQueryParams()['type'] && $request->getQueryParams()['type'] === 'partial' ? 'partial' : 'template') . '&theme=' . $theme,
                         'title' => __('admin_editor'),
-                        'attributes' => ['class' => 'navbar-item active'],
+                        'attributes' => ['class' => 'btn active'],
                     ],
                 ],
                 'buttons' => [
                     'save_template' => [
                         'link'       => 'javascript:;',
                         'title'      => __('admin_save'),
-                        'attributes' => ['class' => 'js-save-form-submit float-right btn'],
+                        'attributes' => ['class' => 'js-save-form-submit btn'],
                     ],
                 ],
             ]
@@ -232,17 +232,17 @@ class TemplatesController extends Controller
                     'themes' => [
                         'link' => $this->router->pathFor('admin.themes.index'),
                         'title' => __('admin_themes'),
-                        'attributes' => ['class' => 'navbar-item'],
+                        'attributes' => ['class' => 'btn'],
                     ],
                     'templates' => [
                         'link' => $this->router->pathFor('admin.templates.index') . '?theme=' . $theme,
                         'title' => __('admin_templates'),
-                        'attributes' => ['class' => 'navbar-item'],
+                        'attributes' => ['class' => 'btn'],
                     ],
                     'templates_rename' => [
                         'link' => $this->router->pathFor('admin.templates.rename') . '?id=' . $request->getQueryParams()['id'] . '&type=' . ($request->getQueryParams()['type'] && $request->getQueryParams()['type'] === 'partial' ? 'partial' : 'template') . '&theme=' . $theme,
                         'title' => __('admin_rename'),
-                        'attributes' => ['class' => 'navbar-item active'],
+                        'attributes' => ['class' => 'btn active'],
                     ],
                 ],
             ]
diff --git a/site/plugins/admin/app/Controllers/ThemesController.php b/site/plugins/admin/app/Controllers/ThemesController.php
index 9ed95182..b21a27a8 100644
--- a/site/plugins/admin/app/Controllers/ThemesController.php
+++ b/site/plugins/admin/app/Controllers/ThemesController.php
@@ -41,14 +41,14 @@ class ThemesController extends Controller
                     'themes' => [
                         'link' => $this->router->pathFor('admin.themes.index'),
                         'title' => __('admin_themes'),
-                        'attributes' => ['class' => 'navbar-item active'],
+                        'attributes' => ['class' => 'btn active'],
                     ],
                 ],
                 'buttons' => [
                     'themes_get_more' => [
                         'link' => 'https://github.com/flextype/themes',
                         'title' => __('admin_get_more_themes'),
-                        'attributes' => ['class' => 'float-right btn', 'target' => '_blank'],
+                        'attributes' => ['class' => 'btn', 'target' => '_blank'],
                     ],
                 ],
             ]
@@ -179,12 +179,12 @@ class ThemesController extends Controller
                     'themes' => [
                         'link' => $this->router->pathFor('admin.themes.index'),
                         'title' => __('admin_themes'),
-                        'attributes' => ['class' => 'navbar-item'],
+                        'attributes' => ['class' => 'btn'],
                     ],
                     'themes_information' => [
                         'link' => $this->router->pathFor('admin.themes.information') . '?id=' . $request->getQueryParams()['id'],
                         'title' => __('admin_information'),
-                        'attributes' => ['class' => 'navbar-item active'],
+                        'attributes' => ['class' => 'btn active'],
                     ],
                 ],
             ]
@@ -238,19 +238,19 @@ class ThemesController extends Controller
                     'themes' => [
                         'link' => $this->router->pathFor('admin.themes.index'),
                         'title' => __('admin_themes'),
-                        'attributes' => ['class' => 'navbar-item'],
+                        'attributes' => ['class' => 'btn'],
                     ],
                     'themes_settings' => [
                         'link' => $this->router->pathFor('admin.themes.settings') . '?id=' . $request->getQueryParams()['id'],
                         'title' => __('admin_settings'),
-                        'attributes' => ['class' => 'navbar-item active'],
+                        'attributes' => ['class' => 'btn active'],
                     ],
                 ],
                 'buttons' => [
                     'save_theme_settings' => [
                         'link' => 'javascript:;',
                         'title' => __('admin_save'),
-                        'attributes' => ['class' => 'js-save-form-submit float-right btn'],
+                        'attributes' => ['class' => 'js-save-form-submit btn'],
                     ],
                 ],
             ]
diff --git a/site/plugins/admin/app/Controllers/ToolsController.php b/site/plugins/admin/app/Controllers/ToolsController.php
index 476b37ce..b2368760 100644
--- a/site/plugins/admin/app/Controllers/ToolsController.php
+++ b/site/plugins/admin/app/Controllers/ToolsController.php
@@ -57,17 +57,17 @@ class ToolsController extends Controller
                     'information' => [
                         'link' => $this->router->pathFor('admin.tools.index'),
                         'title' => __('admin_information'),
-                        'attributes' => ['class' => 'navbar-item active'],
+                        'attributes' => ['class' => 'btn active'],
                     ],
                     'cache' => [
                         'link' => $this->router->pathFor('admin.tools.cache'),
                         'title' => __('admin_cache'),
-                        'attributes' => ['class' => 'navbar-item'],
+                        'attributes' => ['class' => 'btn'],
                     ],
                     'registry' => [
                         'link' => $this->router->pathFor('admin.tools.registry'),
                         'title' => __('admin_registry'),
-                        'attributes' => ['class' => 'navbar-item'],
+                        'attributes' => ['class' => 'btn'],
                     ],
                 ],
             ]
@@ -94,17 +94,17 @@ class ToolsController extends Controller
                     'information' => [
                         'link' => $this->router->pathFor('admin.tools.index'),
                         'title' => __('admin_information'),
-                        'attributes' => ['class' => 'navbar-item'],
+                        'attributes' => ['class' => 'btn'],
                     ],
                     'cache' => [
                         'link' => $this->router->pathFor('admin.tools.cache'),
                         'title' => __('admin_cache'),
-                        'attributes' => ['class' => 'navbar-item active'],
+                        'attributes' => ['class' => 'btn active'],
                     ],
                     'registry' => [
                         'link' => $this->router->pathFor('admin.tools.registry'),
                         'title' => __('admin_registry'),
-                        'attributes' => ['class' => 'navbar-item'],
+                        'attributes' => ['class' => 'btn'],
                     ],
                 ],
                 'buttons' => [
@@ -113,7 +113,7 @@ class ToolsController extends Controller
                         'id' => 'clear-cache-all',
                         'link' => $this->router->pathFor('admin.tools.clearCacheAllProcess'),
                         'title' => __('admin_clear_cache_all'),
-                        'attributes' => ['class' => 'float-right btn'],
+                        'attributes' => ['class' => 'btn'],
                     ],
                 ],
             ]
@@ -138,17 +138,17 @@ class ToolsController extends Controller
                     'information' => [
                         'link' => $this->router->pathFor('admin.tools.index'),
                         'title' => __('admin_information'),
-                        'attributes' => ['class' => 'navbar-item'],
+                        'attributes' => ['class' => 'btn'],
                     ],
                     'cache' => [
                         'link' => $this->router->pathFor('admin.tools.cache'),
                         'title' => __('admin_cache'),
-                        'attributes' => ['class' => 'navbar-item'],
+                        'attributes' => ['class' => 'btn'],
                     ],
                     'registry' => [
                         'link' => $this->router->pathFor('admin.tools.registry'),
                         'title' => __('admin_registry'),
-                        'attributes' => ['class' => 'navbar-item active'],
+                        'attributes' => ['class' => 'btn active'],
                     ],
                 ],
             ]
diff --git a/site/plugins/admin/assets/src/content.css b/site/plugins/admin/assets/src/content.css
new file mode 100644
index 00000000..4a2e47f5
--- /dev/null
+++ b/site/plugins/admin/assets/src/content.css
@@ -0,0 +1,56 @@
+.content
+{
+    position: relative;
+
+    flex-basis: 0;
+    flex-grow: 1;
+    flex-shrink: 1;
+
+    max-width: calc(100% - 64px);
+    height: 100vh;
+    margin-left: 64px;
+}
+
+.content .bars
+{
+    position: fixed;
+    z-index: 20;
+    top: 0;
+
+    width: calc(100% - 64px);
+}
+
+.content .inner
+{
+    position: relative;
+
+    padding: 20px;
+    padding-top: 120px;
+}
+
+.content .top-bar
+{
+    padding: 20px 0;
+
+    color: rgba(255, 255, 255, .7);
+    background: black;
+}
+
+.content .top-bar .btn
+{
+    padding: 23px;
+}
+
+.content .top-bar .btn.active,
+.content .top-bar .btn:hover
+{
+    opacity: 1;
+    background: rgba(255, 255, 255, .13);
+}
+
+.content .path-bar
+{
+    padding: 20px;
+
+    background: #f7f7f7;
+}
diff --git a/site/plugins/admin/assets/src/main.css b/site/plugins/admin/assets/src/main.css
new file mode 100644
index 00000000..f1f47ec9
--- /dev/null
+++ b/site/plugins/admin/assets/src/main.css
@@ -0,0 +1,11 @@
+main
+{
+    display: flex;
+
+    width: 100%;
+    height: 100vh;
+    min-height: 500px;
+
+    color: black;
+    background-color: white;
+}
diff --git a/site/plugins/admin/assets/src/nav.css b/site/plugins/admin/assets/src/nav.css
new file mode 100644
index 00000000..e42abb49
--- /dev/null
+++ b/site/plugins/admin/assets/src/nav.css
@@ -0,0 +1,48 @@
+nav
+{
+    position: fixed;
+    z-index: 20;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    width: 64px;
+    height: 100vh;
+
+    color: white;
+    background-color: black;
+}
+
+nav a
+{
+    position: relative;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    height: 100%;
+    padding: 24px;
+
+    cursor: pointer;
+
+    opacity: .7;
+}
+
+nav a.active,
+nav a:hover
+{
+    opacity: 1;
+    background: rgba(255, 255, 255, .13);
+}
+
+nav a.logo
+{
+    font-weight: bold;
+
+    height: 64px;
+}
diff --git a/site/plugins/admin/assets/src/styles.css b/site/plugins/admin/assets/src/styles.css
new file mode 100644
index 00000000..7420bba2
--- /dev/null
+++ b/site/plugins/admin/assets/src/styles.css
@@ -0,0 +1,9 @@
+@import 'tailwindcss/base';
+
+@import 'main';
+@import 'nav';
+@import 'content';
+@import 'table';
+
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
diff --git a/site/plugins/admin/assets/src/table.css b/site/plugins/admin/assets/src/table.css
new file mode 100644
index 00000000..bb3b1fb0
--- /dev/null
+++ b/site/plugins/admin/assets/src/table.css
@@ -0,0 +1,38 @@
+table tr:first-of-type td
+{
+    border-top: 0;
+}
+
+table > thead > tr > th
+{
+    font-weight: bold;
+
+    text-align: left;
+    text-transform: none;
+
+    color: black;
+    border-bottom-width: 1px;
+}
+
+table tbody tr:hover td,
+table tbody tr:hover th
+{
+    background: rgba(255, 255, 255, .13);
+}
+
+table > tbody > tr > td,
+table > thead > tr > td,
+table > tfoot > tr > td,
+table > tbody > tr > th,
+table > thead > tr > th,
+table > tfoot > tr > th
+{
+    font-size: 14px;
+
+    padding: 12.5px 20px;
+
+    vertical-align: middle;
+
+    color: black;
+    border-color: black;
+}
diff --git a/site/plugins/admin/dependencies.php b/site/plugins/admin/dependencies.php
index bd301bc0..aa498b24 100644
--- a/site/plugins/admin/dependencies.php
+++ b/site/plugins/admin/dependencies.php
@@ -18,14 +18,14 @@ use function Flextype\Component\I18n\__;
 I18n::$locale = $flextype->registry->get('settings.locale');
 
 // Add Admin Navigation
-$flextype->registry->set('admin_navigation.content.entries', ['title' => '<i class="fas fa-database"></i>' . __('admin_entries'), 'link' => $flextype->router->pathFor('admin.entries.index'), 'attributes' => ['class' => 'nav-link']]);
-$flextype->registry->set('admin_navigation.extends.fieldsets', ['title' => '<i class="far fa-list-alt"></i>' . __('admin_fieldsets'), 'link' => $flextype->router->pathFor('admin.fieldsets.index'), 'attributes' => ['class' => 'nav-link']]);
-$flextype->registry->set('admin_navigation.extends.themes', ['title' => '<i class="fas fa-palette"></i>' . __('admin_themes'), 'link' => $flextype->router->pathFor('admin.themes.index'), 'attributes' => ['class' => 'nav-link']]);
-$flextype->registry->set('admin_navigation.extends.snippets', ['title' => '<i class="far fa-file-code"></i>' . __('admin_snippets'), 'link' => $flextype->router->pathFor('admin.snippets.index'), 'attributes' => ['class' => 'nav-link']]);
-$flextype->registry->set('admin_navigation.extends.plugins', ['title' => '<i class="fas fa-plug"></i>' . __('admin_plugins'), 'link' => $flextype->router->pathFor('admin.plugins.index'), 'attributes' => ['class' => 'nav-link']]);
-$flextype->registry->set('admin_navigation.settings.tools', ['title' => '<i class="fas fa-toolbox"></i>' . __('admin_tools'), 'link' => $flextype->router->pathFor('admin.tools.index'), 'attributes' => ['class' => 'nav-link']]);
-$flextype->registry->set('admin_navigation.settings.settings', ['title' => '<i class="fas fa-cog"></i>' . __('admin_settings'), 'link' => $flextype->router->pathFor('admin.settings.index'), 'attributes' => ['class' => 'nav-link']]);
-$flextype->registry->set('admin_navigation.settings.api', ['title' => '<i class="fas fa-network-wired"></i>' . __('admin_api'), 'link' => $flextype->router->pathFor('admin.api.index'), 'attributes' => ['class' => 'nav-link']]);
+$flextype->registry->set('admin_navigation.content.entries', ['title' => '<i class="fas fa-database"></i>', 'link' => $flextype->router->pathFor('admin.entries.index'), 'attributes' => ['class' => 'nav-link']]);
+$flextype->registry->set('admin_navigation.extends.fieldsets', ['title' => '<i class="far fa-list-alt"></i>', 'link' => $flextype->router->pathFor('admin.fieldsets.index'), 'attributes' => ['class' => 'nav-link']]);
+$flextype->registry->set('admin_navigation.extends.themes', ['title' => '<i class="fas fa-palette"></i>', 'link' => $flextype->router->pathFor('admin.themes.index'), 'attributes' => ['class' => 'nav-link']]);
+$flextype->registry->set('admin_navigation.extends.snippets', ['title' => '<i class="far fa-file-code"></i>', 'link' => $flextype->router->pathFor('admin.snippets.index'), 'attributes' => ['class' => 'nav-link']]);
+$flextype->registry->set('admin_navigation.extends.plugins', ['title' => '<i class="fas fa-plug"></i>', 'link' => $flextype->router->pathFor('admin.plugins.index'), 'attributes' => ['class' => 'nav-link']]);
+$flextype->registry->set('admin_navigation.settings.tools', ['title' => '<i class="fas fa-toolbox"></i>', 'link' => $flextype->router->pathFor('admin.tools.index'), 'attributes' => ['class' => 'nav-link']]);
+$flextype->registry->set('admin_navigation.settings.settings', ['title' => '<i class="fas fa-cog"></i>', 'link' => $flextype->router->pathFor('admin.settings.index'), 'attributes' => ['class' => 'nav-link']]);
+$flextype->registry->set('admin_navigation.settings.api', ['title' => '<i class="fas fa-network-wired"></i>', 'link' => $flextype->router->pathFor('admin.api.index'), 'attributes' => ['class' => 'nav-link']]);
 
 // Add Global Vars Admin Twig Extension
 $flextype->view->addExtension(new GlobalVarsAdminTwigExtension($flextype));
diff --git a/site/plugins/admin/gulpfile.js b/site/plugins/admin/gulpfile.js
index 92d3b999..f18be46a 100755
--- a/site/plugins/admin/gulpfile.js
+++ b/site/plugins/admin/gulpfile.js
@@ -1,131 +1,55 @@
-//
-// Flextype Admin Gulp.js
-// (c) Sergey Romanenko <http://digital.flextype.org>
-//
+const gulp = require('gulp');
+const tailwindConfig = "tailwind.config.js";
+const mainCSS = "assets/src/styles.css";
 
-var Promise = require("es6-promise").Promise,
-    gulp = require('gulp'),
-    csso = require('gulp-csso'),
-    concat = require('gulp-concat'),
-    del = require('del'),
-    runSequence = require('run-sequence'),
-    sourcemaps = require('gulp-sourcemaps'),
-    autoprefixer = require('gulp-autoprefixer'),
-    sass = require('gulp-sass');
+/**
+ * Custom PurgeCSS Extractor
+ * https://github.com/FullHuman/purgecss
+ */
+class TailwindExtractor {
+  static extract(content) {
+    return content.match(/[\w-/:]+(?<!:)/g) || [];
+  }
+}
 
-gulp.task('admin-css', function() {
-    return gulp.src('assets/scss/admin.scss')
-        .pipe(sass().on('error', sass.logError))
-        .pipe(autoprefixer({
-            overrideBrowserslist: [
-                "last 1 version"
-            ],
-            cascade: false
-        }))
-        .pipe(csso())
-        .pipe(concat('admin.min.css'))
-        .pipe(gulp.dest('assets/dist/css/'));
+/**
+ * Task: gulp css
+ */
+gulp.task("css", function() {
+  const atimport = require("postcss-import");
+  const postcss = require("gulp-postcss");
+  const tailwindcss = require("tailwindcss");
+  const purgecss = require("gulp-purgecss");
+  const concat = require('gulp-concat');
+  const csso = require('gulp-csso');
+  const sourcemaps = require('gulp-sourcemaps');
+  const autoprefixer = require('gulp-autoprefixer');
+
+  return gulp
+    .src(mainCSS)
+    .pipe(postcss([atimport(), tailwindcss(tailwindConfig)]))
+    .pipe(
+      purgecss({
+        content: ["**/*.html", "../../**/*.md"],
+        extractors: [
+          {
+            extractor: TailwindExtractor,
+            extensions: ["html", "md"]
+          }
+        ]
+      })
+    )
+    .pipe(autoprefixer({
+        overrideBrowserslist: [
+            "last 1 version"
+        ],
+        cascade: false
+    }))
+    .pipe(csso())
+    .pipe(concat('build.min.css'))
+    .pipe(gulp.dest("assets/dist/css/"));
 });
 
-gulp.task('admin-light-css', function() {
-    return gulp.src('assets/scss/admin-light.scss')
-        .pipe(sass().on('error', sass.logError))
-        .pipe(autoprefixer({
-            overrideBrowserslist: [
-                "last 1 version"
-            ],
-            cascade: false
-        }))
-        .pipe(csso())
-        .pipe(concat('admin-light.min.css'))
-        .pipe(gulp.dest('assets/dist/css/'));
-});
-
-gulp.task('admin-css-clean', function() {
-    return del('assets/dist/css/admin.min.css');
-});
-
-gulp.task('build-css', function(){
-  return gulp.src(['node_modules/bootstrap/dist/css/bootstrap.min.css',
-                   'node_modules/animate.css/animate.min.css',
-                   'node_modules/trumbowyg/dist/ui/trumbowyg.min.css',
-                   'node_modules/trumbowyg/dist/plugins/table/ui/trumbowyg.table.css',
-                   'node_modules/codemirror/lib/codemirror.css',
-                   'node_modules/messenger-hubspot/build/css/messenger.css',
-                   'node_modules/messenger-hubspot/build/css/messenger-theme-flat.css',
-                   'assets/dist/css/admin.min.css'])
-                   .pipe(autoprefixer({
-                       overrideBrowserslist: [
-                           "last 1 version"
-                       ],
-                       cascade: false
-                   }))
-    .pipe(sourcemaps.init())
-    .pipe(concat('admin-build.min.css'))
-    .pipe(sourcemaps.write())
-    .pipe(gulp.dest('assets/dist/css/'));
-});
-
-gulp.task('js', function(){
-  return gulp.src(['node_modules/jquery/dist/jquery.min.js',
-                   'node_modules/popper.js/dist/umd/popper.min.js',
-                   'node_modules/bootstrap/dist/js/bootstrap.min.js',
-                   'node_modules/trumbowyg/dist/trumbowyg.min.js',
-                   'node_modules/trumbowyg/dist/plugins/noembed/trumbowyg.noembed.js',
-                   'node_modules/trumbowyg/dist/plugins/table/trumbowyg.table.js',
-                   'node_modules/codemirror/lib/codemirror.js',
-                   'node_modules/codemirror/mode/htmlmixed/htmlmixed.js',
-                   'node_modules/codemirror/mode/xml/xml.js',
-                   'node_modules/codemirror/mode/javascript/javascript.js',
-                   'node_modules/codemirror/mode/php/php.js',
-                   'node_modules/codemirror/mode/clike/clike.js',
-                   'node_modules/codemirror/mode/yaml/yaml.js',
-                   'node_modules/messenger-hubspot/build/js/messenger.min.js',
-                   'node_modules/messenger-hubspot/build/js/messenger-theme-flat.js',
-                   'node_modules/clipboard/dist/clipboard.min.js',
-                   'node_modules/bs-custom-file-input/dist/bs-custom-file-input.min.js',
-                   'node_modules/@fortawesome/fontawesome-free/js/all.min.js'
-                ])
-    .pipe(sourcemaps.init())
-    .pipe(concat('admin-build.min.js'))
-    .pipe(sourcemaps.write())
-    .pipe(gulp.dest('assets/dist/js/'));
-});
-
-gulp.task('trumbowyg-fonts', function(){
-  return gulp.src(['node_modules/trumbowyg/dist/ui/icons.svg'])
-    .pipe(gulp.dest('assets/dist/fonts/trumbowyg'));
-});
-
-gulp.task('trumbowyg-fonts', function(){
-  return gulp.src(['node_modules/trumbowyg/dist/ui/icons.svg'])
-    .pipe(gulp.dest('assets/dist/fonts/trumbowyg'));
-});
-
-gulp.task('trumbowyg-langs', function(){
-  return gulp.src(['node_modules/trumbowyg/dist/*langs/**/*'])
-    .pipe(gulp.dest('assets/dist/langs/trumbowyg'));
-});
-
-gulp.task('codemirror-theme-monokai', function(){
-  return gulp.src(['node_modules/codemirror/theme/monokai.css'])
-    .pipe(gulp.dest('assets/dist/css/'));
-});
-
-gulp.task('codemirror-theme-elegant', function(){
-  return gulp.src(['node_modules/codemirror/theme/elegant.css'])
-    .pipe(gulp.dest('assets/dist/css/'));
-});
-
-gulp.task('default', function(callback) {
-  runSequence('admin-css',
-                        ['build-css',
-                        'trumbowyg-fonts',
-                        'trumbowyg-langs',
-                        'js'],
-              'admin-css-clean',
-              'admin-light-css',
-              'codemirror-theme-monokai',
-              'codemirror-theme-elegant',
-              callback);
+gulp.task('watch', function () {
+    gulp.watch(["**/*.html", "../../**/*.md", "assets/src/"], gulp.series('css'));
 });
diff --git a/site/plugins/admin/package.json b/site/plugins/admin/package.json
index 3e1e4495..7b63ab2c 100755
--- a/site/plugins/admin/package.json
+++ b/site/plugins/admin/package.json
@@ -1,25 +1,32 @@
 {
-    "name": "admin",
-    "version": "0.9.6",
-    "devDependencies": {
-        "animate.css": "~3.7.2",
-        "bootstrap": "~4.4.1",
-        "bs-custom-file-input": "~1.3.2",
-        "clipboard": "~2.0.4",
-        "codemirror": "~5.49.2",
-        "@fortawesome/fontawesome-free": "5.11.2",
-        "del": "~3.0.0",
-        "es6-promise": "~4.2.5",
-        "gulp": "~3.9.1",
-        "gulp-autoprefixer": "~6.0.0",
-        "gulp-concat": "~2.6.1",
-        "gulp-csso": "~3.0.1",
-        "gulp-sass": "~4.0.2",
-        "gulp-sourcemaps": "~2.6.4",
-        "jquery": "~3.4.1",
-        "messenger-hubspot": "1.5.0-b2",
-        "popper.js": "~1.15.0",
-        "run-sequence": "~2.2.1",
-        "trumbowyg": "~2.20.0"
-    }
+  "name": "Admin",
+  "version": "0.9.7-DEV",
+  "description": "Admin theme for Flextype",
+  "homepage": "http://flextype.org",
+  "author": "Sergey Romanenko",
+  "license": "MIT",
+  "keywords": [
+    "flextype",
+    "cms",
+    "flat cms",
+    "flatfile cms",
+    "css",
+    "html"
+  ],
+  "bugs": {
+    "url": "https://github.com/flextype/flextype/issues"
+  },
+  "dependencies": {
+    "gulp": "^4.0.2",
+    "gulp-postcss": "^8.0.0",
+    "gulp-purgecss": "^1.2.0",
+    "gulp-autoprefixer": "^7.0.1",
+    "gulp-concat": "^2.6.1",
+    "gulp-csso": "^4.0.1",
+    "gulp-sourcemaps": "^2.6.5",
+    "postcss-import": "^12.0.1",
+    "@fullhuman/postcss-purgecss": "^1.3.0",
+    "tailwindcss": "^1.1.4",
+    "@fortawesome/fontawesome-free": "5.11.2"
+  }
 }
diff --git a/site/plugins/admin/tailwind.config.js b/site/plugins/admin/tailwind.config.js
new file mode 100644
index 00000000..22f7a0c9
--- /dev/null
+++ b/site/plugins/admin/tailwind.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  theme: {},
+  variants: {},
+  plugins: [],
+}
diff --git a/site/plugins/admin/templates/partials/base.html b/site/plugins/admin/templates/partials/base.html
index 67a4f53d..d774b4d1 100644
--- a/site/plugins/admin/templates/partials/base.html
+++ b/site/plugins/admin/templates/partials/base.html
@@ -14,11 +14,14 @@
 
         <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 
+
+        {#
         {% set admin_build = base_url() ~ '/site/plugins/admin/assets/dist/css/admin-build.min.css' %}
         {% set admin_elegant = base_url() ~ '/site/plugins/admin/assets/dist/css/elegant.css' %}
         {% set admin_light = base_url() ~ '/site/plugins/admin/assets/dist/css/admin-light.min.css' %}
         {% set admin_monokai = base_url() ~ '/site/plugins/admin/assets/dist/css/monokai.css' %}
 
+
         {% do assets.add('css', admin_build, 'admin', 1) %}
 
         {% if registry.settings.admin_panel.theme == 'light' %}
@@ -28,12 +31,20 @@
             {% do assets.add('css', admin_monokai, 'admin', 4) %}
         {% endif %}
 
+        #}
+
+        <script src="{{ base_url() ~ '/site/plugins/admin/node_modules/@fortawesome/fontawesome-free/js/all.min.js' }}" crossorigin="anonymous"></script>
+
+        {% set admin_build = base_url() ~ '/site/plugins/admin/assets/dist/css/build.min.css' %}
+        {% do assets.add('css', admin_build, 'admin', 1) %}
+
         {% for assets_admin in assets.get('css', 'admin') %}
             {% for assets_by_priorities in assets_admin %}
                 <link href="{{ assets_by_priorities.asset }}" rel="stylesheet">
             {% endfor %}
         {% endfor %}
 
+        {#
         <style media="screen">
             .editor {
                 background-color: #fff;
@@ -56,234 +67,146 @@
                 width: 100%;
             }
         </style>
+        #}
+
 
         {% do emitter.emit('onAdminThemeHeader') %}
     {% endblock %}
   </head>
-  <body {% if not is_logged %} class="content-full-size" {% endif %}>
-      <div class="wrapper">
+  <body>
+      <main>
+          <nav>
+              <ul>
+                  <li>
+                      <a href="{{ path_for('admin.entries.index') }}" class="logo active">F</a>
+                  </li>
+                  {% for key, item in registry.admin_navigation.content %}
+                      <li>
+                          <a href="{{ base_url() }}{{ item.link|raw }}"
+                          class="{% if key == menu_item %}active{% endif %}">{{ item.title|raw }}</a>
+                      </li>
+                  {% endfor %}
+                  {% for key, item in registry.admin_navigation.extends %}
+                      <li>
+                          <a href="{{ base_url() }}{{ item.link|raw }}"
+                          class="{% if key == menu_item %}active{% endif %}">{{ item.title|raw }}</a>
+                      </li>
+                  {% endfor %}
+                  {% for key, item in registry.admin_navigation.settings %}
+                      <li>
+                          <a href="{{ base_url() }}{{ item.link|raw }}"
+                          class="{% if key == menu_item %}active{% endif %}">{{ item.title|raw }}</a>
+                      </li>
+                  {% endfor %}
+                  {% for key, item in registry.admin_navigation.help %}
+                      <li>
+                          <a href="{{ item.link|raw }}"
+                          class="{% if key == menu_item %}active{% endif %}">{{ item.title|raw }}</a>
+                      </li>
+                  {% endfor %}
+              </ul>
+          </nav>
+          <div class="content">
+              <div class="bars clearfix">
+                  <div class="top-bar clearfix">
+                        {% if links or buttons %}
+                            {% if links %}
+                            <div class="lg:w-auto block float-left">
+                                {% for link in links %}
+                                    <a href="{{ link.link }}"
+                                    {% for key, attribute in link.attributes %}
+                                        {{ key }} = "{{ attribute }}"
+                                    {% endfor %}
+                                    >{{ link.title }}</a>
+                                {% endfor %}
+                            </div>
+                            {% endif %}
+                            {% if buttons %}
+                            <div class="lg:w-auto block float-right text-right">
+                                {% for button in buttons %}
+                                    {% if button.type == 'action' %}
+                                    <a href="{{ button.link }}"
+                                       onclick="event.preventDefault();
+                                                     document.getElementById('{{ button.id }}').submit();"
+                                                     {% for key, attribute in button.attributes %}
+                                                         {{ key }} = "{{ attribute }}"
+                                                     {% endfor %}>
+                                        {{ button.title }}
+                                    </a>
+                                    <form id="{{ button.id }}" action="{{ button.link }}" method="POST" style="display: none;">
+                                        {{ csrf() }}
+                                    </form>
+                                    {% else %}
+                                    <a href="{{ button.link }}"
+                                    {% for key, attribute in button.attributes %}
+                                        {{ key }} = "{{ attribute }}"
+                                    {% endfor %}
+                                    >{{ button.title|raw }}</a>
+                                    {% endif %}
+                                {% endfor %}
+                            </div>
+                            {% endif %}
+                        {% endif %}
+                  </div>
+                  <div class="path-bar">
+                      {% if is_current_path('admin.entries.index') or
+                            is_current_path('admin.entries.edit') or
+                            is_current_path('admin.entries.add') or
+                            is_current_path('admin.entries.move') or
+                            is_current_path('admin.entries.rename') or
+                            is_current_path('admin.entries.type') %}
+                          {% for part in parts %}
+                              {% set i = i - 1 %}
+                              {% if (part != last) %}
+                                  <a href="{{ path_for('admin.entries.index') }}?id={{ (parts|slice(0, -i))|join('/') }}"> / {{ part }}</a>
+                              {% else %}
+                                  / {{ part }}
+                              {% endif %}
+                          {% endfor %}
+                      {% endif %}
 
-      {% if is_logged %}
-          <div class="sidebar">
-              <div class="sidebar-wrapper">
-                  <div class="flextype-logo">
-                      <a href="{{ path_for('admin.entries.index') }}">
-                          FLEXTYPE
-                      </a>
-                      <a href="{{ base_url() }}" class="view-site-link" target="_blank" data-toggle="tooltip" data-placement="bottom" title="{{ tr('admin_view_site') }}">
-                          <i class="fas fa-external-link-alt"></i>
-                      </a>
-                  </div>
-                    <ul class="nav">
-                      {% for key, item in registry.admin_navigation.content %}
-                          <li class="nav-item {% if key == menu_item %} active {% endif %}">
-                              <a href="{{ base_url() }}{{ item.link|raw }}"
-                              {% for key, attribute in item.attributes %}
-                                  {{ key }} = {{ attribute }}
-                              {% endfor %}
-                              >{{ item.title|raw }}</a>
-                          </li>
-                      {% endfor %}
-                      {% for key, item in registry.admin_navigation.extends %}
-                          <li class="nav-item {% if key == menu_item %} active {% endif %}">
-                              <a href="{{ base_url() }}{{ item.link|raw }}"
-                              {% for key, attribute in item.attributes %}
-                                  {{ key }} = {{ attribute }}
-                              {% endfor %}
-                              >{{ item.title|raw }}</a>
-                          </li>
-                      {% endfor %}
-                      {% for key, item in registry.admin_navigation.settings %}
-                          <li class="nav-item {% if key == menu_item %} active {% endif %}">
-                              <a href="{{ base_url() }}{{ item.link|raw }}"
-                              {% for key, attribute in item.attributes %}
-                                  {{ key }} = {{ attribute }}
-                              {% endfor %}
-                              >{{ item.title|raw }}</a>
-                          </li>
-                      {% endfor %}
-                      {% for key, item in registry.admin_navigation.help %}
-                          <li class="nav-item {% if key == menu_item %} active {% endif %}">
-                              <a href="{{ item.link|raw }}"
-                              {% for key, attribute in item.attributes %}
-                                  {{ key }} = {{ attribute }}
-                              {% endfor %}
-                              >{{ item.title|raw }}</a>
-                          </li>
-                      {% endfor %}
-                  </ul>
-                  <div class="flextype-user">
-                        <ul class="nav">
-                            <li class="nav-item {% if item.item == menu_item %} active {% endif %}">
-                                <a class="nav-link" href="{{ path_for('admin.users.profile') }}">
-                                    <i class="fas fa-user-circle"></i>
-                                    <p>
-                                        {{ username }}
-                                    </p>
-                                </a>
-                            </li>
-                        </ul>
+                      {% if is_current_path('admin.themes.index') or
+                            is_current_path('admin.templates.index') or
+                            is_current_path('admin.templates.edit') or
+                            is_current_path('admin.templates.rename') or
+                            is_current_path('admin.templates.add') %}
+                          / <a href="{{ path_for('admin.templates.index') }}?theme={{ theme }}">{{ theme }}</a> {% if id %} / {{ id }}{% endif %}
+                      {% endif %}
+
+                      {% if is_current_path('admin.api.index') or
+                            is_current_path('admin.api_tokens.index') or
+                            is_current_path('admin.api_tokens.add') or
+                            is_current_path('admin.api_tokens.edit') %}
+                          / <a href="{{ path_for('admin.api_tokens.index') }}?api={{ api }}">{{ api }}</a>
+                      {% endif %}
+
+                      {% if is_current_path('admin.themes.information') or
+                            is_current_path('admin.themes.settings') %}
+                            {% if id %} / {{ id }}{% endif %}
+                      {% endif %}
+
+                      {% if is_current_path('admin.fieldsets.index') or
+                            is_current_path('admin.fieldsets.edit') or
+                            is_current_path('admin.fieldsets.rename') or
+                            is_current_path('admin.fieldsets.add') or
+                            is_current_path('admin.snippets.index') or
+                            is_current_path('admin.snippets.edit') or
+                            is_current_path('admin.snippets.rename') or
+                            is_current_path('admin.snippets.add') %}
+                          / {{ id }}
+                      {% endif %}
+
+                      {% if is_current_path('admin.plugins.index') or
+                            is_current_path('admin.plugins.information') or
+                            is_current_path('admin.plugins.settings') %}
+                          / {{ id }}
+                      {% endif %}
                   </div>
               </div>
+              <div class="inner">
+              {% block content %}{% endblock %}
+              </div>
           </div>
-          <div class="sidebar-off-canvas"></div>
-      {% endif %}
-
-        <div class="main-panel {% if not is_logged %}width-full{% endif %}">
-
-            {% if links or buttons %}
-            <nav class="navbar navbar-expand-lg navbar-fixed">
-                <div class="container-fluid">
-                    {% if links %}
-                    <div class="navbar-wrapper">
-                        {% for link in links %}
-                            <a href="{{ link.link }}"
-                            {% for key, attribute in link.attributes %}
-                                {{ key }} = "{{ attribute }}"
-                            {% endfor %}
-                            >{{ link.title }}</a>
-                        {% endfor %}
-                    </div>
-                    {% endif %}
-                    {% if buttons %}
-                    <div class="navbar-buttons">
-                        {% for button in buttons %}
-                            {% if button.type == 'action' %}
-                            <a href="{{ button.link }}"
-                               onclick="event.preventDefault();
-                                             document.getElementById('{{ button.id }}').submit();"
-                                             {% for key, attribute in button.attributes %}
-                                                 {{ key }} = "{{ attribute }}"
-                                             {% endfor %}>
-                                {{ button.title }}
-                            </a>
-
-                            <form id="{{ button.id }}" action="{{ button.link }}" method="POST" style="display: none;">
-                                {{ csrf() }}
-                            </form>
-                            {% else %}
-                            <a href="{{ button.link }}"
-                            {% for key, attribute in button.attributes %}
-                                {{ key }} = "{{ attribute }}"
-                            {% endfor %}
-                            >{{ button.title|raw }}</a>
-                            {% endif %}
-                        {% endfor %}
-                    </div>
-                    {% endif %}
-                </div>
-            </nav>
-            {% endif %}
-
-            {% if is_current_path('admin.entries.index') or
-                  is_current_path('admin.entries.edit') or
-                  is_current_path('admin.entries.add') or
-                  is_current_path('admin.entries.move') or
-                  is_current_path('admin.entries.rename') or
-                  is_current_path('admin.entries.type') %}
-            <div class="entry-editor-heading">
-                {% for part in parts %}
-                    {% set i = i - 1 %}
-                    {% if (part != last) %}
-                        <a href="{{ path_for('admin.entries.index') }}?id={{ (parts|slice(0, -i))|join('/') }}"> / {{ part }}</a>
-                    {% else %}
-                        / {{ part }}
-                    {% endif %}
-                {% endfor %}
-            </div>
-            {% endif %}
-
-            {% if is_current_path('admin.themes.index') or
-                  is_current_path('admin.templates.index') or
-                  is_current_path('admin.templates.edit') or
-                  is_current_path('admin.templates.rename') or
-                  is_current_path('admin.templates.add') %}
-            <div class="entry-editor-heading">
-                / <a href="{{ path_for('admin.templates.index') }}?theme={{ theme }}">{{ theme }}</a> {% if id %} / {{ id }}{% endif %}
-            </div>
-            {% endif %}
-
-            {% if is_current_path('admin.api.index') or
-                  is_current_path('admin.api_tokens.index') or
-                  is_current_path('admin.api_tokens.add') or
-                  is_current_path('admin.api_tokens.edit') %}
-            <div class="entry-editor-heading">
-                / <a href="{{ path_for('admin.api_tokens.index') }}?api={{ api }}">{{ api }}</a>
-            </div>
-            {% endif %}
-
-            {% if is_current_path('admin.themes.information') or
-                  is_current_path('admin.themes.settings') %}
-              <div class="entry-editor-heading">
-                  {% if id %} / {{ id }}{% endif %}
-              </div>
-            {% endif %}
-
-            {% if is_current_path('admin.fieldsets.index') or
-                  is_current_path('admin.fieldsets.edit') or
-                  is_current_path('admin.fieldsets.rename') or
-                  is_current_path('admin.fieldsets.add') or
-                  is_current_path('admin.snippets.index') or
-                  is_current_path('admin.snippets.edit') or
-                  is_current_path('admin.snippets.rename') or
-                  is_current_path('admin.snippets.add') %}
-            <div class="entry-editor-heading">
-                / {{ id }}
-            </div>
-            {% endif %}
-
-            {% if is_current_path('admin.plugins.index') or
-                  is_current_path('admin.plugins.information') or
-                  is_current_path('admin.plugins.settings') %}
-            <div class="entry-editor-heading">
-                / {{ id }}
-            </div>
-            {% endif %}
-
-            <div class="content entry-editor">
-                <div class="container-fluid">
-                    <div class="row">
-                        <div class="col-md-12">
-                            {% block content %}{% endblock %}
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        {% do emitter.emit('onAdminThemeFooter') %}
-
-        {% if registry.settings.locale == 'en_US' %}
-            {% set locale = 'en' %}
-        {% else %}
-            {% set locale = registry.settings.locale %}
-        {% endif %}
-
-        {% if registry.settings.locale != 'en_US' %}
-            {% set admin_trumbowyg_build = base_url() ~ '/site/plugins/admin/assets/dist/langs/trumbowyg/langs/' ~ registry.settings.locale|lower|slice(0,2) ~ '.min.js' %}
-            {% do assets.add('js', admin_trumbowyg_build, 'admin', 10) %}
-        {% endif %}
-
-        {% set admin_build = base_url() ~ '/site/plugins/admin/assets/dist/js/admin-build.min.js' %}
-        {% do assets.add('js', admin_build, 'admin', 1) %}
-        {% for assets_admin in assets.get('js', 'admin') %}
-            {% for assets_by_priorities in assets_admin %}
-                <script type="text/javascript" src="{{ assets_by_priorities.asset }}"></script>
-            {% endfor %}
-        {% endfor %}
-
-        {% include "plugins/admin/templates/partials/form-validator.html" %}
-        {% include "plugins/admin/templates/partials/messenger.html" %}
-        {% include "plugins/admin/templates/partials/clipboard.html" %}
-        {% include "plugins/admin/templates/partials/custom-file-input.html" %}
-        {% include "plugins/admin/templates/partials/trumbowyg.html" %}
-        {% include "plugins/admin/templates/partials/codemirror.html" %}
-        {% include "plugins/admin/templates/partials/forms-save.html" %}
-        {% include "plugins/admin/templates/partials/datetimepicker.html" %}
-        {% include "plugins/admin/templates/partials/tags.html" %}
-        {% include "plugins/admin/templates/partials/slugify.html" %}
-        {% include "plugins/admin/templates/partials/tooltips.html" %}
-
-        {% block tail %}{% endblock %}
-    </body>
+      </main>
+  </body>
 </html>