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.
End goal
- Create a user profile avatar using HTML and CSS classes
- Avoid writing custom CSS
Before we start
You'll need:
- An IDE, a code playground or the humble Notepad
Steps
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:
https://source.unsplash.com/ZHvM3XIOHoE/200x200
Preons starter HTML
Start with minimal HTML5 markup and:
- A reset CSS library
- The Preons default functional CSS library
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Preons</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://unpkg.com/preons@0.4.0/dist/reset.css" rel="stylesheet" type="text/css" />
<link href="https://unpkg.com/preons@0.4.0/dist/preons.css" rel="stylesheet" type="text/css" />
</head>
<body class="">
<!-- Content goes here -->
</body>
</html>
Simple markup
Inside the HTML body, add an image tag. The w2 and 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:
https://source.unsplash.com/ZHvM3XIOHoE/200x400
To fix wrong aspect ratios:
- Add a relative wrapper
- Make the image
position: absolute - Add
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>
Round avatars
If you look up, you'll see DevDojo uses round avatars. So we'll be no different here. The steps are simple:
- Add
bra-50to representborder-radius: 50%. - 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. w2 to w3.
<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 w* and h* rules to add the sizes you need.
CSS classes
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.
- Avatars
- Buttons
- 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.