One-page CRM Admin Dashboard using HTML5, CSS3 and JavaScript
Tags: webdev, javascript, tutorial, css
Published: 2021-12-06 20:02:37

## Introduction and Motivation
It's been a while I posted here. I was busy wrapping up my Bachelor's degree and thankfully, [I graduated with first class honours](https://www.linkedin.com/feed/update/urn:li:activity:6870117263584849920/) on the 26th of November, 2021. While away, I decided to play around with pure CSS3 and vanilla JavaScript. Been using frameworks almost every time I work on projects. Since I learn best by doing, I decided to build a one-page Customer Relationship Management (CRM) platform with some subtle animations using pure CSS3.

## Features
The admin dashboard has, among others, the following features:

- Clean and responsive design
- Subtle animations with pure CSS3

## Source

The project's complete code is online and it is entirely free both for private and commercial uses.

{% github Sirneij/carrotsuite-admin-ui %}

It was also hosted on [github pages](https://sirneij.github.io/carrotsuite-admin-ui/).
 
## Some implementation details


![CRM Admin Dashboard full view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fffmam9c43ot8n4i9bjc.png)

CSS3 flex boxes and grid system were heavily used with the former being more rampant. 

### header

[`.carrotsuite-nav`](https://github.com/Sirneij/carrotsuite-admin-ui/blob/88d8c3d9daa43a980671545f66739b972142deb3/css/style.css#L69) is a flex container which is the baseline of the header. Header elements composed of mainly [fontawesome](https://fontawesome.com/) icons. The site's logo wrapper was [absolutely positioned](https://github.com/Sirneij/carrotsuite-admin-ui/blob/88d8c3d9daa43a980671545f66739b972142deb3/css/style.css#L79) to aid easy positioning.

### main

[`.main`](https://github.com/Sirneij/carrotsuite-admin-ui/blob/88d8c3d9daa43a980671545f66739b972142deb3/css/style.css#L178) was made a grid container with its columns made `28rem 2fr`. 


The first column houses the fixed [`.sidebar`](https://github.com/Sirneij/carrotsuite-admin-ui/blob/88d8c3d9daa43a980671545f66739b972142deb3/css/style.css#L186) whose [`.menu`](https://github.com/Sirneij/carrotsuite-admin-ui/blob/88d8c3d9daa43a980671545f66739b972142deb3/css/style.css#L200) was made a flex container to ensure that the icons and their corresponding texts are horizontally aligned. A subtle animation was chipped in which puts up only the icons, with the texts used as their title [using the only few lines of JavaScript](https://github.com/Sirneij/carrotsuite-admin-ui/blob/88d8c3d9daa43a980671545f66739b972142deb3/index.html#L319) that the code base has, when the viewport collapses to some breakpoint.

![Smaller screen page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w1uphc9i8gikhtbw0rcg.png)

[`.page-content`](https://github.com/Sirneij/carrotsuite-admin-ui/blob/88d8c3d9daa43a980671545f66739b972142deb3/css/style.css#L256) occupies the remaining grid column followed by other convectional styles. The only thing worth noting is the animated [`.dropbtn`](https://github.com/Sirneij/carrotsuite-admin-ui/blob/88d8c3d9daa43a980671545f66739b972142deb3/css/style.css#L291) which rotates [fontawesome's](https://fontawesome.com/) `arrow-up` icon [`-180deg`](https://github.com/Sirneij/carrotsuite-admin-ui/blob/88d8c3d9daa43a980671545f66739b972142deb3/css/style.css#L345) on hover.

## Conclusion

The project wasn't that fancy but it does help me brush up the fundamentals that were escaping.

## Outro

Enjoyed this article? I'm a Software Engineer and Technical Writer actively seeking new opportunities, particularly in areas related to web security, finance, health care, and education. If you think my expertise aligns with your team's needs, let's chat! You can find me on LinkedIn: [LinkedIn](https://www.linkedin.com/in/idogun-john-nelson/) and Twitter: [Twitter](https://twitter.com/Sirneij).

If you found this article valuable, consider sharing it with your network to help spread the knowledge!