Web Design

Components

More detail into the CSS Framework

Adding Components

In the last lesson, we got an intro to components in Bootstrap. In this lesson, we will start adding the components needed for our blog.

Navigation Bar

Go to the Bootstrap Documentation, click on Components, then go to Navs. Scroll down until you find the Right-aligned with justify-content-end. Copy the code and paste it within the container. Delete the last two list items named nav-item. If you want them, you can keep them though.

<div class=”container”>
<ul class="nav justify-content-end">
    <li class="nav-item">
        <a class="nav-link active" href="index.html">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="https://instagram.com">Instagram</a>
    </li>
</ul>
</div>

There isn’t much of a gap, so let’s add 10px margin-top:

<div class=”container”>
<div style=”margin-top:10px;”></div>
<ul class="nav justify-content-end">

Fixing the CSS of the Navbar

Right now, we don’t have the underline we need or the solid black. Open the styles.css file and write theCSS below.

body {
  font-family: 'DM Sans', sans-serif!important;
  color: black;
  }
 
.nav-link {
  color: black!important;
  }
 
.active {
  text-decoration: underline;
  }

When the nav-link/navigation tab is on the active page, there will be an underline. Otherwise, just it’s blue and gray. We also force black text across the entire page.

Main Text

We need to add our blog title and description. Add an <h1> With the title and a <p> with a lead class below it.

</ul>
<h1>My Blog</h1>
<p class="lead">Welcome to my blog.</p>

The lead class forces the paragraph to be a bit bigger and stand out compared to traditional paragraph tags. Add a margin-top of 30px to a new div element.

<p class="lead">Welcome to my blog.</p>
<div style="margin-top: 30px;"></div>

Blog Card

If we look at our Figma design, we can see that we need a few cards. Let’s design the first one. Find the Card component, and find the Titles, text, and links Card. Copy the code and paste it below the margin-top we made. Change the width of the card to 100% to fit across the whole page. Delete the Another Link <a>/anchor tag.

<div style=”margin-top:30px;”></div>
<div class="card" style="width: 100%">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="card-link">Card link</a>
    </div>
</div>

Let’s start modifying this. Find where the card-body closes. Right after it, let’s create our gradient line. Using our Figma CSS, we can grab the CSS for it and paste it into an element.

</div>
<div style="margin-bottom: 10px; width: 100%; height: 10px; background: linear-gradient(90deg, #00F260, #0575E6);"></div>
</div>

In our styles.css file, let’s give our card some drop shadows. Drop shadows in Figma translate to the box-shadow property in CSS.

.card {
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15)!important;
    border: none;
    }

By selecting the card background in Figma and looking at the Code Panel, we can find the precise drop shadow we want to give our element. Along with that, writing !important before the semicolon forces that CSS property, as Bootstrap has some CSS that contradicts what we want. We want to also get rid of the border that is preset in Bootstrap.

Changing the Text

Now, let’s add font weights and change the content type. Our Figma file will show us the individual font weights needed. Add this to styles.css.

 
    /* force headings 1 and 5 to be bold */
 h1,h5 {
    font-weight: bold;
    color: black!important;
}
 /* force headings 6 to be semibold */
 h6 {
    font-weight: 600;
    color: black!important;
}
/* force paragraphs to be black */
p {
    color: black!important;
}

As you notice in the first CSS property we added, we can give multiple elements the same property. This is helpful in reducing the amount of code we have to write.

Adding our Font Awesome icon

Right after the Card Link, let’s add a icon.

<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link"><i class="fas fa-share-square" aria-hidden="true"></i></a>

We gave it an anchor tag so we can use it as a link later.

Replacing the text

Now, let’s replace all the card data with placeholder info. Let’s also put in the links we need.

<div class="card">
    <div class="card-body"> 
        <h5 class="card-title">Test 1</h5>
        <h6 class="card-subtitle mb-2 text-muted">1/2/19</h6>
        <p class="card-text">summary 2</p>
        <a href="#" class="card-link">View Post</a>
        <a href="#" class="card-link"><i class="fas fa-share-square" aria-hidden="true"></i></a>
    </div>
    <div style="margin-bottom: 10px;background: linear-gradient(to right, #12c2e9,#c471ed,#f64f59); width: 100%; height: 10px;">
    </div>
</div>

This will make it easier when we need to add functionality. Only have one card, as we will be duplicating them through Javascript.

Starting the post page

Since the post page is very similar to the home page, we can copy all our code from index.html, create a new file called post.html and paste it. Delete the card we made. Also, remove the active class from the navbar.

<ul class="nav justify-content-end">
    <li class="nav-item">
        <a class="nav-link" href="index.html">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="https://instagram.com">Instagram</a>
    </li>
</ul>

Now, the underline doesn’t show up, since we are not on the home page.

Now, before the lead <p> add a normal <p>. Then, add a margin-top: 30px; between both.

<h1 class="blog-title">Test 1</h1>
<p class="blog-title">summary 1</p>
<div style="margin-top: 30px;"></div>
<p class="blog-title lead">summary 1</p>

That’s it!

We have finished both of our pages. Next, we will go into Javascript to add functionality to our blog.

chevron_up