In the last session, I have finally learned the Jinja2 template system basics.

Now, I should be fully capable of creating a landing page, that will be structured in Django / Flask way. That means I will use existing index.html as my base template.

The base template is a place, where you throw in all UI elements, that should be visible on each web page, such as header, body, and footer. Then when you create a new template, you can just extend this new children template with base template UI elements.

This way, the children template will inherit all UI components and styles defined in the main base template.

I am sorry if you have a hard time following my steps. Jinja2 is so different from HTML5 and it is really hard for me to explain its mechanics.

That is why it took me so long to take any action with Django / Flask framework. I just hope I will make some progress with my landing page today. It would be nice to have at least a header section with logo and navigation menu done.

Okay, let's get to it.

Creating Landing Page Template

In index.html file, add template block for dynamically generated content, that will be rendered by children templates.

<body>
    {% block landingLayout %}
    {% endblock %}
</body>

Next, create "landingpage" folder inside our templates folder. We will put all the landing page children templates there.

/templates/landingpage/

Inside the new folder, create a new landingPage.html file.

landingPage.html

Now, it is time to include the header and footer into our base template. It is done by using include template tag.

<body>
    {% include "header.html" %}

    {% block landingLayout %}
    {% endblock %}

    {% include "footer.html" %}
</body>

So when Flask loads our landing page, it will include all HTML content, that is defined in header.html and footer.html.

Why are we creating so many HTML files? Because I like to breakdown web pages into the smallest components possible.

There were times when I created Wordpress pages with hundreds of lines of code in one single PHP file. After some time, It was impossible to navigate through such a big text file.

This way, I will know exactly where to look, when I want to edit some features.

[wbcr_html_snippet id="629" title="adsense-inarticle"]

Adding Bootstrap 4

So let's create header.html and footer.html inside our templates folder.

It is up to you what you put into header or footer elements. In my case, I usually put CSS and javascript imports inside the header element. For CSS styles, I will use the Bootstrap 4 CSS framework.

Put a link to Bootstrap 4 CSS below header meta tag.

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Stylesheets are not enough. Bootstrap 4 also needs javascript to do its magic.

So let's put javascript imports above body element.

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Now we are ready to play with Bootstrap 4 components.

Building websites with Bootstrap 4 is a piece of cake. Just head over their documentation page, copy-paste some boilerplate code, and you are ready to go.

I will use existing Bootstrap 4 Nav and Navbar components as building blocks for my header.

To spice things up, I will use Emoji as my logo. See.

Header 2019 02 19 18 32 14

Looks beautiful right?

I prefer using Emoji overpaying 5+ bucks for custom logos on Fiverr or spending tons of time fine-tuning curves in Adobe Illustrator. But that's just me.

Okay, each header should also have a navigation bar.

Is it possible in Jinja2 to dynamically highlight links conditionally based on your current URL ? Yes, it is!

Let's add if condition into Navbar class.

{% if '' in request.path %}active{% endif %}

You can read it as, if the current path equals our domain URL, then add an "active" stylesheet class.

Let's see if it works.

Header Menu 2019 02 19 18 40 00 1024x140

Nice.

The header is done. I will leave the footer and body content for another day. It's been a long day and I need to rest.

See you in the next post.

Building MVP with Flask Day 3 – Adding Bootstrap 4

Creating Landing Page Template

Adding Bootstrap 4