Making a basic web site look better

TL;DR: Here is a repo https://github.com/WaterJuice/BottleMaterializeTemplate which contains all you need to use Materialize and Bottle in an self contained host using only Python.

Recently I wrote about OIDs and made a basic website that would issue out a new OID to anyone who wanted one without any registration required. (Here)

I don’t pretend to be a web designer but I think it is safe to say the original site was pretty ugly:

Screen Shot 2019-08-23 at 6.08.10 pm.png

I wanted something simple to “make it look good” without requiring me to go to any particular great effort or learn a bunch of CSS. Materialize was recommended to me, so I had a look. Using one of the samples provided I was quickly able to make my site look considerably better. The end result:

Screen Shot 2019-08-24 at 2.51.30 pm.png

I think this was considerably better. Additionally it works well on mobile devices.

While making the site I decided to make a template that I could easily use to start any future projects. In particular I wanted to make have all the files local so it could be self hosted without Internet access (for example on an internal intranet). I used bottle which is a web server framework written in python. This can be installed with pip, or simply copy the single file (bottle.py). Materialize just required two files (materialize.min.css and materialize.min.js), plus the additional Material fonts which are normally hosted on google fonts. If you want to host them yourself you just need a few file MaterialIcons-Regular.ttf, MaterialIcons-Regular.woff, and MaterialIcons-Regular.woff2. Plus an additional css file that maps them.

I put all the necessary files together and made a very simple starting example called “bottle_app.py”

All of the files are in a github repo: https://github.com/WaterJuice/BottleMaterializeTemplate

All that is required is python (2 or 3). Simply run

python bottle_app.py

This will start a simple web server running on port 8080. Then browse to http://localhost:8080 (or ip address of your computer) to see the sample page. This is what it looks like on an iPhone.

IMG_8601

The template also contains error pages for common HTTP errors. Eg try browsing to an invalid page and you’ll get a 404 error.

Perhaps this will be useful to you.

Materialize and Bottle are both released using the MIT License, so I have retained the same for my template.

Get the template at https://github.com/WaterJuice/BottleMaterializeTemplate

 

 

 

Advertisement

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s