Helpful Page Layouts using Tailwind CSS

Tom Michew — Thu, 17 Jun 2021 16:43:51 +0000

If you're here you're probably familiar with the CSS utility goodness that is Tailwind CSS. Using the default Tailwind base classes you can quickly knockout some very nice page layouts.

I've done oodles of layouts using Bootstrap, and I wanted to learn more about Tailwind so I thought some hands-on practice would be helpful. These example responsive layouts all make use of Tailwind's Flexbox classes.

2-Column Layout with Sidebar

Here's a super-basic 2-column page layout with Tailwind. It has a sidebar on the left, and a scrollable main content area on the right. There is also a footer that sticks to the bottom regardless of content height. Since I wanted to place a nav menu in the Sidebar, I made the Sidebar sticky so that it's always visible on the left as the page is scrolled vertically. The entire layout has a contained with and centered using container mx-auto



<div class="container mx-auto">
    <div class="flex flex-row flex-wrap py-4">
        <aside class="w-full sm:w-1/3 md:w-1/4 px-2">
            <div class="sticky top-0 p-4 w-full">
                <!-- navigation -->
                <ul class="flex flex-col overflow-hidden">
                    ...
                </ul>
            </div>
        </aside>
        <main role="main" class="w-full sm:w-2/3 md:w-3/4 pt-1 px-2">
            <!-- content area -->
        </main>
    </div>
</div>
<footer class="mt-auto">
    ...
</footer>

Demo

Holy Grail Layout

Perhaps the most famous layout for dotcom era Web designers, here's a Tailwind implementation of the 3-column "Holy Grail". This layout is responsive so that the layout stacks vertically on smaller mobile screens. This fixed|fluid|fixed layout works well for pages that have a lot of content!



<div class="w-full flex flex-col sm:flex-row flex-wrap sm:flex-nowrap py-4 flex-grow">
    <!-- fixed-width -->
    <div class="w-fixed w-full flex-shrink flex-grow-0 px-4">
        <div class="sticky top-0 p-4 w-full h-full">
            <!-- nav goes here -->
        </div>
    </div>
    <main role="main" class="w-full flex-grow pt-1 px-3">
        <!-- fluid-width: main content goes here -->
    </main>
    <div class="w-fixed w-full flex-shrink flex-grow-0 px-2">
        <!-- fixed-width -->
        <div class="flex sm:flex-col px-2">
            <!-- sidebar goes here -->
        </div>
    </div>
</div>
<footer class="bg-black mt-auto">
    ...
</footer>

This layout also requires a little extra CSS to make the side columns fixed width...



@media (min-width: 640px) {
    .w-fixed {
        flex: 0 1 230px;
        min-width: 230px;
    }
}

The fixed widths are only applied above Tailwind's small breakpoint of 640px so that the layout stacks vertically on mobile devices.

Demo

Full-screen Background Image

This is the very popular full-screen background image layout that works perfectly for landing pages. You can easily change the center overlay content to a sign-up for or call-to-action card.

This layout is responsive so that the centered content area is full-width on mobile, 50% width on small devices and 33% width on large devices.



<div class="w-full p-4">
    <main role="main" class="w-full flex flex-col h-screen content-center justify-center">
        <div class="w-full sm:w-1/2 lg:w-1/3 bg-gray-50 rounded-xl m-auto">
            <div class="bg-white rounded shadow px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <!-- centered card -->
            </div>
        </div>
    </main>
</div>

Demo

Full-screen App Layout with Sidebar

This single-page "app" style layout features a sidebar, main content area, and footer. This full-height layout is never more than viewport height. The content area scrolls independently as needed. For this example, we're using the Tailwind CSS utility framework. As part of it's default classes, Tailwind includes Flexbox classes which make this layout implementation simple!

Additionally, this layout is responsive. As screen width decreases down to 640px (the smallest Tailwind breakpoint), the layout stacks vertically. The sidebar orientation is flipped from vertical to horizontal (flex-col sm:flex-row), and the main content area fills the remaining height above the footer.



<div class="w-full flex flex-col sm:flex-row flex-grow overflow-hidden">
    <div class="sm:w-1/3 md:1/4 w-full flex-shrink flex-grow-0 p-4">
        <div class="sticky top-0 p-4 w-full">
            <ul class="flex sm:flex-col overflow-hidden content-center justify-between">
                 <!-- nav goes here -->
            </ul>
        </div>
    </div>
    <main role="main" class="w-full h-full flex-grow p-3 overflow-auto">
         <!-- content area -->
    </main>
</div>
<footer class="mt-auto">
    ...
</footer>

Demo

Important! If you're going to use Tailwind, remember it's best to make it part of the JS build process so that you can choose the parts you need. The Tailwind CSS referenced in these examples is off CDN and a whopping 2.7MB 😲!

Thanks for reading, and I hope you can make use of these examples to kickstart your next Tailwind project! Play with Tailwind on Codeply

Bootstrap 4 Self-collapsing Navbar

Tom Michew — Mon, 06 Apr 2020 17:54:01 +0000

Bootstrap 4 has a nice responsive Navbar with 5 different breakpoint options. However, when there are many menu items, none of the responsive breakpoints are ideal, and the Navbar items start to wrap which doesn’t look very good 😏.

Here is an alternative responsive Navbar that auto-magically 😎 collapses (as the viewport is resized) the extra overflowing menu items into a Dropdown menu. This implementation is with jQuery, but this JavaScript logic could just as easily be implemented as a Vue, React or Angular component.

Here’s the basic logic:

If the Navbar height is larger than it’s container, the menu items have wrapped and therefore we ADD items to the dropdown
Otherwise, we REMOVE items from the dropdown and return them to the Navbar
We check the above logic when the DOM is loaded, and while the window is resized.

jQuery Logic (could use plain JS instead)

var autocollapse = function (menu,maxHeight) {

    var nav = $(menu);
    var navHeight = nav.innerHeight();
    if (navHeight >= maxHeight) {

        $(menu + ' .dropdown').removeClass('d-none');
        $(".navbar-nav").removeClass('w-auto').addClass("w-100");

        while (navHeight > maxHeight) {
            //  add child to dropdown
            var children = nav.children(menu + ' li:not(:last-child)');
            var count = children.length;
            $(children[count - 1]).prependTo(menu + ' .dropdown-menu');
            navHeight = nav.innerHeight();
        }
        $(".navbar-nav").addClass("w-auto").removeClass('w-100');

    }
    else {

        var collapsed = $(menu + ' .dropdown-menu').children(menu + ' li');

        if (collapsed.length===0) {
          $(menu + ' .dropdown').addClass('d-none');
        }

        while (navHeight < maxHeight && (nav.children(menu + ' li').length > 0) && collapsed.length > 0) {
            //  remove child from dropdown
            collapsed = $(menu + ' .dropdown-menu').children('li');
            $(collapsed[0]).insertBefore(nav.children(menu + ' li:last-child'));
            navHeight = nav.innerHeight();
        }

        if (navHeight > maxHeight) { 
            autocollapse(menu,maxHeight);
        }

    }
}

$(document).ready(function () {

    // when the page loads
    autocollapse('#nav',50); 

    // when the window is resized
    $(window).on('resize', function () {
        autocollapse('#nav',50); 
    });

})

HTML Markup

The Navbar markup is the standard Bootstrap 4 responsive Navbar with all of the Navbar Items and a Dropdown on the right.

<nav class="navbar navbar-expand navbar-dark bg-info">
    <div class="container-fluid">
    <a class="navbar-brand pb-2" href="#">Bootstrap 4</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
        <ul class="navbar-nav align-self-end" id="nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Item 4</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Item 5</a>
            </li>
            ...
            <li class="nav-item">
                <a class="nav-link" href="#">Item 13</a>
            </li>
            <li class="nav-item dropdown d-none">
                <a class="nav-link" href="#" id="navbarDropdownMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  <span class="navbar-toggler-icon"></span>
                </a>
                <ul class="dropdown-menu dropdown-menu-right bg-info" aria-labelledby="navbarDropdownMenu">
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>

Thanks for reading!

Demo | Source

DEV Community: Tom Michew

Helpful Page Layouts using Tailwind CSS

2-Column Layout with Sidebar

Holy Grail Layout

Full-screen Background Image

Full-screen App Layout with Sidebar

Bootstrap 4 Self-collapsing Navbar

jQuery Logic (could use plain JS instead)

HTML Markup