Recreate: Spotify (part 5) - Bottom Bar
Tags: beginners, css, frontend, javascript
Published: 2020-03-21 14:21:42

# Intro
Welcome back to the Recreate Spotify Series! In this part I will recreate a portion of the bottom bar!

What I want to recreate:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o0zo35kiahl9qniig3xg.png)

If you have any recommendations or you think that I could do anything differently feel free to leave a comment 🙂.

A sneak peek of the result:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4objzayl4blw4imwg5vh.gif)

and a closer look 👀:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/v9ip5ds78deki8v0hrj9.gif)

# The starting point 🏁

As always, the first step is to split the design to smaller chunks.

Looking at the bottom bar of the Spotify I can see 3 different areas.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/x4f65srpwgcfgwqmdjlg.png)

In this part of the series I will focus in the area marked with the number 1.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bz6v6rm4mtxp69fmu4gj.png)

After splitting the design I can see 3 main areas, marked in the image below:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ix6d8eifblany2xl2jn8.png)

# One extra step

Before starting to code it is a good idea to hover & click the elements in the design to see what happens. Maybe an event, such as hovering over an item, triggers a new element to appear or changes the color of an item.

After hovering over the area I see some minor changes in the design:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/80zr53l5zyic1acairs7.gif)

These are the following:

1. Hovering over the image, makes a new element visible (the arrow circle)
2. Text hover changes color to white (#fff) and "underlines" the text. (I will explain later why the "underlines" is in quotes 🤔 )
3. Icon hover changes the color to white (#fff) again.

# Code 💻

If you want to follow along, you can find the code from the part 4 (Home page) of the series in [this Github gist](https://gist.github.com/tsanak/811add83b0eb8dae3d2283a194c8c338).


## Structure
I will start by adding the html code for the bottom bar right after the ending of the `</main>` tag. 

```html
</main>
<div class="bottom-bar">
    <div class="bottom-bar--left-col">
        <div class="bottom-bar--left-col--song">
            <div class="bottom-bar--left-col--song--img">
                <div class="bottom-bar--left-col--song--img--pull-up">
                    <i class='lni lni-chevron-up'></i>
                </div>
                <img src="http://via.placeholder.com/150x150" alt="">
            </div>
            <div class="bottom-bar--left-col--song--details">
                <div class="bottom-bar--left-col--song--details--wrapper">
                    <a href="#" class="bottom-bar--left-col--song--details--title">Song Title</a>
                </div>
                <div class="bottom-bar--left-col--song--details--wrapper">
                    <a href="#" class="bottom-bar--left-col--song--details--artist">Artist</a>
                </div>
            </div>
        </div>
        <div class="bottom-bar--left-col--actions">
            <button class="bottom-bar--left-col--actions--favorite">
                <i class='lni lni-heart'></i>
            </button>
            <button class="bottom-bar--left-col--actions--pip">
                <i class="pip-icon"></i>
            </button>
        </div>
    </div>
</div>
```

This is how the section looks without any added styles:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d9rlqp4050wq0q9h242p.png)

Yep, that's right! You can't even see it without any styling 😅

## Styling

Adding the basic styles so that the bottom bar is correctly positioned and is visible.

```css
main {
    max-height: calc(100vh - 90px); /* 90px is the height of the bottom bar */
    min-height: calc(100vh - 90px); /* 90px is the height of the bottom bar */
}

.sidebar {
    height: calc(100% - 90px); /* 90px is the height of the bottom bar */
}

.bottom-bar {
    width: 100%;
    height: 90px;
    border-top: 1px solid #000;
    background-color: rgba(24, 24, 24, 1);
    z-index: 1;
    position: absolute;
    bottom: 0;
    padding-left: 16px;
    padding-right: 16px;
    display: flex;
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yfals5wgblzmtxprcg40.png)

I know it is not looking the best right now, but at least it's visible.

__First things first__, I need to contain the elements inside the bottom bar and not let them overflow it.

```css
.bottom-bar--left-col {
    display: flex;
    align-items: center;
    position: relative;
    transition: left 300ms;
    left: 0;
}

.bottom-bar--left-col--song {
    display: flex;
}

.bottom-bar--left-col--song--img img {
    height: 56px;
    width: 56px;
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/faz7c8y9h2q2okf63w9m.png)

It looks much better now!

Time to focus on the actual styling of the elements. I will start working on the image and the hoverable arrow icon.

```css
.bottom-bar--left-col--song--img img {
    height: 56px;
    width: 56px;
    box-shadow: 0 10px 30px 0 rgba(0,0,0,.3), 0 1px 2px 0 rgba(0,0,0,.2);
}

.bottom-bar--left-col--song--img {
    margin-right: 14px;
    display: flex;
    position: relative;
}

.bottom-bar--left-col--song--img--pull-up {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #000;
    width: 24px;
    height: 24px;
    opacity: 0.7;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: #b3b3b3;
}

.bottom-bar--left-col--song--img--pull-up:hover {
    /* Hovering over the arrow icon makes it bigger and brighter */
    opacity: 0.8;
    transform: scale(1.1);
    color: #fff;
}

.bottom-bar--left-col--song--img:hover .bottom-bar--left-col--song--img--pull-up {
    /* Hovering over the image reveals the arrow icon */
    display: flex;
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yrthtz221x3a89978q06.gif)

Now the image part of the bottom bar is finished and I can move on the the text on the right side of the image.

```css
.bottom-bar--left-col--song--details {
    justify-content: center;
    display: flex;
    flex-direction: column;
    margin-right: 14px;
}

.bottom-bar--left-col--song--details--wrapper {
    display: block;
    line-height: 17px;
}

.bottom-bar--left-col--song--details a {
    display: inline;
    text-decoration: none;
    color: #fff;
    letter-spacing: 0;
}

.bottom-bar--left-col--song--details a:hover {
    color: #fff;
    /* Border-bottom instead of text-decoration: underline */
    border-bottom: 1px solid #fff;
}

.bottom-bar--left-col--song--details--title {
    font-size: 0.875rem;
}

.bottom-bar--left-col--song--details--artist {
    font-size: 0.75rem;
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/diyk5b2zlotdx3u7zrt8.png)

When hovering over the text "Song Title" we get the underline effect.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/it96z3mc4by01emjm4of.png)

### ⚔ Text-decoration: underline vs border-bottom ("underline") 
![](https://media.giphy.com/media/xTiN0z1dTpeedhds8o/source.gif)

Now remember when I talked about the Text hover "underline" and why the "underline" was in quotes?

Let's see the Spotify hover text "underline":

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tt7n7vvaogc8hty6w4n7.png)

Now let's see how the `text-decoration: underline` looks like on the "Song Title":

```css
.bottom-bar--left-col--song--details a:hover {
    text-decoration: underline;
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ktrqalca9iro5dl4hxvc.png)

As you can see the difference between `text-decoration: underline;` and  `border-bottom` is subtle, but it does exist.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/it96z3mc4by01emjm4of.png)

Now let's begin working with the icons on the right side. 

I will start with the heart icon, since this one is available in the LineIcons library.

```css
.bottom-bar--left-col--actions {
    display: flex;
    align-items: center;
}

.bottom-bar--left-col--actions--favorite {
    background: transparent;
    border: 0;
    outline: 0;
    color: #b3b3b3;
    font-size: 1rem;
    margin-right: 10px;
}

.bottom-bar--left-col--actions--favorite:hover {
    color: #fff;
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/u0olwmnijzctzb9gobe5.png)

When hovering over the icon: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q9hyoh9wkfw3f2m2wiz7.png)

As you can see I still have to style the last icon, which is the Picture in Picture (PiP) icon. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/je8h13qizv4ilnidutk4.png)

Boy am I in a pickle, I couldn't find any icon resembling the Picture in Picture icon in the LineIcons library. 

Since I can't find the icon, I have 3 options:

1. Use a png of an icon from some other site,
2. Use one more icon library that contains the PiP icon
3. Build the icon with css

Well, I didn't want to use a png for icon, because it is a very simple icon, and I didn't want to bloat the project with 2 icon libraries. So, I went with option 3, which is good since this series is targeted for beginners.

```css
/* Reset the button's default styles  */
.bottom-bar--left-col--actions--pip {
    background: transparent;
    border: 0;
    outline: 0;
    position: relative;
    /* Width and height will be the actual size of the PiP icon */
    width: 16px;
    height: 13px;
    padding: 0;
}

/* The outside of the PiP icon, the Rectangle part of the icon */
.pip-icon {
    border: 1px solid;
    border-bottom: 2px solid;
    border-radius: 1px;
    border-color: #b3b3b3;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

/* 
    The small rectangle of the PiP icon 
    that is on filled and is on the bottom right corner of the icon 
*/
.pip-icon:before {
    content: '';
    position: absolute;
    bottom: 1px;
    right: 1px;
    height: 3px;
    width: 5px;
    background: #b3b3b3;
    border-radius: 1px;
}

.bottom-bar--left-col--actions--pip:hover .pip-icon {
    border-color: #fff;
}

.bottom-bar--left-col--actions--pip:hover .pip-icon:before {
    background: #fff;
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/s48jcksc3wkpojaqxe5u.png)

When the user hovers over the PiP icon: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vkflze82td3fj578s9hv.png)

That is the last part that I will add to this section of the series. Now let's have a look at the result:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4objzayl4blw4imwg5vh.gif)

And a closer look at the bottom bar 👀:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/v9ip5ds78deki8v0hrj9.gif)

# Conclusion
![alt text](https://media.giphy.com/media/3o6Mbnll2gudglC3HG/source.gif "")

🎉 Thank you for reading through all the post! 🎉

If you have any questions or any feedback, let me know in the comments 🗨.

For the next part of the series I will create _rest_ of the bottom bar. You can see it in this image: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gg4hx1qwdb8qoepyf6t4.png)

If you want to follow along, you can find the code of the series in these Gists: 
- [Part 1 Gist (Base Layout)](https://gist.github.com/tsanak/9fdb7f8d956a758ca68a5d0f5cc6f07c)
- [Part 2 Gist (Header & Sidebar)](https://gist.github.com/tsanak/0ea7df18c4db04c4f1e37105562b56a7)
- [Part 3 Gist (Search page)](https://gist.github.com/tsanak/09432e8b16808919cf23fa2a3103d099)
- [Part 4 Gist (Home page)](https://gist.github.com/tsanak/811add83b0eb8dae3d2283a194c8c338)
- [Part 5 Gist (Bottom Bar Left Column)](https://gist.github.com/tsanak/5cfacabb4b4062fda13d68c6752984f2)