AdminLTE Midnight theme: customising templates

AdminLTE is by far one of the great examples of what Bootstrap CSS can do and consists of pre-defined UI elements used for Admin control panels. Similarly we have ElementUI, Bulma, and Bootstrap CSS in its core. 

Right now, there’s a massive amount of various admin panels on the net.

AdminLTE Midnight Theme
AdminLTE Midnight Theme

So, I made a quick Proof of Concept on how we can easily convert default AdminLTE layout into a dark theme, with a bit of help from grunt and yarn.

AdminLTE Midnight Dark Theme is available on GitHub. I added a detailed description on how to run it in dev mode via AdminLTE repository.

You might find it useful to go through customisation instructions first.

Reduce CSS bundle size by cutting class names

This is pure awesomeness! Gajus Kuizinas went beyond asset minifiers which resulted from 140KB to 53KB CSS size decrease.

There is one thing a minifier cannot do – change the selector names. This is because a CSS minifier does not control the HTML output. Meanwhile, CSS names can get long.

All the details are in the post worth reading, if still think that webpack can only merge JS files in a bundle.

Vendor prefixes for properties, functions, @-rules and even full declarations are automatically generated – based on trusted sources.

 So you can maintain cross-browser support while keeping your source code clean and easy to maintain.