MOONWALKING WITH PROJECT ENFERNO

This is a series of articles that will teach you how to build modern web systems using the Enferno framework

Part II— Customization

Understanding Enferno Templating

Front-end development and design is an integral part of any system.

I will demonstrate how easy and fast it is to manage and build your front-end with Enferno.

Here are the rules:

1. HTML templates reside within the “templates” directory

2. CSS, Javascript, Images and other assets reside within the “static” directory

By default, Enferno ships with a nice and simple default theme that has a logo, a navigation, a header, some text content and a footer.

It also utilizes the concept of template inheritance where we have a default master template “layout.html” that holds common HTML code, and can be extended by child templates like “index.html”

Customising the main header image

For that, we have to replace the image located at “static/img/cd-background-img.jpg”

Some great resources for finding free and good stock images are listed here: https://medium.com/@dustin/stock-photos-that-dont-suck-62ae4bcbe01b

Customising the navigation

Open the “layout.html” file, and find the <nav> element, remove all the list items and leave only one list item and make it point to “/” which is the front page in our case

<nav>
    <ul class="cd-primary-nav">
        <li><a href="/">Home</a></li>
    </ul>
</nav>

Customising the content

Open the “index.html”, and change the html within the <div class=”cd-container”> tag, for example I’m adding the following html:

<div class="cd-container">
    <h3>Project Enferno is great !</h3>
    <p>
        Templating has never been easier ..
    </p>
</div>

Customising the style sheets (css)

Open the file “style.css” that resides within the “static/css” directory, add the following code at the end of the file:

.cd-container h3 {
  font-size: 32px;
  font-weight: bold;
}

Run the server and check the results

if the server is already running (from the past tutorial) it should automatically reload when you do any change to your files, if not, simply run the server with:

./manage.py server

if you visit http://127.0.0.1:5000/ in your browser, you should see the updated website.

Here is a screenshot of my updated website: