DEV Community

loading...
Cover image for Flask Boilerplate - Windows95 UI Kit

Flask Boilerplate - Windows95 UI Kit

sm0ke profile image Sm0ke Updated on ・3 min read

Hello Coders,

This article presents an open-source and free Flask boilerplate coded on top of a retro UI - Windows 95 UI Kit crafted by Themesberg. I've landed accidentally on this super funny product and later, decided to generate an open-source Flask app on top. I hope you will enjoy it!. Tell me your thoughts in the comments.


Thank you! Content provided by AppSeed - App Generator.


Flask Windows95 UI Kit - Open-Source boilerplate Coded in Flask.


What's in the box

The app is built on top of a super simple code-base, enhanced with authentication, SQLite database, and Flask-SqlAlchemy ORM to manipulate the USER table in an object-oriented way.


Windows 95 UI Kit

This UI Kit has been developed by Themesberg and released under the MIT license on Github - the HTML sources are available here.


Let's build the app

To build this simple Flask starter we need a terminal, GIT properly installed, and a healthy Pyhton3 env. The information to build the app is also saved in the README file (committed on Github), but I will drop here a simplified setup:

$ # Clone the sources
$ git clone https://github.com/app-generator/flask-windows-95-ui-kit.git
$ cd flask-windows-95-ui-kit
$
$ # Virtualenv modules installation (Unix based systems)
$ virtualenv --no-site-packages env
$ source env/bin/activate
$ 
$ # Install requirements
$ pip3 install -r requirements.txt
$
$ # Set the FLASK_APP environment variable
$ (Unix/Mac) export FLASK_APP=run.py
$
$ # Run the application
$ # --host=0.0.0.0 - expose the app on all network interfaces (default 127.0.0.1)
$ # --port=5000    - specify the app port (default 5000)  
$ flask run --host=0.0.0.0 --port=5000
$
$ # Access the app in browser: http://127.0.0.1:5000/
Enter fullscreen mode Exit fullscreen mode

If all goes well, we should see this super nice RETRO login page in the browser (app redirects guest users, to authenticate):

Flask Windows 95 UI Kit - Login Screen.

We can use the default credentials, test/pass, or create another user through the registration page. After login, the app unlocks two private pages: index and docs.


Index Page

Flask Windows 95 UI Kit - Index Page.


UI Navbar

Flask Windows 95 UI Kit - UI Navbar Screen.


UI Buttons

Flask Windows 95 UI Kit - UI Buttons.


That's all folks, thanks for reading!


Credits


What is Flask

Flask is a lightweight WSGI web application framework. It is designed to make getting started quick and easy, with the ability to scale up to complex applications. It began as a simple wrapper around Werkzeug and Jinja and has become one of the most popular Python web application frameworks.

Discussion (8)

pic
Editor guide
Collapse
n8chz profile image
Lorraine Lee

Hopefully if they haven't already they'll offer a full-gamut color picker in which most of the "colors" are dithered together from the 16 original MS-DOS colors.

Collapse
sm0ke profile image
Collapse
zolidev profile image
Zoltán Szőgyényi

Great to see the retro UI Kit integrated in a working back-end. Awesome job guys! 🤩

Collapse
sm0ke profile image
Sm0ke Author

Thanks :) - The UI kit is super creative, deserves some credit.

Collapse
codemouse92 profile image
Jason C. McDonald

I love the look of this. :D

Collapse
sm0ke profile image
Sm0ke Author

It's super. :)

Collapse
corentinbettiol profile image
Corentin Bettiol

I found this windows 98 css kit today.

Will be good with my windows 98 themed xubuntu testing vm :)

xubuntu VM screenshot

Collapse
sm0ke profile image
Sm0ke Author

W98 was a beast! 10x!