Let’s try recreating the Facebook cover picture layout using TailwindCSS

Tram Ho

Have you ever wondered whether it is difficult to create unique layouts, similar to the “cover photo” on your Facebook, Twitter profile? The answer is not difficult at all, with a little basic knowledge of HTML, CSS and especially after reading this article!

Prerequisites

Things to know before reading this article:

  • Some basic HTML and CSS knowledge
  • Learn briefly about TailwindCSS
  • An aesthetic eye, careful, meticulous

Proceed

Step 1: Mock some basic content

There is nothing special about this step. I simply create a container that limits the maximum width of the screen xl (by max-w-screen-xl ) and align it to the center of the page with the margin: 0 auto trick.

In addition, the container is beautified with some lighter, rounded color styles (with rounded-lg ) and shadowed (with shadow-lg ).

Create an original layout

Step 2: Add a cover photo to your website

After that, I will put a “cover photo” in front of the paragraph. Facebook cover photos are usually 820×312 pixels in size. In the short term, I will use a <canvas> element to temporarily replace the real image.

By this step, we have the following result:

Add a facebook cover photo to the original layout

Step 2: Cover photo with avatar

Now that we have the cover image placed in the page layout, the next step now is to put one of your avatar in.

On the Facebook profile page, the avatar is attached to the cover photo in the lower left corner of the cover photo. To achieve this, the position property of CSS is the exact tool for this.

The result should look like the image below:

Step 3: Align the position of your profile picture

Although the profile picture is now in the lower left corner compared to the cover photo, it is not really true to my expectations: the avatar should be located a little further away instead of fitting the border of the cover image.

There are many ways to further define the spacing of your avatar, such as using the CSS positioning properties (ie top , left , bottom , right ), or using the margin and padding properties. Here, I will choose to use the transform and translate properties as follows:

The results after using translate will look like this:

The position of the avatar element

By using the absolute position in conjunction with the position property transform and translate , I can now easily customize the position of the avatar element as desired.

But there is a new problem: the ejected avatar element will obscure the content of the lower piece of content. While dealing with this issue, I will also create an item to contain information right below the cover image and avatar.

Step 4: Item containing information (full name, introduction, …)

The section containing this information will be located just below the cover image, but should be arranged in a way that “avoids” the avatars being pushed down.

When I noticed, I used translate as translate-y-3/4 and translate-x-1/2 . So this information element is created need to ensure:

  • The minimum height is 3/4 of the height of the avatar ( 120 pixels ).
  • The content is at least 3/2 of the length of the avatar from the left margin (or 240 pixels ).

Knowing the above information, I can add that new element as follows:

Facebook profile page layout

Step 5: Responsive for mobile devices

Responsive layout for phones

When the Facebook profile page is displayed on the phone, the avatar image is usually centered, and there is no left margin in the element containing information (name, introduction) as in the widescreen version.

When there is no change, the website we have just made displayed on the phone will look “stupid” as follows:

Page layout without responsive implementation

With TailwindCSS, implementing responsive for the Web is very simple through sm , md , lg , … prefixes To center an avatar element just on the phone screen, we will edit the element. The avatar is as follows:

Then, the paragraph also needs to be modified accordingly to make sure the avatar element area is pushed out:

Achievement

Thus, thanks to the help of TailwindCSS, we have completed a relatively complex layout without having to touch on writing a line of CSS!

You can see a demo of the full example here:

https://play.tailwindcss.com/3c2UJXq8bR

Alternatively, you can learn more about TailwindCSS at tailwindcss.com . TailwindCSS is an atomic CSS framework that gives you the freedom to build a “unique” interface that’s fast and easy. TailwindCSS is in stark contrast to other traditional CSS frameworks like Bootstrap, which enforce your design’s style according to built-in elements and are difficult to customize as you like.

Share the news now

Source : Viblo