Admini, the minimalistic admin panel built with Bootstrap 5.2

PublishedJune 12, 2022

•3 min read•View as Markdown

Admini, the minimalistic admin panel built with Bootstrap 5.2

Thomas Portelange

A Web Developer based in Belgium, specialized in PHP & JS development

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

A git diff with all changed and new unstaged files

I recently needed to collect all changes in one file for reporting purposes. Found this article: https://ratfactor.com/cards/git-diff-with-new-files In case you need something similar on Windows, here

Jul 27, 20261 min read

A git diff with all changed and new unstaged files

Writing a Zero-Dependency CSV and XLSX Reader/Writer

Some projects start with a grand plan. Others start because you just need to read a file without thinking too much about it. That was the case for spread-compat. I needed a common interface for CSV, X

Mar 6, 20265 min read

Writing a Zero-Dependency CSV and XLSX Reader/Writer

Media Queries Level 5 are awesome

With modern css, you can almost get rid of sass. But there is one last pain point : media queries. Not being able to use variables or an easy, common syntax for typical breakpoints is really annoying. That is, until you meet Media Queries Level 5. I’...

Oct 10, 20253 min read

Modern tooltips

This is a quick article to share this demo I just made. https://codepen.io/lekoalabe/pen/JoPNWpX

Dec 20, 20241 min read

Using Dialog elements today

Modals are typical UI elements for many web apps. There are countless packages dedicated to that specific features, each framework creating its own variation. Popular frameworks like Bootstrap also have custom code to deal with it. But all this feels...

Oct 29, 20243 min read

LeKoala Dev Blog

47 posts

Vanilla JS, no jQuery

If Bootstrap 5 did something right, it's giving up jQuery. There are no good reasons to use jQuery these days. If anything, you can use cash. In order to build the custom features I needed for this admin panel, I've used plain es6 modules. You can load them as is in any modern browser, or use the compiled version with esbuild.

A few unique scripts you can find:

Responsive, deep linkable tabs

Responsive tables

Toasts that don't rely on html being present in the page

Beautiful modals inspired by SweetAlert, but using Bootstrap modals under the hood

In order to test these scripts, I've used both regular Bootstrap 5 JS and Bootstrap Native, which provide a much lighter build.

Beautiful icons

There are a few things that cannot be avoided when building an admin panel. Icons, for example. Most admin panel rely on a given icon set. But this is quickly getting problematic as soon as you miss one icon in the set. Do you add another one? Change it, with often incompatible syntaxes? I mean, Feather is nice, but it's kind of limited.

This is why I'm using Last Icon, my solution to solve once and for all the icon library issue.

Forms

Forms is another sensitive topic. A lot of admin kits tend to cram everything into a single minified file. For my part, I find this approach limited: I prefer to load only the relevant librairies needed for that specific form. Is there a date picker? Load flatpickr. A masked input? Inputmask. Etc.

But maybe you are only use a handful of custom field types and want to initialize everything on first load. That is also possible. In fact, you can choose because the forms are loosely configured. You can include or exclude them in your base build very easily.

Ajax, or not

I wanted to build a lightweight admin panel because it should initialize fast even when not using ajax navigation. Ajax navigation is very nice to give a SPA feel, but it comes with its own set of issues (state management, etc.).

Again, I'm not here to make choices for you and both approaches work very well: load everything each time (it's very lightweight) or use ajax (basic unpoly support is provided to give you an idea of how it works).

Command Palette