DEV Community

Cover image for Soft UI Design Django - Free Template
Sm0ke
Sm0ke

Posted on • Originally published at blog.appseed.us

Soft UI Design Django - Free Template

Hello Coders!

This article presents an open-source Django Template crafted with authentication, database on top of a pixel-perfect Bootstrap 5 design. Django Soft UI Design can be downloaded directly from Github and used for a commercial project or simply for eLearning activities. For newcomers, Django is a leading web framework actively supported and versioned by programming experts using a batteries-included concept.


Thanks for reading!


Designed for those who like bold elements and beautiful websites, Soft UI Design is made of hundreds of elements, designed blocks, and fully coded pages.

Probably the most easier way to compile the product locally or deploy it in production is to use the pre-built Docker configuration.


✨ Step #1 - Clone/Download sources from Github (public repository)

$ git clone https://github.com/app-generator/django-soft-ui-design.git
$ cd django-soft-ui-design
Enter fullscreen mode Exit fullscreen mode

✨ Step #2 - Start in Docker

$ docker-compose up --build 
Enter fullscreen mode Exit fullscreen mode

Once the above commands are executed, we should be able to access the app in the browser, register new users, authenticate and interact with the UI.


Django Soft UI - HERO Section.


Django Soft UI - User Profile Page.


For production, we might want to serve compressed HTML pages and this case can be achieved pretty easily with a small update:

  • Added django-htmlmin to the project requirements
  • Update Project settings to enable the compression
# core/settings.py - Partial Content
...
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'whitenoise.middleware.WhiteNoiseMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'htmlmin.middleware.HtmlMinifyMiddleware',      # <-- NEW  
    'htmlmin.middleware.MarkRequestMiddleware',     # <-- NEW 
]
...
Enter fullscreen mode Exit fullscreen mode

Thanks for reading! For more resources, feel free to access:


Top comments (4)

Collapse
 
uithemes profile image
ui-themes

Amazing design

Collapse
 
sm0ke profile image
Sm0ke

πŸš€πŸš€

Collapse
 
crearesite profile image
WebsiteMarket

Thanks for sharing

Collapse
 
sm0ke profile image
Sm0ke

πŸš€πŸš€