Giter VIP home page Giter VIP logo

django-pattern-library's Introduction

Django pattern library

PyPI PyPI downloads Travis Total alerts Language grade: Python

A module for Django that helps you to build pattern libraries and follow the Atomic design methodology.

Screenshot of the pattern library UI, with navigation, pattern rendering, and configuration

Objective

At the moment, the main focus is to allow developers and designers use exactly the same Django templates in a design pattern library and in production code.

There are a lot of alternative solutions for building pattern libraries already. Have a look at Pattern Lab and Astrum, for example. But at Torchbox we mainly use Python and Django and we find it hard to maintain layout on big projects in several places: in a project's pattern library and in actual production code. This is our attempt to solve this issue and reduce the amount of copy-pasted code.

Documentation

Documentation is located here.

How to install

  1. Add pattern_library into your INSTALLED_APPS:

    INSTALLED_APPS = [
        # ...
    
        'pattern_library',
    
        # ...
    ]
  2. Add pattern_library.loader_tags into the TEMPLATES setting. For example:

    TEMPLATES = [
        {
            'BACKEND': 'django.template.backends.django.DjangoTemplates',
            'DIRS': [],
            'APP_DIRS': True,
            'OPTIONS': {
                'context_processors': [
                    'django.template.context_processors.debug',
                    'django.template.context_processors.request',
                    'django.contrib.auth.context_processors.auth',
                    'django.contrib.messages.context_processors.messages',
                ],
                'builtins': ['pattern_library.loader_tags'],
            },
        },
    ]

    Note that this module only supports the Django template backend out of the box.

  3. Set the PATTERN_LIBRARY_TEMPLATE_DIR setting to point to a template directory with your patterns:

    PATTERN_LIBRARY_TEMPLATE_DIR = os.path.join(BASE_DIR, 'project_styleguide', 'templates')

    Note that PATTERN_LIBRARY_TEMPLATE_DIR must be available for template loaders.

  4. Include pattern_library.urls into your urlpatterns. Here's an example urls.py:

    from django.apps import apps
    from django.conf.urls import url, include

    urlpatterns = [ # ... Your URLs ]

    if apps.is_installed('pattern_library'): urlpatterns += [ url(r'^pattern-library/', include('pattern_library.urls')), ]

    
    

Developer docs

Developer docs can be found here.

TODO

  • Add a note about production usage
  • Tests: Add tests. It's ok to not bother about tests during prototyping, but it will be extremely hard to maintain the project without tests.

django-pattern-library's People

Contributors

alxbridge avatar bcdickinson avatar chris-lawton avatar helenb avatar m1kola avatar siimonevans avatar thibaudcolas avatar tomdyson avatar tomusher avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.