Front-end utilities from the Mayor's Office for Economic Opportunity
Last updated 2 days ago by devowhippit .
GPL-3.0+ · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @nycopportunity/patterns-framework 
SYNC missed versions from official npm registry.

NYCO Patterns Framework


$ npm install @nycopportunity/patterns-framework --save-dev

$ npm link @nycopportunity/patterns-framework

Add the ./config directory to the root your pattern library.

If you are using any of the optional dependencies used by the scripts in the ./config directory you will need to install them manually.

Recommended. Add the following npm scripts to your Patterns Library;

"scripts": {
  "start": "cross-env NODE_ENV=development cross-env PORT=7070 concurrently \"pttrn default -w\" \"pttrn serve -w\" -p \"none\"",
  "default": "cross-env NODE_ENV=production pttrn default",
  "version": "npm run default && git add .",
  "prepublishOnly": "git push && git push --tags",
  "publish": "cross-env NODE_ENV=production pttrn publish"

Start the development server (assuming you've added the npm scripts above to your package.json);

npm start

CLI commands can be executed using the pttrn command. Avaliable commands can be seen below.

pttrn {{ command }}

Versioning uses the default npm version command. This will run the version command in the recommended NPM Scripts.

npm version {{ major/minor/patch }}

Publishing to the registry uses the default npm publish command. This will run prepublishOnly and publish commands in the recommended NPM Scripts above as well which push all tags to GitHub. Publishing requires a new tag/version before publishing.

npm publish

Upgrading a current NYC Opportunity Patterns Library

Once the framework is installed as a dependency of the library you can delete the .app/ directory and remove any dependencies from the library listed in the framework's package.json dependency object. Keep in mind, you will need to keep any optional dependencies that the library is using. These may include specific plugins for Rollup and Vue.

Remove rollup-plugin-eslint from the ./config/rollup.js file if used. Linting is now done through a corresponding Script. Update esLint configuration in the ./package.json file

A few configuration files were renamed to keep parity with their corresponding Scripts name. Rename ./config/styles.js to ./config/sass.js and rename ./config/site.js to ./config/slm.js.


The Patterns Framework is a Node.js application that uses various libraries—including Express, Rollup.js, Sass, PostCSS, Nodemon, and Concurrently to run a development server and build tasks for Style, JavaScript, SVG, and static page views. This is all managed via the cli command pttrn {{ script }} and npm scripts in the package.json. Configuration for the application can be found in the config/ directory.


Command Configuration Optional Flags Description
default -w -n Lints files then asynchronously runs the scripts, styles, svg, and build scripts (detailed below).
serve -w -n Starts and Express app that serves the static files in the ./dist/ directory.
make make.js Starts a survey prompt for creating a new pattern using templates defined in the configuration. More details below.
lint package.json Lints JS and SASS files in the ./src/ directory using the eslintConfig and stylelintConfig objects in the package.json file.
rollup rollup.js -w -n Runs Rollup.js, compiling pattern scripts defined in the configuration from ES Modules into CommonJS and/or iffe modules.
styles -w Syncronously runs the variables, sass, and postcss scripts (detailed below).
variables variables.js -w -n Converts ./config/variables.js into ./src/config/_variables.scss.
sass sass.js Processes pattern Sass stylesheets defined in the configuration into CSS.
postcss sass.js, postcss.js Runs PostCSS on Patterns CSS stylesheets defined in the ./config/sass.js into CSS. PostCSS plugins are defined in the configuration.
svgs -w -n Optimizes SVGS in the ./src/svg/ directory into the ./dist/svg directory and creates an svg sprite for library icons in the ./dist/icons.svg file.
slm variables.js, slm.js -w Compiles Slm Lang files in ./src/views/ directory into static .html pages in the ./dist directory.
locals variables.js, slm.js This isn't a CLI script but it exports the local variables for the Slm Lang templates.
publish publish.js Publishes the ./dist directory to the gh-pages branch of the repository.


Flag Full Flag Description
-w --watch Use Nodemon to watch source files and rerun the command when changes are made.
-n --noisy Some commands use ShellJS to execute other command line tasks. By default, their native output is silenced by configuring ShellJS to execute commands silently. This will allow those commands to show their native output.


Details about the make script to come. For now, refer to the documentation in the ACCESS NYC Patterns, Developer Tools, Make Script documentation.

Optional dependencies

The following dependencies are optional as they are used by configuration files. If your pattern library uses them they will need to be added manually.

"autoprefixer": "^9.6.1",
"chalk": "^2.4.2",
"css-mqpacker": "^7.0.0",
"cssnano": "^4.1.10",
"eslint-config-google": "^0.13.0",
"node-emoji": "^1.10.0",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-buble": "^0.19.8",
"rollup-plugin-commonjs": "^10.0.1",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-replace": "^2.2.0",
"stylelint-config-standard": "^18.2.0",
"tailwindcss": "^1.0.5"

More details to come!

Current Tags

  • 0.0.17                                ...           latest (2 days ago)

15 Versions

  • 0.0.17                                ...           2 days ago
  • 0.0.16                                ...           3 days ago
  • 0.0.13                                ...           8 days ago
  • 0.0.12                                ...           8 days ago
  • 0.0.11                                ...           8 days ago
  • 0.0.10                                ...           9 days ago
  • 0.0.10-alpha                                ...           2 months ago
  • 0.0.9-alpha                                ...           2 months ago
  • 0.0.8-alpha                                ...           3 months ago
  • 0.0.7-alpha                                ...           3 months ago
  • 0.0.6-alpha                                ...           3 months ago
  • 0.0.5-alpha                                ...           3 months ago
  • 0.0.3-alpha                                ...           3 months ago
  • 0.0.2-alpha                                ...           3 months ago
  • 0.0.1-alpha                                ...           3 months ago
Today 1
This Week 35
This Month 105
Last Day 14
Last Week 70
Last Month 10
Dependencies (39)
Dev Dependencies (1)
Dependents (0)

Copyright 2014 - 2016 © taobao.org |