What I Look for in a Dashboard Template in 2021

I have used HTML / Javascript dashboard templates for various projects that I bought on different marketplaces. Many look nice when I check their demos; they offer a fair amount of customized components, well-integrated js plugins for date-pickers, drop-downs, accordions, charts, etcetera. When I look at their documentation and source code, I have noticed time and time again that all code is tangled. Some projects use Webpack, which’s suitable. They often give you all javascript code and sass styles to let you customize things, although not always. It’s hard for a developer to select only the components and javascript plugins you need and discard the rest not to bloat your source code. For this reason, I’m writing here a wish-list, in no specific order, for what I’d look for on a high-quality theme in 2021.

1. Use PostCSS Instead of Sass.

PostCSS calls itself a “tool for transforming CSS with JavaScript”. So, in short, PostCSS can help you by taking your Sass-like CSS input and transforms it to clean CSS. But in contrast to Sass, PostCSS is pretty modular, so you can plug in what you need. Some popular plugins for PostCSS are:

PurgeCSS: is a tool to remove unused CSS. When using a theme, it’s beneficial to have it as part of your workflow.
Autoprefixer: probably the most well-known PostCss plugin, used by notable tech companies such as Google, Twitter, and Shopify. It adds vendor prefixes to CSS rules where it’s necessary.
PostCSS Nested: plugin to unwrap nested rules like how Sass does it.
PostCSS Imports: gives the exact same functionality as Sass Imports.
PostCSS Functions: allows you to write functions in javascript and inject them into PostCSS.
PostCSS Mixins: Ability to define a mixin in CSS and function in JavaScript.

Especially PurgeCSS is useful when using a theme, as you can remove all non used CSS classes from your production bundle.

2. TailwindCSS Instead of Bootstrap.

Tailwind CSS differs from Bootstrap in that it does not directly provide UI components. Instead, it gives low-level utility classes that let you build completely custom designs. One of the significant advantages of Tailwind is that you apply your utility classes directly in the HTML markup. As a developer, I can copy & paste the component markup, and I will have all the styles that I need already defined by TailwindCSS. As mentioned in my previous point, when using PurgeCSS, all the styles not used in your project will be removed from the production build you deploy to your server.

3. AlpineJS for Simple JS Interactivity.

Unless you’re building a Single Page Application Dashboard with one of the popular frameworks, AlpineJS is an excellent choice for your UI interactivity. AlpineJS borrows a similar syntax to VueJS; you can use HTML directives to add reactivity to your dashboard without writing much javascript. Animations are also included in the library, and you can use them easily for things like drop-downs, accordions, sidebar animation to hide/show it, etcetera.

I still see some templates using jQuery or something lighter like cash-dom. In 2021 I think using native DOM selectors should be the norm.

4. Each Component on a Separate File, Indicate Javascript Dependencies.

I get that to sell a template; you want to show all the potential options, components, and plugins you have integrated. As a developer, rarely will I be interested in using all components/plugins on a single project. If I need to integrate the template with a back-end framework, I usually need to extract the main layout and extract different components to view partials. And try to understand on which UI-components each javascript dependency is used. So I only need to keep the ones I need on my package.json.

I think as important as showing one or several potential combinations of how some dashboards could look. I believe that showing the components independently, using Storyboard or a similar approach, would help with the decision process. It’s easier to identify the independent parts that I might need for my project.

5. Documentation

As you can guess from my previous points, I am more interested in getting a template as a set of components that I can use to compose what I need to build. I don’t think that the big-bang approach of adding as many js plugins as possible, as many HTML components as possible with tightly coupled CSS, concatenated, minified, and hard to understand what’s going on is not the way to go from my opinion. For this reason, investing time in documenting how to use your template and UI-components you have created is more useful for the developers that will use the template.

Let me know what you think of the points mentioned above in the comments.