Responsive grid with CSS Grids

Responsive grid with CSS Grids

by D7460N

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/simplebar@latest/dist/simplebar.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"></script>
<script src="https://unpkg.com/simplebar@latest/dist/simplebar.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<body class="container-fluid d-flex flex-column px-0">
    <!-- BEGIN NAVBAR -->
    <div class="navbar navbar-expand-md navbar-dark bg-dark">
        <a class="navbar-brand" href="#">HOLY GRAIL</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>
        <!-- BEGIN NAVBAR-COLLAPSE -->
        <div class="collapse navbar-collapse" id="navbarsExample04">
            <!-- BEGIN NAVBAR-NAV -->
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li>
                <li class="nav-item"><a class="nav-link toggle-column01" href="#">Toggle COLUMN01</a></li>
                <li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="javascript:;" id="dropdown04" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                    <div class="dropdown-menu" aria-labelledby="dropdown04">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item"...

CSS

html,
body {
    min-height: 100vh;
    /* force footer to bottom of browser */
    height: 100%;
    /*for IE11*/
}
.col {
	overflow: hidden;
    -webkit-transition: 500ms all ease;
    -moz-transition: 500ms all ease;
    -ms-transition: 500ms all ease;
    -o-transition: 500ms all ease;
    transition: 500ms all ease;
    padding: 0;
}


main {
    overflow: hidden;
}

/* CLOSE/OPEN STATES */
.column01 {
    overflow: hidden; /* enables scrolling */
    -webkit-box-flex: 0;
    -ms-flex: 0 0 250px;
    flex: 0 0 250px;
    margin-left: -250px /*positioning does not work well with flex objects*/
}
.column01.open { /* open by default */
    margin-left: 0;
}
.column02 { /* when column03 is closed */
    min-width: 100hv; /* initial width */
    min-width: 150px; /* minimum width */
    -webkit-box-flex: 0 0 auto; /* manual resize */
    -ms-flex: 0 0 auto; /* manual resize */
    flex: 0 0 auto; /* manual resize */
}
.column02.open { /* when column03 is open */
    width: 400px; /* initial width */
}
.splitter {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 10px;
    flex: 0 0 10px;
    margin-right: -10px;
}
.splitter.open {
    margin-right: 0;
}
.column03 {
    min-width: 150px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 0;
    flex: 0 0 0;
}
.column03.open {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}
.column04 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 300px;
    margin-right: -300px;
}
.column04.open {
    margin-right: 0;
}

/* OVERWRITES */
.toggle-column03 {
    cursor: pointer;
}
body {
    font-family: Calibri;
}

/* SPLITTER COLUMN */
.splitter {
    cursor: col-resize;
}
.nav-bordered>.nav-item>.nav-link.active,
.nav-bordered>.nav-item>.nav-link.active:hover,
.nav-bordered>.nav-item>.nav-link.active:focus {
    font-weight: 500;
    color: #1997c6;
    border-bottom-color: #1997c6;
}


/* UTILITIES */
.cursor-pointer {
    cursor: pointer;
}
.cursor-col-resize {
    cursor:...

JavaScript

$(".toggle-column01").click(function() {
    $(".column01").toggleClass("open");
});

$(".toggle-column03").click(function() {
    $(".column02").toggleClass("open");
    $(".column02").removeAttr("style");
    $(".column03").toggleClass("open");
    $(".column03").removeAttr("style");
    $(".splitter").toggleClass("open");
    $(".column04").removeClass("open");

});

$(".toggle-column04").click(function() {
    $(".column04").removeAttr("style");
    $(".column04").toggleClass("open");
});



// handle flex box splitter
$(document).ready(function() {
    $(".resizable").resizable({
        handleSelector: ".splitter",
        resizeHeight: false
    });
});

// handle search box expand/collapse
jQuery(document).on('click', '.search-form', function(e) {
    $(this).addClass("open");
    $(this).find('.form-control').focus();

    $(".search-form .form-control").on("blur", function(e) {
        $(this).closest('.search-form').removeClass("open");
        $(this).unbind("blur");
    });
});

// handle mega menu click
jQuery(document).on('click', '.hold-on-click', function(e) {
    e.stopPropagation()
});

// handle tooltips
$(function() {
    $('[data-toggle="tooltip"]').tooltip()
});