DEV Community

Cover image for One-page CRM Admin Dashboard using HTML5, CSS3 and JavaScript
John Idogun
John Idogun

Posted on • Updated on

One-page CRM Admin Dashboard using HTML5, CSS3 and JavaScript

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 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 logo Sirneij / carrotsuite-admin-ui

Implementation of Carrotsuite's UI in pure HTML5, CSS3 and JavaScript

carrotsuite-admin-ui

A feature-rich admin dashboard built with pure HTML5, CSS3 and JavaScript.

It can be accessed via this link.




It was also hosted on github pages.

Some implementation details

CRM Admin Dashboard full view

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

header

.carrotsuite-nav is a flex container which is the baseline of the header. Header elements composed of mainly fontawesome icons. The site's logo wrapper was absolutely positioned to aid easy positioning.

main

.main was made a grid container with its columns made 28rem 2fr.

The first column houses the fixed .sidebar whose .menu 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 that the code base has, when the viewport collapses to some breakpoint.

Smaller screen page

.page-content occupies the remaining grid column followed by other convectional styles. The only thing worth noting is the animated .dropbtn which rotates fontawesome's arrow-up icon -180deg 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, consider contacting me for a job, something worthwhile or buying a coffee ☕. You can also connect with me on LinkedIn.

Discussion (39)

Collapse
elgaxton profile image
elgaxton

First of all, congratulations on your graduation with 1st Class honours, Wooow!!! Beautiful. Thanks for the dashboard as well.

Collapse
sirneij profile image
John Idogun Author

Thanks you boss 😊

Collapse
jgarrone82 profile image
Jorge Ariel Garrone

Nice design! I will try to duplicate and later check the differences

Collapse
kapil5849 profile image
kapil vaishnav

what's idea. sir!

Collapse
sirneij profile image
John Idogun Author

That'll be great

Collapse
shibbirahmad profile image
Shibbir Ahmad

Incomplte template

Collapse
sirneij profile image
John Idogun Author

It was not meant to be a complete template

Collapse
sirneij profile image
John Idogun Author

However, you can suggest what you want and we can collaborate to make it full-fledged

Collapse
d3toxg profile image
Aiyejumo Gbenga

Mehn this is nice, I am completely blown away. I hope to build something like this someday...

Still in the learning process.

Collapse
sirneij profile image
John Idogun Author

Everyone learns and learning is a continuous thing.

You will build more fancy stuff than this.

Collapse
d3toxg profile image
Aiyejumo Gbenga

Hopefully...

Any recommendations on how to achieve this?

Thread Thread
sirneij profile image
John Idogun Author

I read CSS3 books and this Udemy course:

udemy.com/course/front-end-web-dev...

Thread Thread
d3toxg profile image
Aiyejumo Gbenga

Thank you so much
I really appreciate.

Collapse
zippcodder profile image
Deon Rich

Very nice! And congrats 🎉

Collapse
sirneij profile image
John Idogun Author

Thanks boss. I really appreciate

Collapse
hieultimate profile image
hieultimate

great design

Collapse
sirneij profile image
John Idogun Author

Thanks

Collapse
shikher_768666 profile image
Shikher Srivastava

Looks great!!, I'll use it for a couple of my upcoming projects. Let's see...

Collapse
sirneij profile image
John Idogun Author

Feel free

Collapse
gozippy profile image
GoZippy

Want to come redesign our crappy code ignitor view site?

Collapse
sirneij profile image
John Idogun Author

I will be honored. Email me the details.

Collapse
sepehrworklife profile image
Sepehr Alimohamadi

Nice design 👌

Collapse
sirneij profile image
John Idogun Author

Thanks boss

Collapse
abdufattoh1205 profile image
abdufattoh1205

is this have video

Collapse
femolacaster profile image
femolacaster

I am proud of you, John.

Collapse
sirneij profile image
John Idogun Author

Thank you boss!

Collapse
makypl profile image
MK

nice work!

Collapse
sirneij profile image
John Idogun Author

Thanks man

Collapse
martimundo profile image
Marcos Artimundo

Parabéns pelo Projeto...ficou bem estruturado e modelado.

Collapse
sirneij profile image
John Idogun Author

Thanks Marcos

Collapse
thientanhai profile image
Stephen Dev

Amazing design. Thanks so much

Collapse
sirneij profile image
John Idogun Author

Thanks! I appreciate.

Collapse
vlackcoder profile image
Ghimmy

Do You work for carrotSuite? Techcellent 360 global.... How's your working experience if yes? I'd advise you to avoid there

Collapse
sirneij profile image
John Idogun Author

Oh, I don't. I would have but didn't like their compensation and all.

Collapse
amazing_henry profile image
Amazing Henry

Interesting, congratulations on your graduation

Collapse
sirneij profile image
John Idogun Author

Thank you!

Collapse
msolabs profile image
Msolabs

Congratulations.
Nice design and Thanks for sharing.

Collapse
jujubug100310 profile image
jujubug100310

Congrats on the graduation.

Collapse
sirneij profile image
John Idogun Author

Thanks boss