WIP Debootstrapify

public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/_bootstrap.scss

@@ -14,7 +14,8 @@ $icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
 @import "~bootstrap-sass/assets/stylesheets/bootstrap/scaffolding";
 @import "~bootstrap-sass/assets/stylesheets/bootstrap/type";
 @import "~bootstrap-sass/assets/stylesheets/bootstrap/code";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/grid";
+//@import "~bootstrap-sass/assets/stylesheets/bootstrap/grid";
+@import "bootstrap-overrides/grid";
 @import "~bootstrap-sass/assets/stylesheets/bootstrap/tables";
 @import "~bootstrap-sass/assets/stylesheets/bootstrap/forms";
 @import "~bootstrap-sass/assets/stylesheets/bootstrap/buttons";

public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/bootstrap-overrides/_grid.scss

@@ -0,0 +1,94 @@
+//
+// Grid system
+// --------------------------------------------------
+
+
+// Container widths
+//
+// Set the container width, and override it for fixed navbars in media queries.
+
+//.container {
+//    @include container-fixed;
+//
+//    @media (min-width: $screen-sm-min) {
+//        width: $container-sm;
+//    }
+//    @media (min-width: $screen-md-min) {
+//        width: $container-md;
+//    }
+//    @media (min-width: $screen-lg-min) {
+//        width: $container-lg;
+//    }
+//}
+
+
+// Fluid container
+//
+// Utilizes the mixin meant for fixed width containers, but without any defined
+// width for fluid, full width layouts.
+
+.container-fluid {
+    @include container-fixed;
+}
+
+
+// Row
+//
+// Rows contain and clear the floats of your columns.
+
+.row {
+    @include make-row;
+}
+
+.row-no-gutters {
+    margin-right: 0;
+    margin-left: 0;
+
+    [class*="col-"] {
+        padding-right: 0;
+        padding-left: 0;
+    }
+}
+
+
+// Columns
+//
+// Common styles for small and large grid columns
+
+@include make-grid-columns;
+
+
+// Extra small grid
+//
+// Columns, offsets, pushes, and pulls for extra small devices like
+// smartphones.
+
+@include make-grid(xs);
+
+
+// Small grid
+//
+// Columns, offsets, pushes, and pulls for the small device range, from phones
+// to tablets.
+
+@media (min-width: $screen-sm-min) {
+    @include make-grid(sm);
+}
+
+
+// Medium grid
+//
+// Columns, offsets, pushes, and pulls for the desktop device range.
+
+@media (min-width: $screen-md-min) {
+    @include make-grid(md);
+}
+
+
+// Large grid
+//
+// Columns, offsets, pushes, and pulls for the large desktop device range.
+
+@media (min-width: $screen-lg-min) {
+    @include make-grid(lg);
+}

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html

@@ -5,47 +5,35 @@
       xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers" >
 
     <f:section name="Mainnav">
-        <div class="navbar-main-wrapper" x-data>
+        <div class="absolute top-0 left-0 w-full z-20 mt-12" x-data>
-            <nav class="container navbar navbar-default navbar-main{f:if(condition: data.tx_eptheme_hide_searchbar, then: ' navbar-main--no-searchbar')}">
+            <div class="relative bg-white flex items-end justify-between py-2 px-4 md:max-w-screen-xl md:mx-auto shadow-lg">
-                <f:render section="NavbarHeader" arguments="{_all}"/>
+                <a href="{f:uri.typolink(parameter: settings.defaultHomeUid)}" title="">
-                <div class="hidden-xs hidden-sm">
+                    <img class="w-32 md:w-48 lg:w-56 h-auto" src="{f:uri.image(src: settings.logoImage)}" alt="{settings.defaultTitle}">
+                </a>
+                <div class="hidden md:block">
                     <f:render section="FirstLevel" arguments="{navPid: settings.mainNavPid, mobile: 0}"/>
                 </div>
-                <div class="hidden-md hidden-lg">
+                <div class="block md:hidden">
                     <f:render section="FirstLevel" arguments="{navPid: settings.mobileNavPid, mobile: 1}"/>
                 </div>
+                <div class="flex md:hidden items-center space-x-4">
                     <f:if condition="{data.tx_eptheme_hide_searchbar}">
                         <f:else>
-                        <f:cObject typoscriptObjectPath="lib.searchBox"/>
+                            <button x-on:click.prevent="$store.show.searchBox = !$store.show.searchBox" class="block md:hidden focus:outline-none text-black">
+                                <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
+                            </button>
                         </f:else>
                     </f:if>
-            </nav>
+                    <button x-on:click.prevent="$store.show.mobileNav = !$store.show.mobileNav" class="block md:hidden focus:outline-none text-black">
+                        <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
+                    </button>
+                </div>
             </div>
-    </f:section>
-
-    <f:section name="NavbarHeader">
-        <div class="navbar-header">
-            <a x-on:click.prevent="$store.show.mobileNav = !$store.show.mobileNav" href="#" class="navbar-toggle collapsed" id="navtoggle">
-                <span class="sr-only">Toggle navigation</span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-            </a>
-            <f:if condition="{data.tx_eptheme_hide_searchbar}">
-                <f:else>
-                    <a x-on:click.prevent="$store.show.searchBox = !$store.show.searchBox" class="search hidden-md hidden-lg" href="#" id="searchboxtoggle">
-                        <i class="fa fa-search" aria-hidden="true"></i>
-                    </a>
-                </f:else>
-            </f:if>
-            <a class="navbar-brand" href="{f:uri.typolink(parameter: settings.defaultHomeUid)}" title="">
-                <img class="logo" src="{f:uri.image(src: settings.logoImage)}" alt="{settings.defaultTitle}">
-            </a>
         </div>
     </f:section>
 
     <f:section name="FirstLevel">
-        <div class="navbar-collapse"{f:if(condition: mobile, then: ' x-show="$store.show.mobileNav" x-cloak')}>
+        <div class="flex items-center justify-end space-x-4"{f:if(condition: mobile, then: ' x-show="$store.show.mobileNav" x-cloak')}>
             <ul class="nav navbar-nav">
                 <v:menu pageUid="{navPid}" entryLevel="1" useShortcutUid="true">
                     <f:for each="{menu}" as="topitem" iteration="outerIteration">

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Topnav.html

@@ -1,6 +1,6 @@
 {namespace v=FluidTYPO3\Vhs\ViewHelpers}
 {namespace ep=EP\EpTheme\ViewHelpers}
-<div class="area-nav">
+<div class="area-nav fixed top-0 left-0 z-50">
     <div class="area-nav__inner" x-data="{ open: false }">
         <f:spaceless>
             <f:if condition="{settings.hideAreaNavigation}">

tailwind.config.js

@@ -22,6 +22,10 @@ module.exports = {
         ],
     },
     theme: {
+        container: {
+            center: true,
+            padding: '2rem',
+        },
         fontFamily: {
             'sans': [ 'Lato', 'sans-serif' ],
         },
@@ -109,7 +113,4 @@ module.exports = {
     plugins: [
         require('@tailwindcss/custom-forms'),
     ],
-    corePlugins: {
-        container: false,
-    }
 }