Gemma Black
Gemma Black

Gemma Black

Avatars: Design and Build an Admin Dashboard with Preons

Avatars: Design and Build an Admin Dashboard with Preons

Gemma Black's photo
Gemma Black
·Oct 31, 2020·

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.

End goal

  • Create a user profile avatar using HTML and CSS classes
  • Avoid writing custom CSS

Before we start

You'll need:

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: cover to 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-50 to represent border-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.

 
Share this