Skip to main content
Join the official 2019 Python Developers SurveyStart the survey!

Django materialize css support.

Project description

This library was created to make django work with materializecss.

Setup

Install the library.

# project/settings.py

INSTALLED_APPS = [
    "materialize_nav",
    ...
]

Setup Context Processors

Materialize nav comes with a context processor to use some settings to change the default base styling.

# Context Processor to work with settings
TEMPLATES = [
    {
        ...
        'OPTIONS': {
            'context_processors': [
                ...
                'materialize_nav.context_processors.get_context',
            ],
        },
    },
]

Alternative way to get the standard context for views

# views.py

from materialize_nav.context_processors import get_context


def show_page(request):
    # Get the context with the style settings
    context = get_context(site_name='demo', title='Basic Content', primary_color='teal')

    context["object"] = "MyObject"
    return render(request, "my_page.html", context)

Style

The base template can be used by extending the materialize base nav.

{% extends "materialize_nav/base.html" %}


{% block nav_items %}
    <li><a href="sass.html">Sass</a></li>
    <li><a href="badges.html">Components</a></li>
    <li><a href="collapsible.html">JavaScript</a></li>
{% endblock %}


{% block sidenav_items %}
    {# One option is to override "materialize_nav/sidenav_items.html" #}
    {# OR use "block sidenav_items" and list your items or include another template. #}
    {# This makes the sidenav items reusable in other templates #}
    {% include "my_app/sidenav_items.html" %}
{% endblock %}


{% block contents %}
<div class="row">
    <div class="col s12 m9 l10">
        <p>My Content goes here</p>
    </div>
</div>
{% endblock %}

Styling controls

Materialize nav comes with several style options used in the template context variables listed below.

  • MATERIALIZE_SITE_NAME
  • MATERIALIZE_TITLE
  • HIDE_CONTAINER
  • SHOW_SIDENAV
  • FIXED_SIDENAV
  • PRIMARY_COLOR
  • SECONDARY_COLOR
  • PRIMARY_COLOR_LIGHT
  • PRIMARY_COLOR_DARK
  • SUCCESS_COLOR
  • ERROR_COLOR
  • LINK_COLOR

If you went through the Setup Context Processors step then you can modify several settings to change the default style. This is an alternative to manually providing all of the template context variables.

# settings.py

MATERIALIZE_SITE_NAME = None  # Display this name in the navbar as the main name
MATERIALIZE_TITLE = None  # This is the page title displayed as the browser tab name

MATERIALIZE_HIDE_CONTAINER = False  # If True make the page take up the full width
MATERIALIZE_SHOW_SIDENAV = True  # If True have a menu button available to open up the side navigation menu
MATERIALIZE_FIXED_SIDENAV = False  # If True and SHOW_SIDENAV make the side navigation menu always showing

MATERIALIZE_PRIMARY_COLOR = 'materialize-red lighten-2'
MATERIALIZE_SECONDARY_COLOR = 'teal'
MATERIALIZE_PRIMARY_COLOR_LIGHT = '#e51c23'
MATERIALIZE_PRIMARY_COLOR_DARK = None
MATERIALIZE_SUCCESS_COLOR = None
MATERIALIZE_ERROR_COLOR = None
MATERIALIZE_LINK_COLOR = None

USER_THUMBNAIL_PROPERTY = 'profile.thumbnail'  # For user.profile.thumbnail
USER_BACKGROUND_PROPERTY = 'profile.background'  # For user.profile.background
# USER_THUMBNAIL = 'accounts/default_user.png'  # This is a default image
# USER_BACKGROUND_IMAGE = 'accounts/default_user.png'  # This is a default image

Styling process

There are two methods for changing the default coloring for Materialize CSS.

  • The old method is to use the templatetag include_dynamic_css which would use the django template system to generate a style tag with the proper css classes overridden.
  • The new method only requires using the base.html. It includes the materialize_nav/materialize_nav_colors.js file which uses javascript to create a style tag to edit the proper css classes. This method should require less work from django to change the style.

Goals

My original goal was to create an easier way to use materialize css with django. When I first started forms did not format properly and I thought navigation was a pain. Unfortunately, my original approach made this library a strong coupled to your django app which was a terrible design decision. I am trying to simplify this library to help style django apps quickly and without a lot of settings.

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Files for django-materialize-nav, version 1.1.3
Filename, size File type Python version Upload date Hashes
Filename, size django_materialize_nav-1.1.3.tar.gz (23.7 MB) File type Source Python version None Upload date Hashes View hashes

Supported by

Elastic Elastic Search Pingdom Pingdom Monitoring Google Google BigQuery Sentry Sentry Error logging AWS AWS Cloud computing DataDog DataDog Monitoring Fastly Fastly CDN SignalFx SignalFx Supporter DigiCert DigiCert EV certificate StatusPage StatusPage Status page