Contributing to patternfly org for designers

Designers wanting to contribute or update content pages to the PatternFly website must send a pull request via GitHub. This applies to all pages in the Design Guidelines and Get Started sections of the site. This page includes some useful tips and things you need to know for updating content.

Location for design guideline documents

All content pages reside in the /src directory here: https://github.com/patternfly/patternfly-org/tree/master/packages/patternfly-4/src/content Files in this repository adhere to the following file structure Note: Items not ending in a file extension are folder names

├── content
│   └── contribute
│   └── design-guidelines
│       └── content
│       └── styles
│       └── usage-and-behavior
│           ├── {topic-name}
│           │   ├── img
│           │   │   ├── {pattern-name}-{variation-name}.png
│           │   │   ├── {pattern-name}-{variation-name}-callout.png
│           │   │   └── ...
│           │   ├── design.md
│   └── design-snippets
│   └── get-started
...

Design-guidelines contains three subfolders:

Content - guidelines for writing on-screen content Styles - visual design resources and styles Usage and Behavior - Interaction design patterns

All folder and markdown file names should be in lowercase with dashes in place of spaces. Image file names should include the name of the pattern and, if possible, the defining feature of the image. Most importantly, however, is that the name is descriptive and not something like "image13copy.png"

Adding front-matter to your design.md file

Your design.md file must contain the following code at the top of the file in order to display properly in the page navigation.

---
title: {Your topic name}
section: {Where this lives in the above structure, e.g. "usage and behavior"}
hideTOC: {true or false. If true, hides the table of contents that includes a list of anchor tags to all h2s}
showTitle: {true or false. If true, show the title of the page}
---

Design snippet files

Design snippets are short statements reflecting usage that get added at the top of component documentation pages. The following is an example of a design snippet file:

---
reactComponentName: 'aboutmodal'
coreComponentName: 'aboutmodalbox'
---

The **about modal** displays information about an application like product version number(s), as well as any appropriate legal text. Related design guidelines: [About modal](/design-guidelines/usage-and-behavior/about-modal)

'''
Note that the React and core component names must match the URL of these documentation pages exactly.


## Previewing your changes

Once you submit your PR, a preview link will be generated by `patternfly-build` after all checks have passed. This will allow you and others to review your changes within the context of the site by clicking the `org-preview` link.