npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

brei-pattern-scaffold

v0.4.1

Published

Pattern library client project by Barkley

Downloads

46

Readme

<%= appname %>

CMS:

JIRA Project:

Epic Ticket:

Stash Repo: <%= stashrepo %>

##Project Info:

Static Repo Versions

Pattern Scaffold: <%= scaffoldversion %>

SASS Boilerplate: <%= sassversion %>

SASS Mixins: <%= mixinversion %>

Handlebar Helpers: <%= helperversion %>

NPM Scripts

npm install

Commands

npm run check - run linting tests

npm start - run server

Building

npm run build - Run a full build on static assets and the pattern library.

Tasks

build

npm run clean:dist && npm run scaffold && npm run check && npm run build:img && npm run build:css && npm run build:js && fractal build

  • Cleans up the dist folder.
  • Runs the modernizr and preprocessor tasks. (scaffold)
  • Runs lint checks for SASS and ES6 (check)
  • Runs the IMG build tasks. (build:img)
  • Runs the CSS build tasks. (build:css)
  • Runs the JavaScript build tasks. (build:js)
  • Compiles the fractal pattern library.

build:css

npm run sass:build && npm run postcss:preprocess && npm run postcss:postprocess

  • Runs Sass build task. (sass:build)
  • Runs PostCSS build task. (postcss:build)

build:img

node lib/imagemin.js

  • Runs imagemin script on app/img and outputs into dist/img.

build:js

npx webpack --config ./_config/webpack.config.js --mode=production

  • Runs webpack configuration on ejs directory, with a production flag.

check

eslint --ignore-path _config/.eslintignore -c _config/.eslintrc.json assets/ejs && npm run sass:lint

  • Runs eslint on the ejs directory.
  • Runs Sass linting tasks. (sass:lint)

clean:dist

node lib/del.js --dist

  • Remove compiled assets from public folder.

modernizr

customizr -c ./_config/modernizr-config.json

  • Runs customizr script to produce a custom build of modernizr.js, which it places in app/js/plugins/

postcss:fixsass

postcss --config _config/ -r assets/scss/**/*.scss --env=scss

  • Runs postcss script using congfiguration (_config/postcss.config.js) on scss file in assets directory. This is using the scss configuration.
  • PostCSS plugins:

postcss:postprocess

postcss --config _config/ -r public/css/main.css --env=csspost

  • Runs postcss script using congfiguration (_config/postcss.config.js) on css file in public directory. This is using the csspost configuration.
  • PostCSS plugins:

postcss:preprocess

postcss --config _config/ -r public/css/main.css --env=csspre

  • Runs postcss script using congfiguration (_config/postcss.config.js) on css file in app directory. This is using the csspre configuration.
  • PostCSS plugins:

preprocess

npm run preprocess:css && npm run preprocess:js && npm run modernizr

  • Runs CSS Preprocessing task.
  • Runs JS Preprocessing task.
  • Runs modernizr taskk.

preprocess:css

npm run sass:index && npm run sass:build && npm run postcss:preprocess

  • Runs Sass Index task.
  • Runs Sass Build task.
  • Runs Postcss Preprocess task.

preprocess:js

npx webpack --config ./_config/webpack.config.js

  • Compiles ES6 JavaScript using Webpack configuration.

sass:index

node lib/updateScss.js

  • Recompiles the index scss files for the atomic components in the scss folder.

sass:build

node lib/nodesass.js

  • Compiles SCSS using nodesass configuration.

sass:lint

npm run postcss:fixsass && stylelint "assets/scss/**/*.scss" --fix --cache --cache-location "./.stylelintcache/" --config "./_config/.stylelintrc.json" --ignore-path "./_config/.stylelintignore"

  • Runs Postcss Fixsass task.
  • Lints the SCSS files based on defined stylelint rules.

scaffold

npm run modernizr && npm run preprocess

  • Runs modernizr task
  • Runs preprocess task

start

npm run scaffold && fractal start

  • Runs scaffold task
  • Starts a server on port 3000 (or first available port).

test

mocha

  • Runs tests on the project files.