Share your repls and programming experiences

← Back to all posts
Dashboard
h
Bookie0

Dashboard 📈

Hey!! 👋

Hope you you're doing well!

I made the front-end of a dashboard, in HTML, CSS, and a tiny bit of JS!

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! :)


Links 🔗


Features ✨

Sidebar

  • Pushes content to the side (on smaller devices, overlaps content)
  • CTA + NEW REPORT button
  • Different sections (MAIN, PEOPLE)
  • 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

Topbar

  • Calendar icon
  • Search box with search icon
  • Profile with username, profile picture, and notification

Content

  • Friendly message to user
  • Contains several types of (fake) data with different sizes:
    • Rect (1 x 2)
    • Small (1 x 1)
    • Big (2 x 2)
    • Large (4 x 2)
  • 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

Daily users/Performance

  • Line graph

Sales

  • Column graph

Revenue/Costs

  • Big number
  • Smaller numbers next to it

Reviews

  • Picture of reviewer and name
  • Number of stars (on 5)
  • Review

Style

Font family

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:

Colors

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.

Icons

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.

Animations

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.

Charts

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.

Faces

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!


Closing 🚪

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 @ Bookie0#7538.

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!!!

Bye! 👋

Voters
KiiYoo
MadisonBadea-Bo
SitiRusmiyatun
Adn5000
AbdullahRafi1
ruiwenge2
Laras-mawatimaw
itsyako17
SlumberDemon
CollinStevens
Comments
hotnewtop
ruiwenge2

maybe next time you should tell people to read the readme to make the post shorter, but it’s still cool!

Bookie0

@ruiwenge2 thanks! Yeah I wish more people read the README as I do spend some time writing it lol, but yeah cuz it’s long most people just skip it

ruiwenge2

@Bookie0 yeah if your post is long people have to scroll all the way down which is sometimes annoying

PixiGem

i died the second i turned on light mode

Bookie0

lmao @PixiGem

PixiGem

@Bookie0 lmfao I love how u always say lmao

Bookie0

lmao @PixiGem

FlaminHotValdez

@Bookie0 lmfao is superior to lmao

Bookie0
Froggo-School

lmao @Bookie0

CodingElf66

You are just the king of CSS, this is incredible! One thing, though.

The bar at the left doesn't align very well with the rest of the website, so I suggest fixing that, but otherwise, good job!

P.S., I'm about to break your nice 6666 upvotes.

Bookie0

@CodingElf66 Lol thanks! Yeah for the sidebar issue; I think it's actually fine, it just looks not aligned because of the border radii of the reviews container.

Thanks tho! :D

hg0428

It also cuts off parts of the image as seen [email protected]

StringentDev

@Bookie0 Theres an issue on mobile where almost nothing lines up. It is so annoying to me.

Bookie0

@StringentDev Could you send a screenshot of what you mean by 'nothing lines up' please?

StringentDev

@Bookie0 Its not a bug with your website since you are not using absolute or relative posistioning.

Bookie0
StringentDev

@Bookie0 I was creating a custom Video Player in HTML, CSS and JS in which the progress bar would not line up correctly.

Bookie0
RahulChoubey1

so business site with lotz of fake data I'm in!

Bookie0
RahulChoubey1

@Bookie0 ping ping ping

GhostKing007

Nice hamburger Bookie, may I know what meat you used in it?

Bookie0

@GhostKing007 Lmao no meat just bread

ABirdCoder

Hey @Bookie0!

Noice work!

Would you like to work together to make some really good website.

(idk what)

I can do back-end and I am decent at front-end...

(Its fine if you say no)
Bookie0

@ABirdCoder thanks! I’m quite busy, but what are you aiming to do; what’s ur idea?

ABirdCoder

@Bookie0 idk... maybe a recreation of the replit signup/login page. It's kind of outdated.

Bookie0
ABirdCoder

We can come up with other ideas. @Bookie0

AmoghTheCool

when i tried lightmode -

Narrator: AmoghTheCool died💀.

Bookie0
tankerguy1917

Nice. I like how similar this is to other websites' GUI, so it is very easy to understand what each piece of it would do even if it has no functionality. I also really like the transition from light to dark mode.

Bookie0

@tankerguy1917 Thank you! :D

sojs

Truly Fantastic, as always @Bookie0!
Love the styling but...

Edit:
Arghghg gifs dont work.

Here is what i mean:
Good:


then click:


okie...


click...


NOO WHAT HAPPENED

Bookie0

Thank you! :D

Hm that's weird it shouldn't overlap it. What are the dimensions of your screen (like in px)?

@sojs

sojs

I have absolutely no idea and i cant find out how. is thier like a site or something? @Bookie0

Bookie0

@sojs yeah you could try to open the dev panel (right click and click inspect) and enter mobile device emulation mode (should be an icon looking like a mobile device, next to the inspect icon)
Then you could stretch the things (you’ll see what I mean) and check out the size

sojs

hmm i dont have dev tools... it was blocked. @Bookie0

Bookie0

@sojs oh okay

zplusfour

kewl
sees light mode
oo
clicks
silence

Bookie0
EpicGamer007

It looks godly as usual ;)
Less JS is always better too, and maybe consider using more semantic html for your next project

Bookie0

Thank you! Yeah I’m still not very good at JS lmao :)
@EpicGamer007

EpicGamer007

@Bookie0 no i mean like, dont use js lol. cuz its js

Bookie0

lol ¯\_(ツ)_/¯ @EpicGamer007

angrydoge

If you ever feel useless, remember, light mode is an option.

Bookie0
CoderGautamYT

What an amazing website. I'm more of a logical coding guy, so I can't even try to make something like this

Bookie0

Lol thanks! :D @CoderGautamYT

CoderGautamYT

Np! :D @Bookie0

JBloves27

Ngl, seems super similar to the Replit styling lmao.

Besides that, awesome job with the CSS!

Bookie0

@JBloves27 Uh what parts seem 'super' similar to the Replit styling lol?

But thanks! :)

JBloves27

Lol, uh just like the buttons seem similar to the Replit styling ;)

Haha, no problem! @Bookie0

Bookie0

@JBloves27 this

vs this

..?

JBloves27

Lol, just my opinion that the sidebar looks similar.

Taking a closer look at it though, not so much lmao. @Bookie0

Bookie0

@JBloves27 lol ok

217327

@Bookie0 svkldgmnvkxdmvkldmxl;bmblml;xb

AmoghTheCool

ig you have the second most cycles on replit for a reason...
here's an updoot

Bookie0

@AmoghTheCool Lol thanks! :)

FlaminHotValdez

@AmoghTheCool yeah but cookie is too good at cycle farming i don't think bookie can catch up

AmoghTheCool
Yoplayer1py

@FlaminHotValdez cookie n bookie seem like brothers? they rhyme ....

Bookie0
Yoplayer1py

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

@Yoplayer1py Thanks! :)

Yeah I'm not good in backend so I wouldn't know how to do it lol.

Yoplayer1py

@Bookie0 learn it then ? Flask (ik flask itz ez pz) Django ( sorta hard for me) or Node Js (idk js) choose n learn one of the most popular ones...

Bookie0

@Yoplayer1py Yeah, maybe

Baconman321

@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):

https://replit.com/@Baconman321/CLIp

And here's the result:

https://clip.baconman321.repl.co

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

@Baconman321 Lol that's pretty cool – your sites are indeed very fast! :)

Baconman321

@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.

Bookie0

@Baconman321 Okay cool, I'll keep that in mind! :)

Yoplayer1py

@Baconman321 I think Go is frm google n im anti-Google.. Also I don't wanna learn more languages.. ALso you just gave me 5 pings in an hour so gj lol . Also Go is idk strict.. Also also also idk wht to tell also

Baconman321
Infiniti20

@Baconman321 Yeah, it's quite fast. What do you think about typescript tho?

Baconman321

@Infiniti20 Never tried it, but I doubt it's any faster. The language looks nice, though.

AmoghTheCool

@Baconman321 i use C# + .NET for just about everything. it has garbage-collections, statically typed programming, and keeps me in touch with the basic syntax of the C family (such as variable assignment) in case i need cpp or c.

Baconman321
hg0428

This is amazing CSS. Although you need to add automatic device dark mode enabling and disabling. Have the theme match the device's theme.

Bookie0

@hg0428 Thanks for the feedback! :)

CyberHacker101

sighhhhhh i cant see ur amazing master pieces cuz mA sChOoL hAd tO bLOck rEpIliT aklfjo;adksjfklJLKJFJFJ @Bookie0

Bookie0

@CyberHacker101 oof :( there are some pictures in the readme/description of post :)

CyberHacker101

oof indeed

lol pictures dont load

ill figure out another way like I always do :D @Bookie0

Bookie0

@CyberHacker101 alright, good luck! :D

CyberHacker101

The quest has begun (boss music playing) @Bookie0

RayhanADev

You should get a Dribble account and post these as shots!

Bookie0

@RayhanADev Hmms okay I did it! Made this, using Mockup Frames, super cool tool I discovered lol

ch1ck3n

light mode looks kinda weird

Bookie0
Yoplayer1py

@ch1ck3n tru like I hate it

Bookie0

@Yoplayer1py well that's what dark mode is for lol
¯\_(ツ)_/¯

Yoplayer1py

@Bookie0 yea lightmode stings our eyes if we are a dark mode user

Bookie0

@Yoplayer1py That's why there is dark mode. It's also the default mode..

Baconman321

@Bookie0 I like light mode on some things. More or less because I haven't gotten used to dark mode. Chrome is light mode for me rn (on my main laptop I have it on dark because it matches with my system which is dark) and I don't really care.

Baconman321

@Bookie0 Default light user be like:

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA I'M MELTING FADING!!! THE SHADOWS ARE PULLING ME UNDER!!!

ch1ck3n

@Baconman321 light theme ftw

Bookie0
lynnlo

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.

Bookie0

@lynnlo Thank you! (didn't know the code was clean lol)

I made the secondary text color a bit darker to make it a bit more visible. Thanks for suggestions! :)

nbash

I love this! The detail and everything is just great! :D

Bookie0

@nbash Thanks! :) Glad you liked the detail!

nbash

@Bookie0 NP BRO!

BobTheTomatoPie

Wow this is awesome css! Great Job Bookie!

Bookie0

@BobTheTomatoPie Thank you! :)

AppleILove

can you upload some tutorials too please?(later):)

Bookie0

@AppleILove check out my profile (https://bookie0.repl.co) and you can go to projects; I’ve made some tutorials :)

Coder100

nice

but post is too long

Bookie0

@Coder100 Lol thanks!

also post is just the README.md file; and READMEs can never be too long

I give give a few links, describe what features this site has, discuss some styles such as fonts, colors, animations, charts, etc. and that's about all lol xD

Baconman321

Cool! I think you can even minimize that JS use further (maybe not, I'm only a rookie at CSS)!

Bookie0

@Baconman321 Thanks! :D

Yeah I barely know JS so its not prolly not the most optimized lol

StringentDev

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.

Bookie0

@StringentDev Lol thanks!

I'm ionicons. Check out the README to find out more about the styling of the site if you'd like. :)

VihaanM1

This is so cool. Great job on the whole page! Love how the sidebar icon changes to the cross when clicked!

Bookie0

Thank you! :D Yeah I also find it satisfying xD @VihaanM1

ch1ck3n

cool

Bookie0
QuickV

Waiting for 6969.

@ch1ck3n

ch1ck3n

@QuickV 9 year old who doesnt know what it means but still uses it spotted

Bookie0

Lmaoo @QuickV

QuickV

a chicken who underestimates me spotted @ch1ck3n

QuickV

Almost there bookie. A little more to go.

@Bookie0

Bookie0

lol @QuickV

QuickV
tussiez

You are a CSS pro!

Bookie0

:D thanks! @tussiez