Avatars: Design and Build an Admin Dashboard with Preons
3 min read
It's hard to imagine an admin dashboard without an avatar. They are the simplest elements. So in this article, we'll create our own custom avatars in less than a few minutes using Preons.
- Create a user profile avatar using HTML and CSS classes
- Avoid writing custom CSS
Before we start
- An IDE, a code playground or the humble Notepad
Get an image
You need an image for this tutorial. If you have one already. Great. If not follow along with the Unsplash image below:
Preons starter HTML
Start with minimal HTML5 markup and:
- A reset CSS library
- The Preons default functional CSS library
<html lang="en"> <head> <meta charset="utf-8" /> <title>Preons</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link href="https://firstname.lastname@example.org/dist/reset.css" rel="stylesheet" type="text/css" /> <link href="https://email@example.com/dist/preons.css" rel="stylesheet" type="text/css" /> </head> <body class=""> <!-- Content goes here --> </body> </html>
Inside the HTML body, add an image tag. The
h2 classes define both the width and height of the image.
<img class="w2 h2" src="https://source.unsplash.com/ZHvM3XIOHoE/100x100" />
If you used Unsplash, the image is already square.
Wrong aspect ratios
In many cases, you may not be able to resize images upfront. To replicate with Unsplash, change the aspect ratio:
To fix wrong aspect ratios:
- Add a relative wrapper
- Make the image
object-fit: coverto the image to prevent skewing
- Add width and height instead to the parent wrapper
<div class="w2 h2 d-bl relative"> <img class="w-100 h-100 absolute l0 t0 of-cover" src="https://source.unsplash.com/ZHvM3XIOHoE/200x400" /> </div>
If you look up, you'll see DevDojo uses round avatars. So we'll be no different here. The steps are simple:
- Make the parent class clip the image by using
hidden. Therefore, the overflow won't be seen.
I've also increased the avatar as I thought it was too small eg.
<div class="w3 h3 d-bl relative bra-50 hidden"> <img class="w-100 h-100 absolute l0 t0 of-cover" src="https://source.unsplash.com/ZHvM3XIOHoE/100x200" /> </div>
Lots of sizes
Finally, we'll want to make a few sizes to choose from later. Copy our avatar markup a few times and change the
h* rules to add the sizes you need.
Maybe some of the classes make sense, but still, you'd like to tweak your markup. Preons is still in initial development, but a reference sheet will be added soon.
Continue with the series
Design and Build an Admin Dashboard with Preons. Upcoming articles.
- Navigation icons
- Navigation bar
- Navigation panel
This is part of a series to build an admin dashboard with Preons. Disclaimer! I am the author of the toolkit, but the principles can be applied to other functional css libraries.