Front-end Ops @ PMC


  • Lack of consistency of architecture/organization of front-end code across brands, especially regarding:
  • JS lint configs
  • CSS architecture
  • Naming and availability of mixins/Sass utils
  • Slow build times and webpack config black-box
  • Slow to impossible front-end debugging and testing due to lack of local data and database configuration
  • Checking in compiled files is time consuming
  • Redundancy in front-end code, and unclear where to find references of existing patterns w/out tedious “Find in Folder” adventures
  • Documentation is not part of the workflow
  • Onboarding is difficult


  • United build step – pmc-scripts npm package
  • npm run prod – ideally run in pipeline
  • npm run dev – simple webpack config for JS, and node-sass via npm scripts for CSS
  • npm run kss – build a static style guide and run a local server for front-end dev
  • Overall separation of front-end and back-end in development via living pattern libraries
  • HTML and CSS dev. happen in a static style guide – agencies already did this in RS and HL, but they haven’t been maintained
  • HTML in Twig partials, output can be tested against corresponding PHP templates
  • Local data available via JSON or WP-API requests
  • Patterns adopted into a PMC Core pattern library as needed
  • Can develop and QA front-end in parallel with back-end
  • Business advantages – clearer communications and limitations when working with stakeholders.
  • ITCSS architecture and refactoring via a design “refresh” – IW, for example.
  • pmc-COMPONENT-assets – npm packages to track front-end assets of PMC Core Tech. These can be compiled in the build step of each theme, and the theme contains overrides and customization.
  • pmc-scss-utils – SCSS mixins and utilities, no styles output. Essentially a PMC-specific Compass that contains mixins for breakpoints, utilities like SVG background images and encoding, etc. Can be tested with True and documented with SassDoc or KSS.

(still fleshing these out ↓ )

Phase 1

  • Build out pmc-scripts:
  • Audit dependencies across brands 
  • Simple webpack config for JS
  • Linting
  • Sourcemaps
  • Babel
  • node-sass via npm scripts
  • Sourcemaps
  • Linting
  • Autoprefixer for prod task
  • KSS styleguide that can be generated and built upon over time
  • Test scripts on different machines
  • Prototype testing Twig output against PHP output
  • Education around ITCSS architecture and CSS in general (pair programming, esp.)
  • Adopting a mindset of front-end tasks as separate from back-end tasks

Phase 2

Set up infrastructure for collecting re-usable code. 
  • Audit PMC Core components
  • pmc-scss-utils – PMC's Compass