Patterns Documentation

Reusable documentation for pattern libraries created with the @nycopportunity/pttrn CLI. Save time on writing common documentation.

Table of Contents

• Available Guides
• Template Variables

Available Guides

Name | Description --------------------------------------------|- Installation | How to install pattern libraries in projects that will use them. Contributing | A general developers contribution and style guide. Patterns | An overview of the design patterns methodology for elements, components, objects, and utilities. Prototyping | A guide on prototyping with pattern libraries and Figma using the HTML to Figma plugin. Tailwindcss | An introduction to Tailwindcss and Slm markup that will use a tailwindcss.js configuration to create an interactive table demonstrating the configuration.

To include them in other pattern library static documentation sites use the this.include() method and double equals sign == render markdown files as HTML. Pass the full path to the desired file in the node modules directory.

== this.include('../node_modules/@nycopportunity/pttrn-docs/installation.md')

Package variables

The following template variables are used by the documentation to refer to paths specific to your project. Template variables set to this.package refer to values stored in your project's package.json file. Some are required for NPM package.json files and others are custom attributes.

Template Variable | Description --------------------------------------------|- this.package.name | The package name. See NPM package.json documentation for details. This may or may not include an NPM Organization prefix. this.package.nice | A human readable package or pattern library name. this.package.version | The package semantic version. See NPM package.json documentation for details. this.package.cdn.url | The preferred CDN url. Usually matches the pattern https://cdn.jsdelivr.net/gh/{{ GitHub Organization }}/{{ repo }}. This example uses JS Delivr. this.package.cdn.source | The GitHub repository url. Usually matches the pattern https://github.com/{{ GitHub Organization }}/{{ repo }} this.package.cdn.archive | The GitHub archive url. Usually matches the pattern https://github.com/{{ GitHub Organization }}/{{ repo }}/archive. this.package.cdn.styles | The local path to the fully distributed stylesheet module. this.package.cdn.scripts | The local path to the fully distributed JavaScript module. this.package.cdn.svg | The local path to the fully distributed SVG sprite. this.package.cdn.tailwindcss | The local path to the fully distributed Tailwindcss utility CSS stylesheet. this.package.cdn.tailwindsass | The local path to the fully distributed Tailwindcss Utility Sass stylesheet. this.package.instantiations.scripts | The main script module name used to instantiate the global pattern script. For example new Default() would instantiate a module named Default.

Below is how template variables are set in a sample package.json file.

{
  "name": "@npm-organization/pattern-library",
  "nice": "My Pattern Library",
  "version": "1.0.0",
  "cdn": {
    "url": "https://cdn.jsdelivr.net/gh/github-organization/pattern-library",
    "source": "https://github.com/github-organization/pattern-library",
    "archive": "https://github.com/github-organization/pattern-library/archive",
    "styles": "/dist/scripts/default.css",
    "scripts": "/dist/scripts/default.js",
    "svg": "/dist/svg/svgs.svg",
    "tailwindcss": "/dist/styles/tailwindcss.css",
    "tailwindsass": "/dist/styles/_tailwindcss.scss"
  },
  "instantiations": {
    "scripts": "Default"
  },
  // ...
}

Slm Variables

Additional template variables can be set in the project config/slm.js.

Template Variable | Description ---------------------------|- this.marked.headerPrefix | Prefix for markdown file heading IDs. This should be set to a blank string if no prefix is desired ''. This assists with inline anchor links.