Jinja templates

Base Layout

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="UTF-8"> 
        <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>{{ block title }}Example Site{{ endblock }}</title> 
        {{ block header_preload }}{{ endblock }} 
        {{ block header_scripts }}{{ endblock }} 
        {{ block header_css }}{{ endblock }} 
    </head> 
    <body> 
        <!-- HEADER --> 
        <header> 
            {{ block header_content }}{{ endblock }} 
        </header> 
        <!-- SIDE-BAR --> 
        <aside> 
            {{ block side_bar_content }}{{ endblock }} 
        </aside> 
        <!-- MAIN --> 
        <main> 
            {{ block main_content }}{{ endblock }} 
        </main> 
        <!-- FOOTER --> 
        <footer> 
            {{ block footer_content }}{{ endblock }} 
            {{ block footer_scripts }}{{ endblock }} 
            {{ block footer_css }}{{ endblock }} 
        </footer> 
    </body> 
</html>

Macros

{% macro nav_link(endpoint, name) %} 
    {% if request.endpoint.endswith(endpoint) %} 
        <li class="nav-li active"><a href="{{ url_for(endpoint) }}">{{name}}</a></li> 
    {% else %} 
        <li class="nav-li"><a href="{{ url_for(endpoint) }}">{{name}}</a></li> 
    {% endif %} 
{% endmacro %}

HTML to display

{% from "macros.html" import nav_link with context %}
<ul class="nav navbar-nav"> 
  {{ nav_link('home', 'Home') }} 
  {{ nav_link('about', 'About') }} 
  {{ nav_link('contact', 'Contact Us') }} 
</ul>

Buttons

{% macro primary_btn(name, id=None, onclick="", classes="", type="button") %} 
    {% if id %} 
        <button id={{id}} class="primary_btn {{classes}}" onclick="" type="{{type}}">{{name}}</button>
    {% else %} 
        <button class="primary_btn {{classes}}" onclick="" type="{{type}}">{{name}}</button>
    {% endif %}
{% endmacro %}

{% macro secondary_btn(name, id=None, onclick="", classes="", type="button") %}  
    {% if id %}  
        <button id={{id}} class="secondary_btn {{classes}}" onclick="" type="{{type}}">{{name}}</button> 
    {% else %} 
        <button class="secondary_btn {{classes}}" onclick="" type="{{type}}">{{name}}</button> 
    {% endif %} 
{% endmacro %}

HTML to display

{% from "macros.html" import nav_link with context %}
{{ primary_btn(Home, id="home-btn") }}
{{ primary_btn(Home, onclick="alert('hi');") }}

Home