Hope you you're doing well!
I made the front-end of a dashboard, in
CSS, and a tiny bit of
It's completely responsive, meaning you can view and use it perfectly on any type of device. It also has a dark and light theme, as well as many cool animations!
Here's how a bit how looks it like:
This is how it looks like on a phone:
Important to know; this is just the front-end and the design of the dashboard. It doesn't actually work or have any real data in it. However, feel free to fork the repl and make it functional! :)
- Pushes content to the side (on smaller devices, overlaps content)
+ NEW REPORTbutton
- Different sections (
- Each with different tabs (as well as an active tab)
- Main: Home, Analytics, Sales, Costs, Market
- People: Users, Reviews, Feedback
- Bottom section is fixed and has settings icon as well as dark/light theme toggle
- Calendar icon
- Search box with search icon
- Profile with username, profile picture, and notification
- Friendly message to user
- Contains several types of (fake) data with different sizes:
- Rect (
- Small (
- Big (
- Large (
- Rect (
- Each data card has an icon, title, value, and description, as well as icon to open more detailed view (doens't actually exist)
- Below, there's the actual data under a graph, big number, or text
Average session length
- Multiple area graph
Less sessions/More users
- Big number
- Line graph
- Column graph
- Big number
- Smaller numbers next to it
- Picture of reviewer and name
- Number of stars (on 5)
The font family I used is
'Be Vietnam Pro', sans-serif, a font from Google Fonts. It's a smooth and modern font that looks good with technology.
I also used a secondary font:
'Roboto Condensed', sans-serif (also from Google Fonts). It's a sort of thin, condensed (like the name implies) font that is more straight. When I used it, the text was in all caps and there was also a letter spacing of
2px. This is because I feel like SC (small caps) fonts look very big and imposing, so having some space between each letter makes it a bit less 'forceful'.
These 2 fonts are a bit opposing each other and I much like the contrast. Here's an example of how they look like together:
There are 2 different color schemes; one for dark mode and one for light mode. I showed how dark mode looks like at the top, and light mode looks like this:
As you can see, almost all the colors; accent color, primary, secondary, colors for the graphs and numbers, etc. have changed. In light mode, the colors are more saturated and sort of 'brighter', as compared to the dark theme.
I got inspiration for the different colors from Google's Material Design color-picking tool. It shows many different colors with different amounts of saturation or intensity of that same color. These different intensities were used for the different themes.
I've used many icons in this site, for example in the sidebar with each tab (Home, Analytics, Sales, Costs, etc.), or in the top bar, and also in the main content for each data item.
These icons come from Ionicons, a great library filled with beautiful icons that you can also customize.
There are several animations in this site. For example, when you hover on any of the icons in the sidebar, they rotate to the right a bit. When you hover on the icons in the top right corner of each data container, they move to the top and right. The elements in the topbar also become a bit bigger on hover. Finally, when you hover on the cross symbol to close the sidebar, it spins, and when you hover on the hamburger icon to open the sidebar, the lines seperate.
The charts come from Charts.css, a great framework for data such as columns, areas, bars, lines, etc. What's cool is that they are rather simple to use, and you can customize their colors, shapes, and values, and can even add animations or motion effects. You can get started here.
The faces used in the reviews data container are all fake and generated with AI. They were generated with this face generator. With this generator, you get a completely random face, or tweak things such as age, emotions, skin/hair color, and much more!
Well, that's about all! Make sure to let me know any comments, suggestions, or questions if you have them! :D
If there are any issues/bugs/things breaking, please comment them or DM me on Discord @
If you use this stylesheet, please keep in mind that I'd love if you gave credit (like in the footer of your website or something), as I did put some effort into this! :)
Have a fantastic day!!!
maybe next time you should tell people to read the readme to make the post shorter, but it’s still cool!
It looks godly as usual ;)
Less JS is always better too, and maybe consider using more semantic html for your next project
Ngl, seems super similar to the Replit styling lmao.
Besides that, awesome job with the CSS!
Soo cool :D add backend and a website frm which we can edit this thing cause I'm in no mood to write JS
@Bookie0 Bruh, use Go. Go is the only relevant backend technology IMO. It's lightweight, statically typed and strict (However, that's a good thing. It minimizes errors and optimizes speed). It generally compiles to an independent binary, so you can run it from any machine regardless of whether or not Go is installed :)
Here's an example of a website I made with pure Go (don't focus on the site content, the project itself is unfinished and discontinued and will be so for a while , or forever):
And here's the result:
My portfolio is also served with Go. Try looking at the load times of the site using a site TTFB/load test. Most of the time the loading time is under 70 ms! (I got a test result that showed <10ms for TTFB!!!)
(No, I'm not advertising. Also, I haven't figured out templating on go so JS does a lot of the dynamic rendering. Not a good idea, but if you take up Go and find out how to do it give me a dm on discord, we've chatted before and you know my user;) )
@Bookie0 Another thing: Go is pretty organized. IMO It's not as complicated as C or C++ (in fact, it comes with a built-in garbage collector. Sounds familiar? Maybe.... JS?), yet as fast as them and as versatile as them (to some extent. Go still isn't good at ML but will probably be so sometime in the future). It's a nice language and I recommend you give it a try.
Codecademy has a great starter course on Go. After that, SO is a decent resource.
Looks wonderful, great colors and graphics. Code looks clean too and site looks to be responsive for medium to large screens.
My only suggestion is that the light theme secondary look to be too dark providing too little contrast especially with the secondary text color.
Really really well polished. Are you using feather icons?
I really love to polish up my projects but wow, yours is good.
I can do the Nodejs backend but I may choose to wait until Paper.JS, my Backend Library is done.
An Updoot well deserved.