Tip: Integrate the new Skeleton css framework with Enferno in 2 min

This article will demonstrate how fast and easy it is to integrate Skeleton css framework (or any front-end framework) with Enferno

1.Download and Install Enferno

You can get it from github or you can follow this article.

2.Remove the existing Enferno Template

Remove the files “index.html” and “layout.html” located inside the “templates” directory.

Also remove all the folders within the “static” directory

3.Download Skeleton

You can get it from getskeleton.com

The framework is really simple, it has one HTML file, one Favicon, and two css files:

skeleton css files

since Enferno is based on Flask, it follows the same directory structure conventions, HTML templates usually reside within the “templates” directory and all static assets (css, javascript, fonts, images) reside within the “static” directory

Move the the “css” and “images” folders to “static” directory, and the “index.html” to your “templates” directory, rename the “index.html” to “layout.html” , we will use it as a base template for our pages, if you would like to read more you can visit the Flask Documentation

4.Update the paths for static assets

Just change the paths of the assets so they point to our new static directory, the lines you need to change are between 20–27, just prepend /static/ to fix the path:

<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="/static/css/normalize.css">
<link rel="stylesheet" href="/static/css/skeleton.css">

<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="/static/images/favicon.png" />

5. Create an index file

if you look at the “public/views.py” you can see that Enferno’s default page expects a template called “index.html” , so let’s create that file inside the “templates” directory, and add the following line of code to it:

{% extends 'layout.html' %}

That’s it ! run the server with :

./manage.py server

and visit http://127.0.0.1:5000 on your browser, you should get the following

You are ready now to use the excellent Skeleton framework and you have a rock-solid backend to support your app.

You can download the final Source Code from github

In the next part of this tutorial, I will discuss how this integration can be completed and enhanced further.