Creating a Python Web Application using Python Flask Part 4: Installing a bootstrap theme

Now that our web application has a real front end and a javascript framework from part 3 lets make our webpage not like it was made in the 1990s by installing a bootstrap theme.

The theme we’re going to be using is called the gentelella theme and can be found here . Let’s talk about this theme real quick, it’s free which is awesome, but most of the elements are built in jquery which isn’t so awesome because the way angular lazy loads templates the jquery code runs before the elements exist on the page. If you want to hack around at jquery you can convert these to angular components but none the less it serves as a good example on working with a theme in a custom webpage. If you’d like to use a custom theme where the components are made in Angular 1 the process is roughly the same but a little different, most of the themes i’ve found using Angular1 and especially Angular 4/React are all paid but if you can pay 20 dollars and save yourself an hour doing something in business it’s probably a good idea; that’s all economic opportunity cost analysis which i’ll be talking more about on my personal blog when I find time to write in it again.

Apple iPad (Wi-Fi, 32GB) – Space Gray (Latest Model)

Please help this site by purchasing through our Amazon links

First we download and extract the theme and poke around. We can see there are a ton of examples in the production folder. Index.html usually is a good place to start. Let’s open this up in a browser and a text editor.

Ok this looks like a pretty solid theme, we can see some type of login status, examples of lots of charts if we’re tracking metrics, a drop down email/notification system in the top right, a collapsable menu system on the left, and lots of components we can poke around with. For the scope of this tutorial the basic menu structure, the signed in status, and some kind of messaging template will be of most interest.

Under the extras section we can see a “plain_page” view. This seems like a straight forward place to start bringing stuff into our project. Open plain_page.html in a text editor and get a feel the composition of the html elements.

Just skimming the top we can see the page structure, the imported css pages, some of the bootstrap common elements like “navbar nav_title”. We can also see font awesome icons using class=”fa fa-paw” even though they weren’t rendering on the local static page. If we scroll to the bottom we can also see the javascript imports being used by the page. We will most likely want to copy the body of this into our project and import the style sheets. We will also want to break some of this up into angular templates, add our angular tags, and bring in our router view.

Going back into our project lets open up index.html and make those changes stated above.

<!-- HTML 5 doctype -->
<!DOCTYPE html>
<html ng-app="helloPython">
<head>
    <meta charset="UTF-8">
    <title>Hello world app</title>
    <link rel="stylesheet" type="text/css" href="static/css/theme.css">
 
    <!-- Bootstrap -->
    <link href="/static/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="/static/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
 
    <!-- gentella theme: https://github.com/puikinsh/gentelella -->
    <link rel="stylesheet" type="text/css" href="static/css/custom.min.css">
</head>
<body class="nav-md">
<div class="container body">
      <div class="main_container">
        <!--<div ng-include="'/static/partials/sidenav.htm'"></div>-->
 
        <!-- sidebar -->
        <div class="col-md-3 left_col">
            <div class="left_col scroll-view">
            <div class="navbar nav_title" style="border: 0;">
                <a href="index.html" class="site_title"><i class="fa fa-paw"></i> <span>ComsciU</span></a>
            </div>
 
            <div class="clearfix"></div>
 
            <!-- menu profile quick info -->
            <div class="profile clearfix">
                <!--
               <div class="profile_pic">
               <img src="images/img.jpg" alt="..." class="img-circle profile_img">
               </div> -->
                <div class="profile_info">
                <span>Welcome,</span>
                <h2>John Doe</h2>
                </div>
                <div class="clearfix"></div>
            </div>
            <!-- /menu profile quick info -->
 
            <br />
 
            <!-- sidebar menu -->
            <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
                <div class="menu_section">
                <h3>General</h3>
                <ul class="nav side-menu">
                    <li><a><i class="fa fa-home"></i> Home <span class="fa fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                        <li><a href="#/">Main</a></li>
                        <li><a href="#test">Test</a></li>
                    </ul>
                    </li>
                </ul>
                </div>
            </div>
            <!-- /sidebar menu -->
 
            <!-- /menu footer buttons -->
            <div class="sidebar-footer hidden-small">
                <a data-toggle="tooltip" data-placement="top" title="Facebook" href="https://www.facebook.com/stefan.bradstreet">
                <span class="fa fa-facebook" aria-hidden="true"></span>
                </a>
                <a data-toggle="tooltip" data-placement="top" title="Twitter" href="https://twitter.com/ComSciU">
                <span class="fa fa-twitter" aria-hidden="true"></span>
                </a>
                <a data-toggle="tooltip" data-placement="top" title="Instagram" href="https://www.instagram.com/stefbrad15/">
                <span class="fa fa-instagram" aria-hidden="true"></span>
                </a>
                <a data-toggle="tooltip" data-placement="top" title="LinkedIn" href="https://www.linkedin.com/in/stefan-bradstreet-0626b478/">
                <span class="fa fa-linkedin" aria-hidden="true"></span>
                </a>
            </div>
            <!-- /menu footer buttons -->
            </div>
        </div>
 
        <div ng-include="'/static/partials/header.htm'"></div>
 
        <!-- page content -->  
        <div class="right_col" role="main">            
            <div ng-view ></div>
        </div>
        <!-- /page content -->
 
        <!-- footer content -->
        <footer>
          <div class="pull-right">
            Copyright ComSciU 2017
          </div>
          <div class="clearfix"></div>
        </footer>
        <!-- /footer content -->
      </div>
    </div>
 
    <!-- jQuery -->
    <script src="/static/vendors/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap -->
    <script src="/static/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
   
    <!-- Angular CDN Imports -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>
 
    <!-- Angular App Declaration -->
    <script src="/static/js/app/app.js"></script>
 
    <!-- Angular Controllers -->
    <script src="/static/js/app/controllers/testController.js"></script>
 
    <!-- Custom Theme Scripts -->
    <script src="/static/js/custom.js"></script>
  </body>
</body>
</html>

If you notice the link tags for our javascript and css they reference the python /static folder we set up in previous tutorials. However these libraries don’t exist. We will need to copy the libraries we are using from the theme’s vendor folder into our static folder. These libraries are all released under the MIT license, meaning we can use them as we wish as long as we leave the license details in the headers and don’t release them as our own code. This allows us to maintain rights to the code we are using them in, very important stuff in a corporate setting or if you are making a page you are wanting to release with a real pay model. Inside the vendor folder you will also find lots of other libraries that do some cool stuff such as ChartJs, if something sounds interesting feel free to deep dive it on google and play around with it as we won’t be covering most of them here mainly due to time constraints.

If you carefully compare our index.html to the theme’s demo index.html you will see quite a bit is different. First i ripped out a lot of the buttons in the side navigation. There is a commented out part where I was going to move the sidebar into a partial but the jquery bug I was talking about above struck. As much as I’d like to keep a a stripped down index.html file we will keep the sidebar here for jquery to register its event handlers on.

The header has been moved into a partial that angular will load on initialization. As an exercise try moving the header content from the theme’s index.html into the ‘/static/partials/header.htm’ file and see if it renders correctly in your page. Also replace the content inside of /static/views/main.htm that we set up last time with the main content from the theme’s page.

You can find that specific content here

If the partials have been set up correctly and the css and javascript files have been copied over into our static/vendors page we should be able to run our page and see the bootstrap theme.

That sure looks a lot better then what we had before doesn’t it. Comment below if you ran into any troubles. Next time we will try to work with some AWS IAM and DynamoDB!