Writing an admin template in 14 lines of css…. using bootstrap

When i went to work the other day i found it amusing there are hundreds and hundreds of admin theme packs on all sorts of websites to find. I use some of them, i don’t like them. They work, as a presentation piece. But are full of bloated styles of yonder year when support should be this or that. Or can we please use 10 different kinds of editors just to use.

Then i found out that bootstrap in version 4 is ditching IE9 completely and pushing flexbox i thought i can do that!

So i set up a project and started the code. 14 lines later I was done. Awesome. It even support small screens.

This is the code:

@media screen and (min-width: 992px) {
  .admin {
    height: 100vh;
    display: flex;
  }

  .admin .admin-sidebar {
    width: 300px;
    overflow: auto;
  }

  .admin .admin-body {
    flex: 1;
    overflow: auto;
  }
}

And the main html:

<div class="admin">
    <div class="admin-sidebar bg-faded">
        ...
    </div>
    <div class="admin-body" role="main">
        ...
    </div>
</div>

I did use or maybe misuse the navbar component in bootstrap. I did just copy the base example, but did remove the list item classes because they let menu items float, and i did not want to use that.

You can check my example on codepen or github.

This post is copied from my blog.