Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript.Learn more »


0.0.10-alpha • Public • Published

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\"",
  "preversion": "cross-env NODE_ENV=production pttrn default",
  "prepublishOnly": "cross-env NODE_ENV=production pttrn default",
  "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 }}

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.


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!




npm i @nycopportunity/patterns-framework

Downloadsweekly downloads









last publish


  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability