In this post, I covered from minute 26:00 until 42:00 of this video.

The first thing that we're going to copy from the Instgram UI is the look of our account profile. But before we do that, let's not too worry about making it 100% to look like Instagram because the thing that we actually want to replicate is the function. With that said, I also not 100% following what the instructor did with the UI.

Main Header

So let's go ahead and start with the header section where inside it has the texts for 'Laravel', 'Login', 'Register' and 'Logout'. The code for all of these are inside resources > views > layouts > app.blade.php. For now, we just want to change the 'Laravel' text to something else. So, just find {{ config('app.name', 'Laravel') }} code in the file, delete it and replace with your app name or anything. Save it and refresh your app in the browser to see the changes. For the title, I named my app 'Aperture' and beside the title, I also want to place a logo which I got from freeicons.io. My code looks like this:

<a class="navbar-brand d-flex" href="{{ url('/') }}">
    <div class="pr-2" style="border-right: 1px solid #333333">
        <img src="/svg/logo.svg" width="25px" class="pb-1">
    </div>
    <div class="pl-2">Aperture</div>
</a>

resources > views > layouts > app.blade.php

Let me explain my code one by one.

Container

First, because I want to put two elements, which are texts and logo, I created two containers without any classes. In the first container is where I put my logo and in the second container is where I put my app name which is just a plain text. Now, how do we get to put this logo?

Logo

For the logo, first I created a new folder inside the public folder and I named it svg. And then inside that svg folder, I also created a new file named logo.svg. Before I put anything in this .svg file, I downloaded a SVG icon from this page. I opened it in Notepad and copied the SVG code which start with <svg> and end with </svg>, leaving the XML header, and then paste it in logo.svg file that I've already made. Before I save, I deleted the width and height inside the code because I'm going to specify the width when I use the img tag in a view. So, my logo.svg code inside public > svg looks like this:

<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
    <title>camera</title>
    <desc>Created with Sketch.</desc>
    <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Rounded" transform="translate(-272.000000, -2770.000000)">
            <g id="Image" transform="translate(100.000000, 2626.000000)">
                <g id="-Round-/-Image-/-camera" transform="translate(170.000000, 142.000000)">
                    <g>
                        <polygon id="Path" points="0 0 24 0 24 24 0 24"></polygon>
                        <path d="M13.81,2.86 C13.98,2.56 13.81,2.16 13.46,2.12 C10.84,1.75 8.16,2.4 6.02,3.98 C5.83,4.13 5.77,4.41 5.9,4.63 L8.91,9.85 C9.1,10.18 9.58,10.18 9.78,9.85 L13.81,2.86 Z M21.3,8.33 C20.32,5.86 18.38,3.87 15.95,2.83 C15.72,2.73 15.45,2.83 15.32,3.05 L12.31,8.26 C12.12,8.58 12.36,9 12.75,9 L20.83,9 C21.18,9 21.43,8.65 21.3,8.33 Z M21.37,10 L15.17,10 C14.79,10 14.54,10.42 14.74,10.75 L19,18.14 C19.17,18.44 19.6,18.49 19.82,18.22 C21.56,16.04 22.3,13.19 21.87,10.43 C21.84,10.18 21.62,10 21.37,10 Z M4.18,5.79 C2.45,7.98 1.7,10.81 2.13,13.58 C2.16,13.82 2.38,14 2.63,14 L8.83,14 C9.21,14 9.46,13.58 9.26,13.25 L5,5.87 C4.82,5.57 4.39,5.52 4.18,5.79 Z M2.7,15.67 C3.68,18.14 5.62,20.13 8.05,21.17 C8.28,21.27 8.55,21.17 8.68,20.95 L11.69,15.74 C11.88,15.41 11.64,14.99 11.26,14.99 L3.17,14.99 C2.82,15 2.57,15.35 2.7,15.67 Z M10.53,21.89 C13.15,22.26 15.83,21.61 17.97,20.03 C18.17,19.88 18.23,19.59 18.1,19.37 L15.09,14.15 C14.9,13.82 14.42,13.82 14.22,14.15 L10.18,21.14 C10.01,21.44 10.19,21.84 10.53,21.89 Z" id="🔹-Icon-Color" fill="#1D1D1D"></path>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

public > svg > logo.svg

You may think, why .svg? Can't I just use .jpg or .png and save myself the time of copy pasting this code? Yes, you can. Besides following the instructor who's also using svg, I use svg just because I don't use it as often as other image formats, but I also do know that svg file is an image of the highest quality that doesn't pixelated at all. Despite its high quality, it's also very small in size. And so, I thought I want to train myself in using it so I could apply it more often to my web and app in the future.

Back to app.blade.php, in the first container, I put <img src="/svg/logo.svg" width="25px">. You will notice that I'm not putting the path like this: /public/svg/logo.svg. Why? Well, it is because Laravel actually starts in public. This means, whenever user is accessing the site, they're actually inside the public directory and they don't have access to anything outside of it. That's why we don't need to put /public in the path. Save and look the changes.

Oops, the logo and text isn't aligned side by side! Yeah, we're not done yet.

Aligning the logo and text

This is the part where Bootstrap classes come in handy. To make the logo appear beside the text, I put .d-flex as an additional class of the anchor tag because the two containers are inside this tag. Learn more about flex here.

28	<a class="navbar-brand d-flex" href="{{ url('/') }}">

resources > views > layouts > app.blade.php

The logo and text are now side by side. However, these two elements are too close to each other, so we need to put a separator and some spacing. First, I put a vertical line with style="border-right: 1px solid #333333" in the first container to kinda make the two elements look separated. Then, I put .pr-2 class which means padding right of 1rem*0.25 to the same container to give a little spacing to the logo so it will not too close to the vertical line.

29	<div class="pr-2" style="border-right: 1px solid #333333">

resources > views > layouts > app.blade.php

I also need some spacing between the text and the line, so I put .pl-2 which means padding left of 1rem*0.5 to the second container. It almost looks perfect now. The last thing left to do is aligning the text and logo so it will horizontally aligned in the middle. To do this, I put .pb-1 to the img tag. If y ou're confuse with these classes name, learn more about this spacing class here. Now, we finally done with the header.

<div class="pr-2" style="border-right: 1px solid #333333">
    <img src="/svg/logo.svg" width="25px" class="pb-1">
</div>
<div class="pl-2">Aperture</div>

resources > views > layouts > app.blade.php

Profile Page

For the profile page, we start by making this section:

I highlight the area with green and red box, just to give you an idea of what we're going to need. The area in green means we need 2 column box, 1 for the profile photo and one for user's information. The column for profile photo is a little bit smaller than the other. And then, inside the second column, there would be 5 containers which I highlighted in red. So, let's go ahead and delete the default elements in home.blade.php.

In home.blade.php, delete everything that is inside the container and start with making a row, 2 columns and 5 divs. It looks something like this:

<div class="container">
    <div class="row">
        <div class="col-4"></div>
        <div class="col-8">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>

resources > views > home.blade.php

As you can see, I use .col-4 for the profile photo column and .col-8 for the other. This is because you can make a maximum of 12 columns with Bootstrap grid. 4 + 8 = 12. Learn more about grid system here.

I started by placing the profile photo first. For the photo, I just use my Instagram profile photo that I obtained the link through the inspect element tool. To make the photo round shaped, I put .rounded-circle in the img tag. I also add a little border to the photo with style="border: 1px solid #e4e3e1". It looks okay but not great. One more thing left to do is to center the image inside col-4 vertically and horizontally. I put .d-flex, .align-items-center and .justify-content-center to the container. Looks good for now.

6
7
8

<div class="col-4 d-flex align-items-center justify-content-center">
    <img src="https://instagram.fkul6-1.fna.fbcdn.net/v/t51.2885-19/10724055_300191290170380_1081923520_a.jpg?_nc_ht=instagram.fkul6-1.fna.fbcdn.net&_nc_ohc=CT-sygVTGX4AX_H6eGs&oh=bbc1076529181a36fb233215e0b3d250&oe=6000F778" class="rounded-circle" style="border: 1px solid #e4e3e1">
</div>

resources > views > home.blade.php

For the second column, it's pretty simple. I won't explain much except for the second container. In the second container, I made another 3 container for posts, followers and following. However, just a container alone won't make the texts inlined. Like we do to the logo and text in the header, to make the text in 3 different containers positioned side by side is to put .d-flex in the main container. Then, put a little spacing between them.

<div class="col-8">
    <div>
        <h2 class="font-weight-light">aliya.h</h2>
    </div>
    <div class="d-flex pt-4">
        <div class="pr-5"><strong>4</strong> posts</div>
        <div class="pr-5"><strong>165</strong> followers</div>
        <div class="pr-5"><strong>176</strong> following</div>
    </div>
    <div class="pt-3"><strong>Aya</strong></div>
    <div>I am a programmer who loves programming.</div>
    <div><a href="#">ayaxxchanz.github.io</a></div>
</div>

resources > views > home.blade.php

Changing the font

By default, Bootsrap is using Nunito font. We can see the code of it importing the Google font in resources > sass > app.scss. To change the font, browse the font you like at Google fonts website. Choose a font and click on it, then select the font weight that you would like to use in your app. As for me, I choose Roboto with the weight of 300, 400, and 700. On the right side, you'll see a sidebar that displaying our choosen font alongside with a simple instruction on how to embed the font on web. Copy the font url.

Now, you might think that you just need to paste this font url in the app.scss right? Well, you're correct but also wrong. I ran into a little bit of problem in this step because the Laravel version that the instructor is using doesn't have this problem. Due to a bug that has been going for quite a long time, the sass file doesn't compile correctly when using the Google font link we just copied. So, we need to make some changes to the link. There are two solutions. You may use the old syntax or replace the semicolon ; in the link to %3b.

Old syntax:

2	@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap)

resources > sass > app.scss

Change ; :

2	@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300%3b400%3b700&display=swap');

resources > sass > app.scss

Save the file. Before you go and view your app, you also need to change the font in resources > sass > _variables.scss.

5	$font-family-sans-serif: 'Roboto',sans-serif;

resources > sas > _variables.scss

Now, you finally can run a compilation with npm run dev. Remember in the previous post that I wrote, our front-end assets must be compiled? Yeah... if you don't compile after making these changes then you won't see any changes to your app in the browser.

Photo grid

For photo grid, we start with creating a new row and 3 same sized columns. Inside of each column, put any image from Instagram using the inspect element tool. Because I don't have any interesting photos in my profile right now, I borrow some photos from @realdepressionprojects. After putting the photos, I added .w-100 in each img tag so that the photos that are larger than the column fit perfectly in the column.

<div class="row pt-5">
    <div class="col-4">
        <img src="https://instagram.fkul6-2.fna.fbcdn.net/v/t51.2885-15/sh0.08/e35/s640x640/129737491_2784437911770572_2287274853812690657_n.jpg?_nc_ht=instagram.fkul6-2.fna.fbcdn.net&_nc_cat=108&_nc_ohc=LjwiufGp3rwAX8SaECZ&tp=1&oh=9482507c4a8bb816d562f1c1f0ff1923&oe=60005EEF" class="w-100">
    </div>
    <div class="col-4">
        <img src="https://instagram.fkul6-1.fna.fbcdn.net/v/t51.2885-15/sh0.08/e35/s640x640/130349231_2953653378212423_3302295236496904081_n.jpg?_nc_ht=instagram.fkul6-1.fna.fbcdn.net&_nc_cat=111&_nc_ohc=iWd6_OL9ITsAX9M7qJ7&tp=1&oh=d7d4e7a1e4af22c60751cdce1ddaa4c3&oe=5FFE6722" class="w-100">
    </div>
    <div class="col-4">
        <img src="https://instagram.fkul6-1.fna.fbcdn.net/v/t51.2885-15/sh0.08/e35/s640x640/128552279_176631784125678_1691543487271656856_n.jpg?_nc_ht=instagram.fkul6-1.fna.fbcdn.net&_nc_cat=1&_nc_ohc=7T08K-2-co8AX9sHHkk&tp=1&oh=57eace74d74694c6e6240370d9d03f12&oe=5FFE7E1D" class="w-100">
    </div>
</div>

resources > views > home.blade.php

That's all! The final look:

I think, this design is more like a placeholder or dummy, to give you an idea how our app will look because there's still so many things to learn and add. In the next part, we're going to add Username to the registration flow.

Highlights ⚡

Read Bootstrap documentation to have deeper understanding of its utilies
Some of the Bootstrap styling can be manipulated in resources > sass > app.scss and _variables.scss
When changing Google font, replace semicolons (;) in the Google font link with %3b
Always run compilation after making changes to the front-end assets

Aliya H.

Posted on Tuesday, December 15, 2020 by Aliya

Create Instagram Clone with Laravel (Part 4): Designing the UI from Instagram

In this post, I covered from minute 26:00 until 42:00 of this video.

Main Header

Container

Logo

Aligning the logo and text

Profile Page

Changing the font

Photo grid

Highlights ⚡

Helpful Links 🔗

No comments:

Post a Comment