springload/pattern-library

Name: pattern-library

Owner: Springload

Description: WIP: Pattern library in django.

Created: 2016-03-23 05:01:41.0

Updated: 2017-07-03 00:04:34.0

Pushed: 2016-04-08 04:04:43.0

Homepage: null

Size: 123

Language: Python

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

Pattern Library

This is some very initial thinking about how a pattern library could work.

The pattern library has two simple goals:

• Reduce boilerplate and repetition between projects.
• Provide documentation about the interface/frontend. This helps when new people pick up the project. They can see what it is made of.

What lives in the pattern library?

• Forms!
• Fields
• Field errors/validation
• Message
• Variations on forms: inline fields, stacked fields, etc…
• Things that are used on at least 2 (preferably 3) production projects. Components we know we will re-use.

Naming conventions.

• Naming is hard.
• Where possible, use the accessible component name/role
  • FED team to read the boring spec and come up with a few good names.
• Use names from material or WIA or bootstrap.
• Do a naming session on all UI projects. Should include the DES + FED + DEV + AM.
• Meet occasionally and check SL are naming components properly.

---

Installation

1. Check out the project.
2. Run pip install -r requirements.txt in the project root.

Starting the server

./manage.py runserver

View it on

http://localhost:8000

Creating new components

Use ./manage.py createcomponent my_app my_component to scafold the basic structure under my_app/components/

---

Installing into an existing Django Project

In PROJECT/settings.py:

• Add patterns to INSTALLED_APP
• Add os.path.join(BASE_DIR, 'patterns', 'components') to TEMPLATES['DIRS']

Syntax

You load some data and pass it to a component.

This could be stored in a Python package:

omponent "button" data='example.conf.DEFAULT_BUTTON' %}

Or, set dynamically in the template:

ptions button_data %}

"class": [
  "btn",
  "btn-primary",
  "btn-options"
],
"attrs": {
    "data-button": "some-value"
},
"label": "{{ 'I changed the label' }}"

ndoptions %}
omponent "button" data=button_data %}

Or both:

oad_data "example.data.BUTTON_DATA" as common_data %}
ptions common_data button_data %}

"label": "{{ 'I changed the label' }}"

ndoptions %}
omponent "button" data=button_data  %}

Custom components

Setup your app

1. Create a new application ./manage.py startapp my_app
2. Update PROJECT/settings.py:
3. Add my_app to INSTALLED_APP before patterns
4. Add os.path.join(BASE_DIR, 'my__app', 'components') to TEMPLATES['DIRS'] before os.path.join(BASE_DIR, 'patterns', 'components')