Avatars: Design and Build an Admin Dashboard with Preons

Avatars: Design and Build an Admin Dashboard with Preons

Written by Gemma Black on Oct 30th, 2020 ・ Views ・ Report Post

Gemma Black Visit User Profile

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.

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/[email protected]/dist/reset.css" rel="stylesheet" type="text/css" />
    <link href="https://unpkg.com/[email protected]/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:

🤩 Our Amazing Sponsors 👇
DigitalOcean View Website
DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.
Laravel News View Website
Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.
Genesis View Website
A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components.
  • 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

Comments (0)