{"_id":"@wbez/ferris-ds","_rev":"56-75eb5061ea560df518378c2cf6f88ae5","name":"@wbez/ferris-ds","dist-tags":{"next":"5.0.0-0","latest":"7.0.0"},"versions":{"1.0.0-0":{"name":"@wbez/ferris-ds","version":"1.0.0-0","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/queso-tools":"1.3.0","browser-sync":"^2.26.3","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0"},"dependencies":{"normalize.css":"^8.0.1","sass-mq":"^5.0.0"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@1.0.0-0","dist":{"shasum":"b3769451cd747fe327c22ee6ba924b43bbd3ac07","integrity":"sha512-nMXuhylvRZGeZqEYjcslFczkedlIj3tKa4AgC4tQc+BcUxn+FZrVEoADYmeKq1WFLjdZSSl/hEWZT6GfIEF4LA==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-1.0.0-0.tgz","fileCount":199,"unpackedSize":498380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdi3ObCRA9TVsSAnZWagAAx+sP/2PIgEuaYTvJ5IIHPF9Y\nNth8RGIMAP4svEzDrofZaMv9l5thg/FoKPz9leLeoijOTQQkzOksEfdLsDHc\nzcGlPJ6CnK9IfoWs3sh/5DCP523q8sx3IhEbRmbIaDwjPIfEEB8xWS1zfFS7\nuTtaY/HTW5Ex0iCXZnlNMrt583+Fyp4DUoOEwH9UIvroOsa+wQULeVOSaK2D\nmhIkzmD043Y/HHmaCOZ/iV52Cx7wGVNofvt6YvJEq/DAm5D45xIazRiZGmb/\naVBeQ2XsSl5runp2nIHElqzV9oDNdSFZOXYBaUEsxUzI6Irl11A9hfZIRIH7\nC6jkr/lwlx+Jg9FKdim9IMHwdcNqTX4n9Oyto6nEdm/ZKZ3bJ7uoWAr1FBqs\nl0AxKvUVHXrQKf4B4urG4machZ9KBk5Bs7SzCoCiI2WQoVEpuUIbM21YTGbZ\nftmU18tAlWH5xnDrRly7z5ruSdwabQdqLKAdlpqknXWpgwLwehiXP0KF41+V\ntVZPL5sLKM8oumSlh6VnABzVzgAjn8NxaPEkgESVIMkQiynrDnTVv/IRSrH4\ntvMcbs7hNu3woTl2oIJCpK1eiroligq7VPDr2eYbtOgPqa8Ny0Ay/BwmHy6i\nNOfpNSrwbncssed02ScAYH3Zx9dVgYFXa1aeN/CdK6hA+ejdvzrNBCxzE29L\njwga\r\n=l48G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIExAh6omXwVgbc5Zrr+j/wpjeB+TtS/oDOMMSSB7mPsyAiAPp7HMygjX3rYUDKDlvQOWUZX3YzEHP+ArbGW5JpNZXg=="}]},"maintainers":[{"name":"sgersten","email":"sgersten@wbez.org"},{"name":"mmcclintock-wbez","email":"mmcclintock@wbez.org"},{"name":"phjudge","email":"pjudge@wbez.org"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_1.0.0-0_1569420187030_0.47983872170814035"},"_hasShrinkwrap":false},"1.0.0-1":{"name":"@wbez/ferris-ds","version":"1.0.0-1","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/queso-tools":"1.3.0","browser-sync":"^2.26.3","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0"},"dependencies":{"normalize.css":"^8.0.1","sass-mq":"^5.0.0"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"readmeFilename":"README.md","readme":"# @wbez/ferris-ds\n\n> Centralizing styles for product development at WBEZ\n\nThis repo contains a library of styles and icons available to import via npm.\n\nAlong with the library, we set up a few tools that help document updates. CSS comments are parsed to create a JSON object of documentation. That data is rendered with nunjucks to give us a visual representation of the various components and rule-sets we're building.\n\nOur goal is that as we iterate upon the design of our products, we document everything along the way. This keeps our **style docs current and allows for continuous optimization our CSS.**\n\nThis repo is forked from [texastribune/queso-ui@v3.2.0](https://github.com/texastribune/queso-ui/releases/tag/v3.2.0). Much thanks and props for building out such a great base for us to launch from.\n\n## Getting started\n\nTo preview these assets and accompanying docs locally, run the following commands:\n\n```sh\nyarn\n```\n\n```sh\nyarn dev\n```\n\nVisit http://wbez.local:3000\n\nThis spins up a browsersync server and watch task for all SCSS and HTML files.\n\n**Requirements**\n\n- node >=8.11.3\n\n## Installing as a dependency\n\n```sh\nyarn add @wbez/ferris-ds --dev\n```\n\n```sh\nnpm install @wbez/ferris-ds --save-dev\n```\n\n## Folders\n\n| directory | description |\n| ------------ | ----------------------------------------------------------------------------------------------------------- |\n| assets/scss | Various SASS files establishing our CSS framework |\n| assets/icons | Sets of individual SVG icons used throughout our products |\n| docs | Tools and templates to statically render documentation, code examples, and usage info for our design system |\n\n## Adding to the CSS Framework\n\nWhen you add a new class, component, scss variable, mixin, etc., you'll want to add a short bit of syntax to enable it to appear in the docs. Use the boilerplate below to get started.\n\n### SCSS docs boilerplate\n\n> How to document a new CSS class\n\nWe use a comment parser along with some [extra logic](https://github.com/wbez/ferris-ds/blob/master/tasks/style-doc.js) to generate our docs. To add a new section of documentation, add a boilerplate above your CSS rules like the one below:\n\n```scss\n// Title of Section (root-class-name)\n//\n// Description {{isWide}} {{isHelper}}\n//\n// root-class-name-modifier - desc\n//\n// Markup: 6-components/test/test.html\n//\n// Styleguide 6.0.1\n//\n.root-class-name {\n}\n```\n\n- `{{isWide}}` is used to display the demo of each modifier at full width\n- `{{isHelper}}` is used to hide main demo and only display modifiers\n- `// Deprecated` is used to signify a class to be removed.\n- `// Experimental` is used to signify a class we're considering.\n\n**Deprecated** and **Experimental** are named per [KSS syntax](https://warpspire.com/kss/syntax/).\n\n### Naming and organization\n\nWhen building CSS dispersed on a variety of platforms, it can be difficult to know where certain style rules should live and what to call them. We use the following guideline to help with those decisions as we scale our framework.\n\n#### ITCSS\n\nWe organize our SCSS files with the [inverted triangle](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) approach in mind. We put our own spin on it by adding a `typography`, `layouts` and `blocks` folder, but the general idea is all the same; increased specificity as you move down the stylesheet.\n\nSee also Brad Frost's write-up on atomic design for the rationale behind composable components. (`components` → `blocks` → `pages`)\n\n#### BEM\n\nWe closely follow the BEM (Block Element Modifier) class naming convention in our `components` folder, but we break BEM rules in other places. This is a deliberate attempt to create a hybrid approach of using BEM when scoped to a component and helper classes when styling globally in a more ad hoc context.\n\n#### Namespacing\n\nUse namespacing for quick reference of the function of a CSS class. The following key can be used as a guideline for naming your class:\n\n---\n\nComponents\n\n```css\n.c-component-name[__|--<-modifier>] {\n}\n```\n\n_Example: `c-button`_\n\n---\n\nTypography\n\n```css\n.t-type-util {\n}\n```\n\n_Example: `t-headline`_\n\n---\n\nLayout\n\n```css\n.l-layout-util {\n}\n```\n\n_Example: `l-container`_\n\n---\n\nBlocks\n\n```css\n.b-block-name {\n}\n```\n\n_Example: `b-site-footer`_\n\n---\n\nUtilities\n\n```css\n.[is|has]-state {\n}\n```\n\n_Example: `has-bg-yellow`_\n\n---\n\n## Using this system in our products\n\nThis system is experimental and under rapid development. Use it in situations where it makes sense for the scope of your task.\n\n**Do** use this system when...\n\n- Coding a new template from scratch (new landing pages)\n- Creating something in a isolated environment outside of legacy systems (newsletters, new static sites, UMP)\n\n**Don't** use this system when...\n\n- Making a small CSS change to the legacy system (tiny visual tweak to our main repo)\n- The system creates an unnecessarily layer of complexity (take the path of least resistance)\n\n--\n\n## Publishing\n\nMake sure you're authenticated for npm publishing.\n\n1. `npm login` - then follow the prompts\n2. `npm run release` - There's a [bug](https://github.com/sindresorhus/np/issues/420#issuecomment-499273013) in the `np` publishing tool we use where `yarn` commands don't seem to work.\n\n### Semantic versioning\n\nThe npm helper we use for versioning simplifies matching version numbers with the various `MAJOR`, `MINOR`, `PATCH` increment types. For guidance on what type of release you're making, refer to [https://semver.org/](https://semver.org/)\n\nGenerally, you could base your increment type on the following list:\n\n- MAJOR version = CSS changes that visually break layouts where `ferris-ds` is used on production\n- MINOR version = CSS changes that have no visual effect on production\n- PATCH version = CSS changes that fix a previous bug introduced on production or in development\n\n### Deploying our docs\n\nOur docs are automatically published from the `master` branch by AWS Amplify.\n","licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@1.0.0-1","dist":{"shasum":"5e3197d7dacea791c013dea7b1430bc99c45be2d","integrity":"sha512-RvQxR12wV8gzLvIHgkKrU5clo15Gp+rNg5roP1MoPGzOvznQG1ynQbiIvMEnCLKyqPpvlxgRBvXeYS4N2H2+lw==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-1.0.0-1.tgz","fileCount":199,"unpackedSize":498380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdi3P9CRA9TVsSAnZWagAArnQP/A0Ci1dbctduZYLkyeDc\npanr8++XES2+/GxejjtG6LYMoUoIgzynGsCwsk6SLV8GGKPBieo7MPH7fm4g\nzISnpzi7OoEuS7EgRdVEeNyyIHHHhPKtAXYHCtktz/tQvXTjWP5wc4LE3AMm\nB+enVisYq0NYEQIBZa15MZ5hEPFVCzjHkB+jl3qyVrTSv4TrOLGeNSPvg8MX\nKdax6A9OeWR87uYumP9wnEdkKTXYatmg419wSsWJ/cWBhw3dYvUSQegLw3tL\nm/Lt3DdF1KKTO/s3FUaOQ52J6TcI1lQRor/RtcEgzwU2GC6ffposcwCX5XnW\nSopsfW0loBbR6C5ACOJfMpYozRwcg1iy8NK2cc0k1rO/c0MW/YoZ0F8lhHH9\n+ZqTU9sKrDF67un3uSPO3W4fyjkKZBJAV/RfrhtwX75ls+a3d4FcWrKWJ1il\nHixJzpUBBbNQS9xHjEuTfJ0uu2t9RnxxIwlUdEekcY7JFkndc3Y3C9Kgh4re\nl30y08PXh1/EzeGlb5tpVNP7NlNzKYdW07oR/c939iEfABNXrvi1hQyRnpiR\ntWDyGgwEyz4pru2AKuHoJtZMWoFVI7IcCyZW3tt/3OwQfo1P25AL/ikzYg+R\ntdODweSAfZ5USGj+6mktLtFQgrkE1QVKcaQzmzJgXTLTx7NP494U2vo6KA76\nNZLt\r\n=z/Ax\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAmaWal6yGnrI9WgZaCs9mf0zPEgrU5QaDrvcT0zy/5mAiEAlJNz3NNEZdW18XMtcWlWS2QiHuB5PzMcl3r/nk2m21I="}]},"maintainers":[{"name":"mmcclintock-wbez","email":"mmcclintock@wbez.org"},{"name":"phjudge","email":"pjudge@wbez.org"},{"name":"sgersten","email":"sgersten@wbez.org"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_1.0.0-1_1569420285089_0.42275154074788457"},"_hasShrinkwrap":false},"1.0.0-2":{"name":"@wbez/ferris-ds","version":"1.0.0-2","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1","sass-mq":"^5.0.0"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"readmeFilename":"README.md","readme":"# @wbez/ferris-ds\n\n> Centralizing styles for product development at WBEZ\n\nThis repo contains a library of styles and icons available to import via npm.\n\nAlong with the library, we set up a few tools that help document updates. CSS comments are parsed to create a JSON object of documentation. That data is rendered with nunjucks to give us a visual representation of the various components and rule-sets we're building.\n\nOur goal is that as we iterate upon the design of our products, we document everything along the way. This keeps our **style docs current and allows for continuous optimization our CSS.**\n\nThis repo is forked from [texastribune/queso-ui@v3.2.0](https://github.com/texastribune/queso-ui/releases/tag/v3.2.0). Much thanks and props for building out such a great base for us to launch from.\n\n## Getting started\n\nTo preview these assets and accompanying docs locally, run the following commands:\n\n```sh\nyarn\n```\n\n```sh\nyarn dev\n```\n\nVisit http://wbez.local:3000\n\nThis spins up a browsersync server and watch task for all SCSS and HTML files.\n\n**Requirements**\n\n- node >=8.11.3\n\n## Installing as a dependency\n\n```sh\nyarn add @wbez/ferris-ds\n```\n\n```sh\nnpm install @wbez/ferris-ds\n```\n\n## Using assets\n\nSCSS\n\n```scss\n@import '~@wbez/ferris-ds';\n```\n\nCSS in `` via CDN\n\n```html\n\n```\n\nSingle icon\n\n```js\nimport linkIcon from '@wbez/ferris-ds/assets/icons/wbez/link.svg';\n\n\"\";\n```\n\nIcon using spritesheet\n\n```jsx\nimport icons from '@wbez/ferris-ds/assets/dist/sprites/wbez.svg';\n\n\n \n;\n```\n\nLogo (CDN)\n\n```html\n\n```\n\nLogo (direct)\n\n```jsx\nimport logo from \"@wbez/ferris-ds/assets/logos/wbez/wbez-chicago-logo-oneline.svg\";\n\n\"WBEZ\n```\n\n## Folders\n\n| directory | description |\n| ------------ | ----------------------------------------------------------------------------------------------------------- |\n| assets/scss | Various SASS files establishing our CSS framework |\n| assets/icons | Sets of individual SVG icons used throughout our products |\n| assets/logos | Individual SVG/PNG logos used throughout our products |\n| docs | Tools and templates to statically render documentation, code examples, and usage info for our design system |\n\n## Adding to the CSS Framework\n\nWhen you add a new class, component, scss variable, mixin, etc., you'll want to add a short bit of syntax to enable it to appear in the docs. Use the boilerplate below to get started.\n\n### SCSS docs boilerplate\n\n> How to document a new CSS class\n\nWe use a comment parser along with some [extra logic](https://github.com/wbez/ferris-ds/blob/master/tasks/style-doc.js) to generate our docs. To add a new section of documentation, add a boilerplate above your CSS rules like the one below:\n\n```scss\n// Title of Section (root-class-name)\n//\n// Description {{isWide}} {{isHelper}}\n//\n// root-class-name-modifier - desc\n//\n// Markup: 6-components/test/test.html\n//\n// Styleguide 6.0.1\n//\n.root-class-name {\n}\n```\n\n- `{{isWide}}` is used to display the demo of each modifier at full width\n- `{{isHelper}}` is used to hide main demo and only display modifiers\n- `// Deprecated` is used to signify a class to be removed.\n- `// Experimental` is used to signify a class we're considering.\n\n**Deprecated** and **Experimental** are named per [KSS syntax](https://warpspire.com/kss/syntax/).\n\n### Naming and organization\n\nWhen building CSS dispersed on a variety of platforms, it can be difficult to know where certain style rules should live and what to call them. We use the following guideline to help with those decisions as we scale our framework.\n\n#### ITCSS\n\nWe organize our SCSS files with the [inverted triangle](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) approach in mind. We put our own spin on it by adding a `typography`, `layouts` and `blocks` folder, but the general idea is all the same; increased specificity as you move down the stylesheet.\n\nSee also Brad Frost's write-up on atomic design for the rationale behind composable components. (`components` → `blocks` → `pages`)\n\n#### BEM\n\nWe closely follow the BEM (Block Element Modifier) class naming convention in our `components` folder, but we break BEM rules in other places. This is a deliberate attempt to create a hybrid approach of using BEM when scoped to a component and helper classes when styling globally in a more ad hoc context.\n\n#### Namespacing\n\nUse namespacing for quick reference of the function of a CSS class. The following key can be used as a guideline for naming your class:\n\n---\n\nComponents\n\n```css\n.c-component-name[__|-<-modifier>] {\n}\n```\n\n_Example: `c-button`_\n\n---\n\nTypography\n\n```css\n.t-type-util {\n}\n```\n\n_Example: `t-headline`_\n\n---\n\nLayout\n\n```css\n.l-layout-util {\n}\n```\n\n_Example: `l-container`_\n\n---\n\nBlocks\n\n```css\n.b-block-name {\n}\n```\n\n_Example: `b-site-footer`_\n\n---\n\nUtilities\n\n```css\n.[is|has]-state {\n}\n```\n\n_Example: `has-bg-yellow`_\n\n---\n\n## Using this system in our products\n\nThis system is experimental and under rapid development. Use it in situations where it makes sense for the scope of your task.\n\n**Do** use this system when...\n\n- Coding a new template from scratch (new landing pages)\n- Creating something in a isolated environment outside of legacy systems (newsletters, new static sites, UMP)\n\n**Don't** use this system when...\n\n- Making a small CSS change to the legacy system (tiny visual tweak to our main repo)\n- The system creates an unnecessarily layer of complexity (take the path of least resistance)\n\n---\n\n## Publishing\n\nMake sure you're authenticated for npm publishing.\n\n1. `npm login` - then follow the prompts\n2. `npm run release` - There's a [bug](https://github.com/sindresorhus/np/issues/420#issuecomment-499273013) in the `np` publishing tool we use where `yarn` commands don't seem to work.\n\n### Semantic versioning\n\nThe npm helper we use for versioning simplifies matching version numbers with the various `MAJOR`, `MINOR`, `PATCH` increment types. For guidance on what type of release you're making, refer to [https://semver.org/](https://semver.org/)\n\nGenerally, you could base your increment type on the following list:\n\n- MAJOR version = CSS changes that visually break layouts where `ferris-ds` is used on production\n- MINOR version = CSS changes that have no visual effect on production\n- PATCH version = CSS changes that fix a previous bug introduced on production or in development\n\n### Deploying our docs\n\nOur docs are automatically published from the `master` branch by AWS Amplify.\n","licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@1.0.0-2","dist":{"shasum":"8925c06cafab08ff2e098304146bbe945c1097c7","integrity":"sha512-A3JWQOWLSCSndtcK4mQfK4sR1ogJsHNz/HDEU5TX5j3Xtkksl3634gc7+otOFfm8HXTZfW2MXrQvNLH6bw+LhQ==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-1.0.0-2.tgz","fileCount":200,"unpackedSize":510780,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdk7AICRA9TVsSAnZWagAANpgQAJ2kc5EGPGAdQz8iJx1u\nW9mFE5ts1KLNsBYaD8kJtGt3SvMtlSyRykyTpVS2lcHY6lO3LAKmXmcqMrqw\nnVy0vHFv3Z1U7SB5cem8sWc6rMRDmJbWS9iXbVS4Yxb625t6I0AeGAF0M+ka\n+xti94bYIuPLsq4DH0/7a9HjIb+yHiitrZ0eUrpIXkfZJmkNy6kjl3Ym1eZq\naKtITOOiY98g9472jYGSELXd5WOxxrLaZXplnlyM896UjPu0vEHaMiW9qpxU\nrHSR8kQpz+Mn8gwLrKnQW1Vwvs4iIR0EDD4YsE3UuxHThDQsP20dEFY8yCKf\naSE8Vsi9NszRrBcfGnMhTkbOCuQA+X83V72Xvcu43HYjqUs535wg2xcOEqrl\nAJ0Bgw8TOxUm5E3L8PK7aOSqT/mmUc/QYiXNmbXgq+HUfOYA7U2ecqFiGEiG\nUd83XecKHwTjgW7p2bXTGdNVwwauzedq99FGqkjGm7PidmpouP6fVMSkrZyw\namJ6+gXD2YlS2ZLHbno2dDztGFLQ3VzjXSh4smdJglxc9/qBaNqa3CnAPFc5\nsvSWPZWfwIP9waXTask7SNOluKBXUAhXAC1zfzugJQrjTVDJkZveQJoeOE3Y\nm75wT3Ur3hJz8fOQ3y9u5B/E3k4etWB5p0zdoYqbkUVzUBLbWNIOE0MWoko0\nFVCC\r\n=akc8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCMW5OUVkiDZnxfbiii9xA6b1TPvmX5lMQ4zxJutxSHCQIgfZejYPWobdhorBWcZEV1gE1qiXPdh1sRz4P0EHwc/U8="}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_1.0.0-2_1569959943611_0.629735576738133"},"_hasShrinkwrap":false},"1.0.0-3":{"name":"@wbez/ferris-ds","version":"1.0.0-3","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1","sass-mq":"^5.0.0"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"readmeFilename":"README.md","readme":"# @wbez/ferris-ds\n\n> Centralizing styles for product development at WBEZ\n\nThis repo contains a library of styles and icons available to import via npm.\n\nAlong with the library, we set up a few tools that help document updates. CSS comments are parsed to create a JSON object of documentation. That data is rendered with nunjucks to give us a visual representation of the various components and rule-sets we're building.\n\nOur goal is that as we iterate upon the design of our products, we document everything along the way. This keeps our **style docs current and allows for continuous optimization our CSS.**\n\nThis repo is forked from [texastribune/queso-ui@v3.2.0](https://github.com/texastribune/queso-ui/releases/tag/v3.2.0). Much thanks and props for building out such a great base for us to launch from.\n\n## Index\n\n- [Getting started](#getting-started)\n- [Installing as a dependency](#installing-as-a-dependency)\n- [Using assets](#using-assets)\n- [Folders](#folders)\n- [Adding to the CSS framework](#adding-to-the-css-framework)\n- [Using this system in our products](#using-this-system-in-our-products)\n- [Publishing](#publishing)\n\n## Getting started\n\nTo preview these assets and accompanying docs locally, run the following commands:\n\n```sh\nyarn\n```\n\n```sh\nyarn dev\n```\n\nVisit http://wbez.local:3000\n\nThis spins up a browsersync server and watch task for all SCSS and HTML files.\n\n**Requirements**\n\n- node >=8.11.3\n\n## Installing as a dependency\n\n```sh\nyarn add @wbez/ferris-ds\n```\n\n```sh\nnpm install @wbez/ferris-ds\n```\n\n## Using assets\n\nSCSS\n\n```scss\n@import '~@wbez/ferris-ds';\n```\n\nCSS in `` via CDN\n\n```html\n\n```\n\nSingle icon\n\n```js\nimport linkIcon from '@wbez/ferris-ds/assets/icons/wbez/link.svg';\n\n\"\";\n```\n\nIcon using spritesheet\n\n```jsx\nimport icons from '@wbez/ferris-ds/assets/dist/sprites/wbez.svg';\n\n\n \n;\n```\n\nLogo (CDN)\n\n```html\n\n```\n\nLogo (direct)\n\n```jsx\nimport logo from \"@wbez/ferris-ds/assets/logos/wbez/wbez-chicago-logo-oneline.svg\";\n\n\"WBEZ\n```\n\n## Folders\n\n| directory | description |\n| ------------ | ----------------------------------------------------------------------------------------------------------- |\n| assets/scss | Various SASS files establishing our CSS framework |\n| assets/icons | Sets of individual SVG icons used throughout our products |\n| assets/logos | Individual SVG/PNG logos used throughout our products |\n| docs | Tools and templates to statically render documentation, code examples, and usage info for our design system |\n\n## Adding to the CSS framework\n\nWhen you add a new class, component, scss variable, mixin, etc., you'll want to add a short bit of syntax to enable it to appear in the docs. Use the boilerplate below to get started.\n\n### SCSS docs boilerplate\n\n> How to document a new CSS class\n\nWe use a comment parser along with some [extra logic](https://github.com/wbez/ferris-ds/blob/master/tasks/style-doc.js) to generate our docs. To add a new section of documentation, add a boilerplate above your CSS rules like the one below:\n\n```scss\n// Title of Section (root-class-name)\n//\n// Description {{isWide}} {{isHelper}}\n//\n// root-class-name-modifier - desc\n//\n// Markup: 6-components/test/test.html\n//\n// Styleguide 6.0.1\n//\n.root-class-name {\n}\n```\n\n- `{{isWide}}` is used to display the demo of each modifier at full width\n- `{{isHelper}}` is used to hide main demo and only display modifiers\n- `// Deprecated` is used to signify a class to be removed.\n- `// Experimental` is used to signify a class we're considering.\n\n**Deprecated** and **Experimental** are named per [KSS syntax](https://warpspire.com/kss/syntax/).\n\n### Naming and organization\n\nWhen building CSS dispersed on a variety of platforms, it can be difficult to know where certain style rules should live and what to call them. We use the following guideline to help with those decisions as we scale our framework.\n\n#### ITCSS\n\nWe organize our SCSS files with the [inverted triangle](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) approach in mind. We put our own spin on it by adding a `typography`, `layouts` and `blocks` folder, but the general idea is all the same; increased specificity as you move down the stylesheet.\n\nSee also Brad Frost's write-up on atomic design for the rationale behind composable components. (`components` → `blocks` → `pages`)\n\n#### BEM\n\nWe closely follow the BEM (Block Element Modifier) class naming convention in our `components` folder, but we break BEM rules in other places. This is a deliberate attempt to create a hybrid approach of using BEM when scoped to a component and helper classes when styling globally in a more ad hoc context.\n\n#### Namespacing\n\nUse namespacing for quick reference of the function of a CSS class. The following key can be used as a guideline for naming your class:\n\n---\n\nComponents\n\n```css\n.c-component-name[__|-<-modifier>] {\n}\n```\n\n_Example: `c-button`_\n\n---\n\nTypography\n\n```css\n.t-type-util {\n}\n```\n\n_Example: `t-headline`_\n\n---\n\nLayout\n\n```css\n.l-layout-util {\n}\n```\n\n_Example: `l-container`_\n\n---\n\nBlocks\n\n```css\n.b-block-name {\n}\n```\n\n_Example: `b-site-footer`_\n\n---\n\nUtilities\n\n```css\n.[is|has]-state {\n}\n```\n\n_Example: `has-bg-yellow`_\n\n---\n\n## Using this system in our products\n\nThis system is experimental and under rapid development. Use it in situations where it makes sense for the scope of your task.\n\n**Do** use this system when...\n\n- Coding a new template from scratch (new landing pages)\n- Creating something in a isolated environment outside of legacy systems (newsletters, new static sites, UMP)\n\n**Don't** use this system when...\n\n- Making a small CSS change to the legacy system (tiny visual tweak to our main repo)\n- The system creates an unnecessarily layer of complexity (take the path of least resistance)\n\n---\n\n## Publishing\n\nMake sure you're authenticated for npm publishing.\n\n1. `npm login` - then follow the prompts\n2. `npm run release` - There's a [bug](https://github.com/sindresorhus/np/issues/420#issuecomment-499273013) in the `np` publishing tool we use where `yarn` commands don't seem to work.\n\n### Semantic versioning\n\nThe npm helper we use for versioning simplifies matching version numbers with the various `MAJOR`, `MINOR`, `PATCH` increment types. For guidance on what type of release you're making, refer to [https://semver.org/](https://semver.org/)\n\nGenerally, you could base your increment type on the following list:\n\n- MAJOR version = CSS changes that visually break layouts where `ferris-ds` is used on production\n- MINOR version = CSS changes that have no visual effect on production\n- PATCH version = CSS changes that fix a previous bug introduced on production or in development\n\n### Deploying our docs\n\nOur docs are automatically published from the `master` branch by AWS Amplify.\n","licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@1.0.0-3","dist":{"shasum":"6aa3bfe49a91a89c955b3889442aff49b2b62d81","integrity":"sha512-qaddEWYDeVz8nMFLznu6e34AlUk1TXrvpPWd3TKNTIYrp35xjtJzkBneKwgW5U+YCgBiUk6PTGN0fT8PM9K/Bg==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-1.0.0-3.tgz","fileCount":202,"unpackedSize":513461,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdlz1DCRA9TVsSAnZWagAAb6MP/jNtBowrxf8RM55d6hrM\ni4ivVR+aZiWsa757WaWEPiSZ+6onpBHOC4FbEXLV0cQj7q61nsz2GJyD/Kiu\nfog4k4GMSA8ecXovXPsAcWxhwMi0S5SHzcxpBn84FYvxvMZA9uvGvmxZU+Q5\nsHanU0IIyaKggDuUU+kUY5Rj8KXk4jzXqa9gwifA6es2t8MusQSAHht7Q4XQ\nZOzvt8DtKIchLDDuk7QCi/1p5Hig9t+eg2A3a69XVr2/ZKObA6xwklNWhbq4\nps3aRtf9MM7xRO1VbAfPrZ2YUAKYK/6BSqx6h0qiaJlvEElfVFY2AtiBTYnF\n4ZkXhO99TVoA5bADIyCGCDOc5bPN2qd8nAiKegE1Lskeix2FNLHPVsCOY3W5\n0/GIFR/g8bmyp6tW+zptGqqtvWYEY1MKREZsOrYSfQeWXCb+33W9KzbM5y4g\nboTJF9HIPf4amrqADdUkttJBzmQF8TYtb7Ftc6jBpbPCuAxnl3rQF2RarDP3\nW2KI3Up4xAmcSH9fku2HWpACXlHpnIIDrTB7vRB5W36BnNZQXQY9p4sXxsu+\nDVVw52tQ8Ply7x8w+LjVAP8bd2DEoFt7UzvzKe6lLa0yjfDQboAkwb9IrNIE\nT+A6TlVd6ei1+kQ7G5PF1eYzpA0/oGk+Pe9ykakEhFo2aDMWCIobr+YMP/Qv\n4GyW\r\n=Ek2X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCeR0g5QU0GDKIvNhLJCW7QHCmZ+Y/tXmARt7LFmV+NEwIgK4S61c8c/x9stxaC07crRFZc+nnzyeeosBaCjJu9STU="}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_1.0.0-3_1570192706383_0.5696258170121511"},"_hasShrinkwrap":false},"1.0.0-4":{"name":"@wbez/ferris-ds","version":"1.0.0-4","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1","sass-mq":"^5.0.0"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"readmeFilename":"README.md","readme":"# @wbez/ferris-ds\n\n> Centralizing styles for product development at WBEZ\n\nThis repo contains a library of styles and icons available to import via npm.\n\nAlong with the library, we set up a few tools that help document updates. CSS comments are parsed to create a JSON object of documentation. That data is rendered with nunjucks to give us a visual representation of the various components and rule-sets we're building.\n\nOur goal is that as we iterate upon the design of our products, we document everything along the way. This keeps our **style docs current and allows for continuous optimization our CSS.**\n\nThis repo is forked from [texastribune/queso-ui@v3.2.0](https://github.com/texastribune/queso-ui/releases/tag/v3.2.0). Much thanks and props for building out such a great base for us to launch from.\n\n## Index\n\n- [Getting started](#getting-started)\n- [Installing as a dependency](#installing-as-a-dependency)\n- [Using assets](#using-assets)\n- [Folders](#folders)\n- [Adding to the CSS framework](#adding-to-the-css-framework)\n- [Using this system in our products](#using-this-system-in-our-products)\n- [Publishing](#publishing)\n\n## Getting started\n\nTo preview these assets and accompanying docs locally, run the following commands:\n\n```sh\nyarn\n```\n\n```sh\nyarn dev\n```\n\nVisit http://wbez.local:3000\n\nThis spins up a browsersync server and watch task for all SCSS and HTML files.\n\n**Requirements**\n\n- node >=8.11.3\n\n## Installing as a dependency\n\n```sh\nyarn add @wbez/ferris-ds\n```\n\n```sh\nnpm install @wbez/ferris-ds\n```\n\n## Using assets\n\nSCSS\n\n```scss\n@import '~@wbez/ferris-ds';\n```\n\nCSS in `` via CDN\n\n```html\n\n```\n\nSingle icon\n\n```js\nimport linkIcon from '@wbez/ferris-ds/assets/icons/wbez/link.svg';\n\n\"\";\n```\n\nIcon using spritesheet\n\n```jsx\nimport icons from '@wbez/ferris-ds/assets/dist/sprites/wbez.svg';\n\n\n \n;\n```\n\nLogo (CDN)\n\n```html\n\n```\n\nLogo (direct)\n\n```jsx\nimport logo from \"@wbez/ferris-ds/assets/logos/wbez/wbez-chicago-logo-oneline.svg\";\n\n\"WBEZ\n```\n\n## Folders\n\n| directory | description |\n| ------------ | ----------------------------------------------------------------------------------------------------------- |\n| assets/scss | Various SASS files establishing our CSS framework |\n| assets/icons | Sets of individual SVG icons used throughout our products |\n| assets/logos | Individual SVG/PNG logos used throughout our products |\n| docs | Tools and templates to statically render documentation, code examples, and usage info for our design system |\n\n## Adding to the CSS framework\n\nWhen you add a new class, component, scss variable, mixin, etc., you'll want to add a short bit of syntax to enable it to appear in the docs. Use the boilerplate below to get started.\n\n### SCSS docs boilerplate\n\n> How to document a new CSS class\n\nWe use a comment parser along with some [extra logic](https://github.com/wbez/ferris-ds/blob/master/tasks/style-doc.js) to generate our docs. To add a new section of documentation, add a boilerplate above your CSS rules like the one below:\n\n```scss\n// Title of Section (root-class-name)\n//\n// Description {{isWide}} {{isHelper}}\n//\n// root-class-name-modifier - desc\n//\n// Markup: 6-components/test/test.html\n//\n// Styleguide 6.0.1\n//\n.root-class-name {\n}\n```\n\n- `{{isWide}}` is used to display the demo of each modifier at full width\n- `{{isHelper}}` is used to hide main demo and only display modifiers\n- `// Deprecated` is used to signify a class to be removed.\n- `// Experimental` is used to signify a class we're considering.\n\n**Deprecated** and **Experimental** are named per [KSS syntax](https://warpspire.com/kss/syntax/).\n\n### Naming and organization\n\nWhen building CSS dispersed on a variety of platforms, it can be difficult to know where certain style rules should live and what to call them. We use the following guideline to help with those decisions as we scale our framework.\n\n#### ITCSS\n\nWe organize our SCSS files with the [inverted triangle](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) approach in mind. We put our own spin on it by adding a `typography`, `layouts` and `blocks` folder, but the general idea is all the same; increased specificity as you move down the stylesheet.\n\nSee also Brad Frost's write-up on atomic design for the rationale behind composable components. (`components` → `blocks` → `pages`)\n\n#### BEM\n\nWe closely follow the BEM (Block Element Modifier) class naming convention in our `components` folder, but we break BEM rules in other places. This is a deliberate attempt to create a hybrid approach of using BEM when scoped to a component and helper classes when styling globally in a more ad hoc context.\n\n#### Namespacing\n\nUse namespacing for quick reference of the function of a CSS class. The following key can be used as a guideline for naming your class:\n\n---\n\nComponents\n\n```css\n.c-component-name[__|-<-modifier>] {\n}\n```\n\n_Example: `c-button`_\n\n---\n\nTypography\n\n```css\n.t-type-util {\n}\n```\n\n_Example: `t-headline`_\n\n---\n\nLayout\n\n```css\n.l-layout-util {\n}\n```\n\n_Example: `l-container`_\n\n---\n\nBlocks\n\n```css\n.b-block-name {\n}\n```\n\n_Example: `b-site-footer`_\n\n---\n\nUtilities\n\n```css\n.[is|has]-state {\n}\n```\n\n_Example: `has-bg-yellow`_\n\n---\n\n## Using this system in our products\n\nThis system is experimental and under rapid development. Use it in situations where it makes sense for the scope of your task.\n\n**Do** use this system when...\n\n- Coding a new template from scratch (new landing pages)\n- Creating something in a isolated environment outside of legacy systems (newsletters, new static sites, UMP)\n\n**Don't** use this system when...\n\n- Making a small CSS change to the legacy system (tiny visual tweak to our main repo)\n- The system creates an unnecessarily layer of complexity (take the path of least resistance)\n\n---\n\n## Publishing\n\nMake sure you're authenticated for npm publishing.\n\n1. `npm login` - then follow the prompts\n2. `npm run release` - There's a [bug](https://github.com/sindresorhus/np/issues/420#issuecomment-499273013) in the `np` publishing tool we use where `yarn` commands don't seem to work.\n\n### Semantic versioning\n\nThe npm helper we use for versioning simplifies matching version numbers with the various `MAJOR`, `MINOR`, `PATCH` increment types. For guidance on what type of release you're making, refer to [https://semver.org/](https://semver.org/)\n\nGenerally, you could base your increment type on the following list:\n\n- MAJOR version = CSS changes that visually break layouts where `ferris-ds` is used on production\n- MINOR version = CSS changes that have no visual effect on production\n- PATCH version = CSS changes that fix a previous bug introduced on production or in development\n\n### Deploying our docs\n\nOur docs are automatically published from the `master` branch by AWS Amplify.\n","licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@1.0.0-4","dist":{"shasum":"d5cf18dd523d758d7d4245e6a57a73181554c221","integrity":"sha512-aBnh9eMf2wRWmWAtE5MsRQJc//eVHyxnqojD3ZgLdI5QSgMPWOWjEYGvdGqvlDtUTnXkMAxiF3ovLyCqiAOgDQ==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-1.0.0-4.tgz","fileCount":202,"unpackedSize":513687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdm1/eCRA9TVsSAnZWagAADB0P/jRSXnadZN2d+FG/04md\n1u+OkAYPbayIsrglff0Kb3M+0q3LOesspwdXod9gxMXTitFTjOx3LK0O8Rlj\n+PCqlz+U5chxAfaoizURwuSa1B0sNF4DnuyvSV08WSe+ceuYRvH34CvsyTsk\n0L5WdDit+OIHqCaUY0MS7WR9+r8PT0cp4YVk4bNk0VWJv/W+S/WJbjmYR3dL\nSzh4eiWL08UxPS/d6RKCjNeyITht8e3tpjHOQQCtjDU/A7WjI1m4BSRvO26D\nrOVbhQOpahg0J8/+aVGw88BpbDEXbGYpGIBjD6RiJC57j4d7smsjqkAQvuMx\nrxe22q/vvsbdnQy5hgthk2cwrfh9hp8xrVUXzPq8t7aibWWMaxoIYV1xLLvu\nwrk0zdWhabZBwOoQE6i2w8DOlSgglY15gbAoW6YuT+Fb+rX7DkoLiwsYwD/m\n9d2cm70KUa+vFXjr1k/ENCURyXryeuPL77TmyowcnFWoZuJxtYZdH4VjXiq6\nM7tPLblnV9ZDKz+dWbxg/nMxuvlwnqlj99Q1FG8qpQAdtknSbDBcjSPahfE6\nW6gV+pQeIe3gSGvd9edlDEbbmnU50PrSbQniB1l0lm4KlY5DCiE0rkkzCQVM\n3+2KOR3r15FNFZSmHbowjlO//VUPJG/QSDnT/Jn/YVzVltobMXJjWB3X5FnI\nUE/0\r\n=C9mf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHb7qD+cyXSXrWp5aCAtEIi+2JaXsaduTZo/wA2EzRYTAiEA2Gspg/d5mW9AVzCgsvbZDgHXEK4Hout9WsWDrUM3oZ0="}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_1.0.0-4_1570463709906_0.5865799958297673"},"_hasShrinkwrap":false},"1.0.0-5":{"name":"@wbez/ferris-ds","version":"1.0.0-5","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1","sass-mq":"^5.0.0"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"readmeFilename":"README.md","readme":"# @wbez/ferris-ds\n\n> Centralizing styles for product development at WBEZ\n\nThis repo contains a library of styles and icons available to import via npm.\n\nAlong with the library, we set up a few tools that help document updates. CSS comments are parsed to create a JSON object of documentation. That data is rendered with nunjucks to give us a visual representation of the various components and rule-sets we're building.\n\nOur goal is that as we iterate upon the design of our products, we document everything along the way. This keeps our **style docs current and allows for continuous optimization our CSS.**\n\nThis repo is forked from [texastribune/queso-ui@v3.2.0](https://github.com/texastribune/queso-ui/releases/tag/v3.2.0). Much thanks and props for building out such a great base for us to launch from.\n\n## Index\n\n- [Getting started](#getting-started)\n- [Installing as a dependency](#installing-as-a-dependency)\n- [Using assets](#using-assets)\n- [Folders](#folders)\n- [Adding to the CSS framework](#adding-to-the-css-framework)\n- [Using this system in our products](#using-this-system-in-our-products)\n- [Publishing](#publishing)\n\n## Getting started\n\nTo preview these assets and accompanying docs locally, run the following commands:\n\n```sh\nyarn\n```\n\n```sh\nyarn dev\n```\n\nVisit http://wbez.local:3000\n\nThis spins up a browsersync server and watch task for all SCSS and HTML files.\n\n**Requirements**\n\n- node >=8.11.3\n\n## Installing as a dependency\n\n```sh\nyarn add @wbez/ferris-ds\n```\n\n```sh\nnpm install @wbez/ferris-ds\n```\n\n## Using assets\n\nSCSS\n\n```scss\n@import '~@wbez/ferris-ds';\n```\n\nCSS in `` via CDN\n\n```html\n\n```\n\nSingle icon\n\n```js\nimport linkIcon from '@wbez/ferris-ds/assets/icons/wbez/link.svg';\n\n\"\";\n```\n\nIcon using spritesheet\n\n```jsx\nimport icons from '@wbez/ferris-ds/assets/dist/sprites/wbez.svg';\n\n\n \n;\n```\n\nLogo (CDN)\n\n```html\n\n```\n\nLogo (direct)\n\n```jsx\nimport logo from \"@wbez/ferris-ds/assets/logos/wbez/wbez-chicago-logo-oneline.svg\";\n\n\"WBEZ\n```\n\n## Folders\n\n| directory | description |\n| ------------ | ----------------------------------------------------------------------------------------------------------- |\n| assets/scss | Various SASS files establishing our CSS framework |\n| assets/icons | Sets of individual SVG icons used throughout our products |\n| assets/logos | Individual SVG/PNG logos used throughout our products |\n| docs | Tools and templates to statically render documentation, code examples, and usage info for our design system |\n\n## Adding to the CSS framework\n\nWhen you add a new class, component, scss variable, mixin, etc., you'll want to add a short bit of syntax to enable it to appear in the docs. Use the boilerplate below to get started.\n\n### SCSS docs boilerplate\n\n> How to document a new CSS class\n\nWe use a comment parser along with some [extra logic](https://github.com/wbez/ferris-ds/blob/master/tasks/style-doc.js) to generate our docs. To add a new section of documentation, add a boilerplate above your CSS rules like the one below:\n\n```scss\n// Title of Section (root-class-name)\n//\n// Description {{isWide}} {{isHelper}}\n//\n// root-class-name-modifier - desc\n//\n// Markup: 6-components/test/test.html\n//\n// Styleguide 6.0.1\n//\n.root-class-name {\n}\n```\n\n- `{{isWide}}` is used to display the demo of each modifier at full width\n- `{{isHelper}}` is used to hide main demo and only display modifiers\n- `// Deprecated` is used to signify a class to be removed.\n- `// Experimental` is used to signify a class we're considering.\n\n**Deprecated** and **Experimental** are named per [KSS syntax](https://warpspire.com/kss/syntax/).\n\n### Naming and organization\n\nWhen building CSS dispersed on a variety of platforms, it can be difficult to know where certain style rules should live and what to call them. We use the following guideline to help with those decisions as we scale our framework.\n\n#### ITCSS\n\nWe organize our SCSS files with the [inverted triangle](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) approach in mind. We put our own spin on it by adding a `typography`, `layouts` and `blocks` folder, but the general idea is all the same; increased specificity as you move down the stylesheet.\n\nSee also Brad Frost's write-up on atomic design for the rationale behind composable components. (`components` → `blocks` → `pages`)\n\n#### BEM\n\nWe closely follow the BEM (Block Element Modifier) class naming convention in our `components` folder, but we break BEM rules in other places. This is a deliberate attempt to create a hybrid approach of using BEM when scoped to a component and helper classes when styling globally in a more ad hoc context.\n\n#### Namespacing\n\nUse namespacing for quick reference of the function of a CSS class. The following key can be used as a guideline for naming your class:\n\n---\n\nComponents\n\n```css\n.c-component-name[__|-<-modifier>] {\n}\n```\n\n_Example: `c-button`_\n\n---\n\nTypography\n\n```css\n.t-type-util {\n}\n```\n\n_Example: `t-headline`_\n\n---\n\nLayout\n\n```css\n.l-layout-util {\n}\n```\n\n_Example: `l-container`_\n\n---\n\nBlocks\n\n```css\n.b-block-name {\n}\n```\n\n_Example: `b-site-footer`_\n\n---\n\nUtilities\n\n```css\n.[is|has]-state {\n}\n```\n\n_Example: `has-bg-yellow`_\n\n---\n\n## Using this system in our products\n\nThis system is experimental and under rapid development. Use it in situations where it makes sense for the scope of your task.\n\n**Do** use this system when...\n\n- Coding a new template from scratch (new landing pages)\n- Creating something in a isolated environment outside of legacy systems (newsletters, new static sites, UMP)\n\n**Don't** use this system when...\n\n- Making a small CSS change to the legacy system (tiny visual tweak to our main repo)\n- The system creates an unnecessarily layer of complexity (take the path of least resistance)\n\n---\n\n## Publishing\n\nMake sure you're authenticated for npm publishing.\n\n1. `npm login` - then follow the prompts\n2. `npm run release` - There's a [bug](https://github.com/sindresorhus/np/issues/420#issuecomment-499273013) in the `np` publishing tool we use where `yarn` commands don't seem to work.\n\n### Semantic versioning\n\nThe npm helper we use for versioning simplifies matching version numbers with the various `MAJOR`, `MINOR`, `PATCH` increment types. For guidance on what type of release you're making, refer to [https://semver.org/](https://semver.org/)\n\nGenerally, you could base your increment type on the following list:\n\n- MAJOR version = CSS changes that visually break layouts where `ferris-ds` is used on production\n- MINOR version = CSS changes that have no visual effect on production\n- PATCH version = CSS changes that fix a previous bug introduced on production or in development\n\n### Deploying our docs\n\nOur docs are automatically published from the `master` branch by AWS Amplify.\n","licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@1.0.0-5","dist":{"shasum":"ee1b7116e61511bf540aefcb330387d99036b468","integrity":"sha512-uowdKJYZLRJEMNvM0+KNw6sJCJ5GYjXBASFuqfcZbF1yXin1Kd/MSqVh2GzRXC9QAbD84YSzBF+VZ47IC4duhA==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-1.0.0-5.tgz","fileCount":202,"unpackedSize":514141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnMkACRA9TVsSAnZWagAAdwQP/Rqv37JasUowYKVxUr3O\nGFupFmicly9onwMkh/vGIlwlDTIRvOHzZZnl0uJhA2Cm0yPNjKwN2ts5/Ggx\nI2CUjov6D8Bk8rwhDxm8okubHEePjPpfQaXdyyOK3GwCI4G4qpDc12WLZ+F1\nTN38svhZzqvgKH6jlg7GiAd0gRgeQ1eNfntUm4TTeSz05xNwCNGB0BRgcjxX\n06PdUcgcJA15mzdiPyw+5+c2j2Wdr6rLRx40mNa/efeg2xcgk7x0tY5CuXJL\nb3RuUhxOzwBh68zMSK/V5PmlWkWpaJN9JczTCgENVL75Fj1/NmPLV//9Japp\nJXnM8kHYdhbNY54mqxtxdwdLGvxWkRA3Cc8yeGPW7Rq4qzdQRd/apzv1TukU\n3nq1OKWhdY8vAAIEcm4tfwqs2jQAVJMdz5uGbndofD7ndyuWMXERcv9G7IJP\nnyx5gh5YM2sSzmK65gdxooTIQAr02mryR3Ufj4mDju8EzUoWeSgdswBS7Gv5\nXUKlNL1YsPVntM6wazOD8AoD0Pua5n8Mto5P7W1HnfuTtLSFwBW7gbO079rK\nOlYkC52FFU36T76emrTWVIqH989DgfVlk9evVdoZTb9jWJ7TGklIFqsxcp95\nwe8d78zARW2BpMoOmjAxD7HSlu2wN70XIRS9N0s7T5x6O1pi7TrsQ0ONFBDY\nwWkH\r\n=uBOm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBsxn0KiwfqdHl+Hp5I81xmGtBwZBvhBDMyUl6oatQFEAiBaGpkRjJsCvYFymMC2XTn2rSVmZvuz1bfxoHDIGNAl8A=="}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_1.0.0-5_1570556159460_0.6234170294404342"},"_hasShrinkwrap":false},"1.0.0-6":{"name":"@wbez/ferris-ds","version":"1.0.0-6","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"readmeFilename":"README.md","readme":"# @wbez/ferris-ds\n\n> Centralizing styles for product development at WBEZ\n\nThis repo contains a library of styles and icons available to import via npm.\n\nAlong with the library, we set up a few tools that help document updates. CSS comments are parsed to create a JSON object of documentation. That data is rendered with nunjucks to give us a visual representation of the various components and rule-sets we're building.\n\nOur goal is that as we iterate upon the design of our products, we document everything along the way. This keeps our **style docs current and allows for continuous optimization our CSS.**\n\nThis repo is forked from [texastribune/queso-ui@v3.2.0](https://github.com/texastribune/queso-ui/releases/tag/v3.2.0). Much thanks and props for building out such a great base for us to launch from.\n\n## Index\n\n- [Getting started](#getting-started)\n- [Installing as a dependency](#installing-as-a-dependency)\n- [Using assets](#using-assets)\n- [Folders](#folders)\n- [Adding to the CSS framework](#adding-to-the-css-framework)\n- [Using this system in our products](#using-this-system-in-our-products)\n- [Publishing](#publishing)\n\n## Getting started\n\nTo preview these assets and accompanying docs locally, run the following commands:\n\n```sh\nyarn\n```\n\n```sh\nyarn dev\n```\n\nVisit http://wbez.local:3000\n\nThis spins up a browsersync server and watch task for all SCSS and HTML files.\n\n**Requirements**\n\n- node >=8.11.3\n\n## Installing as a dependency\n\n```sh\nyarn add @wbez/ferris-ds\n```\n\n```sh\nnpm install @wbez/ferris-ds\n```\n\n## Using assets\n\nSCSS\n\n```scss\n@import '~@wbez/ferris-ds';\n```\n\nCSS in `` via CDN\n\n```html\n\n```\n\nSingle icon\n\n```js\nimport linkIcon from '@wbez/ferris-ds/assets/icons/wbez/link.svg';\n\n\"\";\n```\n\nIcon using spritesheet\n\n```jsx\nimport icons from '@wbez/ferris-ds/assets/dist/sprites/wbez.svg';\n\n\n \n;\n```\n\nLogo (CDN)\n\n```html\n\n```\n\nLogo (direct)\n\n```jsx\nimport logo from \"@wbez/ferris-ds/assets/logos/wbez/wbez-chicago-logo-oneline.svg\";\n\n\"WBEZ\n```\n\n## Folders\n\n| directory | description |\n| ------------ | ----------------------------------------------------------------------------------------------------------- |\n| assets/scss | Various SASS files establishing our CSS framework |\n| assets/icons | Sets of individual SVG icons used throughout our products |\n| assets/logos | Individual SVG/PNG logos used throughout our products |\n| docs | Tools and templates to statically render documentation, code examples, and usage info for our design system |\n\n## Adding to the CSS framework\n\nWhen you add a new class, component, scss variable, mixin, etc., you'll want to add a short bit of syntax to enable it to appear in the docs. Use the boilerplate below to get started.\n\n### SCSS docs boilerplate\n\n> How to document a new CSS class\n\nWe use a comment parser along with some [extra logic](https://github.com/wbez/ferris-ds/blob/master/tasks/style-doc.js) to generate our docs. To add a new section of documentation, add a boilerplate above your CSS rules like the one below:\n\n```scss\n// Title of Section (root-class-name)\n//\n// Description {{isWide}} {{isHelper}}\n//\n// root-class-name-modifier - desc\n//\n// Markup: 6-components/test/test.html\n//\n// Styleguide 6.0.1\n//\n.root-class-name {\n}\n```\n\n- `{{isWide}}` is used to display the demo of each modifier at full width\n- `{{isHelper}}` is used to hide main demo and only display modifiers\n- `// Deprecated` is used to signify a class to be removed.\n- `// Experimental` is used to signify a class we're considering.\n\n**Deprecated** and **Experimental** are named per [KSS syntax](https://warpspire.com/kss/syntax/).\n\n### Naming and organization\n\nWhen building CSS dispersed on a variety of platforms, it can be difficult to know where certain style rules should live and what to call them. We use the following guideline to help with those decisions as we scale our framework.\n\n#### ITCSS\n\nWe organize our SCSS files with the [inverted triangle](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) approach in mind. We put our own spin on it by adding a `typography`, `layouts` and `blocks` folder, but the general idea is all the same; increased specificity as you move down the stylesheet.\n\nSee also Brad Frost's write-up on atomic design for the rationale behind composable components. (`components` → `blocks` → `pages`)\n\n#### BEM\n\nWe closely follow the BEM (Block Element Modifier) class naming convention in our `components` folder, but we break BEM rules in other places. This is a deliberate attempt to create a hybrid approach of using BEM when scoped to a component and helper classes when styling globally in a more ad hoc context.\n\n#### Namespacing\n\nUse namespacing for quick reference of the function of a CSS class. The following key can be used as a guideline for naming your class:\n\n---\n\nComponents\n\n```css\n.c-component-name[__|-<-modifier>] {\n}\n```\n\n_Example: `c-button`_\n\n---\n\nTypography\n\n```css\n.t-type-util {\n}\n```\n\n_Example: `t-headline`_\n\n---\n\nLayout\n\n```css\n.l-layout-util {\n}\n```\n\n_Example: `l-container`_\n\n---\n\nBlocks\n\n```css\n.b-block-name {\n}\n```\n\n_Example: `b-site-footer`_\n\n---\n\nUtilities\n\n```css\n.[is|has]-state {\n}\n```\n\n_Example: `has-bg-yellow`_\n\n---\n\n## Using this system in our products\n\nThis system is experimental and under rapid development. Use it in situations where it makes sense for the scope of your task.\n\n**Do** use this system when...\n\n- Coding a new template from scratch (new landing pages)\n- Creating something in a isolated environment outside of legacy systems (newsletters, new static sites, UMP)\n\n**Don't** use this system when...\n\n- Making a small CSS change to the legacy system (tiny visual tweak to our main repo)\n- The system creates an unnecessarily layer of complexity (take the path of least resistance)\n\n---\n\n## Publishing\n\nMake sure you're authenticated for npm publishing.\n\n1. `npm login` - then follow the prompts\n2. `npm run release` - There's a [bug](https://github.com/sindresorhus/np/issues/420#issuecomment-499273013) in the `np` publishing tool we use where `yarn` commands don't seem to work.\n\n### Semantic versioning\n\nThe npm helper we use for versioning simplifies matching version numbers with the various `MAJOR`, `MINOR`, `PATCH` increment types. For guidance on what type of release you're making, refer to [https://semver.org/](https://semver.org/)\n\nGenerally, you could base your increment type on the following list:\n\n- MAJOR version = CSS changes that visually break layouts where `ferris-ds` is used on production\n- MINOR version = CSS changes that have no visual effect on production\n- PATCH version = CSS changes that fix a previous bug introduced on production or in development\n\n### Deploying our docs\n\nOur docs are automatically published from the `master` branch by AWS Amplify.\n","licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@1.0.0-6","dist":{"shasum":"f1c71666c2b79e40180c8aa138ad0c180b2cfb4d","integrity":"sha512-YTwA008R4ickJ8oOf9VeuM4uUUrLDWqizOWOxZaQ05hvkCGBmLr4z0Ja1bq0KRAo9zeg3qH1oE+Cw40EUy9xlA==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-1.0.0-6.tgz","fileCount":203,"unpackedSize":535184,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdoK6nCRA9TVsSAnZWagAAAQgP/j9KDOosU0pdbN42ZU0h\nslaS7r7Vf+corod+1jn2YbP9FmH4HFtK/N02keWkM2wGOpWns594bHwn0YBM\nmjAj3Nb4aaknMFgEksdkx3tSYRt1EYNSSCv3ckkwyE3ucc4yra45gPNb9oJv\nc9qAsVSIMvfUPPTb6Tl/KuYJ5qCbzeA7NjAbnOCHzuYXmpgmW54LWzMY3rsP\nP6QD5ziBnZ7S3KIeMwttob2PgdWbSUdr5f3yMOyhXP7vy3JSkrgOTnrkQWK4\n2F3cvPwFp7V2Krv4QnFjEObEI8jGKyzEvfVrUUubj/NgJoVMZGVSf7BCnrTy\n1E8I4jQjLYQYrBhFIUqj77b1DI1zWs6fn9ZR853gVj44N92GdojSZnLakx7E\n/pNPBPZf+qDcKhqbNDCHQ66ljapj4F5QoAqSMATPpygsK9kEXIDMmTuFqqPh\nz9134NWWTwUI0YnkfTZv9udWKF71qm2ina9txM8DdHJ4CTbyUBZ101iwDeoM\nptPQIDUKCR2Y4/xw5Kmsci/B19vtaZSoCkSMEMtgMGUCHzj3w0//3uuZIzG6\nVL4niO9SOOvOsTbA3CxGZfb5JuhWWtYdlqHV8TlYnVjpDWbdRHMsY5qupXKT\npLZ70SbrS/mmOm6PepzFTzfXo42TXj2BIjt8k/vPQ7bmbfYu8jrg4ez/rsJ6\nehAV\r\n=Sy8U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCg73IA5vzkAJrVYjNHXbBmCLjiClZqL9PDdYpBsKgdsQIgBg5rjTSo8Y+4YlHEMQ1xn+Eg/KYEtaajhc8eSnn93Wk="}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_1.0.0-6_1570811559111_0.8490750878821549"},"_hasShrinkwrap":false},"1.0.0-7":{"name":"@wbez/ferris-ds","version":"1.0.0-7","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"readmeFilename":"README.md","readme":"# @wbez/ferris-ds\n\n> Centralizing styles for product development at WBEZ\n\nThis repo contains a library of styles and icons available to import via npm.\n\nAlong with the library, we set up a few tools that help document updates. CSS comments are parsed to create a JSON object of documentation. That data is rendered with nunjucks to give us a visual representation of the various components and rule-sets we're building.\n\nOur goal is that as we iterate upon the design of our products, we document everything along the way. This keeps our **style docs current and allows for continuous optimization our CSS.**\n\nThis repo is forked from [texastribune/queso-ui@v3.2.0](https://github.com/texastribune/queso-ui/releases/tag/v3.2.0). Much thanks and props for building out such a great base for us to launch from.\n\n## Index\n\n- [Getting started](#getting-started)\n- [Installing as a dependency](#installing-as-a-dependency)\n- [Using assets](#using-assets)\n- [Folders](#folders)\n- [Adding to the CSS framework](#adding-to-the-css-framework)\n- [Using this system in our products](#using-this-system-in-our-products)\n- [Publishing](#publishing)\n\n## Getting started\n\nTo preview these assets and accompanying docs locally, run the following commands:\n\n```sh\nyarn\n```\n\n```sh\nyarn dev\n```\n\nVisit http://wbez.local:3000\n\nThis spins up a browsersync server and watch task for all SCSS and HTML files.\n\n**Requirements**\n\n- node >=8.11.3\n\n## Installing as a dependency\n\n```sh\nyarn add @wbez/ferris-ds\n```\n\n```sh\nnpm install @wbez/ferris-ds\n```\n\n## Using assets\n\nSCSS\n\n```scss\n@import '~@wbez/ferris-ds';\n```\n\nCSS in `` via CDN\n\n```html\n\n```\n\nSingle icon\n\n```js\nimport linkIcon from '@wbez/ferris-ds/assets/icons/wbez/link.svg';\n\n\"\";\n```\n\nIcon using spritesheet\n\n```jsx\nimport icons from '@wbez/ferris-ds/assets/dist/sprites/wbez.svg';\n\n\n \n;\n```\n\nLogo (CDN)\n\n```html\n\n```\n\nLogo (direct)\n\n```jsx\nimport logo from \"@wbez/ferris-ds/assets/logos/wbez/wbez-chicago-logo-oneline.svg\";\n\n\"WBEZ\n```\n\n## Folders\n\n| directory | description |\n| ------------ | ----------------------------------------------------------------------------------------------------------- |\n| assets/scss | Various SASS files establishing our CSS framework |\n| assets/icons | Sets of individual SVG icons used throughout our products |\n| assets/logos | Individual SVG/PNG logos used throughout our products |\n| docs | Tools and templates to statically render documentation, code examples, and usage info for our design system |\n\n## Adding to the CSS framework\n\nWhen you add a new class, component, scss variable, mixin, etc., you'll want to add a short bit of syntax to enable it to appear in the docs. Use the boilerplate below to get started.\n\n### SCSS docs boilerplate\n\n> How to document a new CSS class\n\nWe use a comment parser along with some [extra logic](https://github.com/wbez/ferris-ds/blob/master/tasks/style-doc.js) to generate our docs. To add a new section of documentation, add a boilerplate above your CSS rules like the one below:\n\n```scss\n// Title of Section (root-class-name)\n//\n// Description {{isWide}} {{isHelper}}\n//\n// root-class-name-modifier - desc\n//\n// Markup: 6-components/test/test.html\n//\n// Styleguide 6.0.1\n//\n.root-class-name {\n}\n```\n\n- `{{isWide}}` is used to display the demo of each modifier at full width\n- `{{isHelper}}` is used to hide main demo and only display modifiers\n- `// Deprecated` is used to signify a class to be removed.\n- `// Experimental` is used to signify a class we're considering.\n\n**Deprecated** and **Experimental** are named per [KSS syntax](https://warpspire.com/kss/syntax/).\n\n### Naming and organization\n\nWhen building CSS dispersed on a variety of platforms, it can be difficult to know where certain style rules should live and what to call them. We use the following guideline to help with those decisions as we scale our framework.\n\n#### ITCSS\n\nWe organize our SCSS files with the [inverted triangle](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) approach in mind. We put our own spin on it by adding a `typography`, `layouts` and `blocks` folder, but the general idea is all the same; increased specificity as you move down the stylesheet.\n\nSee also Brad Frost's write-up on atomic design for the rationale behind composable components. (`components` → `blocks` → `pages`)\n\n#### BEM\n\nWe closely follow the BEM (Block Element Modifier) class naming convention in our `components` folder, but we break BEM rules in other places. This is a deliberate attempt to create a hybrid approach of using BEM when scoped to a component and helper classes when styling globally in a more ad hoc context.\n\n#### Namespacing\n\nUse namespacing for quick reference of the function of a CSS class. The following key can be used as a guideline for naming your class:\n\n---\n\nComponents\n\n```css\n.c-component-name[__|-<-modifier>] {\n}\n```\n\n_Example: `c-button`_\n\n---\n\nTypography\n\n```css\n.t-type-util {\n}\n```\n\n_Example: `t-headline`_\n\n---\n\nLayout\n\n```css\n.l-layout-util {\n}\n```\n\n_Example: `l-container`_\n\n---\n\nBlocks\n\n```css\n.b-block-name {\n}\n```\n\n_Example: `b-site-footer`_\n\n---\n\nUtilities\n\n```css\n.[is|has]-state {\n}\n```\n\n_Example: `has-bg-yellow`_\n\n---\n\n## Using this system in our products\n\nThis system is experimental and under rapid development. Use it in situations where it makes sense for the scope of your task.\n\n**Do** use this system when...\n\n- Coding a new template from scratch (new landing pages)\n- Creating something in a isolated environment outside of legacy systems (newsletters, new static sites, UMP)\n\n**Don't** use this system when...\n\n- Making a small CSS change to the legacy system (tiny visual tweak to our main repo)\n- The system creates an unnecessarily layer of complexity (take the path of least resistance)\n\n---\n\n## Publishing\n\nMake sure you're authenticated for npm publishing.\n\n1. `npm login` - then follow the prompts\n2. `npm run release` - There's a [bug](https://github.com/sindresorhus/np/issues/420#issuecomment-499273013) in the `np` publishing tool we use where `yarn` commands don't seem to work.\n\n### Semantic versioning\n\nThe npm helper we use for versioning simplifies matching version numbers with the various `MAJOR`, `MINOR`, `PATCH` increment types. For guidance on what type of release you're making, refer to [https://semver.org/](https://semver.org/)\n\nGenerally, you could base your increment type on the following list:\n\n- MAJOR version = CSS changes that visually break layouts where `ferris-ds` is used on production\n- MINOR version = CSS changes that have no visual effect on production\n- PATCH version = CSS changes that fix a previous bug introduced on production or in development\n\n### Deploying our docs\n\nOur docs are automatically published from the `master` branch by AWS Amplify.\n","licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@1.0.0-7","dist":{"shasum":"de078306e546c0e7247c399e67d82224a0dd7a54","integrity":"sha512-Zm734WHbJ8cc+83T5TAF6D0PflpCB9l/M/wqPOEJu99Q/hfNisRt5bpgvuGy+vTbvfU2M4phUV2jg6uempXU2w==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-1.0.0-7.tgz","fileCount":203,"unpackedSize":535586,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdoOSoCRA9TVsSAnZWagAATN4P/j8D6z0h3f+HdUQgFuIj\nyj0FlYsYwMu9JNPXY6HkP1UHu2i7qpM+fHPEIJm3hddxm7z2D1Ni3tJGi1Zr\nwjjZC8+O2jpqvBlVCP06sZ6oIOWwjwmtVi5Lyjk1vTZXxABUkDF1AvSSK7wS\nNSRcKUQTC0VndQ67Yi+sx7G/HeQ33f0E5OqtnpIVnVNzh0dSd8Gi1mDeyuJj\nmr0p07y1WgBQzKJ54pZTPHR44bj60YeD6gnw3TujzSQgjzwyiJbg/JuZwEQO\npdY9zg670KfiEOS3ZkSY5pUNRe4AGzMiQppOIurZ38H1ciklrVOrJ8IRbgjX\neOXHeXF1zbAFcB8EjS06R4jZHQePZJfXkuRBuoO5rLMxpYorN0bJn9XUKt5e\nurbaIv2R340XbB9uYBKeUA3NeiskCmG6bM5L9RCC9JxBOv7/BSg2I2ooTCNA\n2hmlDZ4HRh8bSxornFaPFAjtJQ/ypKYgGaC/Y5AmGnWJEB2eKs+20NeNIVAq\nKwKb+/7wl2jKsKj4NCP5QtSoJGxSqLPFowwI3lNQNk8GBlUF/h5k47YgNcpP\nXlktmbvbkxnNfkhPAA1PquZ0kPdEKK7netXWMw0evtxn4UFCjfh07W7iGhJZ\nVm3Aeh9cdGQ/T80ghPiAnDHNC5W/MVUuL163LxblgOs8FKu/6Bxx12E2hq6J\nmWjL\r\n=iFnq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCx9QytPWEeNyO+qXqCHyyC2h6ue14aXtfJSKEKILc0BQIhAJSSnhC3VHyVWo1J41g596w44L0y+5zwswEbhFEvXJNv"}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_1.0.0-7_1570825383452_0.5118667426142463"},"_hasShrinkwrap":false},"1.0.0-8":{"name":"@wbez/ferris-ds","version":"1.0.0-8","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"readmeFilename":"README.md","readme":"# @wbez/ferris-ds\n\n> Centralizing styles for product development at WBEZ\n\nThis repo contains a library of styles and icons available to import via npm.\n\nAlong with the library, we set up a few tools that help document updates. CSS comments are parsed to create a JSON object of documentation. That data is rendered with nunjucks to give us a visual representation of the various components and rule-sets we're building.\n\nOur goal is that as we iterate upon the design of our products, we document everything along the way. This keeps our **style docs current and allows for continuous optimization our CSS.**\n\nThis repo is forked from [texastribune/queso-ui@v3.2.0](https://github.com/texastribune/queso-ui/releases/tag/v3.2.0). Much thanks and props for building out such a great base for us to launch from.\n\n## Index\n\n- [Getting started](#getting-started)\n- [Installing as a dependency](#installing-as-a-dependency)\n- [Using assets](#using-assets)\n- [Folders](#folders)\n- [Adding to the CSS framework](#adding-to-the-css-framework)\n- [Using this system in our products](#using-this-system-in-our-products)\n- [Publishing](#publishing)\n\n## Getting started\n\nTo preview these assets and accompanying docs locally, run the following commands:\n\n```sh\nyarn\n```\n\n```sh\nyarn dev\n```\n\nVisit http://wbez.local:3000\n\nThis spins up a browsersync server and watch task for all SCSS and HTML files.\n\n**Requirements**\n\n- node >=8.11.3\n\n## Installing as a dependency\n\n```sh\nyarn add @wbez/ferris-ds\n```\n\n```sh\nnpm install @wbez/ferris-ds\n```\n\n## Using assets\n\nSCSS\n\n```scss\n@import '~@wbez/ferris-ds';\n```\n\nCSS in `` via CDN\n\n```html\n\n```\n\nSingle icon\n\n```js\nimport linkIcon from '@wbez/ferris-ds/assets/icons/wbez/link.svg';\n\n\"\";\n```\n\nIcon using spritesheet\n\n```jsx\nimport icons from '@wbez/ferris-ds/assets/dist/sprites/wbez.svg';\n\n\n \n;\n```\n\nLogo (CDN)\n\n```html\n\n```\n\nLogo (direct)\n\n```jsx\nimport logo from \"@wbez/ferris-ds/assets/logos/wbez/wbez-chicago-logo-oneline.svg\";\n\n\"WBEZ\n```\n\n## Folders\n\n| directory | description |\n| ------------ | ----------------------------------------------------------------------------------------------------------- |\n| assets/scss | Various SASS files establishing our CSS framework |\n| assets/icons | Sets of individual SVG icons used throughout our products |\n| assets/logos | Individual SVG/PNG logos used throughout our products |\n| docs | Tools and templates to statically render documentation, code examples, and usage info for our design system |\n\n## Adding to the CSS framework\n\nWhen you add a new class, component, scss variable, mixin, etc., you'll want to add a short bit of syntax to enable it to appear in the docs. Use the boilerplate below to get started.\n\n### SCSS docs boilerplate\n\n> How to document a new CSS class\n\nWe use a comment parser along with some [extra logic](https://github.com/wbez/ferris-ds/blob/master/tasks/style-doc.js) to generate our docs. To add a new section of documentation, add a boilerplate above your CSS rules like the one below:\n\n```scss\n// Title of Section (root-class-name)\n//\n// Description {{isWide}} {{isHelper}}\n//\n// root-class-name-modifier - desc\n//\n// Markup: 6-components/test/test.html\n//\n// Styleguide 6.0.1\n//\n.root-class-name {\n}\n```\n\n- `{{isWide}}` is used to display the demo of each modifier at full width\n- `{{isHelper}}` is used to hide main demo and only display modifiers\n- `// Deprecated` is used to signify a class to be removed.\n- `// Experimental` is used to signify a class we're considering.\n\n**Deprecated** and **Experimental** are named per [KSS syntax](https://warpspire.com/kss/syntax/).\n\n### Naming and organization\n\nWhen building CSS dispersed on a variety of platforms, it can be difficult to know where certain style rules should live and what to call them. We use the following guideline to help with those decisions as we scale our framework.\n\n#### ITCSS\n\nWe organize our SCSS files with the [inverted triangle](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) approach in mind. We put our own spin on it by adding a `typography`, `layouts` and `blocks` folder, but the general idea is all the same; increased specificity as you move down the stylesheet.\n\nSee also Brad Frost's write-up on atomic design for the rationale behind composable components. (`components` → `blocks` → `pages`)\n\n#### BEM\n\nWe closely follow the BEM (Block Element Modifier) class naming convention in our `components` folder, but we break BEM rules in other places. This is a deliberate attempt to create a hybrid approach of using BEM when scoped to a component and helper classes when styling globally in a more ad hoc context.\n\n#### Namespacing\n\nUse namespacing for quick reference of the function of a CSS class. The following key can be used as a guideline for naming your class:\n\n---\n\nComponents\n\n```css\n.c-component-name[__|-<-modifier>] {\n}\n```\n\n_Example: `c-button`_\n\n---\n\nTypography\n\n```css\n.t-type-util {\n}\n```\n\n_Example: `t-headline`_\n\n---\n\nLayout\n\n```css\n.l-layout-util {\n}\n```\n\n_Example: `l-container`_\n\n---\n\nBlocks\n\n```css\n.b-block-name {\n}\n```\n\n_Example: `b-site-footer`_\n\n---\n\nUtilities\n\n```css\n.[is|has]-state {\n}\n```\n\n_Example: `has-bg-yellow`_\n\n---\n\n## Using this system in our products\n\nThis system is experimental and under rapid development. Use it in situations where it makes sense for the scope of your task.\n\n**Do** use this system when...\n\n- Coding a new template from scratch (new landing pages)\n- Creating something in a isolated environment outside of legacy systems (newsletters, new static sites, UMP)\n\n**Don't** use this system when...\n\n- Making a small CSS change to the legacy system (tiny visual tweak to our main repo)\n- The system creates an unnecessarily layer of complexity (take the path of least resistance)\n\n---\n\n## Publishing\n\nMake sure you're authenticated for npm publishing.\n\n1. `npm login` - then follow the prompts\n2. `npm run release` - There's a [bug](https://github.com/sindresorhus/np/issues/420#issuecomment-499273013) in the `np` publishing tool we use where `yarn` commands don't seem to work.\n\n### Semantic versioning\n\nThe npm helper we use for versioning simplifies matching version numbers with the various `MAJOR`, `MINOR`, `PATCH` increment types. For guidance on what type of release you're making, refer to [https://semver.org/](https://semver.org/)\n\nGenerally, you could base your increment type on the following list:\n\n- MAJOR version = CSS changes that visually break layouts where `ferris-ds` is used on production\n- MINOR version = CSS changes that have no visual effect on production\n- PATCH version = CSS changes that fix a previous bug introduced on production or in development\n\n### Deploying our docs\n\nOur docs are automatically published from the `master` branch by AWS Amplify.\n","licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@1.0.0-8","dist":{"shasum":"6d27207edb4c7a98be7de05e846ce4ff6cfa65dc","integrity":"sha512-6TKni9LF59mMYI7lnMO4sXmFSGfNy8VVMr2UKJ0MknToxtcYl/EGBiM4xdC2ziNRIv1FxXsAdGUI+x80Wal0cA==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-1.0.0-8.tgz","fileCount":203,"unpackedSize":536094,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpNJJCRA9TVsSAnZWagAARI8P/1hkTUxmhIri6Pb8hHee\nW8ySRIN9p6P2JrILk7KwD72H2YZC1/3IGD1hLjUyj7QeYxybaggJ/sOvMPaq\n0pYbCslVJV04WAhbgZ4WHDGMkNWkHuh63mTcwpy7tNCpiZB+qqGLashUOZ/g\na75QfS4Owuy1Z2uXOsLjZKXfT6JM0GzVsIiMvHw6syeKVOkxG2yHBNSNJTfP\n5Xk5meHAzLzkv7022EMJmH1H+fc5c94eAaj/vTBrU3nTj0iYk89RoK1F+tou\nFkyijajN+Usd5YGYEBgloXcL6YFTU3nPwgTIC0IdqmwxGAa4RzsdwEIDvG0b\nHYaDoEiqPNB/LTqs0/9HZZOuGZ4X5sfMVSppd/XwnS29nNUFuCBEa24nB4Bx\n7iRNlTsosaHljEJuA8lkB+2prrhC7+HhNdSGJLRl1f6HflGRLjqH/WP0mSN+\nmbapHCKbmzq0jyy2RlBCQo2J+ujiWhdoyGFet6hUnmBHQibCz4bEOAmnzppG\n5JcLugMvHEgCxl8XOKx7O9etKJ8u1dWIW7hC/mICw3JqGhWlyMYl2n07bmma\nKlA/HYvooUKDBG2pWRstfjyXRmNST0p547Rlph5gWml8Zy+A2PAzMcyUvRJv\nPDaspn98jKINpRBXGk+POsKUg9Vag4HiBjwjvq0xeR3+3rpMZqDXoj+hKRbG\n+izr\r\n=gtfL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHFkdLUz1ErFqexgmwWxZBG02qeqyTqapSATUOHNZUZ4AiEAlI0ztGs/mI1pDIG9ROQa0h81C0A4Lzz5IqKUTj7vAN0="}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_1.0.0-8_1571082824543_0.49611322050178175"},"_hasShrinkwrap":false},"1.0.0-9":{"name":"@wbez/ferris-ds","version":"1.0.0-9","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"readmeFilename":"README.md","readme":"# @wbez/ferris-ds\n\n> Centralizing styles for product development at WBEZ\n\nThis repo contains a library of styles and icons available to import via npm.\n\nAlong with the library, we set up a few tools that help document updates. CSS comments are parsed to create a JSON object of documentation. That data is rendered with nunjucks to give us a visual representation of the various components and rule-sets we're building.\n\nOur goal is that as we iterate upon the design of our products, we document everything along the way. This keeps our **style docs current and allows for continuous optimization our CSS.**\n\nThis repo is forked from [texastribune/queso-ui@v3.2.0](https://github.com/texastribune/queso-ui/releases/tag/v3.2.0). Much thanks and props for building out such a great base for us to launch from.\n\n## Index\n\n- [Getting started](#getting-started)\n- [Installing as a dependency](#installing-as-a-dependency)\n- [Using assets](#using-assets)\n- [Folders](#folders)\n- [Adding to the CSS framework](#adding-to-the-css-framework)\n- [Using this system in our products](#using-this-system-in-our-products)\n- [Publishing](#publishing)\n\n## Getting started\n\nTo preview these assets and accompanying docs locally, run the following commands:\n\n```sh\nyarn\n```\n\n```sh\nyarn dev\n```\n\nVisit http://wbez.local:3000\n\nThis spins up a browsersync server and watch task for all SCSS and HTML files.\n\n**Requirements**\n\n- node >=8.11.3\n\n## Installing as a dependency\n\n```sh\nyarn add @wbez/ferris-ds\n```\n\n```sh\nnpm install @wbez/ferris-ds\n```\n\n## Using assets\n\nSCSS\n\n```scss\n@import '~@wbez/ferris-ds';\n```\n\nCSS in `` via CDN\n\n```html\n\n```\n\nSingle icon\n\n```js\nimport linkIcon from '@wbez/ferris-ds/assets/icons/wbez/link.svg';\n\n\"\";\n```\n\nIcon using spritesheet\n\n```jsx\nimport icons from '@wbez/ferris-ds/assets/dist/sprites/wbez.svg';\n\n\n \n;\n```\n\nLogo (CDN)\n\n```html\n\n```\n\nLogo (direct)\n\n```jsx\nimport logo from \"@wbez/ferris-ds/assets/logos/wbez/wbez-chicago-logo-oneline.svg\";\n\n\"WBEZ\n```\n\n## Folders\n\n| directory | description |\n| ------------ | ----------------------------------------------------------------------------------------------------------- |\n| assets/scss | Various SASS files establishing our CSS framework |\n| assets/icons | Sets of individual SVG icons used throughout our products |\n| assets/logos | Individual SVG/PNG logos used throughout our products |\n| docs | Tools and templates to statically render documentation, code examples, and usage info for our design system |\n\n## Adding to the CSS framework\n\nWhen you add a new class, component, scss variable, mixin, etc., you'll want to add a short bit of syntax to enable it to appear in the docs. Use the boilerplate below to get started.\n\n### SCSS docs boilerplate\n\n> How to document a new CSS class\n\nWe use a comment parser along with some [extra logic](https://github.com/wbez/ferris-ds/blob/master/tasks/style-doc.js) to generate our docs. To add a new section of documentation, add a boilerplate above your CSS rules like the one below:\n\n```scss\n// Title of Section (root-class-name)\n//\n// Description {{isWide}} {{isHelper}}\n//\n// root-class-name-modifier - desc\n//\n// Markup: 6-components/test/test.html\n//\n// Styleguide 6.0.1\n//\n.root-class-name {\n}\n```\n\n- `{{isWide}}` is used to display the demo of each modifier at full width\n- `{{isHelper}}` is used to hide main demo and only display modifiers\n- `// Deprecated` is used to signify a class to be removed.\n- `// Experimental` is used to signify a class we're considering.\n\n**Deprecated** and **Experimental** are named per [KSS syntax](https://warpspire.com/kss/syntax/).\n\n### Naming and organization\n\nWhen building CSS dispersed on a variety of platforms, it can be difficult to know where certain style rules should live and what to call them. We use the following guideline to help with those decisions as we scale our framework.\n\n#### ITCSS\n\nWe organize our SCSS files with the [inverted triangle](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) approach in mind. We put our own spin on it by adding a `typography`, `layouts` and `blocks` folder, but the general idea is all the same; increased specificity as you move down the stylesheet.\n\nSee also Brad Frost's write-up on atomic design for the rationale behind composable components. (`components` → `blocks` → `pages`)\n\n#### BEM\n\nWe closely follow the BEM (Block Element Modifier) class naming convention in our `components` folder, but we break BEM rules in other places. This is a deliberate attempt to create a hybrid approach of using BEM when scoped to a component and helper classes when styling globally in a more ad hoc context.\n\n#### Namespacing\n\nUse namespacing for quick reference of the function of a CSS class. The following key can be used as a guideline for naming your class:\n\n---\n\nComponents\n\n```css\n.c-component-name[__|-<-modifier>] {\n}\n```\n\n_Example: `c-button`_\n\n---\n\nTypography\n\n```css\n.t-type-util {\n}\n```\n\n_Example: `t-headline`_\n\n---\n\nLayout\n\n```css\n.l-layout-util {\n}\n```\n\n_Example: `l-container`_\n\n---\n\nBlocks\n\n```css\n.b-block-name {\n}\n```\n\n_Example: `b-site-footer`_\n\n---\n\nUtilities\n\n```css\n.[is|has]-state {\n}\n```\n\n_Example: `has-bg-yellow`_\n\n---\n\n## Using this system in our products\n\nThis system is experimental and under rapid development. Use it in situations where it makes sense for the scope of your task.\n\n**Do** use this system when...\n\n- Coding a new template from scratch (new landing pages)\n- Creating something in a isolated environment outside of legacy systems (newsletters, new static sites, UMP)\n\n**Don't** use this system when...\n\n- Making a small CSS change to the legacy system (tiny visual tweak to our main repo)\n- The system creates an unnecessarily layer of complexity (take the path of least resistance)\n\n---\n\n## Publishing\n\nMake sure you're authenticated for npm publishing.\n\n1. `npm login` - then follow the prompts\n2. `npm run release` - There's a [bug](https://github.com/sindresorhus/np/issues/420#issuecomment-499273013) in the `np` publishing tool we use where `yarn` commands don't seem to work.\n\n### Semantic versioning\n\nThe npm helper we use for versioning simplifies matching version numbers with the various `MAJOR`, `MINOR`, `PATCH` increment types. For guidance on what type of release you're making, refer to [https://semver.org/](https://semver.org/)\n\nGenerally, you could base your increment type on the following list:\n\n- MAJOR version = CSS changes that visually break layouts where `ferris-ds` is used on production\n- MINOR version = CSS changes that have no visual effect on production\n- PATCH version = CSS changes that fix a previous bug introduced on production or in development\n\n### Deploying our docs\n\nOur docs are automatically published from the `master` branch by AWS Amplify.\n","licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@1.0.0-9","dist":{"shasum":"3340deba8d7ca8207cd99dff8e9d963717e23f6e","integrity":"sha512-ldBRwiZzwkPCwUnrlUgvlwoQZGtYxNTnN3H8r6Vyiw450dMG3mItuOg7TZW3obExrW6Wh9i5I+C21ppHRvC7vQ==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-1.0.0-9.tgz","fileCount":204,"unpackedSize":536884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpdNGCRA9TVsSAnZWagAAAacP/RGLSLvzxZQKUQQMvKQ/\nMINB9eeU5JHNL0CNyaOFvsveVjHYK1QuTX72dY+qm9eZqtRtobj4CT4GX6R0\nI4qh2C9xMk6OevmhuIxMGkym8w+UtAKPxrNPXyDsitlAUC2KY1P+kW/GnIaY\nTYrsWUc7yjJ1Wmk9uq0Zr1dptFPSrCYGTsII7jT8idVwbByd57xiN8FhlfOB\nj/x0BlKhrgWAF4VcPEkJZYd/VpyrvDWB4FasDF+YbT1EizNcqWOyyoYHpRSb\nqwenfPETXWjrZ0Z6S5T307je8s5cmYQq+GZjauR5qE42HCRoy9DG1d3Y7KtN\nx8+EL3j5l8Lu1Ec28aypt3iNlIzhqipH9DxzDYh4RjRREk+0i6sGBc4+32OE\nhISo0SiUG/TPrWBEYB/jlVCJsXKxqcGCPHNrL26bmsYmuFHhlhwEbBKUf46G\nWvr3Un8pqlRFxO2A1pG1/vm5wMgU5XEVmnBQxFsr3055BWMrYjLSCdFMU4yd\nigBzW32yI8REbRINhYhM03lMrKcfjOUz/H4/dx6tHdHCx/ZikcoNgghaTagH\nUwQpwHjGnWa4Xx32lj1azqM+jUdeBkd0xpd+euLZ8mHqplZpS74X5WUI1rSO\n9pjz5DQbeOENI4mqprqITzQhJOvOJsQuTzQjvoWR1h1XCO54y4sx/+iqqv9Y\nH/V2\r\n=HOjW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWpIyq1ZP/SR5fFMieDca1+MxjWdGYlOOcsL0RgsIUpwIgLyurJWF31/XRm1BtPrL8ysYey1FAjU7fu/p+R5c7MeI="}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_1.0.0-9_1571148613514_0.2610694936358582"},"_hasShrinkwrap":false},"1.0.0-10":{"name":"@wbez/ferris-ds","version":"1.0.0-10","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"readmeFilename":"README.md","readme":"# @wbez/ferris-ds\n\n> Centralizing styles for product development at WBEZ\n\nThis repo contains a library of styles and icons available to import via npm.\n\nAlong with the library, we set up a few tools that help document updates. CSS comments are parsed to create a JSON object of documentation. That data is rendered with nunjucks to give us a visual representation of the various components and rule-sets we're building.\n\nOur goal is that as we iterate upon the design of our products, we document everything along the way. This keeps our **style docs current and allows for continuous optimization our CSS.**\n\nThis repo is forked from [texastribune/queso-ui@v3.2.0](https://github.com/texastribune/queso-ui/releases/tag/v3.2.0). Much thanks and props for building out such a great base for us to launch from.\n\n## Index\n\n- [Getting started](#getting-started)\n- [Installing as a dependency](#installing-as-a-dependency)\n- [Using assets](#using-assets)\n- [Folders](#folders)\n- [Adding to the CSS framework](#adding-to-the-css-framework)\n- [Using this system in our products](#using-this-system-in-our-products)\n- [Publishing](#publishing)\n\n## Getting started\n\nTo preview these assets and accompanying docs locally, run the following commands:\n\n```sh\nyarn\n```\n\n```sh\nyarn dev\n```\n\nVisit http://wbez.local:3000\n\nThis spins up a browsersync server and watch task for all SCSS and HTML files.\n\n**Requirements**\n\n- node >=8.11.3\n\n## Installing as a dependency\n\n```sh\nyarn add @wbez/ferris-ds\n```\n\n```sh\nnpm install @wbez/ferris-ds\n```\n\n## Using assets\n\nSCSS\n\n```scss\n@import '~@wbez/ferris-ds';\n```\n\nCSS in `` via CDN\n\n```html\n\n```\n\nSingle icon\n\n```js\nimport linkIcon from '@wbez/ferris-ds/assets/icons/wbez/link.svg';\n\n\"\";\n```\n\nIcon using spritesheet\n\n```jsx\nimport icons from '@wbez/ferris-ds/assets/dist/sprites/wbez.svg';\n\n\n \n;\n```\n\nLogo (CDN)\n\n```html\n\n```\n\nLogo (direct)\n\n```jsx\nimport logo from \"@wbez/ferris-ds/assets/logos/wbez/wbez-chicago-logo-oneline.svg\";\n\n\"WBEZ\n```\n\n## Folders\n\n| directory | description |\n| ------------ | ----------------------------------------------------------------------------------------------------------- |\n| assets/scss | Various SASS files establishing our CSS framework |\n| assets/icons | Sets of individual SVG icons used throughout our products |\n| assets/logos | Individual SVG/PNG logos used throughout our products |\n| docs | Tools and templates to statically render documentation, code examples, and usage info for our design system |\n\n## Adding to the CSS framework\n\nWhen you add a new class, component, scss variable, mixin, etc., you'll want to add a short bit of syntax to enable it to appear in the docs. Use the boilerplate below to get started.\n\n### SCSS docs boilerplate\n\n> How to document a new CSS class\n\nWe use a comment parser along with some [extra logic](https://github.com/wbez/ferris-ds/blob/master/tasks/style-doc.js) to generate our docs. To add a new section of documentation, add a boilerplate above your CSS rules like the one below:\n\n```scss\n// Title of Section (root-class-name)\n//\n// Description {{isWide}} {{isHelper}}\n//\n// root-class-name-modifier - desc\n//\n// Markup: 6-components/test/test.html\n//\n// Styleguide 6.0.1\n//\n.root-class-name {\n}\n```\n\n- `{{isWide}}` is used to display the demo of each modifier at full width\n- `{{isHelper}}` is used to hide main demo and only display modifiers\n- `// Deprecated` is used to signify a class to be removed.\n- `// Experimental` is used to signify a class we're considering.\n\n**Deprecated** and **Experimental** are named per [KSS syntax](https://warpspire.com/kss/syntax/).\n\n### Naming and organization\n\nWhen building CSS dispersed on a variety of platforms, it can be difficult to know where certain style rules should live and what to call them. We use the following guideline to help with those decisions as we scale our framework.\n\n#### ITCSS\n\nWe organize our SCSS files with the [inverted triangle](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) approach in mind. We put our own spin on it by adding a `typography`, `layouts` and `blocks` folder, but the general idea is all the same; increased specificity as you move down the stylesheet.\n\nSee also Brad Frost's write-up on atomic design for the rationale behind composable components. (`components` → `blocks` → `pages`)\n\n#### BEM\n\nWe closely follow the BEM (Block Element Modifier) class naming convention in our `components` folder, but we break BEM rules in other places. This is a deliberate attempt to create a hybrid approach of using BEM when scoped to a component and helper classes when styling globally in a more ad hoc context.\n\n#### Namespacing\n\nUse namespacing for quick reference of the function of a CSS class. The following key can be used as a guideline for naming your class:\n\n---\n\nComponents\n\n```css\n.c-component-name[__|-<-modifier>] {\n}\n```\n\n_Example: `c-button`_\n\n---\n\nTypography\n\n```css\n.t-type-util {\n}\n```\n\n_Example: `t-headline`_\n\n---\n\nLayout\n\n```css\n.l-layout-util {\n}\n```\n\n_Example: `l-container`_\n\n---\n\nBlocks\n\n```css\n.b-block-name {\n}\n```\n\n_Example: `b-site-footer`_\n\n---\n\nUtilities\n\n```css\n.[is|has]-state {\n}\n```\n\n_Example: `has-bg-yellow`_\n\n---\n\n## Using this system in our products\n\nThis system is experimental and under rapid development. Use it in situations where it makes sense for the scope of your task.\n\n**Do** use this system when...\n\n- Coding a new template from scratch (new landing pages)\n- Creating something in a isolated environment outside of legacy systems (newsletters, new static sites, UMP)\n\n**Don't** use this system when...\n\n- Making a small CSS change to the legacy system (tiny visual tweak to our main repo)\n- The system creates an unnecessarily layer of complexity (take the path of least resistance)\n\n---\n\n## Publishing\n\nMake sure you're authenticated for npm publishing.\n\n1. `npm login` - then follow the prompts\n2. `npm run release` - There's a [bug](https://github.com/sindresorhus/np/issues/420#issuecomment-499273013) in the `np` publishing tool we use where `yarn` commands don't seem to work.\n\n### Semantic versioning\n\nThe npm helper we use for versioning simplifies matching version numbers with the various `MAJOR`, `MINOR`, `PATCH` increment types. For guidance on what type of release you're making, refer to [https://semver.org/](https://semver.org/)\n\nGenerally, you could base your increment type on the following list:\n\n- MAJOR version = CSS changes that visually break layouts where `ferris-ds` is used on production\n- MINOR version = CSS changes that have no visual effect on production\n- PATCH version = CSS changes that fix a previous bug introduced on production or in development\n\n### Deploying our docs\n\nOur docs are automatically published from the `master` branch by AWS Amplify.\n","licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@1.0.0-10","dist":{"shasum":"9a9560fab977f76e8036bfc28fde3ac7d47dfe3a","integrity":"sha512-EsTSql/7tgw4ACzSRUWn19GJhruaNnosjoxsycvie9XCuoDMDVqqqrEOqbLsXzp4M2WeBaWwFjrzn1GmIz6vAQ==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-1.0.0-10.tgz","fileCount":204,"unpackedSize":536776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpfJ0CRA9TVsSAnZWagAAfvkP/0EfO9dC8432AfrwV3GD\ndrrCPAP7IJ1sV9Aa4SODVtvzVAET3xCFRyh3fwRqM/El7KBFBGV9AxcJ7GO9\n79vt882MXrzaEMNHR+HbejUj/wnflyZZiRA1YCW622ABdaExcUK8+P9Ab8lw\n22quOGzONPi+L6occ03EqEpkg8MUNbw9ddeJ9do4dPx2W7/iXHShHfUX8+NJ\n+R4E74X8ytj6Qw+oHB2MnbbFAzoOUVg/IGyw02FPaCrePWTO3BW5a+9x5LA8\nAToh/4Ad2YcO/georV3TWRJQ9ULO19JlEXjEaesPTYkhSb5sb8ipeun16vqx\nWIW/mK0BAlmPLHAIP09v1jwG2+hc6SaA3HoqfWK/QaRHzx4ArH4yWR1/S9s/\nBnYX2E3KdaMP+X1VrAoQX2T+jpswMSMYMUKfQdMwdSDWPzSfJYu6q5CTAErX\nEyN4XkXVFZpwBGbddzkCsHMikGBTDps/J0xvR/+038pHmhX8oydSoPGAs7dt\ncMqd6PCfkNKsITdq12GJUTHsCjrD9j8f36Jb83CuHT2w6Gfo7reH9x7bYusj\nYxAew775f8MbfCH9EM8z/XjxCSXYJOQNToW7zOvpJUp57MzMsXJ6aBeKo4yW\nFQC4Zu7we2s8tGP/iFi39kp7LjDn5FPqSjpUOXpj/aAfKohOZzmYcUjg4IJ3\ntAJX\r\n=ghc4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDSodz/Gbv3lJVHy/uIorM8oXt1UT0bFP8mXeWH4mj00AiEA1I3p1Ld8uBhRZIAKfQ6xHtJ+eXBIl0yDTlJCRfoFv7Q="}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_1.0.0-10_1571156596117_0.698565498521551"},"_hasShrinkwrap":false},"1.0.0-11":{"name":"@wbez/ferris-ds","version":"1.0.0-11","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"readmeFilename":"README.md","readme":"# @wbez/ferris-ds\n\n> Centralizing styles for product development at WBEZ\n\nThis repo contains a library of styles and icons available to import via npm.\n\nAlong with the library, we set up a few tools that help document updates. CSS comments are parsed to create a JSON object of documentation. That data is rendered with nunjucks to give us a visual representation of the various components and rule-sets we're building.\n\nOur goal is that as we iterate upon the design of our products, we document everything along the way. This keeps our **style docs current and allows for continuous optimization our CSS.**\n\nThis repo is forked from [texastribune/queso-ui@v3.2.0](https://github.com/texastribune/queso-ui/releases/tag/v3.2.0). Much thanks and props for building out such a great base for us to launch from.\n\n## Index\n\n- [Getting started](#getting-started)\n- [Installing as a dependency](#installing-as-a-dependency)\n- [Using assets](#using-assets)\n- [Folders](#folders)\n- [Adding to the CSS framework](#adding-to-the-css-framework)\n- [Using this system in our products](#using-this-system-in-our-products)\n- [Publishing](#publishing)\n\n## Getting started\n\nTo preview these assets and accompanying docs locally, run the following commands:\n\n```sh\nyarn\n```\n\n```sh\nyarn dev\n```\n\nVisit http://wbez.local:3000\n\nThis spins up a browsersync server and watch task for all SCSS and HTML files.\n\n**Requirements**\n\n- node >=8.11.3\n\n## Installing as a dependency\n\n```sh\nyarn add @wbez/ferris-ds\n```\n\n```sh\nnpm install @wbez/ferris-ds\n```\n\n## Using assets\n\nSCSS\n\n```scss\n@import '~@wbez/ferris-ds';\n```\n\nCSS in `` via CDN\n\n```html\n\n```\n\nSingle icon\n\n```js\nimport linkIcon from '@wbez/ferris-ds/assets/icons/wbez/link.svg';\n\n\"\";\n```\n\nIcon using spritesheet\n\n```jsx\nimport icons from '@wbez/ferris-ds/assets/dist/sprites/wbez.svg';\n\n\n \n;\n```\n\nLogo (CDN)\n\n```html\n\n```\n\nLogo (direct)\n\n```jsx\nimport logo from \"@wbez/ferris-ds/assets/logos/wbez/wbez-chicago-logo-oneline.svg\";\n\n\"WBEZ\n```\n\n## Folders\n\n| directory | description |\n| ------------ | ----------------------------------------------------------------------------------------------------------- |\n| assets/scss | Various SASS files establishing our CSS framework |\n| assets/icons | Sets of individual SVG icons used throughout our products |\n| assets/logos | Individual SVG/PNG logos used throughout our products |\n| docs | Tools and templates to statically render documentation, code examples, and usage info for our design system |\n\n## Adding to the CSS framework\n\nWhen you add a new class, component, scss variable, mixin, etc., you'll want to add a short bit of syntax to enable it to appear in the docs. Use the boilerplate below to get started.\n\n### SCSS docs boilerplate\n\n> How to document a new CSS class\n\nWe use a comment parser along with some [extra logic](https://github.com/wbez/ferris-ds/blob/master/tasks/style-doc.js) to generate our docs. To add a new section of documentation, add a boilerplate above your CSS rules like the one below:\n\n```scss\n// Title of Section (root-class-name)\n//\n// Description {{isWide}} {{isHelper}}\n//\n// root-class-name-modifier - desc\n//\n// Markup: 6-components/test/test.html\n//\n// Styleguide 6.0.1\n//\n.root-class-name {\n}\n```\n\n- `{{isWide}}` is used to display the demo of each modifier at full width\n- `{{isHelper}}` is used to hide main demo and only display modifiers\n- `// Deprecated` is used to signify a class to be removed.\n- `// Experimental` is used to signify a class we're considering.\n\n**Deprecated** and **Experimental** are named per [KSS syntax](https://warpspire.com/kss/syntax/).\n\n### Naming and organization\n\nWhen building CSS dispersed on a variety of platforms, it can be difficult to know where certain style rules should live and what to call them. We use the following guideline to help with those decisions as we scale our framework.\n\n#### ITCSS\n\nWe organize our SCSS files with the [inverted triangle](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) approach in mind. We put our own spin on it by adding a `typography`, `layouts` and `blocks` folder, but the general idea is all the same; increased specificity as you move down the stylesheet.\n\nSee also Brad Frost's write-up on atomic design for the rationale behind composable components. (`components` → `blocks` → `pages`)\n\n#### BEM\n\nWe closely follow the BEM (Block Element Modifier) class naming convention in our `components` folder, but we break BEM rules in other places. This is a deliberate attempt to create a hybrid approach of using BEM when scoped to a component and helper classes when styling globally in a more ad hoc context.\n\n#### Namespacing\n\nUse namespacing for quick reference of the function of a CSS class. The following key can be used as a guideline for naming your class:\n\n---\n\nComponents\n\n```css\n.c-component-name[__|-<-modifier>] {\n}\n```\n\n_Example: `c-button`_\n\n---\n\nTypography\n\n```css\n.t-type-util {\n}\n```\n\n_Example: `t-headline`_\n\n---\n\nLayout\n\n```css\n.l-layout-util {\n}\n```\n\n_Example: `l-container`_\n\n---\n\nBlocks\n\n```css\n.b-block-name {\n}\n```\n\n_Example: `b-site-footer`_\n\n---\n\nUtilities\n\n```css\n.[is|has]-state {\n}\n```\n\n_Example: `has-bg-yellow`_\n\n---\n\n## Using this system in our products\n\nThis system is experimental and under rapid development. Use it in situations where it makes sense for the scope of your task.\n\n**Do** use this system when...\n\n- Coding a new template from scratch (new landing pages)\n- Creating something in a isolated environment outside of legacy systems (newsletters, new static sites, UMP)\n\n**Don't** use this system when...\n\n- Making a small CSS change to the legacy system (tiny visual tweak to our main repo)\n- The system creates an unnecessarily layer of complexity (take the path of least resistance)\n\n---\n\n## Publishing\n\nMake sure you're authenticated for npm publishing.\n\n1. `npm login` - then follow the prompts\n2. `npm run release` - There's a [bug](https://github.com/sindresorhus/np/issues/420#issuecomment-499273013) in the `np` publishing tool we use where `yarn` commands don't seem to work.\n\n### Semantic versioning\n\nThe npm helper we use for versioning simplifies matching version numbers with the various `MAJOR`, `MINOR`, `PATCH` increment types. For guidance on what type of release you're making, refer to [https://semver.org/](https://semver.org/)\n\nGenerally, you could base your increment type on the following list:\n\n- MAJOR version = CSS changes that visually break layouts where `ferris-ds` is used on production\n- MINOR version = CSS changes that have no visual effect on production\n- PATCH version = CSS changes that fix a previous bug introduced on production or in development\n\n### Deploying our docs\n\nOur docs are automatically published from the `master` branch by AWS Amplify.\n","licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@1.0.0-11","dist":{"shasum":"680aa3eb91730cad20f48def9bbc16bf10638a3d","integrity":"sha512-UZvbDO4oQWq+ht+1dAMrC2UZEGFt6W2W6frkYGLjokmmts8Db6qPKFm+zk4sMwW+E5jol4/BsqNVNEzgH3u5Ew==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-1.0.0-11.tgz","fileCount":204,"unpackedSize":536309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpg/NCRA9TVsSAnZWagAABHQQAKHpbkvaa4y2HdBwY1HP\ncUk+VNGiheArUnccoT7TwPvxJnw2XCWyP3v0DMg5MaZyzBem61GM6E7t7o8j\n/qYh1uSSSCQANYaeRTYIEVprWV/BB2BAu9X68boNsmasvDNMbts/CSwoDMkk\nX52IXhnQVqiJXpb/pBtlHBBXNcstAVhgjGpK9r3f2YrGCo+VxIDt6W7noCB0\nppwRlyiaRTSnz7CWbPSCX6bukJe3acjh4RPWu4pu1MiHVlO1//LkLgsxbE0V\nOnl15gx979h9BDfU2WpsEKBBjo2lQxecqkZC1kpSl8e5sZuRa3tTsffch9Yn\nEYcDNC2NcXHInjUt0K4/lvFdFG7Qj0aEjJEBML0dzBOnN4/Ihozyr5SEsxvC\nHDN79IMUDjPo+l08j30vQutrieVTV1lqpGIq0fKcCTBZFS/wKu25dMQX8jOy\nrKzzGc+STvEORnxYgmsR3mhzf/I8junvJ8ZfektWwrsFEPolh/NRZ4iEBymN\nMF0htUeMOBaN0Z+OnVoSE680sxq02q1WNhXU+mFDaSuPfiy65nMXah0fcnLq\nMDNMvtWChi/2G+6+XwB3F0kiw/WlLQNuAmzTxLO1pvbpDeJnB8y+Trlw+LvW\nhPyqA0vgxLdU+TSrbIhqUd3EkMivzZBBr2hxtXsAEGy8ffsdPFFyLXBQoPSQ\nAtsc\r\n=30JA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCc/79Nz8u6k4SSA3K7cxAfOiFZcJ6HnBL56bfpPUyX6QIgMJuHHhat+fyK/86LVnb8Vf6WCmz5LAJoVNatgUJ3QWo="}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_1.0.0-11_1571164108842_0.643096818971552"},"_hasShrinkwrap":false},"1.0.0-12":{"name":"@wbez/ferris-ds","version":"1.0.0-12","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"readmeFilename":"README.md","readme":"# @wbez/ferris-ds\n\n> Centralizing styles for product development at WBEZ\n\nThis repo contains a library of styles and icons available to import via npm.\n\nAlong with the library, we set up a few tools that help document updates. CSS comments are parsed to create a JSON object of documentation. That data is rendered with nunjucks to give us a visual representation of the various components and rule-sets we're building.\n\nOur goal is that as we iterate upon the design of our products, we document everything along the way. This keeps our **style docs current and allows for continuous optimization our CSS.**\n\nThis repo is forked from [texastribune/queso-ui@v3.2.0](https://github.com/texastribune/queso-ui/releases/tag/v3.2.0). Much thanks and props for building out such a great base for us to launch from.\n\n## Index\n\n- [Getting started](#getting-started)\n- [Installing as a dependency](#installing-as-a-dependency)\n- [Using assets](#using-assets)\n- [Folders](#folders)\n- [Adding to the CSS framework](#adding-to-the-css-framework)\n- [Using this system in our products](#using-this-system-in-our-products)\n- [Publishing](#publishing)\n\n## Getting started\n\nTo preview these assets and accompanying docs locally, run the following commands:\n\n```sh\nyarn\n```\n\n```sh\nyarn dev\n```\n\nVisit http://wbez.local:3000\n\nThis spins up a browsersync server and watch task for all SCSS and HTML files.\n\n**Requirements**\n\n- node >=8.11.3\n\n## Installing as a dependency\n\n```sh\nyarn add @wbez/ferris-ds\n```\n\n```sh\nnpm install @wbez/ferris-ds\n```\n\n## Using assets\n\nSCSS\n\n```scss\n@import '~@wbez/ferris-ds';\n```\n\nCSS in `` via CDN\n\n```html\n\n```\n\nSingle icon\n\n```js\nimport linkIcon from '@wbez/ferris-ds/assets/icons/wbez/link.svg';\n\n\"\";\n```\n\nIcon using spritesheet\n\n```jsx\nimport icons from '@wbez/ferris-ds/assets/dist/sprites/wbez.svg';\n\n\n \n;\n```\n\nLogo (CDN)\n\n```html\n\n```\n\nLogo (direct)\n\n```jsx\nimport logo from \"@wbez/ferris-ds/assets/logos/wbez/wbez-chicago-logo-oneline.svg\";\n\n\"WBEZ\n```\n\n## Folders\n\n| directory | description |\n| ------------ | ----------------------------------------------------------------------------------------------------------- |\n| assets/scss | Various SASS files establishing our CSS framework |\n| assets/icons | Sets of individual SVG icons used throughout our products |\n| assets/logos | Individual SVG/PNG logos used throughout our products |\n| docs | Tools and templates to statically render documentation, code examples, and usage info for our design system |\n\n## Adding to the CSS framework\n\nWhen you add a new class, component, scss variable, mixin, etc., you'll want to add a short bit of syntax to enable it to appear in the docs. Use the boilerplate below to get started.\n\n### SCSS docs boilerplate\n\n> How to document a new CSS class\n\nWe use a comment parser along with some [extra logic](https://github.com/wbez/ferris-ds/blob/master/tasks/style-doc.js) to generate our docs. To add a new section of documentation, add a boilerplate above your CSS rules like the one below:\n\n```scss\n// Title of Section (root-class-name)\n//\n// Description {{isWide}} {{isHelper}}\n//\n// root-class-name-modifier - desc\n//\n// Markup: 6-components/test/test.html\n//\n// Styleguide 6.0.1\n//\n.root-class-name {\n}\n```\n\n- `{{isWide}}` is used to display the demo of each modifier at full width\n- `{{isHelper}}` is used to hide main demo and only display modifiers\n- `// Deprecated` is used to signify a class to be removed.\n- `// Experimental` is used to signify a class we're considering.\n\n**Deprecated** and **Experimental** are named per [KSS syntax](https://warpspire.com/kss/syntax/).\n\n### Naming and organization\n\nWhen building CSS dispersed on a variety of platforms, it can be difficult to know where certain style rules should live and what to call them. We use the following guideline to help with those decisions as we scale our framework.\n\n#### ITCSS\n\nWe organize our SCSS files with the [inverted triangle](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) approach in mind. We put our own spin on it by adding a `typography`, `layouts` and `blocks` folder, but the general idea is all the same; increased specificity as you move down the stylesheet.\n\nSee also Brad Frost's write-up on atomic design for the rationale behind composable components. (`components` → `blocks` → `pages`)\n\n#### BEM\n\nWe closely follow the BEM (Block Element Modifier) class naming convention in our `components` folder, but we break BEM rules in other places. This is a deliberate attempt to create a hybrid approach of using BEM when scoped to a component and helper classes when styling globally in a more ad hoc context.\n\n#### Namespacing\n\nUse namespacing for quick reference of the function of a CSS class. The following key can be used as a guideline for naming your class:\n\n---\n\nComponents\n\n```css\n.c-component-name[__|-<-modifier>] {\n}\n```\n\n_Example: `c-button`_\n\n---\n\nTypography\n\n```css\n.t-type-util {\n}\n```\n\n_Example: `t-headline`_\n\n---\n\nLayout\n\n```css\n.l-layout-util {\n}\n```\n\n_Example: `l-container`_\n\n---\n\nBlocks\n\n```css\n.b-block-name {\n}\n```\n\n_Example: `b-site-footer`_\n\n---\n\nUtilities\n\n```css\n.[is|has]-state {\n}\n```\n\n_Example: `has-bg-yellow`_\n\n---\n\n## Using this system in our products\n\nThis system is experimental and under rapid development. Use it in situations where it makes sense for the scope of your task.\n\n**Do** use this system when...\n\n- Coding a new template from scratch (new landing pages)\n- Creating something in a isolated environment outside of legacy systems (newsletters, new static sites, UMP)\n\n**Don't** use this system when...\n\n- Making a small CSS change to the legacy system (tiny visual tweak to our main repo)\n- The system creates an unnecessarily layer of complexity (take the path of least resistance)\n\n---\n\n## Publishing\n\nMake sure you're authenticated for npm publishing.\n\n1. `npm login` - then follow the prompts\n2. `npm run release` - There's a [bug](https://github.com/sindresorhus/np/issues/420#issuecomment-499273013) in the `np` publishing tool we use where `yarn` commands don't seem to work.\n\n### Semantic versioning\n\nThe npm helper we use for versioning simplifies matching version numbers with the various `MAJOR`, `MINOR`, `PATCH` increment types. For guidance on what type of release you're making, refer to [https://semver.org/](https://semver.org/)\n\nGenerally, you could base your increment type on the following list:\n\n- MAJOR version = CSS changes that visually break layouts where `ferris-ds` is used on production\n- MINOR version = CSS changes that have no visual effect on production\n- PATCH version = CSS changes that fix a previous bug introduced on production or in development\n\n### Deploying our docs\n\nOur docs are automatically published from the `master` branch by AWS Amplify.\n","licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@1.0.0-12","dist":{"shasum":"8fc92ebd75a43e5d52a66d0dd8abde44f6b4f750","integrity":"sha512-wraH3Tcly2cnhVwXLJhiyZKYCdSjHrrL3f6n06c1W8hRnG0fooqtJP32SiJ5Il9XSNFbBuyxUMWWovBCAYlVMQ==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-1.0.0-12.tgz","fileCount":204,"unpackedSize":536389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpiWRCRA9TVsSAnZWagAAO3YP/RkTp54kS1zePhWkZVXD\nykL4OzwcBGHfi27BzBtk/jmoRmaHM6fgIUnnkfIVeq+StV9czzqBjootv7YO\nfzKIHA1PAxRfWvpx/jwOrn/XDKB11i+5nGIKXPpvOsV/ZNDWplPC54v6wHmW\nk4VCp5PonAjlEl0M1Gbhlay2zM0PA+/KYHfHPgGC0OzUuYISmkBFFeFzvi/Y\nJpLYoVdvBJPsANiZeLaNvlMgRtX2ZCyUQCJfC115bV0r0cLWXUCqE4PDU5Yf\nz5yAuya0j2C6TRqgQZMfh5mK1eEKnT3DcmjsBCk2YdTJ5OPFqbyEhhYOk7XC\ng7jmmJYRrrlfMtJHYjnL204SLMNRrecIknnZrv63WGIIg9M+490zjHcbAcgS\nkeU01PQQpEbOG57OShlysPrb6f+IiufdpLI3WDBOsXSGuU0oWKdS+lsm11SN\nEqO0+MM6s0L5IU0hfiEM7+u6sf8qIekOVVQW6D0ekyh3GJ5rIpWs1V/4LL1Q\nUX/I0ss72yy+Ugmzf2kMhR8kt61AzauOoaA8PLrqmiPdGUDACgl5Lv1K7lor\n/mrUce62wFHMZvfFenwVBdBrnLV8dhFGMzVwygJZk9UT8b2iwZmUso0aT+2Q\nq039zMhZR3qgVyCwrDDJKvMqfkJyu+ma/YYg8bWGcQd4GG0patFDK7h6yr89\nJ38f\r\n=mwJE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAMQkpt3IEOkD7HuLIWRU/MvF6AhnBj5YC/uE75J/X18AiBXvDlfvVjvN8d432mQzQd/x3R9zKuk3CfpQmCWMpy8+A=="}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_1.0.0-12_1571169681208_0.13096927210613374"},"_hasShrinkwrap":false},"1.0.0-13":{"name":"@wbez/ferris-ds","version":"1.0.0-13","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"readmeFilename":"README.md","readme":"# @wbez/ferris-ds\n\n> Centralizing styles for product development at WBEZ\n\nThis repo contains a library of styles and icons available to import via npm.\n\nAlong with the library, we set up a few tools that help document updates. CSS comments are parsed to create a JSON object of documentation. That data is rendered with nunjucks to give us a visual representation of the various components and rule-sets we're building.\n\nOur goal is that as we iterate upon the design of our products, we document everything along the way. This keeps our **style docs current and allows for continuous optimization our CSS.**\n\nThis repo is forked from [texastribune/queso-ui@v3.2.0](https://github.com/texastribune/queso-ui/releases/tag/v3.2.0). Much thanks and props for building out such a great base for us to launch from.\n\n## Index\n\n- [Getting started](#getting-started)\n- [Installing as a dependency](#installing-as-a-dependency)\n- [Using assets](#using-assets)\n- [Folders](#folders)\n- [Adding to the CSS framework](#adding-to-the-css-framework)\n- [Using this system in our products](#using-this-system-in-our-products)\n- [Publishing](#publishing)\n\n## Getting started\n\nTo preview these assets and accompanying docs locally, run the following commands:\n\n```sh\nyarn\n```\n\n```sh\nyarn dev\n```\n\nVisit http://wbez.local:3000\n\nThis spins up a browsersync server and watch task for all SCSS and HTML files.\n\n**Requirements**\n\n- node >=8.11.3\n\n## Installing as a dependency\n\n```sh\nyarn add @wbez/ferris-ds\n```\n\n```sh\nnpm install @wbez/ferris-ds\n```\n\n## Using assets\n\nSCSS\n\n```scss\n@import '~@wbez/ferris-ds';\n```\n\nCSS in `` via CDN\n\n```html\n\n```\n\nSingle icon\n\n```js\nimport linkIcon from '@wbez/ferris-ds/assets/icons/wbez/link.svg';\n\n\"\";\n```\n\nIcon using spritesheet\n\n```jsx\nimport icons from '@wbez/ferris-ds/assets/dist/sprites/wbez.svg';\n\n\n \n;\n```\n\nLogo (CDN)\n\n```html\n\n```\n\nLogo (direct)\n\n```jsx\nimport logo from \"@wbez/ferris-ds/assets/logos/wbez/wbez-chicago-logo-oneline.svg\";\n\n\"WBEZ\n```\n\n## Folders\n\n| directory | description |\n| ------------ | ----------------------------------------------------------------------------------------------------------- |\n| assets/scss | Various SASS files establishing our CSS framework |\n| assets/icons | Sets of individual SVG icons used throughout our products |\n| assets/logos | Individual SVG/PNG logos used throughout our products |\n| docs | Tools and templates to statically render documentation, code examples, and usage info for our design system |\n\n## Adding to the CSS framework\n\nWhen you add a new class, component, scss variable, mixin, etc., you'll want to add a short bit of syntax to enable it to appear in the docs. Use the boilerplate below to get started.\n\n### SCSS docs boilerplate\n\n> How to document a new CSS class\n\nWe use a comment parser along with some [extra logic](https://github.com/wbez/ferris-ds/blob/master/tasks/style-doc.js) to generate our docs. To add a new section of documentation, add a boilerplate above your CSS rules like the one below:\n\n```scss\n// Title of Section (root-class-name)\n//\n// Description {{isWide}} {{isHelper}}\n//\n// root-class-name-modifier - desc\n//\n// Markup: 6-components/test/test.html\n//\n// Styleguide 6.0.1\n//\n.root-class-name {\n}\n```\n\n- `{{isWide}}` is used to display the demo of each modifier at full width\n- `{{isHelper}}` is used to hide main demo and only display modifiers\n- `// Deprecated` is used to signify a class to be removed.\n- `// Experimental` is used to signify a class we're considering.\n\n**Deprecated** and **Experimental** are named per [KSS syntax](https://warpspire.com/kss/syntax/).\n\n### Naming and organization\n\nWhen building CSS dispersed on a variety of platforms, it can be difficult to know where certain style rules should live and what to call them. We use the following guideline to help with those decisions as we scale our framework.\n\n#### ITCSS\n\nWe organize our SCSS files with the [inverted triangle](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) approach in mind. We put our own spin on it by adding a `typography`, `layouts` and `blocks` folder, but the general idea is all the same; increased specificity as you move down the stylesheet.\n\nSee also Brad Frost's write-up on atomic design for the rationale behind composable components. (`components` → `blocks` → `pages`)\n\n#### BEM\n\nWe closely follow the BEM (Block Element Modifier) class naming convention in our `components` folder, but we break BEM rules in other places. This is a deliberate attempt to create a hybrid approach of using BEM when scoped to a component and helper classes when styling globally in a more ad hoc context.\n\n#### Namespacing\n\nUse namespacing for quick reference of the function of a CSS class. The following key can be used as a guideline for naming your class:\n\n---\n\nComponents\n\n```css\n.c-component-name[__|-<-modifier>] {\n}\n```\n\n_Example: `c-button`_\n\n---\n\nTypography\n\n```css\n.t-type-util {\n}\n```\n\n_Example: `t-headline`_\n\n---\n\nLayout\n\n```css\n.l-layout-util {\n}\n```\n\n_Example: `l-container`_\n\n---\n\nBlocks\n\n```css\n.b-block-name {\n}\n```\n\n_Example: `b-site-footer`_\n\n---\n\nUtilities\n\n```css\n.[is|has]-state {\n}\n```\n\n_Example: `has-bg-yellow`_\n\n---\n\n## Using this system in our products\n\nThis system is experimental and under rapid development. Use it in situations where it makes sense for the scope of your task.\n\n**Do** use this system when...\n\n- Coding a new template from scratch (new landing pages)\n- Creating something in a isolated environment outside of legacy systems (newsletters, new static sites, UMP)\n\n**Don't** use this system when...\n\n- Making a small CSS change to the legacy system (tiny visual tweak to our main repo)\n- The system creates an unnecessarily layer of complexity (take the path of least resistance)\n\n---\n\n## Publishing\n\nMake sure you're authenticated for npm publishing.\n\n1. `npm login` - then follow the prompts\n2. `npm run release` - There's a [bug](https://github.com/sindresorhus/np/issues/420#issuecomment-499273013) in the `np` publishing tool we use where `yarn` commands don't seem to work.\n\n### Semantic versioning\n\nThe npm helper we use for versioning simplifies matching version numbers with the various `MAJOR`, `MINOR`, `PATCH` increment types. For guidance on what type of release you're making, refer to [https://semver.org/](https://semver.org/)\n\nGenerally, you could base your increment type on the following list:\n\n- MAJOR version = CSS changes that visually break layouts where `ferris-ds` is used on production\n- MINOR version = CSS changes that have no visual effect on production\n- PATCH version = CSS changes that fix a previous bug introduced on production or in development\n\n### Deploying our docs\n\nOur docs are automatically published from the `master` branch by AWS Amplify.\n","licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@1.0.0-13","dist":{"shasum":"6b2a0668455c3d63c2a51c96b49a6516d9c0db1a","integrity":"sha512-hW01oSJwpZuKq3iynCU30ea5AeyMx7C/ZHhJ9l8dsiMUFucfGWCJubu1In3J0GiHIjLA287THnF8adn8Gg38pQ==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-1.0.0-13.tgz","fileCount":204,"unpackedSize":538048,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdrfEtCRA9TVsSAnZWagAAdWYP/itoN2iZhpCiQujac2M2\nKporecnEMNIOxZS+35vncDRCyf9SU9Ycv0/MHyybfHNbdm8I8hyFgaFht81c\neLDwPMnNUzcxxxpFcMlFsoHOAPnUfJxYsPVoLRuUl53iDX24H8dXWYvklCJ8\nbWpXct2PenXqNp79A5PvxBmdpjv4qWcqgpg5SQEfkiOgFT2O6guYvIM6np8j\nNnbRDIsmQNd+4BM+v+ZeFnzMj5sxNUogvRbtmEpuXj+AuQe1TBXAPJ2FojtD\njQt2INVSanFTT7RfAIqDXfYj+a6ms3naivaI8M0HncTYhqC+Dhatg3FQ0MYQ\nS0XYgO6kqRLjNVOIL5gYa1qRKG4jqC5jSzeHlT5CWCQaQlkU2ALRO+LsJuIP\n7PoiG94jxaBTX+1I/NqwjQIQ/7VWQ7unChG2Lh4Q0YCKLoStXOefqz9sgZCk\nm0pNcA4v8O/FV5HYZLDU1p7S8LLJuTEclpr8HMabPY/o39S8rPqE9BqJkuyO\nz0A33duLuQzY5nuy2PM9VJrEFdnK61Od4C01yAKUfVszKFkdXhF3/9W8y7+c\n8mBYcEv1dubbXzXEtO5LTTWpeguHGuj8WrXbmOrdb+fAkazU86M9kfPTIt7x\njZGBGC1r37Gd2dwjttxiplUFq0ueEPfWwc9RfxZHi0vFXIfWm9B1iVsejJ0k\nX1FF\r\n=owYM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+0uGYBHDxXZI2S1TVHEpJNarhN3ILPTll3CYlFnpAtwIgFkMRLTDK+WN3sKllnwuTOOySGfBBfHkE2ZlNf37HkcQ="}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_1.0.0-13_1571680556453_0.9142401357770029"},"_hasShrinkwrap":false},"1.0.0-14":{"name":"@wbez/ferris-ds","version":"1.0.0-14","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"readmeFilename":"README.md","readme":"# @wbez/ferris-ds\n\n> Centralizing styles for product development at WBEZ\n\nThis repo contains a library of styles and icons available to import via npm.\n\nAlong with the library, we set up a few tools that help document updates. CSS comments are parsed to create a JSON object of documentation. That data is rendered with nunjucks to give us a visual representation of the various components and rule-sets we're building.\n\nOur goal is that as we iterate upon the design of our products, we document everything along the way. This keeps our **style docs current and allows for continuous optimization our CSS.**\n\nThis repo is forked from [texastribune/queso-ui@v3.2.0](https://github.com/texastribune/queso-ui/releases/tag/v3.2.0). Much thanks and props for building out such a great base for us to launch from.\n\n## Index\n\n- [Getting started](#getting-started)\n- [Installing as a dependency](#installing-as-a-dependency)\n- [Using assets](#using-assets)\n- [Folders](#folders)\n- [Adding to the CSS framework](#adding-to-the-css-framework)\n- [Using this system in our products](#using-this-system-in-our-products)\n- [Publishing](#publishing)\n\n## Getting started\n\nTo preview these assets and accompanying docs locally, run the following commands:\n\n```sh\nyarn\n```\n\n```sh\nyarn dev\n```\n\nVisit http://wbez.local:3000\n\nThis spins up a browsersync server and watch task for all SCSS and HTML files.\n\n**Requirements**\n\n- node >=8.11.3\n\n## Installing as a dependency\n\n```sh\nyarn add @wbez/ferris-ds\n```\n\n```sh\nnpm install @wbez/ferris-ds\n```\n\n## Using assets\n\nSCSS\n\n```scss\n@import '~@wbez/ferris-ds';\n```\n\nCSS in `` via CDN\n\n```html\n\n```\n\nSingle icon\n\n```js\nimport linkIcon from '@wbez/ferris-ds/assets/icons/wbez/link.svg';\n\n\"\";\n```\n\nIcon using spritesheet\n\n```jsx\nimport icons from '@wbez/ferris-ds/assets/dist/sprites/wbez.svg';\n\n\n \n;\n```\n\nLogo (CDN)\n\n```html\n\n```\n\nLogo (direct)\n\n```jsx\nimport logo from \"@wbez/ferris-ds/assets/logos/wbez/wbez-chicago-logo-oneline.svg\";\n\n\"WBEZ\n```\n\n## Folders\n\n| directory | description |\n| ------------ | ----------------------------------------------------------------------------------------------------------- |\n| assets/scss | Various SASS files establishing our CSS framework |\n| assets/icons | Sets of individual SVG icons used throughout our products |\n| assets/logos | Individual SVG/PNG logos used throughout our products |\n| docs | Tools and templates to statically render documentation, code examples, and usage info for our design system |\n\n## Adding to the CSS framework\n\nWhen you add a new class, component, scss variable, mixin, etc., you'll want to add a short bit of syntax to enable it to appear in the docs. Use the boilerplate below to get started.\n\n### SCSS docs boilerplate\n\n> How to document a new CSS class\n\nWe use a comment parser along with some [extra logic](https://github.com/wbez/ferris-ds/blob/master/tasks/style-doc.js) to generate our docs. To add a new section of documentation, add a boilerplate above your CSS rules like the one below:\n\n```scss\n// Title of Section (root-class-name)\n//\n// Description {{isWide}} {{isHelper}}\n//\n// root-class-name-modifier - desc\n//\n// Markup: 6-components/test/test.html\n//\n// Styleguide 6.0.1\n//\n.root-class-name {\n}\n```\n\n- `{{isWide}}` is used to display the demo of each modifier at full width\n- `{{isHelper}}` is used to hide main demo and only display modifiers\n- `// Deprecated` is used to signify a class to be removed.\n- `// Experimental` is used to signify a class we're considering.\n\n**Deprecated** and **Experimental** are named per [KSS syntax](https://warpspire.com/kss/syntax/).\n\n### Naming and organization\n\nWhen building CSS dispersed on a variety of platforms, it can be difficult to know where certain style rules should live and what to call them. We use the following guideline to help with those decisions as we scale our framework.\n\n#### ITCSS\n\nWe organize our SCSS files with the [inverted triangle](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) approach in mind. We put our own spin on it by adding a `typography`, `layouts` and `blocks` folder, but the general idea is all the same; increased specificity as you move down the stylesheet.\n\nSee also Brad Frost's write-up on atomic design for the rationale behind composable components. (`components` → `blocks` → `pages`)\n\n#### BEM\n\nWe closely follow the BEM (Block Element Modifier) class naming convention in our `components` folder, but we break BEM rules in other places. This is a deliberate attempt to create a hybrid approach of using BEM when scoped to a component and helper classes when styling globally in a more ad hoc context.\n\n#### Namespacing\n\nUse namespacing for quick reference of the function of a CSS class. The following key can be used as a guideline for naming your class:\n\n---\n\nComponents\n\n```css\n.c-component-name[__|-<-modifier>] {\n}\n```\n\n_Example: `c-button`_\n\n---\n\nTypography\n\n```css\n.t-type-util {\n}\n```\n\n_Example: `t-headline`_\n\n---\n\nLayout\n\n```css\n.l-layout-util {\n}\n```\n\n_Example: `l-container`_\n\n---\n\nBlocks\n\n```css\n.b-block-name {\n}\n```\n\n_Example: `b-site-footer`_\n\n---\n\nUtilities\n\n```css\n.[is|has]-state {\n}\n```\n\n_Example: `has-bg-yellow`_\n\n---\n\n## Using this system in our products\n\nThis system is experimental and under rapid development. Use it in situations where it makes sense for the scope of your task.\n\n**Do** use this system when...\n\n- Coding a new template from scratch (new landing pages)\n- Creating something in a isolated environment outside of legacy systems (newsletters, new static sites, UMP)\n\n**Don't** use this system when...\n\n- Making a small CSS change to the legacy system (tiny visual tweak to our main repo)\n- The system creates an unnecessarily layer of complexity (take the path of least resistance)\n\n---\n\n## Publishing\n\nMake sure you're authenticated for npm publishing.\n\n1. `npm login` - then follow the prompts\n2. `npm run release` - There's a [bug](https://github.com/sindresorhus/np/issues/420#issuecomment-499273013) in the `np` publishing tool we use where `yarn` commands don't seem to work.\n\n### Semantic versioning\n\nThe npm helper we use for versioning simplifies matching version numbers with the various `MAJOR`, `MINOR`, `PATCH` increment types. For guidance on what type of release you're making, refer to [https://semver.org/](https://semver.org/)\n\nGenerally, you could base your increment type on the following list:\n\n- MAJOR version = CSS changes that visually break layouts where `ferris-ds` is used on production\n- MINOR version = CSS changes that have no visual effect on production\n- PATCH version = CSS changes that fix a previous bug introduced on production or in development\n\n### Deploying our docs\n\nOur docs are automatically published from the `master` branch by AWS Amplify.\n","licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@1.0.0-14","dist":{"shasum":"aa97520b412ffc903d39b9a8b2b4cff89300d813","integrity":"sha512-pi7xCKaRyLjEJRKOJId7AtiJvbbTB+d+QoFtCra19bElbLBbDxTXowzdjxYMxojJCVfh3M1ig41isMpPcPNs4g==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-1.0.0-14.tgz","fileCount":205,"unpackedSize":545548,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsJEhCRA9TVsSAnZWagAAkucP/jbdN/AvlKFP3R9h9Iaf\n7QLPKH3Kw2vQD8XNkvJ/E05D+yJfXK42//S3CPf7urpjBc5QC23ytLvI/42M\n9CRtp6Q+RamH0tnEEPvUygGwV7Plkf7zgsGcknLrRKXiicxqoMUEISuvXTLd\nx4naPpZttGThyCkMpfTCerFL36nYfX7TOvk4eEyeAXGC2bdGK+YaXL9YdM15\nQE8LN1QySZElgarR6jgS0TOoRiA/DZho31f+AmPqsUJrGkSj5oZZjcS1J5pG\npe48Zy7cbkYndhqZNdDV7uaeb+J1eXyi31LuIR30AMHPZyxJAUNy2CMtPm7L\nABbLKeA7pCpfP2peTXRTWdMMyG+YQZXDY9B6OyQfVxptycCLkCQ7BdWv2b5X\nrDbRTJSgH3gbXnlnfYF5mSmSiMaKTC/JhuIE/mPMMG0BEKG3cJiKtsZdCKOD\n+bvFLvth7jK6QZNZ6TFk5BgbX0f5rUfltQj4QsCkPwSMw04O8A3sw2cd5FL1\nsaJjf1TQ8KVSKZm9vU+2fwejDuITziRb6BNahQ/8mV98EmZbRvoUM4sdTvE1\nfMK65CsyNqgLEByN/tOCPYCk6sszJLLB30+GgktljtblS95ISEXrD2CeiLAo\nOP2mrjGGbvPNntf+tM3+uWMBkdFvxkkF9fu/hMLQoAS8ecg67fsxlcbI7dAK\nbi4R\r\n=ZJ69\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2eBiZXH/ZfhgbMWgEffGElxEDdgGwy42EB20AG8J3zgIhALTwmPeocno9tGZVhTJnGsl3eLCiwc5ReeR9rANu0/Vf"}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_1.0.0-14_1571852576719_0.1618385485283622"},"_hasShrinkwrap":false},"1.0.0-15":{"name":"@wbez/ferris-ds","version":"1.0.0-15","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"readmeFilename":"README.md","readme":"# @wbez/ferris-ds\n\n> Centralizing styles for product development at WBEZ\n\nThis repo contains a library of styles and icons available to import via npm.\n\nAlong with the library, we set up a few tools that help document updates. CSS comments are parsed to create a JSON object of documentation. That data is rendered with nunjucks to give us a visual representation of the various components and rule-sets we're building.\n\nOur goal is that as we iterate upon the design of our products, we document everything along the way. This keeps our **style docs current and allows for continuous optimization our CSS.**\n\nThis repo is forked from [texastribune/queso-ui@v3.2.0](https://github.com/texastribune/queso-ui/releases/tag/v3.2.0). Much thanks and props for building out such a great base for us to launch from.\n\n## Index\n\n- [Getting started](#getting-started)\n- [Installing as a dependency](#installing-as-a-dependency)\n- [Using assets](#using-assets)\n- [Folders](#folders)\n- [Adding to the CSS framework](#adding-to-the-css-framework)\n- [Using this system in our products](#using-this-system-in-our-products)\n- [Publishing](#publishing)\n\n## Getting started\n\nTo preview these assets and accompanying docs locally, run the following commands:\n\n```sh\nyarn\n```\n\n```sh\nyarn dev\n```\n\nVisit http://wbez.local:3000\n\nThis spins up a browsersync server and watch task for all SCSS and HTML files.\n\n**Requirements**\n\n- node >=8.11.3\n\n## Installing as a dependency\n\n```sh\nyarn add @wbez/ferris-ds\n```\n\n```sh\nnpm install @wbez/ferris-ds\n```\n\n## Using assets\n\nSCSS\n\n```scss\n@import '~@wbez/ferris-ds';\n```\n\nCSS in `` via CDN\n\n```html\n\n```\n\nSingle icon\n\n```js\nimport linkIcon from '@wbez/ferris-ds/assets/icons/wbez/link.svg';\n\n\"\";\n```\n\nIcon using spritesheet\n\n```jsx\nimport icons from '@wbez/ferris-ds/assets/dist/sprites/wbez.svg';\n\n\n \n;\n```\n\nLogo (CDN)\n\n```html\n\n```\n\nLogo (direct)\n\n```jsx\nimport logo from \"@wbez/ferris-ds/assets/logos/wbez/wbez-chicago-logo-oneline.svg\";\n\n\"WBEZ\n```\n\n## Folders\n\n| directory | description |\n| ------------ | ----------------------------------------------------------------------------------------------------------- |\n| assets/scss | Various SASS files establishing our CSS framework |\n| assets/icons | Sets of individual SVG icons used throughout our products |\n| assets/logos | Individual SVG/PNG logos used throughout our products |\n| docs | Tools and templates to statically render documentation, code examples, and usage info for our design system |\n\n## Adding to the CSS framework\n\nWhen you add a new class, component, scss variable, mixin, etc., you'll want to add a short bit of syntax to enable it to appear in the docs. Use the boilerplate below to get started.\n\n### SCSS docs boilerplate\n\n> How to document a new CSS class\n\nWe use a comment parser along with some [extra logic](https://github.com/wbez/ferris-ds/blob/master/tasks/style-doc.js) to generate our docs. To add a new section of documentation, add a boilerplate above your CSS rules like the one below:\n\n```scss\n// Title of Section (root-class-name)\n//\n// Description {{isWide}} {{isHelper}}\n//\n// root-class-name-modifier - desc\n//\n// Markup: 6-components/test/test.html\n//\n// Styleguide 6.0.1\n//\n.root-class-name {\n}\n```\n\n- `{{isWide}}` is used to display the demo of each modifier at full width\n- `{{isHelper}}` is used to hide main demo and only display modifiers\n- `// Deprecated` is used to signify a class to be removed.\n- `// Experimental` is used to signify a class we're considering.\n\n**Deprecated** and **Experimental** are named per [KSS syntax](https://warpspire.com/kss/syntax/).\n\n### Naming and organization\n\nWhen building CSS dispersed on a variety of platforms, it can be difficult to know where certain style rules should live and what to call them. We use the following guideline to help with those decisions as we scale our framework.\n\n#### ITCSS\n\nWe organize our SCSS files with the [inverted triangle](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) approach in mind. We put our own spin on it by adding a `typography`, `layouts` and `blocks` folder, but the general idea is all the same; increased specificity as you move down the stylesheet.\n\nSee also Brad Frost's write-up on atomic design for the rationale behind composable components. (`components` → `blocks` → `pages`)\n\n#### BEM\n\nWe closely follow the BEM (Block Element Modifier) class naming convention in our `components` folder, but we break BEM rules in other places. This is a deliberate attempt to create a hybrid approach of using BEM when scoped to a component and helper classes when styling globally in a more ad hoc context.\n\n#### Namespacing\n\nUse namespacing for quick reference of the function of a CSS class. The following key can be used as a guideline for naming your class:\n\n---\n\nComponents\n\n```css\n.c-component-name[__|-<-modifier>] {\n}\n```\n\n_Example: `c-button`_\n\n---\n\nTypography\n\n```css\n.t-type-util {\n}\n```\n\n_Example: `t-headline`_\n\n---\n\nLayout\n\n```css\n.l-layout-util {\n}\n```\n\n_Example: `l-container`_\n\n---\n\nBlocks\n\n```css\n.b-block-name {\n}\n```\n\n_Example: `b-site-footer`_\n\n---\n\nUtilities\n\n```css\n.[is|has]-state {\n}\n```\n\n_Example: `has-bg-yellow`_\n\n---\n\n## Using this system in our products\n\nThis system is experimental and under rapid development. Use it in situations where it makes sense for the scope of your task.\n\n**Do** use this system when...\n\n- Coding a new template from scratch (new landing pages)\n- Creating something in a isolated environment outside of legacy systems (newsletters, new static sites, UMP)\n\n**Don't** use this system when...\n\n- Making a small CSS change to the legacy system (tiny visual tweak to our main repo)\n- The system creates an unnecessarily layer of complexity (take the path of least resistance)\n\n---\n\n## Publishing\n\nMake sure you're authenticated for npm publishing.\n\n1. `npm login` - then follow the prompts\n2. `npm run release` - There's a [bug](https://github.com/sindresorhus/np/issues/420#issuecomment-499273013) in the `np` publishing tool we use where `yarn` commands don't seem to work.\n\n### Semantic versioning\n\nThe npm helper we use for versioning simplifies matching version numbers with the various `MAJOR`, `MINOR`, `PATCH` increment types. For guidance on what type of release you're making, refer to [https://semver.org/](https://semver.org/)\n\nGenerally, you could base your increment type on the following list:\n\n- MAJOR version = CSS changes that visually break layouts where `ferris-ds` is used on production\n- MINOR version = CSS changes that have no visual effect on production\n- PATCH version = CSS changes that fix a previous bug introduced on production or in development\n\n### Deploying our docs\n\nOur docs are automatically published from the `master` branch by AWS Amplify.\n","licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@1.0.0-15","dist":{"shasum":"f82e7be9fa6dc3383c75409a8e43090472bb25db","integrity":"sha512-cRfC7tp117BEAJmaLNzWjhE357sp5iFqFEnmprzt5WyXB47/SihUgFDgaquUZsr8Zhnbg4yoeC/Y0Wy+Q3sniA==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-1.0.0-15.tgz","fileCount":205,"unpackedSize":545424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxe7uCRA9TVsSAnZWagAAylwP/3RUezCTH+PB9vN0W82h\nYUl44NtiGmSqgwX7lmkjCsMWTV9kSAleG9oEtREZ0hJIZKvTL5n6KpKDy+9W\n2VvlNBIw3+M1lJbCVGSB+qN9LOXLEs1FaUxjDIkPTmrHJ7MMA/r1hOgkQ73w\ng9JUqWkGC7GbHJkLxNNTlOEWT0x5vbU2DM7C8SPn8sYUuREZaCCYVJIGSfiq\nktwx3HyXGtk/v/uURLrtCAEXzsup828LJt1hh4fIlidFp5Gb1WZ1WaOE2LeT\nrhaCLO1ZqR/KJcZLGy3EE6tdNJ63NmC92tkr3XGaopJH0iAI1p+RZQrEweIP\n01du+2Dw7S4t6av6qtU+KzKlcI5jqeQR18Pba+S/mkp81XII0Coullu58ur+\nFZ2ExWAsoGGDH3DnAvuw1qYMe2ZkGfYlF/KADUySuxtDZxcuZzI7Dfla1H9F\njz1YPuFytHZPDvhGqhOugeLEvEqTW8S31kLSUWu1IY67KDYT9vOOEZA/K9LQ\nZ4W4OBNNUPGLPLjJ7K62yW75oeHsVVPu7WeyexoTubK0PUZjp7KjM3hzOikn\niwcYYCOuEJ3eOthx4tP9nuFYe/fI7UrqE7mqYTp6KYCAfA5kpWPOIyF2EG7C\nFWVaye7wqKsd9Se+ltR0T0tK2yi77ONw/AlgOKY92hwPskX9JKl57VLYenoN\ncKcU\r\n=fh7O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAaHE7wIPZZvPwOyYrHFBsOOLBBRsMchp9Okqrj2AcE0AiARddNbIixRe7yhTU5jHsjEGpnTCv9XbTynryDqx5rgfQ=="}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_1.0.0-15_1573252845889_0.2889451747293399"},"_hasShrinkwrap":false},"1.0.0-16":{"name":"@wbez/ferris-ds","version":"1.0.0-16","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"readmeFilename":"README.md","readme":"# @wbez/ferris-ds\n\n> Centralizing styles for product development at WBEZ\n\nThis repo contains a library of styles and icons available to import via npm.\n\nAlong with the library, we set up a few tools that help document updates. CSS comments are parsed to create a JSON object of documentation. That data is rendered with nunjucks to give us a visual representation of the various components and rule-sets we're building.\n\nOur goal is that as we iterate upon the design of our products, we document everything along the way. This keeps our **style docs current and allows for continuous optimization our CSS.**\n\nThis repo is forked from [texastribune/queso-ui@v3.2.0](https://github.com/texastribune/queso-ui/releases/tag/v3.2.0). Much thanks and props for building out such a great base for us to launch from.\n\n## Index\n\n- [Getting started](#getting-started)\n- [Installing as a dependency](#installing-as-a-dependency)\n- [Using assets](#using-assets)\n- [Folders](#folders)\n- [Adding to the CSS framework](#adding-to-the-css-framework)\n- [Using this system in our products](#using-this-system-in-our-products)\n- [Publishing](#publishing)\n\n## Getting started\n\nTo preview these assets and accompanying docs locally, run the following commands:\n\n```sh\nyarn\n```\n\n```sh\nyarn dev\n```\n\nVisit http://wbez.local:3000\n\nThis spins up a browsersync server and watch task for all SCSS and HTML files.\n\n**Requirements**\n\n- node >=8.11.3\n\n## Installing as a dependency\n\n```sh\nyarn add @wbez/ferris-ds\n```\n\n```sh\nnpm install @wbez/ferris-ds\n```\n\n## Using assets\n\nSCSS\n\n```scss\n@import '~@wbez/ferris-ds';\n```\n\nCSS in `` via CDN\n\n```html\n\n```\n\nSingle icon\n\n```js\nimport linkIcon from '@wbez/ferris-ds/assets/icons/wbez/link.svg';\n\n\"\";\n```\n\nIcon using spritesheet\n\n```jsx\nimport icons from '@wbez/ferris-ds/assets/dist/sprites/wbez.svg';\n\n\n \n;\n```\n\nLogo (CDN)\n\n```html\n\n```\n\nLogo (direct)\n\n```jsx\nimport logo from \"@wbez/ferris-ds/assets/logos/wbez/wbez-chicago-logo-oneline.svg\";\n\n\"WBEZ\n```\n\n## Folders\n\n| directory | description |\n| ------------ | ----------------------------------------------------------------------------------------------------------- |\n| assets/scss | Various SASS files establishing our CSS framework |\n| assets/icons | Sets of individual SVG icons used throughout our products |\n| assets/logos | Individual SVG/PNG logos used throughout our products |\n| docs | Tools and templates to statically render documentation, code examples, and usage info for our design system |\n\n## Adding to the CSS framework\n\nWhen you add a new class, component, scss variable, mixin, etc., you'll want to add a short bit of syntax to enable it to appear in the docs. Use the boilerplate below to get started.\n\n### SCSS docs boilerplate\n\n> How to document a new CSS class\n\nWe use a comment parser along with some [extra logic](https://github.com/wbez/ferris-ds/blob/master/tasks/style-doc.js) to generate our docs. To add a new section of documentation, add a boilerplate above your CSS rules like the one below:\n\n```scss\n// Title of Section (root-class-name)\n//\n// Description {{isWide}} {{isHelper}}\n//\n// root-class-name-modifier - desc\n//\n// Markup: 6-components/test/test.html\n//\n// Styleguide 6.0.1\n//\n.root-class-name {\n}\n```\n\n- `{{isWide}}` is used to display the demo of each modifier at full width\n- `{{isHelper}}` is used to hide main demo and only display modifiers\n- `// Deprecated` is used to signify a class to be removed.\n- `// Experimental` is used to signify a class we're considering.\n\n**Deprecated** and **Experimental** are named per [KSS syntax](https://warpspire.com/kss/syntax/).\n\n### Naming and organization\n\nWhen building CSS dispersed on a variety of platforms, it can be difficult to know where certain style rules should live and what to call them. We use the following guideline to help with those decisions as we scale our framework.\n\n#### ITCSS\n\nWe organize our SCSS files with the [inverted triangle](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) approach in mind. We put our own spin on it by adding a `typography`, `layouts` and `blocks` folder, but the general idea is all the same; increased specificity as you move down the stylesheet.\n\nSee also Brad Frost's write-up on atomic design for the rationale behind composable components. (`components` → `blocks` → `pages`)\n\n#### BEM\n\nWe closely follow the BEM (Block Element Modifier) class naming convention in our `components` folder, but we break BEM rules in other places. This is a deliberate attempt to create a hybrid approach of using BEM when scoped to a component and helper classes when styling globally in a more ad hoc context.\n\n#### Namespacing\n\nUse namespacing for quick reference of the function of a CSS class. The following key can be used as a guideline for naming your class:\n\n---\n\nComponents\n\n```css\n.c-component-name[__|-<-modifier>] {\n}\n```\n\n_Example: `c-button`_\n\n---\n\nTypography\n\n```css\n.t-type-util {\n}\n```\n\n_Example: `t-headline`_\n\n---\n\nLayout\n\n```css\n.l-layout-util {\n}\n```\n\n_Example: `l-container`_\n\n---\n\nBlocks\n\n```css\n.b-block-name {\n}\n```\n\n_Example: `b-site-footer`_\n\n---\n\nUtilities\n\n```css\n.[is|has]-state {\n}\n```\n\n_Example: `has-bg-yellow`_\n\n---\n\n## Using this system in our products\n\nThis system is experimental and under rapid development. Use it in situations where it makes sense for the scope of your task.\n\n**Do** use this system when...\n\n- Coding a new template from scratch (new landing pages)\n- Creating something in a isolated environment outside of legacy systems (newsletters, new static sites, UMP)\n\n**Don't** use this system when...\n\n- Making a small CSS change to the legacy system (tiny visual tweak to our main repo)\n- The system creates an unnecessarily layer of complexity (take the path of least resistance)\n\n---\n\n## Publishing\n\nMake sure you're authenticated for npm publishing.\n\n1. `npm login` - then follow the prompts\n2. `npm run release` - There's a [bug](https://github.com/sindresorhus/np/issues/420#issuecomment-499273013) in the `np` publishing tool we use where `yarn` commands don't seem to work.\n\n### Semantic versioning\n\nThe npm helper we use for versioning simplifies matching version numbers with the various `MAJOR`, `MINOR`, `PATCH` increment types. For guidance on what type of release you're making, refer to [https://semver.org/](https://semver.org/)\n\nGenerally, you could base your increment type on the following list:\n\n- MAJOR version = CSS changes that visually break layouts where `ferris-ds` is used on production\n- MINOR version = CSS changes that have no visual effect on production\n- PATCH version = CSS changes that fix a previous bug introduced on production or in development\n\n### Deploying our docs\n\nOur docs are automatically published from the `master` branch by AWS Amplify.\n","licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@1.0.0-16","dist":{"shasum":"a6debe3e787e5970a5e5db2ee1fc43930c31563d","integrity":"sha512-cZ3n9sVftRySyou7BamD82mLs8OMWi4STUAWUYRn0PFMW7rZiCTH4cf7SWi5lB7bV/HScJ/s8OnwflRMJQMjzg==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-1.0.0-16.tgz","fileCount":205,"unpackedSize":545358,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyuEiCRA9TVsSAnZWagAAbWwP/2QM9PmkrE+GDwNSQb/3\njRRq4vrUHCqhTS8T+2e4PKBRA3VJXTC8xYt5mTAMAg25w1HPNjM9/MPryZLK\ncOLCmyb/E0fejalVr8TevpvppiipYHYWr4Hy6GHaUpNMxH0Zo44Vk22QZZA6\ncTCPySl43UUeJj7OhSMvXOL1Mnqydu0rhIHPcoCCQb9R+1jZysnle7auTK6D\nXT4PXNIf8/lez8FROcUUaYNFo8uhjSkzAjs3ZyPwlwMwcauWSdlpLU1tfwam\nx0azpqhqRwRGTC8o4td0nHvNZzNhUn+s7x53Ti5jrbzhiKAWikRJ3tYV/Dbs\nBhnq6owIPw0gDveJuOf4s5ssCSxLdFzsKnvytTrK8dv/+zMQO0cizqpIXUDv\nnY46Y0WRCXN6G5XwVAFPwT2Jbjg9nUUK3Vc3GD1WtKY2Ouj4BAHPSESyYZVc\nUIstyXkUFArvdjf0ADA7syQDlfu8ecFuDzbUpcJqSvLPCFoKyYGtkc70UYX/\nrPTVAdUe/GZWtKRB2CFKDAWM3mldvp3bJaqt7v5Wq7//+cXf6Hyi/6rRR9xF\n4lPo9hSoZttB/I5T1Pua5qMbANA6lvwaxmMfRusep5hNBpjkHqDo4tjdZ/Lt\nQXGPfKD5xv2PORgpDy7/gebnJkic0IEPJHqeT8w7XPVVayF0X/nlKi+dm0f5\n9Lne\r\n=nH9A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCR2fpglCjB1b9S3kmLqtczZ4S2V807K9S2c6RVPMh5OgIgQca9pAbRGxRCiLt4oyCvzc+UQHS4gIf2KIE2KB3qHKg="}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_1.0.0-16_1573576993630_0.22112106458025305"},"_hasShrinkwrap":false},"1.0.0-17":{"name":"@wbez/ferris-ds","version":"1.0.0-17","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"readmeFilename":"README.md","readme":"# @wbez/ferris-ds\n\n> Centralizing styles for product development at WBEZ\n\nThis repo contains a library of styles and icons available to import via npm.\n\nAlong with the library, we set up a few tools that help document updates. CSS comments are parsed to create a JSON object of documentation. That data is rendered with nunjucks to give us a visual representation of the various components and rule-sets we're building.\n\nOur goal is that as we iterate upon the design of our products, we document everything along the way. This keeps our **style docs current and allows for continuous optimization our CSS.**\n\nThis repo is forked from [texastribune/queso-ui@v3.2.0](https://github.com/texastribune/queso-ui/releases/tag/v3.2.0). Much thanks and props for building out such a great base for us to launch from.\n\n## Index\n\n- [Getting started](#getting-started)\n- [Installing as a dependency](#installing-as-a-dependency)\n- [Using assets](#using-assets)\n- [Folders](#folders)\n- [Adding to the CSS framework](#adding-to-the-css-framework)\n- [Using this system in our products](#using-this-system-in-our-products)\n- [Publishing](#publishing)\n\n## Getting started\n\nTo preview these assets and accompanying docs locally, run the following commands:\n\n```sh\nyarn\n```\n\n```sh\nyarn dev\n```\n\nVisit http://wbez.local:3000\n\nThis spins up a browsersync server and watch task for all SCSS and HTML files.\n\n**Requirements**\n\n- node >=8.11.3\n\n## Installing as a dependency\n\n```sh\nyarn add @wbez/ferris-ds\n```\n\n```sh\nnpm install @wbez/ferris-ds\n```\n\n## Using assets\n\nSCSS\n\n```scss\n@import '~@wbez/ferris-ds';\n```\n\nCSS in `` via CDN\n\n```html\n\n```\n\nSingle icon\n\n```js\nimport linkIcon from '@wbez/ferris-ds/assets/icons/wbez/link.svg';\n\n\"\";\n```\n\nIcon using spritesheet\n\n```jsx\nimport icons from '@wbez/ferris-ds/assets/dist/sprites/wbez.svg';\n\n\n \n;\n```\n\nLogo (CDN)\n\n```html\n\n```\n\nLogo (direct)\n\n```jsx\nimport logo from \"@wbez/ferris-ds/assets/logos/wbez/wbez-chicago-logo-oneline.svg\";\n\n\"WBEZ\n```\n\n## Folders\n\n| directory | description |\n| ------------ | ----------------------------------------------------------------------------------------------------------- |\n| assets/scss | Various SASS files establishing our CSS framework |\n| assets/icons | Sets of individual SVG icons used throughout our products |\n| assets/logos | Individual SVG/PNG logos used throughout our products |\n| docs | Tools and templates to statically render documentation, code examples, and usage info for our design system |\n\n## Adding to the CSS framework\n\nWhen you add a new class, component, scss variable, mixin, etc., you'll want to add a short bit of syntax to enable it to appear in the docs. Use the boilerplate below to get started.\n\n### SCSS docs boilerplate\n\n> How to document a new CSS class\n\nWe use a comment parser along with some [extra logic](https://github.com/wbez/ferris-ds/blob/master/tasks/style-doc.js) to generate our docs. To add a new section of documentation, add a boilerplate above your CSS rules like the one below:\n\n```scss\n// Title of Section (root-class-name)\n//\n// Description {{isWide}} {{isHelper}}\n//\n// root-class-name-modifier - desc\n//\n// Markup: 6-components/test/test.html\n//\n// Styleguide 6.0.1\n//\n.root-class-name {\n}\n```\n\n- `{{isWide}}` is used to display the demo of each modifier at full width\n- `{{isHelper}}` is used to hide main demo and only display modifiers\n- `// Deprecated` is used to signify a class to be removed.\n- `// Experimental` is used to signify a class we're considering.\n\n**Deprecated** and **Experimental** are named per [KSS syntax](https://warpspire.com/kss/syntax/).\n\n### Naming and organization\n\nWhen building CSS dispersed on a variety of platforms, it can be difficult to know where certain style rules should live and what to call them. We use the following guideline to help with those decisions as we scale our framework.\n\n#### ITCSS\n\nWe organize our SCSS files with the [inverted triangle](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) approach in mind. We put our own spin on it by adding a `typography`, `layouts` and `blocks` folder, but the general idea is all the same; increased specificity as you move down the stylesheet.\n\nSee also Brad Frost's write-up on atomic design for the rationale behind composable components. (`components` → `blocks` → `pages`)\n\n#### BEM\n\nWe closely follow the BEM (Block Element Modifier) class naming convention in our `components` folder, but we break BEM rules in other places. This is a deliberate attempt to create a hybrid approach of using BEM when scoped to a component and helper classes when styling globally in a more ad hoc context.\n\n#### Namespacing\n\nUse namespacing for quick reference of the function of a CSS class. The following key can be used as a guideline for naming your class:\n\n---\n\nComponents\n\n```css\n.c-component-name[__|-<-modifier>] {\n}\n```\n\n_Example: `c-button`_\n\n---\n\nTypography\n\n```css\n.t-type-util {\n}\n```\n\n_Example: `t-headline`_\n\n---\n\nLayout\n\n```css\n.l-layout-util {\n}\n```\n\n_Example: `l-container`_\n\n---\n\nBlocks\n\n```css\n.b-block-name {\n}\n```\n\n_Example: `b-site-footer`_\n\n---\n\nUtilities\n\n```css\n.[is|has]-state {\n}\n```\n\n_Example: `has-bg-yellow`_\n\n---\n\n## Using this system in our products\n\nThis system is experimental and under rapid development. Use it in situations where it makes sense for the scope of your task.\n\n**Do** use this system when...\n\n- Coding a new template from scratch (new landing pages)\n- Creating something in a isolated environment outside of legacy systems (newsletters, new static sites, UMP)\n\n**Don't** use this system when...\n\n- Making a small CSS change to the legacy system (tiny visual tweak to our main repo)\n- The system creates an unnecessarily layer of complexity (take the path of least resistance)\n\n---\n\n## Publishing\n\nMake sure you're authenticated for npm publishing.\n\n1. `npm login` - then follow the prompts\n2. `npm run release` - There's a [bug](https://github.com/sindresorhus/np/issues/420#issuecomment-499273013) in the `np` publishing tool we use where `yarn` commands don't seem to work.\n\n### Semantic versioning\n\nThe npm helper we use for versioning simplifies matching version numbers with the various `MAJOR`, `MINOR`, `PATCH` increment types. For guidance on what type of release you're making, refer to [https://semver.org/](https://semver.org/)\n\nGenerally, you could base your increment type on the following list:\n\n- MAJOR version = CSS changes that visually break layouts where `ferris-ds` is used on production\n- MINOR version = CSS changes that have no visual effect on production\n- PATCH version = CSS changes that fix a previous bug introduced on production or in development\n\n### Deploying our docs\n\nOur docs are automatically published from the `master` branch by AWS Amplify.\n","licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@1.0.0-17","dist":{"shasum":"2d47d96eb491ae7b08736bab1ab0d6dc101056fe","integrity":"sha512-dVRVvxos/diR3uRQbB6Su5duqvXjjzJblLfTZ9dkfPwFDzGp2qrEKJpQTc0Ti5QMyke+8MhRGKlQ2IJMM2Gv6Q==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-1.0.0-17.tgz","fileCount":205,"unpackedSize":545164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyuM4CRA9TVsSAnZWagAA8VkP/3H3I8ySZDm3g7mioQYw\nKpQlw21GLXjEiqk7hkUamivDmq8mdnS+1z7RqoJ3fDgQoTkzrT5VqZ0+OfAU\nNWsmqM93Nggyj820UkXzRzNoJQKqa2n3cDq4QQCfLoK5+O5mmfZwUIP4D5NP\nGAVsxmRqwHYiDpALAJovRYwH0BJMk5DytF9yxuWCqtVwD1hZyOf9ImT+xvWv\n18MaPfkkLx6w4+bOvjKSw5Mu9GaZXIUufzWd5yLwign7TRe3BQX1sv+2GRfj\nfzIiavRVtRfG/LikPEz0TmUq7mn/K6uHOWGZgOSPzZmsnXpg3W3+WMTgZxrM\nbzlW3XXbij9S0xK/cPLnx1zHgzBgqpO7+NC2HPtcL4XknozC6PvlJcwndcqE\nIr9dhYSYEdqbMBzDhMon69Mjxd6zloBOvq9tLpQixmoQ9lmagEttt2YwJBSv\n4yBZlU2GQflCz1AOunTzjsDh/JZXiSVx6FPdx0rSAFnD9i7N0XB3jRmynA7f\nvLaYgunNZLkizBSyusHwRCQ0RCMXHvVQtgneES2MQgL/GKE/QS3qZmo5D4FN\nZaX1RjscHqH04xMr6kODOaMkPF+j3AEdZ0YXVOCV7O8KMAsdwiiytczHvHpP\nO+kshJLGRNGOq+vEkDfFhA8Sfhu74uwGrJID57jsHGCs243qnZnlJGLwOMUm\nVu0f\r\n=dxgT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICyfl3gex86bGRAwUvT8yjbniA+JwVm13Ktz4jSexVGWAiBlDbI0IDBMwy6DEYkRHX8cza858nSOqOSufWPeYGnjYA=="}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_1.0.0-17_1573577527575_0.28999352693410185"},"_hasShrinkwrap":false},"1.0.0-18":{"name":"@wbez/ferris-ds","version":"1.0.0-18","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"readmeFilename":"README.md","readme":"# @wbez/ferris-ds\n\n> Centralizing styles for product development at WBEZ\n\nThis repo contains a library of styles and icons available to import via npm.\n\nAlong with the library, we set up a few tools that help document updates. CSS comments are parsed to create a JSON object of documentation. That data is rendered with nunjucks to give us a visual representation of the various components and rule-sets we're building.\n\nOur goal is that as we iterate upon the design of our products, we document everything along the way. This keeps our **style docs current and allows for continuous optimization our CSS.**\n\nThis repo is forked from [texastribune/queso-ui@v3.2.0](https://github.com/texastribune/queso-ui/releases/tag/v3.2.0). Much thanks and props for building out such a great base for us to launch from.\n\n## Index\n\n- [Getting started](#getting-started)\n- [Installing as a dependency](#installing-as-a-dependency)\n- [Using assets](#using-assets)\n- [Folders](#folders)\n- [Adding to the CSS framework](#adding-to-the-css-framework)\n- [Using this system in our products](#using-this-system-in-our-products)\n- [Publishing](#publishing)\n\n## Getting started\n\nTo preview these assets and accompanying docs locally, run the following commands:\n\n```sh\nyarn\n```\n\n```sh\nyarn dev\n```\n\nVisit http://wbez.local:3000\n\nThis spins up a browsersync server and watch task for all SCSS and HTML files.\n\n**Requirements**\n\n- node >=8.11.3\n\n## Installing as a dependency\n\n```sh\nyarn add @wbez/ferris-ds\n```\n\n```sh\nnpm install @wbez/ferris-ds\n```\n\n## Using assets\n\nSCSS\n\n```scss\n@import '~@wbez/ferris-ds';\n```\n\nCSS in `` via CDN\n\n```html\n\n```\n\nSingle icon\n\n```js\nimport linkIcon from '@wbez/ferris-ds/assets/icons/wbez/link.svg';\n\n\"\";\n```\n\nIcon using spritesheet\n\n```jsx\nimport icons from '@wbez/ferris-ds/assets/dist/sprites/wbez.svg';\n\n\n \n;\n```\n\nLogo (CDN)\n\n```html\n\n```\n\nLogo (direct)\n\n```jsx\nimport logo from \"@wbez/ferris-ds/assets/logos/wbez/wbez-chicago-logo-oneline.svg\";\n\n\"WBEZ\n```\n\n## Folders\n\n| directory | description |\n| ------------ | ----------------------------------------------------------------------------------------------------------- |\n| assets/scss | Various SASS files establishing our CSS framework |\n| assets/icons | Sets of individual SVG icons used throughout our products |\n| assets/logos | Individual SVG/PNG logos used throughout our products |\n| docs | Tools and templates to statically render documentation, code examples, and usage info for our design system |\n\n## Adding to the CSS framework\n\nWhen you add a new class, component, scss variable, mixin, etc., you'll want to add a short bit of syntax to enable it to appear in the docs. Use the boilerplate below to get started.\n\n### SCSS docs boilerplate\n\n> How to document a new CSS class\n\nWe use a comment parser along with some [extra logic](https://github.com/wbez/ferris-ds/blob/master/tasks/style-doc.js) to generate our docs. To add a new section of documentation, add a boilerplate above your CSS rules like the one below:\n\n```scss\n// Title of Section (root-class-name)\n//\n// Description {{isWide}} {{isHelper}}\n//\n// root-class-name-modifier - desc\n//\n// Markup: 6-components/test/test.html\n//\n// Styleguide 6.0.1\n//\n.root-class-name {\n}\n```\n\n- `{{isWide}}` is used to display the demo of each modifier at full width\n- `{{isHelper}}` is used to hide main demo and only display modifiers\n- `// Deprecated` is used to signify a class to be removed.\n- `// Experimental` is used to signify a class we're considering.\n\n**Deprecated** and **Experimental** are named per [KSS syntax](https://warpspire.com/kss/syntax/).\n\n### Naming and organization\n\nWhen building CSS dispersed on a variety of platforms, it can be difficult to know where certain style rules should live and what to call them. We use the following guideline to help with those decisions as we scale our framework.\n\n#### ITCSS\n\nWe organize our SCSS files with the [inverted triangle](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) approach in mind. We put our own spin on it by adding a `typography`, `layouts` and `blocks` folder, but the general idea is all the same; increased specificity as you move down the stylesheet.\n\nSee also Brad Frost's write-up on atomic design for the rationale behind composable components. (`components` → `blocks` → `pages`)\n\n#### BEM\n\nWe closely follow the BEM (Block Element Modifier) class naming convention in our `components` folder, but we break BEM rules in other places. This is a deliberate attempt to create a hybrid approach of using BEM when scoped to a component and helper classes when styling globally in a more ad hoc context.\n\n#### Namespacing\n\nUse namespacing for quick reference of the function of a CSS class. The following key can be used as a guideline for naming your class:\n\n---\n\nComponents\n\n```css\n.c-component-name[__|-<-modifier>] {\n}\n```\n\n_Example: `c-button`_\n\n---\n\nTypography\n\n```css\n.t-type-util {\n}\n```\n\n_Example: `t-headline`_\n\n---\n\nLayout\n\n```css\n.l-layout-util {\n}\n```\n\n_Example: `l-container`_\n\n---\n\nBlocks\n\n```css\n.b-block-name {\n}\n```\n\n_Example: `b-site-footer`_\n\n---\n\nUtilities\n\n```css\n.[is|has]-state {\n}\n```\n\n_Example: `has-bg-yellow`_\n\n---\n\n## Using this system in our products\n\nThis system is experimental and under rapid development. Use it in situations where it makes sense for the scope of your task.\n\n**Do** use this system when...\n\n- Coding a new template from scratch (new landing pages)\n- Creating something in a isolated environment outside of legacy systems (newsletters, new static sites, UMP)\n\n**Don't** use this system when...\n\n- Making a small CSS change to the legacy system (tiny visual tweak to our main repo)\n- The system creates an unnecessarily layer of complexity (take the path of least resistance)\n\n---\n\n## Publishing\n\nMake sure you're authenticated for npm publishing.\n\n1. `npm login` - then follow the prompts\n2. `npm run release` - There's a [bug](https://github.com/sindresorhus/np/issues/420#issuecomment-499273013) in the `np` publishing tool we use where `yarn` commands don't seem to work.\n\n### Semantic versioning\n\nThe npm helper we use for versioning simplifies matching version numbers with the various `MAJOR`, `MINOR`, `PATCH` increment types. For guidance on what type of release you're making, refer to [https://semver.org/](https://semver.org/)\n\nGenerally, you could base your increment type on the following list:\n\n- MAJOR version = CSS changes that visually break layouts where `ferris-ds` is used on production\n- MINOR version = CSS changes that have no visual effect on production\n- PATCH version = CSS changes that fix a previous bug introduced on production or in development\n\n### Deploying our docs\n\nOur docs are automatically published from the `master` branch by AWS Amplify.\n","licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@1.0.0-18","dist":{"shasum":"5975e0d64f15c0574b063a544e37ca3e184f4e81","integrity":"sha512-xG2EwHyWSo3Dc++jBP25SM7E/bHXOWLGk873sWT0i3QHXub4dPcNzdIfjIUL6JjMqTZ0arlKqQ80VpgebNbHVg==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-1.0.0-18.tgz","fileCount":205,"unpackedSize":544709,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzDVnCRA9TVsSAnZWagAAAkwQAJ3umTnx+szg8uMIULls\niUEIlZARbw7A1GFeRKRrL8i0hFbgNDKELPIMjSmxeTfHFFE8HhfzcNwQFKSX\nfpUwqDx9fiYuaNoJ61P+88l6FI0B8SmTnkeFXvoHB9orBojDGTWUKniTdSzf\nG6mz0gOOciT0zeeyf58i49SD40bP1lk8NxHD+D3IE2ot7OGRCjbkW+dOFIJK\ntjjzM6BgMEc57gYtiT4M8yWfYh6Ged2VC9DesXdqCqwMDFGibUazTYZ+1RhF\n4OSTFZP4GmuUv+oCvLWsWGEgh9HKGhw9IEMNDOAoo23vWDj5yTl7mQ8PtZWK\nq2PQxgzS1CYX/5NERYJpPd9kVeK3cHEd/6eU1jxqFOOFmoaKSsT+p+OR3lfF\nCGTBcaB9MJ7AzogNplKjIadaHchnk5zwwxNPLVCz9AwnBChebBUcXpApd2DI\nJpa2CIDmwuShxIBJL7oEjCpDcXxiTjU4MF6w+q0Si0Kpe9+izN30kfPbxosv\n9ehAeqTLZSkz1ZQn2zKjYIf4Z1kJ3gmegMShhR0Ni4ZHu5AE/JON3/SOphU7\n9UmV3bSzMgMtIMj2Ud0C36FiZsrxYtUDW7EKAybeOiWYOsMGXogxbd55gkiE\nHQlfWjMzjM/E7wQb5EPmXM7prhxAkco4UfT9o9zqo0LRZawaHFj9TAOCoQCJ\nsNHW\r\n=Orqq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvZVDff4nvBxM2pgFC1uVPanCbhihNOFjk63TqX3c0XAIgJJopHnpL+U+ATtoOmEJztl5bCMlYRpdjC1bx9kZck5I="}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_1.0.0-18_1573664102568_0.6652686109983981"},"_hasShrinkwrap":false},"1.0.0-19":{"name":"@wbez/ferris-ds","version":"1.0.0-19","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"readmeFilename":"README.md","readme":"# @wbez/ferris-ds\n\n> Centralizing styles for product development at WBEZ\n\nThis repo contains a library of styles and icons available to import via npm.\n\nAlong with the library, we set up a few tools that help document updates. CSS comments are parsed to create a JSON object of documentation. That data is rendered with nunjucks to give us a visual representation of the various components and rule-sets we're building.\n\nOur goal is that as we iterate upon the design of our products, we document everything along the way. This keeps our **style docs current and allows for continuous optimization our CSS.**\n\nThis repo is forked from [texastribune/queso-ui@v3.2.0](https://github.com/texastribune/queso-ui/releases/tag/v3.2.0). Much thanks and props for building out such a great base for us to launch from.\n\n## Index\n\n- [Getting started](#getting-started)\n- [Installing as a dependency](#installing-as-a-dependency)\n- [Using assets](#using-assets)\n- [Folders](#folders)\n- [Adding to the CSS framework](#adding-to-the-css-framework)\n- [Using this system in our products](#using-this-system-in-our-products)\n- [Publishing](#publishing)\n\n## Getting started\n\nTo preview these assets and accompanying docs locally, run the following commands:\n\n```sh\nyarn\n```\n\n```sh\nyarn dev\n```\n\nVisit http://wbez.local:3000\n\nThis spins up a browsersync server and watch task for all SCSS and HTML files.\n\n**Requirements**\n\n- node >=8.11.3\n\n## Installing as a dependency\n\n```sh\nyarn add @wbez/ferris-ds\n```\n\n```sh\nnpm install @wbez/ferris-ds\n```\n\n## Using assets\n\nSCSS\n\n```scss\n@import '~@wbez/ferris-ds';\n```\n\nCSS in `` via CDN\n\n```html\n\n```\n\nSingle icon\n\n```js\nimport linkIcon from '@wbez/ferris-ds/assets/icons/wbez/link.svg';\n\n\"\";\n```\n\nIcon using spritesheet\n\n```jsx\nimport icons from '@wbez/ferris-ds/assets/dist/sprites/wbez.svg';\n\n\n \n;\n```\n\nLogo (CDN)\n\n```html\n\n```\n\nLogo (direct)\n\n```jsx\nimport logo from \"@wbez/ferris-ds/assets/logos/wbez/wbez-chicago-logo-oneline.svg\";\n\n\"WBEZ\n```\n\n## Folders\n\n| directory | description |\n| ------------ | ----------------------------------------------------------------------------------------------------------- |\n| assets/scss | Various SASS files establishing our CSS framework |\n| assets/icons | Sets of individual SVG icons used throughout our products |\n| assets/logos | Individual SVG/PNG logos used throughout our products |\n| docs | Tools and templates to statically render documentation, code examples, and usage info for our design system |\n\n## Adding to the CSS framework\n\nWhen you add a new class, component, scss variable, mixin, etc., you'll want to add a short bit of syntax to enable it to appear in the docs. Use the boilerplate below to get started.\n\n### SCSS docs boilerplate\n\n> How to document a new CSS class\n\nWe use a comment parser along with some [extra logic](https://github.com/wbez/ferris-ds/blob/master/tasks/style-doc.js) to generate our docs. To add a new section of documentation, add a boilerplate above your CSS rules like the one below:\n\n```scss\n// Title of Section (root-class-name)\n//\n// Description {{isWide}} {{isHelper}}\n//\n// root-class-name-modifier - desc\n//\n// Markup: 6-components/test/test.html\n//\n// Styleguide 6.0.1\n//\n.root-class-name {\n}\n```\n\n- `{{isWide}}` is used to display the demo of each modifier at full width\n- `{{isHelper}}` is used to hide main demo and only display modifiers\n- `// Deprecated` is used to signify a class to be removed.\n- `// Experimental` is used to signify a class we're considering.\n\n**Deprecated** and **Experimental** are named per [KSS syntax](https://warpspire.com/kss/syntax/).\n\n### Naming and organization\n\nWhen building CSS dispersed on a variety of platforms, it can be difficult to know where certain style rules should live and what to call them. We use the following guideline to help with those decisions as we scale our framework.\n\n#### ITCSS\n\nWe organize our SCSS files with the [inverted triangle](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) approach in mind. We put our own spin on it by adding a `typography`, `layouts` and `blocks` folder, but the general idea is all the same; increased specificity as you move down the stylesheet.\n\nSee also Brad Frost's write-up on atomic design for the rationale behind composable components. (`components` → `blocks` → `pages`)\n\n#### BEM\n\nWe closely follow the BEM (Block Element Modifier) class naming convention in our `components` folder, but we break BEM rules in other places. This is a deliberate attempt to create a hybrid approach of using BEM when scoped to a component and helper classes when styling globally in a more ad hoc context.\n\n#### Namespacing\n\nUse namespacing for quick reference of the function of a CSS class. The following key can be used as a guideline for naming your class:\n\n---\n\nComponents\n\n```css\n.c-component-name[__|-<-modifier>] {\n}\n```\n\n_Example: `c-button`_\n\n---\n\nTypography\n\n```css\n.t-type-util {\n}\n```\n\n_Example: `t-headline`_\n\n---\n\nLayout\n\n```css\n.l-layout-util {\n}\n```\n\n_Example: `l-container`_\n\n---\n\nBlocks\n\n```css\n.b-block-name {\n}\n```\n\n_Example: `b-site-footer`_\n\n---\n\nUtilities\n\n```css\n.[is|has]-state {\n}\n```\n\n_Example: `has-bg-yellow`_\n\n---\n\n## Using this system in our products\n\nThis system is experimental and under rapid development. Use it in situations where it makes sense for the scope of your task.\n\n**Do** use this system when...\n\n- Coding a new template from scratch (new landing pages)\n- Creating something in a isolated environment outside of legacy systems (newsletters, new static sites, UMP)\n\n**Don't** use this system when...\n\n- Making a small CSS change to the legacy system (tiny visual tweak to our main repo)\n- The system creates an unnecessarily layer of complexity (take the path of least resistance)\n\n---\n\n## Publishing\n\nMake sure you're authenticated for npm publishing.\n\n1. `npm login` - then follow the prompts\n2. `npm run release` - There's a [bug](https://github.com/sindresorhus/np/issues/420#issuecomment-499273013) in the `np` publishing tool we use where `yarn` commands don't seem to work.\n\n### Semantic versioning\n\nThe npm helper we use for versioning simplifies matching version numbers with the various `MAJOR`, `MINOR`, `PATCH` increment types. For guidance on what type of release you're making, refer to [https://semver.org/](https://semver.org/)\n\nGenerally, you could base your increment type on the following list:\n\n- MAJOR version = CSS changes that visually break layouts where `ferris-ds` is used on production\n- MINOR version = CSS changes that have no visual effect on production\n- PATCH version = CSS changes that fix a previous bug introduced on production or in development\n\n### Deploying our docs\n\nOur docs are automatically published from the `master` branch by AWS Amplify.\n","licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@1.0.0-19","dist":{"shasum":"ef931583c2bab80547f4daca36296f54d7ea8638","integrity":"sha512-nXdMklx0igI3iylFp5swrD3Y7/4ycN+S80aHZzfZnheXNHX89kEkKX1WkSporH53fysNuW/rWHiG1UCN5iHjGg==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-1.0.0-19.tgz","fileCount":205,"unpackedSize":545036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzEUVCRA9TVsSAnZWagAAUEMP/0K2TE1IMYzF2LuzHnnA\ncqey+TLM7pze6+UAHA+Li3P5+S/4X3k9FQe+OZW9z5oX8D5u9RShl/Z0KdS5\nbvif1Enug1oP9x8YPy24xDMDA786o1zeBqnW7AHvoJJpBQTUWZP4zVmQUFfv\npAYeeAuEjLUQtmAvjlUB5w4G6ovDpcWS1JaMM5KKAjPJYE01Jl79niVW9aP2\nAjmW0Kh2kMPqAInv6jAm4R6ACUupRBYW+9Y7LHqyntNZw2PydDln1rJYh5ve\nDWZXoRU0DCEKRfxtLEUlgDrRs7BtVe6iG9pOJVUVRqU0vizg7rd++AU0/fxH\n6cC0yUYw1YJvvxVJuUeS0K8YC9JwMvKszbyIGxH8WfPyNf0b6rfD4z+FBYmB\ndmXymd/iyl3+wYh/x60Q6zj3ymGBPXmJIWBNv9YVorQr1+8aj1l1SZ5hXhWU\nxZ+C5FgGP78BHKQZOsJy46Mn98OlRhgnrF/ZLbSNT6X77oQ5f445x3xm1v97\numyXOLNEDkIMIORlSwYn7DXkaCF/7PI3nm5Im2oN4zW0i3OK3xdCPdeec1az\nmBMpAnT3tg4ls0MZOmUs2olr4s7FPO98e6uXeRa4ZLjmJgfhYQpO5v7PtgAh\n6CqYY6s4QWMpYlLuVxm3ey45GsgQ7NkeQhkoeyY7jo0zVwAqlHS7K0OCTPOc\nDu9t\r\n=pGbg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqrSKOwy4+R9E6l+UpBKpXqDM5c9Nd6N+9p32LH5+a9wIhAKQeeOdCTjR16I6PQAcIB6roxGUQsNar8IHMYRcJ6Njj"}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_1.0.0-19_1573668116656_0.8926048004295188"},"_hasShrinkwrap":false},"1.0.0-20":{"name":"@wbez/ferris-ds","version":"1.0.0-20","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"readmeFilename":"README.md","readme":"# @wbez/ferris-ds\n\n> Centralizing styles for product development at WBEZ\n\nThis repo contains a library of styles and icons available to import via npm.\n\nAlong with the library, we set up a few tools that help document updates. CSS comments are parsed to create a JSON object of documentation. That data is rendered with nunjucks to give us a visual representation of the various components and rule-sets we're building.\n\nOur goal is that as we iterate upon the design of our products, we document everything along the way. This keeps our **style docs current and allows for continuous optimization our CSS.**\n\nThis repo is forked from [texastribune/queso-ui@v3.2.0](https://github.com/texastribune/queso-ui/releases/tag/v3.2.0). Much thanks and props for building out such a great base for us to launch from.\n\n## Index\n\n- [Getting started](#getting-started)\n- [Installing as a dependency](#installing-as-a-dependency)\n- [Using assets](#using-assets)\n- [Folders](#folders)\n- [Adding to the CSS framework](#adding-to-the-css-framework)\n- [Using this system in our products](#using-this-system-in-our-products)\n- [Publishing](#publishing)\n\n## Getting started\n\nTo preview these assets and accompanying docs locally, run the following commands:\n\n```sh\nyarn\n```\n\n```sh\nyarn dev\n```\n\nVisit http://wbez.local:3000\n\nThis spins up a browsersync server and watch task for all SCSS and HTML files.\n\n**Requirements**\n\n- node >=8.11.3\n\n## Installing as a dependency\n\n```sh\nyarn add @wbez/ferris-ds\n```\n\n```sh\nnpm install @wbez/ferris-ds\n```\n\n## Using assets\n\nSCSS\n\n```scss\n@import '~@wbez/ferris-ds';\n```\n\nCSS in `` via CDN\n\n```html\n\n```\n\nSingle icon\n\n```js\nimport linkIcon from '@wbez/ferris-ds/assets/icons/wbez/link.svg';\n\n\"\";\n```\n\nIcon using spritesheet\n\n```jsx\nimport icons from '@wbez/ferris-ds/assets/dist/sprites/wbez.svg';\n\n\n \n;\n```\n\nLogo (CDN)\n\n```html\n\n```\n\nLogo (direct)\n\n```jsx\nimport logo from \"@wbez/ferris-ds/assets/logos/wbez/wbez-chicago-logo-oneline.svg\";\n\n\"WBEZ\n```\n\n## Folders\n\n| directory | description |\n| ------------ | ----------------------------------------------------------------------------------------------------------- |\n| assets/scss | Various SASS files establishing our CSS framework |\n| assets/icons | Sets of individual SVG icons used throughout our products |\n| assets/logos | Individual SVG/PNG logos used throughout our products |\n| docs | Tools and templates to statically render documentation, code examples, and usage info for our design system |\n\n## Adding to the CSS framework\n\nWhen you add a new class, component, scss variable, mixin, etc., you'll want to add a short bit of syntax to enable it to appear in the docs. Use the boilerplate below to get started.\n\n### SCSS docs boilerplate\n\n> How to document a new CSS class\n\nWe use a comment parser along with some [extra logic](https://github.com/wbez/ferris-ds/blob/master/tasks/style-doc.js) to generate our docs. To add a new section of documentation, add a boilerplate above your CSS rules like the one below:\n\n```scss\n// Title of Section (root-class-name)\n//\n// Description {{isWide}} {{isHelper}}\n//\n// root-class-name-modifier - desc\n//\n// Markup: 6-components/test/test.html\n//\n// Styleguide 6.0.1\n//\n.root-class-name {\n}\n```\n\n- `{{isWide}}` is used to display the demo of each modifier at full width\n- `{{isHelper}}` is used to hide main demo and only display modifiers\n- `// Deprecated` is used to signify a class to be removed.\n- `// Experimental` is used to signify a class we're considering.\n\n**Deprecated** and **Experimental** are named per [KSS syntax](https://warpspire.com/kss/syntax/).\n\n### Naming and organization\n\nWhen building CSS dispersed on a variety of platforms, it can be difficult to know where certain style rules should live and what to call them. We use the following guideline to help with those decisions as we scale our framework.\n\n#### ITCSS\n\nWe organize our SCSS files with the [inverted triangle](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) approach in mind. We put our own spin on it by adding a `typography`, `layouts` and `blocks` folder, but the general idea is all the same; increased specificity as you move down the stylesheet.\n\nSee also Brad Frost's write-up on atomic design for the rationale behind composable components. (`components` → `blocks` → `pages`)\n\n#### BEM\n\nWe closely follow the BEM (Block Element Modifier) class naming convention in our `components` folder, but we break BEM rules in other places. This is a deliberate attempt to create a hybrid approach of using BEM when scoped to a component and helper classes when styling globally in a more ad hoc context.\n\n#### Namespacing\n\nUse namespacing for quick reference of the function of a CSS class. The following key can be used as a guideline for naming your class:\n\n---\n\nComponents\n\n```css\n.c-component-name[__|-<-modifier>] {\n}\n```\n\n_Example: `c-button`_\n\n---\n\nTypography\n\n```css\n.t-type-util {\n}\n```\n\n_Example: `t-headline`_\n\n---\n\nLayout\n\n```css\n.l-layout-util {\n}\n```\n\n_Example: `l-container`_\n\n---\n\nBlocks\n\n```css\n.b-block-name {\n}\n```\n\n_Example: `b-site-footer`_\n\n---\n\nUtilities\n\n```css\n.[is|has]-state {\n}\n```\n\n_Example: `has-bg-yellow`_\n\n---\n\n## Using this system in our products\n\nThis system is experimental and under rapid development. Use it in situations where it makes sense for the scope of your task.\n\n**Do** use this system when...\n\n- Coding a new template from scratch (new landing pages)\n- Creating something in a isolated environment outside of legacy systems (newsletters, new static sites, UMP)\n\n**Don't** use this system when...\n\n- Making a small CSS change to the legacy system (tiny visual tweak to our main repo)\n- The system creates an unnecessarily layer of complexity (take the path of least resistance)\n\n---\n\n## Publishing\n\nMake sure you're authenticated for npm publishing.\n\n1. `npm login` - then follow the prompts\n2. `npm run release` - There's a [bug](https://github.com/sindresorhus/np/issues/420#issuecomment-499273013) in the `np` publishing tool we use where `yarn` commands don't seem to work.\n\n### Semantic versioning\n\nThe npm helper we use for versioning simplifies matching version numbers with the various `MAJOR`, `MINOR`, `PATCH` increment types. For guidance on what type of release you're making, refer to [https://semver.org/](https://semver.org/)\n\nGenerally, you could base your increment type on the following list:\n\n- MAJOR version = CSS changes that visually break layouts where `ferris-ds` is used on production\n- MINOR version = CSS changes that have no visual effect on production\n- PATCH version = CSS changes that fix a previous bug introduced on production or in development\n\n### Deploying our docs\n\nOur docs are automatically published from the `master` branch by AWS Amplify.\n","licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@1.0.0-20","dist":{"shasum":"5625eb5cb923759c763c51a51a3a2b1f68b0a468","integrity":"sha512-wO7jipO/7uyJe9TprrTiyPdbTJ0vP1v0qa/s4WN4+NfnUdTFJk2DokoOzsS4UMn2cB562piQNKIqyqgi+dGw2Q==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-1.0.0-20.tgz","fileCount":205,"unpackedSize":544964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1qpaCRA9TVsSAnZWagAAl7oQAIr1X3lPMtaV91U6UqnW\ndhx3fBSrIiZ3ecHMbOD93cZeFy+ejeMq9WZJ3cvLdY8GCzum/IgSfUAeDQrg\nTkz4aFY+opGTfUjU9LIRzF7LTqrpDtacY9kZBU7TatvSZR+JqtOlO0GHttR2\nzCDbwvQiRskXJP1FFlkeJNQ9+/S7RX3+IEK/JbThoyZdYwFRbuRgBvJSmK1H\nWyPEtK11xQ5Ic/n1oabFXgJGiP7en5Q4zEH3Xxih/Bpq4d5FuH7ULvIG02zX\nMkSaVdVIT3HUFJpBeJt4KiU6GaYk/OmuwOFucngu7F9ZAAe4XuACUgzAiUC/\njLF3EidMt9S/lStS1hvWV1wHt5ayRZ9sadTDFInDzCs/lw8nm7AhDCimdqIC\n7+xKav9l1sA4Z8csDDHk/8ZSRCfsqCgNTUAUATn79g6P5WSkQtFLC1wjPO33\nMZFxtCTey/rXUSO51S2JXFYYxkHDtixSN7Mh76GR6NKAfg9q3g0Rn6XhsuX0\nzKjvZJl1VBSnILtCSkMIrL30n8GdSMxQqi/ha0EMZjpewyble8paSGfaP1Ts\nmYdYBb8SI0M0JW516w1IJocl6NstAkmgxRbSjjORAQR4NuOEAtHQJayXwIFr\nG43tQ2OiTZgPRpXjlBQn92w3sRnWaQziLTvq1pzn3OMgd5nG9qmRJEPwXsIx\nn5Bv\r\n=EUfz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHvwCUtQeqMG+FH1Vu+pEox4EUtiCDpw4JA2q2lLRhdgIgBH6Rhl3n2dazHqYNegfutrepxUx2+lBKCq6fq04M7ew="}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_1.0.0-20_1574349402026_0.489988173803789"},"_hasShrinkwrap":false},"1.0.0-21":{"name":"@wbez/ferris-ds","version":"1.0.0-21","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"readmeFilename":"README.md","readme":"# @wbez/ferris-ds\n\n> Centralizing styles for product development at WBEZ\n\nThis repo contains a library of styles and icons available to import via npm.\n\nAlong with the library, we set up a few tools that help document updates. CSS comments are parsed to create a JSON object of documentation. That data is rendered with nunjucks to give us a visual representation of the various components and rule-sets we're building.\n\nOur goal is that as we iterate upon the design of our products, we document everything along the way. This keeps our **style docs current and allows for continuous optimization our CSS.**\n\nThis repo is forked from [texastribune/queso-ui@v3.2.0](https://github.com/texastribune/queso-ui/releases/tag/v3.2.0). Much thanks and props for building out such a great base for us to launch from.\n\n## Index\n\n- [Getting started](#getting-started)\n- [Installing as a dependency](#installing-as-a-dependency)\n- [Using assets](#using-assets)\n- [Folders](#folders)\n- [Adding to the CSS framework](#adding-to-the-css-framework)\n- [Using this system in our products](#using-this-system-in-our-products)\n- [Publishing](#publishing)\n\n## Getting started\n\nTo preview these assets and accompanying docs locally, run the following commands:\n\n```sh\nyarn\n```\n\n```sh\nyarn dev\n```\n\nVisit http://wbez.local:3000\n\nThis spins up a browsersync server and watch task for all SCSS and HTML files.\n\n**Requirements**\n\n- node >=8.11.3\n\n## Installing as a dependency\n\n```sh\nyarn add @wbez/ferris-ds\n```\n\n```sh\nnpm install @wbez/ferris-ds\n```\n\n## Using assets\n\nSCSS\n\n```scss\n@import '~@wbez/ferris-ds';\n```\n\nCSS in `` via CDN\n\n```html\n\n```\n\nSingle icon\n\n```js\nimport linkIcon from '@wbez/ferris-ds/assets/icons/wbez/link.svg';\n\n\"\";\n```\n\nIcon using spritesheet\n\n```jsx\nimport icons from '@wbez/ferris-ds/assets/dist/sprites/wbez.svg';\n\n\n \n;\n```\n\nLogo (CDN)\n\n```html\n\n```\n\nLogo (direct)\n\n```jsx\nimport logo from \"@wbez/ferris-ds/assets/logos/wbez/wbez-chicago-logo-oneline.svg\";\n\n\"WBEZ\n```\n\n## Folders\n\n| directory | description |\n| ------------ | ----------------------------------------------------------------------------------------------------------- |\n| assets/scss | Various SASS files establishing our CSS framework |\n| assets/icons | Sets of individual SVG icons used throughout our products |\n| assets/logos | Individual SVG/PNG logos used throughout our products |\n| docs | Tools and templates to statically render documentation, code examples, and usage info for our design system |\n\n## Adding to the CSS framework\n\nWhen you add a new class, component, scss variable, mixin, etc., you'll want to add a short bit of syntax to enable it to appear in the docs. Use the boilerplate below to get started.\n\n### SCSS docs boilerplate\n\n> How to document a new CSS class\n\nWe use a comment parser along with some [extra logic](https://github.com/wbez/ferris-ds/blob/master/tasks/style-doc.js) to generate our docs. To add a new section of documentation, add a boilerplate above your CSS rules like the one below:\n\n```scss\n// Title of Section (root-class-name)\n//\n// Description {{isWide}} {{isHelper}}\n//\n// root-class-name-modifier - desc\n//\n// Markup: 6-components/test/test.html\n//\n// Styleguide 6.0.1\n//\n.root-class-name {\n}\n```\n\n- `{{isWide}}` is used to display the demo of each modifier at full width\n- `{{isHelper}}` is used to hide main demo and only display modifiers\n- `// Deprecated` is used to signify a class to be removed.\n- `// Experimental` is used to signify a class we're considering.\n\n**Deprecated** and **Experimental** are named per [KSS syntax](https://warpspire.com/kss/syntax/).\n\n### Naming and organization\n\nWhen building CSS dispersed on a variety of platforms, it can be difficult to know where certain style rules should live and what to call them. We use the following guideline to help with those decisions as we scale our framework.\n\n#### ITCSS\n\nWe organize our SCSS files with the [inverted triangle](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) approach in mind. We put our own spin on it by adding a `typography`, `layouts` and `blocks` folder, but the general idea is all the same; increased specificity as you move down the stylesheet.\n\nSee also Brad Frost's write-up on atomic design for the rationale behind composable components. (`components` → `blocks` → `pages`)\n\n#### BEM\n\nWe closely follow the BEM (Block Element Modifier) class naming convention in our `components` folder, but we break BEM rules in other places. This is a deliberate attempt to create a hybrid approach of using BEM when scoped to a component and helper classes when styling globally in a more ad hoc context.\n\n#### Namespacing\n\nUse namespacing for quick reference of the function of a CSS class. The following key can be used as a guideline for naming your class:\n\n---\n\nComponents\n\n```css\n.c-component-name[__|-<-modifier>] {\n}\n```\n\n_Example: `c-button`_\n\n---\n\nTypography\n\n```css\n.t-type-util {\n}\n```\n\n_Example: `t-headline`_\n\n---\n\nLayout\n\n```css\n.l-layout-util {\n}\n```\n\n_Example: `l-container`_\n\n---\n\nBlocks\n\n```css\n.b-block-name {\n}\n```\n\n_Example: `b-site-footer`_\n\n---\n\nUtilities\n\n```css\n.[is|has]-state {\n}\n```\n\n_Example: `has-bg-yellow`_\n\n---\n\n## Using this system in our products\n\nThis system is experimental and under rapid development. Use it in situations where it makes sense for the scope of your task.\n\n**Do** use this system when...\n\n- Coding a new template from scratch (new landing pages)\n- Creating something in a isolated environment outside of legacy systems (newsletters, new static sites, UMP)\n\n**Don't** use this system when...\n\n- Making a small CSS change to the legacy system (tiny visual tweak to our main repo)\n- The system creates an unnecessarily layer of complexity (take the path of least resistance)\n\n---\n\n## Publishing\n\nMake sure you're authenticated for npm publishing.\n\n1. `npm login` - then follow the prompts\n2. `npm run release` - There's a [bug](https://github.com/sindresorhus/np/issues/420#issuecomment-499273013) in the `np` publishing tool we use where `yarn` commands don't seem to work.\n\n### Semantic versioning\n\nThe npm helper we use for versioning simplifies matching version numbers with the various `MAJOR`, `MINOR`, `PATCH` increment types. For guidance on what type of release you're making, refer to [https://semver.org/](https://semver.org/)\n\nGenerally, you could base your increment type on the following list:\n\n- MAJOR version = CSS changes that visually break layouts where `ferris-ds` is used on production\n- MINOR version = CSS changes that have no visual effect on production\n- PATCH version = CSS changes that fix a previous bug introduced on production or in development\n\n### Deploying our docs\n\nOur docs are automatically published from the `master` branch by AWS Amplify.\n","licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@1.0.0-21","dist":{"shasum":"61d22de6ded4ec2169158a5f1ee6d8a796ed064e","integrity":"sha512-cHaD2oaxiKMZpkQNeteDsLeuVjWSkhmr5pdaS3Hrcl7OUXQEfTFYYWEqU27g0wboaEx0BPEHTIVMLc2HBh7sGQ==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-1.0.0-21.tgz","fileCount":205,"unpackedSize":544740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd4U2oCRA9TVsSAnZWagAA2rkP/3uU/a23MGXw6C1tU2wg\naEUNEZRpI3E4mDFUumFb2lZhZ293MdwWqBKkJViEL7hZcCuAjH38pdEb40Ir\n3uAgM5oVzzkRx/nJ6XQaD6jfaQ3vBgyT5QNpm8PLjMz54TxBMtejnPE+zrC7\n6JESYjnqSsOP5zoeHXOGkl/C8TsAxsSCFd/0S0L/qa60eXNuqcAqDhsrDpZP\n1TbTbHBKciWBcnriWsp+RO6mGyJA3/FlCRlZV1GTR3AQRzfuMMKEuJ4TLsRn\nJeHF2bUoKaEqBiXK/PV8Halkww4sykiYx3uiNcKc8xGUdiCNwkEdaUVMk8we\n8AODKMOYGaAP1s/zz0wNxLQdbIrMUT3vtsVcgYEp6lnOA/2eoS4zJfVYWiV6\nH6b9xyh3O06iCeaZdOUP64Ooin5EnJazzCKSGr1ENIL1LQnlkhjwHw+zBDCV\ntZgYIu9pNq79CwBvw92JnCdVqs4KNqGW4h0C5azP+Q3pFAAHUAFzYGgIUk+2\nTTGK3XhMJ0LKfWgauuhcxmOoMvt79ARi88BjP4LsOH57stLFv2sN+lupZsP1\nNje73Izw2jBk5jll3hHCsw2kO7sYReage29+8EqHekh/DYPtHKeyGRZ6MnVj\nJmGvrzHymNouWRmdbB8yT6Cb1E4CUZ/6zrPFyIC5Gg3Z11d6keuKKRx5AByl\nneYo\r\n=8mLB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHS1I+tlqo2oH5xZdJ2aAvHK+I6ZK2jkYx7kJEDZvg2qAiBniMxzX780v1jAFwr5wjRLvb+3qb1sZULVjvD3VPs0fA=="}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_1.0.0-21_1575046567740_0.17889402206691996"},"_hasShrinkwrap":false},"1.0.0-22":{"name":"@wbez/ferris-ds","version":"1.0.0-22","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"readmeFilename":"README.md","readme":"# @wbez/ferris-ds\n\n> Centralizing styles for product development at WBEZ\n\nThis repo contains a library of styles and icons available to import via npm.\n\nAlong with the library, we set up a few tools that help document updates. CSS comments are parsed to create a JSON object of documentation. That data is rendered with nunjucks to give us a visual representation of the various components and rule-sets we're building.\n\nOur goal is that as we iterate upon the design of our products, we document everything along the way. This keeps our **style docs current and allows for continuous optimization our CSS.**\n\nThis repo is forked from [texastribune/queso-ui@v3.2.0](https://github.com/texastribune/queso-ui/releases/tag/v3.2.0). Much thanks and props for building out such a great base for us to launch from.\n\n## Index\n\n- [Getting started](#getting-started)\n- [Installing as a dependency](#installing-as-a-dependency)\n- [Using assets](#using-assets)\n- [Folders](#folders)\n- [Adding to the CSS framework](#adding-to-the-css-framework)\n- [Using this system in our products](#using-this-system-in-our-products)\n- [Publishing](#publishing)\n\n## Getting started\n\nTo preview these assets and accompanying docs locally, run the following commands:\n\n```sh\nyarn\n```\n\n```sh\nyarn dev\n```\n\nVisit http://wbez.local:3000\n\nThis spins up a browsersync server and watch task for all SCSS and HTML files.\n\n**Requirements**\n\n- node >=8.11.3\n\n## Installing as a dependency\n\n```sh\nyarn add @wbez/ferris-ds\n```\n\n```sh\nnpm install @wbez/ferris-ds\n```\n\n## Using assets\n\nSCSS\n\n```scss\n@import '~@wbez/ferris-ds';\n```\n\nCSS in `` via CDN\n\n```html\n\n```\n\nSingle icon\n\n```js\nimport linkIcon from '@wbez/ferris-ds/assets/icons/wbez/link.svg';\n\n\"\";\n```\n\nIcon using spritesheet\n\n```jsx\nimport icons from '@wbez/ferris-ds/assets/dist/sprites/wbez.svg';\n\n\n \n;\n```\n\nLogo (CDN)\n\n```html\n\n```\n\nLogo (direct)\n\n```jsx\nimport logo from \"@wbez/ferris-ds/assets/logos/wbez/wbez-chicago-logo-oneline.svg\";\n\n\"WBEZ\n```\n\n## Folders\n\n| directory | description |\n| ------------ | ----------------------------------------------------------------------------------------------------------- |\n| assets/scss | Various SASS files establishing our CSS framework |\n| assets/icons | Sets of individual SVG icons used throughout our products |\n| assets/logos | Individual SVG/PNG logos used throughout our products |\n| docs | Tools and templates to statically render documentation, code examples, and usage info for our design system |\n\n## Adding to the CSS framework\n\nWhen you add a new class, component, scss variable, mixin, etc., you'll want to add a short bit of syntax to enable it to appear in the docs. Use the boilerplate below to get started.\n\n### SCSS docs boilerplate\n\n> How to document a new CSS class\n\nWe use a comment parser along with some [extra logic](https://github.com/wbez/ferris-ds/blob/master/tasks/style-doc.js) to generate our docs. To add a new section of documentation, add a boilerplate above your CSS rules like the one below:\n\n```scss\n// Title of Section (root-class-name)\n//\n// Description {{isWide}} {{isHelper}}\n//\n// root-class-name-modifier - desc\n//\n// Markup: 6-components/test/test.html\n//\n// Styleguide 6.0.1\n//\n.root-class-name {\n}\n```\n\n- `{{isWide}}` is used to display the demo of each modifier at full width\n- `{{isHelper}}` is used to hide main demo and only display modifiers\n- `// Deprecated` is used to signify a class to be removed.\n- `// Experimental` is used to signify a class we're considering.\n\n**Deprecated** and **Experimental** are named per [KSS syntax](https://warpspire.com/kss/syntax/).\n\n### Naming and organization\n\nWhen building CSS dispersed on a variety of platforms, it can be difficult to know where certain style rules should live and what to call them. We use the following guideline to help with those decisions as we scale our framework.\n\n#### ITCSS\n\nWe organize our SCSS files with the [inverted triangle](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) approach in mind. We put our own spin on it by adding a `typography`, `layouts` and `blocks` folder, but the general idea is all the same; increased specificity as you move down the stylesheet.\n\nSee also Brad Frost's write-up on atomic design for the rationale behind composable components. (`components` → `blocks` → `pages`)\n\n#### BEM\n\nWe closely follow the BEM (Block Element Modifier) class naming convention in our `components` folder, but we break BEM rules in other places. This is a deliberate attempt to create a hybrid approach of using BEM when scoped to a component and helper classes when styling globally in a more ad hoc context.\n\n#### Namespacing\n\nUse namespacing for quick reference of the function of a CSS class. The following key can be used as a guideline for naming your class:\n\n---\n\nComponents\n\n```css\n.c-component-name[__|-<-modifier>] {\n}\n```\n\n_Example: `c-button`_\n\n---\n\nTypography\n\n```css\n.t-type-util {\n}\n```\n\n_Example: `t-headline`_\n\n---\n\nLayout\n\n```css\n.l-layout-util {\n}\n```\n\n_Example: `l-container`_\n\n---\n\nBlocks\n\n```css\n.b-block-name {\n}\n```\n\n_Example: `b-site-footer`_\n\n---\n\nUtilities\n\n```css\n.[is|has]-state {\n}\n```\n\n_Example: `has-bg-yellow`_\n\n---\n\n## Using this system in our products\n\nThis system is experimental and under rapid development. Use it in situations where it makes sense for the scope of your task.\n\n**Do** use this system when...\n\n- Coding a new template from scratch (new landing pages)\n- Creating something in a isolated environment outside of legacy systems (newsletters, new static sites, UMP)\n\n**Don't** use this system when...\n\n- Making a small CSS change to the legacy system (tiny visual tweak to our main repo)\n- The system creates an unnecessarily layer of complexity (take the path of least resistance)\n\n---\n\n## Publishing\n\nMake sure you're authenticated for npm publishing.\n\n1. `npm login` - then follow the prompts\n2. `npm run release` - There's a [bug](https://github.com/sindresorhus/np/issues/420#issuecomment-499273013) in the `np` publishing tool we use where `yarn` commands don't seem to work.\n\n### Semantic versioning\n\nThe npm helper we use for versioning simplifies matching version numbers with the various `MAJOR`, `MINOR`, `PATCH` increment types. For guidance on what type of release you're making, refer to [https://semver.org/](https://semver.org/)\n\nGenerally, you could base your increment type on the following list:\n\n- MAJOR version = CSS changes that visually break layouts where `ferris-ds` is used on production\n- MINOR version = CSS changes that have no visual effect on production\n- PATCH version = CSS changes that fix a previous bug introduced on production or in development\n\n### Deploying our docs\n\nOur docs are automatically published from the `master` branch by AWS Amplify.\n","licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@1.0.0-22","dist":{"shasum":"ccdf99e59179fae36f7099580142891f517f403b","integrity":"sha512-er/QObtKoEPqLa4TSGi8O34MSeHFpGy6i211Ns0r+q2MT//Rq97GZQJxD90mdCS1nuYRrZS+yRuAVxm8wf2V3Q==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-1.0.0-22.tgz","fileCount":207,"unpackedSize":808471,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd4ZQCCRA9TVsSAnZWagAA+GoP/RszRFSSoUMKmq5TsvVj\nZydRYzikrUUNo8J63YptKL9z5cBdkqDYP7x+XYwKPafJ81j/d2BA7kw2bPLf\noybmPtsBWlYW17f+i5LoPL2gQeP4mHNOBU2+NKJwRK0kdXTKwvcnUfZHYped\nrCsg+epvN1cGsEnkPmdP8LCJD3iaa2pfsL8BRMhE2B+PcqbK3D8DMwCv+Vnl\nYAdKxL+Y0uua+XPDnOf3UlUmYbwx4tLsIRkW6H7EuBq2Nb09L+ht/HJ2sQiP\n1oCOWTgs8Of8f5ZNgd+58PurMyuq2mhh4aREj9RddPzH8wDNE+RYAWu8X5/p\n858AoX82LTFwaWbgzFP3ofqoAbP1SHEI2Q/sSApWmZ5dt/cL4tpHp7+LZJH+\ngPO1OuGZgj+JKTUxP4ka152uUBIDcW3TaALIiaGQp2zxMU+/TG5BQ6y8WFMc\nFZIo0hRrvL5NtCcSy2RKPaox8O4gPkLIsEdbQIXih1CJov2L0y9GR4GSOwCp\nwxA162PCC9Md491L3dAIsee6ZnHPeODicQ3QA9Q7ZIJp+U42vtVl1OgNvJAf\nzE3KO6rPfPcufI0twC4mGz4vqcE3wvlS6ruuAtutCcOBu7hxUZf2h36ciTJ+\nvgceiaDllfJtWkPoX/EnnTQtOKk50rVoUJO4e0ST1rQVg21i+kWdxd86HAWb\nVF2E\r\n=VJI/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1Ud1oxJCkBEi5FDgVvtXD0Y4dv/xZ+kPpeezx79V7+AIhAP8clbZlI+TrZByzH/1RVadN3mVbV1oVAePSOc8wAZVg"}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_1.0.0-22_1575064577659_0.8828930366486745"},"_hasShrinkwrap":false},"1.0.0-23":{"name":"@wbez/ferris-ds","version":"1.0.0-23","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"readmeFilename":"README.md","readme":"# @wbez/ferris-ds\n\n> Centralizing styles for product development at WBEZ\n\nThis repo contains a library of styles and icons available to import via npm.\n\nAlong with the library, we set up a few tools that help document updates. CSS comments are parsed to create a JSON object of documentation. That data is rendered with nunjucks to give us a visual representation of the various components and rule-sets we're building.\n\nOur goal is that as we iterate upon the design of our products, we document everything along the way. This keeps our **style docs current and allows for continuous optimization our CSS.**\n\nThis repo is forked from [texastribune/queso-ui@v3.2.0](https://github.com/texastribune/queso-ui/releases/tag/v3.2.0). Much thanks and props for building out such a great base for us to launch from.\n\n## Index\n\n- [Getting started](#getting-started)\n- [Installing as a dependency](#installing-as-a-dependency)\n- [Using assets](#using-assets)\n- [Folders](#folders)\n- [Adding to the CSS framework](#adding-to-the-css-framework)\n- [Using this system in our products](#using-this-system-in-our-products)\n- [Publishing](#publishing)\n\n## Getting started\n\nTo preview these assets and accompanying docs locally, run the following commands:\n\n```sh\nyarn\n```\n\n```sh\nyarn dev\n```\n\nVisit http://wbez.local:3000\n\nThis spins up a browsersync server and watch task for all SCSS and HTML files.\n\n**Requirements**\n\n- node >=8.11.3\n\n## Installing as a dependency\n\n```sh\nyarn add @wbez/ferris-ds\n```\n\n```sh\nnpm install @wbez/ferris-ds\n```\n\n## Using assets\n\nSCSS\n\n```scss\n@import '~@wbez/ferris-ds';\n```\n\nCSS in `` via CDN\n\n```html\n\n```\n\nSingle icon\n\n```js\nimport linkIcon from '@wbez/ferris-ds/assets/icons/wbez/link.svg';\n\n\"\";\n```\n\nIcon using spritesheet\n\n```jsx\nimport icons from '@wbez/ferris-ds/assets/dist/sprites/wbez.svg';\n\n\n \n;\n```\n\nLogo (CDN)\n\n```html\n\n```\n\nLogo (direct)\n\n```jsx\nimport logo from \"@wbez/ferris-ds/assets/logos/wbez/wbez-chicago-logo-oneline.svg\";\n\n\"WBEZ\n```\n\n## Folders\n\n| directory | description |\n| ------------ | ----------------------------------------------------------------------------------------------------------- |\n| assets/scss | Various SASS files establishing our CSS framework |\n| assets/icons | Sets of individual SVG icons used throughout our products |\n| assets/logos | Individual SVG/PNG logos used throughout our products |\n| docs | Tools and templates to statically render documentation, code examples, and usage info for our design system |\n\n## Adding to the CSS framework\n\nWhen you add a new class, component, scss variable, mixin, etc., you'll want to add a short bit of syntax to enable it to appear in the docs. Use the boilerplate below to get started.\n\n### SCSS docs boilerplate\n\n> How to document a new CSS class\n\nWe use a comment parser along with some [extra logic](https://github.com/wbez/ferris-ds/blob/master/tasks/style-doc.js) to generate our docs. To add a new section of documentation, add a boilerplate above your CSS rules like the one below:\n\n```scss\n// Title of Section (root-class-name)\n//\n// Description {{isWide}} {{isHelper}}\n//\n// root-class-name-modifier - desc\n//\n// Markup: 6-components/test/test.html\n//\n// Styleguide 6.0.1\n//\n.root-class-name {\n}\n```\n\n- `{{isWide}}` is used to display the demo of each modifier at full width\n- `{{isHelper}}` is used to hide main demo and only display modifiers\n- `// Deprecated` is used to signify a class to be removed.\n- `// Experimental` is used to signify a class we're considering.\n\n**Deprecated** and **Experimental** are named per [KSS syntax](https://warpspire.com/kss/syntax/).\n\n### Naming and organization\n\nWhen building CSS dispersed on a variety of platforms, it can be difficult to know where certain style rules should live and what to call them. We use the following guideline to help with those decisions as we scale our framework.\n\n#### ITCSS\n\nWe organize our SCSS files with the [inverted triangle](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) approach in mind. We put our own spin on it by adding a `typography`, `layouts` and `blocks` folder, but the general idea is all the same; increased specificity as you move down the stylesheet.\n\nSee also Brad Frost's write-up on atomic design for the rationale behind composable components. (`components` → `blocks` → `pages`)\n\n#### BEM\n\nWe closely follow the BEM (Block Element Modifier) class naming convention in our `components` folder, but we break BEM rules in other places. This is a deliberate attempt to create a hybrid approach of using BEM when scoped to a component and helper classes when styling globally in a more ad hoc context.\n\n#### Namespacing\n\nUse namespacing for quick reference of the function of a CSS class. The following key can be used as a guideline for naming your class:\n\n---\n\nComponents\n\n```css\n.c-component-name[__|-<-modifier>] {\n}\n```\n\n_Example: `c-button`_\n\n---\n\nTypography\n\n```css\n.t-type-util {\n}\n```\n\n_Example: `t-headline`_\n\n---\n\nLayout\n\n```css\n.l-layout-util {\n}\n```\n\n_Example: `l-container`_\n\n---\n\nBlocks\n\n```css\n.b-block-name {\n}\n```\n\n_Example: `b-site-footer`_\n\n---\n\nUtilities\n\n```css\n.[is|has]-state {\n}\n```\n\n_Example: `has-bg-yellow`_\n\n---\n\n## Using this system in our products\n\nThis system is experimental and under rapid development. Use it in situations where it makes sense for the scope of your task.\n\n**Do** use this system when...\n\n- Coding a new template from scratch (new landing pages)\n- Creating something in a isolated environment outside of legacy systems (newsletters, new static sites, UMP)\n\n**Don't** use this system when...\n\n- Making a small CSS change to the legacy system (tiny visual tweak to our main repo)\n- The system creates an unnecessarily layer of complexity (take the path of least resistance)\n\n---\n\n## Publishing\n\nMake sure you're authenticated for npm publishing.\n\n1. `npm login` - then follow the prompts\n2. `npm run release` - There's a [bug](https://github.com/sindresorhus/np/issues/420#issuecomment-499273013) in the `np` publishing tool we use where `yarn` commands don't seem to work.\n\n### Semantic versioning\n\nThe npm helper we use for versioning simplifies matching version numbers with the various `MAJOR`, `MINOR`, `PATCH` increment types. For guidance on what type of release you're making, refer to [https://semver.org/](https://semver.org/)\n\nGenerally, you could base your increment type on the following list:\n\n- MAJOR version = CSS changes that visually break layouts where `ferris-ds` is used on production\n- MINOR version = CSS changes that have no visual effect on production\n- PATCH version = CSS changes that fix a previous bug introduced on production or in development\n\n### Deploying our docs\n\nOur docs are automatically published from the `master` branch by AWS Amplify.\n","licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@1.0.0-23","dist":{"shasum":"1079df2112fd2a91fd06557ee61747b3039e8de5","integrity":"sha512-sTskiT8doED2jlXuYRrXMR1JI4hev3Qp62YQGPDnMHoGIL/yofJLktclLnNYEZDMKc6Iz7Dl9mzo5UcNJP7Qiw==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-1.0.0-23.tgz","fileCount":200,"unpackedSize":764078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/OFGCRA9TVsSAnZWagAA/skP/Rq6uDz5UoiqbzjsTqPO\n4G1FQ9SCgR3cbzK2vD6PU1alskAoPQHmgeX/6nmhIYqtjpr+TOh5E4a+oBFY\n8naAvevFDreB9RMD+k2pA8XPkJCju8VNG40IPjD17ohRTjQVAAbZcHIeZ+4g\nmb8mZ2mt9ske3U55ODNvlwGLj9fEyvApH+5zTfeTomvxOOQ5hO4oQPa7oo2v\nbIIbi+9SqqFKLi+JoGve80IM8N6+M0O++jlmMLHwgeCb42PjyDHbBvhNQA9j\ngzFPQNkGfY8jlmlWEtmGg3KcW1VWOmPoPa7uyEHs2ecpq3d5ghIvJvmoVPO8\nCxLFpzJzo40Lx2BjuihVWxg+dAQotmBZtEaoGehTLoOXthqOpuV2SONyH+Hu\nqtm1le31ClB/Ya8lnfWS3POlR+bePm/zeqlKonxzrg/9OPvIvkCHFPZ+vPpk\nS9FdzjMxEa3L86erxme4j+wjANMtqK805vrBjZehkyLirHJ6UUX1Wv+ldysE\noap3RtRYXlVJlwrS0EeumLkOev94k2OLl0XvXVY5ByuLZP9BVdlvblBkhYDp\nWHxZ9IXqqbVWWJ5vVRSyyZAaOsOjcy1l8fdLpxxCoOItLPNKIhtEAgEpPmN3\n492a8y4cX8OeSvm9KWqCUq63VWXjq1wBiHxxBXp/D9szQslW95rItRRh5FqI\nG9xq\r\n=7hmu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAYvLXF6eqDdxNMyLuQ7J3mVOieEP6ORvyNGrHn84NmCAiAfBxfeOpWSbM4WR0qt3GPcCTIHqWv9ocKNwpnypXPtcA=="}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_1.0.0-23_1576853829794_0.4371088187094867"},"_hasShrinkwrap":false},"1.0.0-24":{"name":"@wbez/ferris-ds","version":"1.0.0-24","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"readmeFilename":"README.md","readme":"# @wbez/ferris-ds\n\n> Centralizing styles for product development at WBEZ\n\nThis repo contains a library of styles and icons available to import via npm.\n\nAlong with the library, we set up a few tools that help document updates. CSS comments are parsed to create a JSON object of documentation. That data is rendered with nunjucks to give us a visual representation of the various components and rule-sets we're building.\n\nOur goal is that as we iterate upon the design of our products, we document everything along the way. This keeps our **style docs current and allows for continuous optimization our CSS.**\n\nThis repo is forked from [texastribune/queso-ui@v3.2.0](https://github.com/texastribune/queso-ui/releases/tag/v3.2.0). Much thanks and props for building out such a great base for us to launch from.\n\n## Index\n\n- [Getting started](#getting-started)\n- [Installing as a dependency](#installing-as-a-dependency)\n- [Using assets](#using-assets)\n- [Folders](#folders)\n- [Adding to the CSS framework](#adding-to-the-css-framework)\n- [Using this system in our products](#using-this-system-in-our-products)\n- [Publishing](#publishing)\n\n## Getting started\n\nTo preview these assets and accompanying docs locally, run the following commands:\n\n```sh\nyarn\n```\n\n```sh\nyarn dev\n```\n\nVisit http://wbez.local:3000\n\nThis spins up a browsersync server and watch task for all SCSS and HTML files.\n\n**Requirements**\n\n- node >=8.11.3\n\n## Installing as a dependency\n\n```sh\nyarn add @wbez/ferris-ds\n```\n\n```sh\nnpm install @wbez/ferris-ds\n```\n\n## Using assets\n\nSCSS\n\n```scss\n@import '~@wbez/ferris-ds';\n```\n\nCSS in `` via CDN\n\n```html\n\n```\n\nSingle icon\n\n```js\nimport linkIcon from '@wbez/ferris-ds/assets/icons/wbez/link.svg';\n\n\"\";\n```\n\nIcon using spritesheet\n\n```jsx\nimport icons from '@wbez/ferris-ds/assets/dist/sprites/wbez.svg';\n\n\n \n;\n```\n\nLogo (CDN)\n\n```html\n\n```\n\nLogo (direct)\n\n```jsx\nimport logo from \"@wbez/ferris-ds/assets/logos/wbez/wbez-chicago-logo-oneline.svg\";\n\n\"WBEZ\n```\n\n## Folders\n\n| directory | description |\n| ------------ | ----------------------------------------------------------------------------------------------------------- |\n| assets/scss | Various SASS files establishing our CSS framework |\n| assets/icons | Sets of individual SVG icons used throughout our products |\n| assets/logos | Individual SVG/PNG logos used throughout our products |\n| docs | Tools and templates to statically render documentation, code examples, and usage info for our design system |\n\n## Adding to the CSS framework\n\nWhen you add a new class, component, scss variable, mixin, etc., you'll want to add a short bit of syntax to enable it to appear in the docs. Use the boilerplate below to get started.\n\n### SCSS docs boilerplate\n\n> How to document a new CSS class\n\nWe use a comment parser along with some [extra logic](https://github.com/wbez/ferris-ds/blob/master/tasks/style-doc.js) to generate our docs. To add a new section of documentation, add a boilerplate above your CSS rules like the one below:\n\n```scss\n// Title of Section (root-class-name)\n//\n// Description {{isWide}} {{isHelper}}\n//\n// root-class-name-modifier - desc\n//\n// Markup: 6-components/test/test.html\n//\n// Styleguide 6.0.1\n//\n.root-class-name {\n}\n```\n\n- `{{isWide}}` is used to display the demo of each modifier at full width\n- `{{isHelper}}` is used to hide main demo and only display modifiers\n- `// Deprecated` is used to signify a class to be removed.\n- `// Experimental` is used to signify a class we're considering.\n\n**Deprecated** and **Experimental** are named per [KSS syntax](https://warpspire.com/kss/syntax/).\n\n### Naming and organization\n\nWhen building CSS dispersed on a variety of platforms, it can be difficult to know where certain style rules should live and what to call them. We use the following guideline to help with those decisions as we scale our framework.\n\n#### ITCSS\n\nWe organize our SCSS files with the [inverted triangle](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) approach in mind. We put our own spin on it by adding a `typography`, `layouts` and `blocks` folder, but the general idea is all the same; increased specificity as you move down the stylesheet.\n\nSee also Brad Frost's write-up on atomic design for the rationale behind composable components. (`components` → `blocks` → `pages`)\n\n#### BEM\n\nWe closely follow the BEM (Block Element Modifier) class naming convention in our `components` folder, but we break BEM rules in other places. This is a deliberate attempt to create a hybrid approach of using BEM when scoped to a component and helper classes when styling globally in a more ad hoc context.\n\n#### Namespacing\n\nUse namespacing for quick reference of the function of a CSS class. The following key can be used as a guideline for naming your class:\n\n---\n\nComponents\n\n```css\n.c-component-name[__|-<-modifier>] {\n}\n```\n\n_Example: `c-button`_\n\n---\n\nTypography\n\n```css\n.t-type-util {\n}\n```\n\n_Example: `t-headline`_\n\n---\n\nLayout\n\n```css\n.l-layout-util {\n}\n```\n\n_Example: `l-container`_\n\n---\n\nBlocks\n\n```css\n.b-block-name {\n}\n```\n\n_Example: `b-site-footer`_\n\n---\n\nUtilities\n\n```css\n.[is|has]-state {\n}\n```\n\n_Example: `has-bg-yellow`_\n\n---\n\n## Using this system in our products\n\nThis system is experimental and under rapid development. Use it in situations where it makes sense for the scope of your task.\n\n**Do** use this system when...\n\n- Coding a new template from scratch (new landing pages)\n- Creating something in a isolated environment outside of legacy systems (newsletters, new static sites, UMP)\n\n**Don't** use this system when...\n\n- Making a small CSS change to the legacy system (tiny visual tweak to our main repo)\n- The system creates an unnecessarily layer of complexity (take the path of least resistance)\n\n---\n\n## Publishing\n\nMake sure you're authenticated for npm publishing.\n\n1. `npm login` - then follow the prompts\n2. `npm run release` - There's a [bug](https://github.com/sindresorhus/np/issues/420#issuecomment-499273013) in the `np` publishing tool we use where `yarn` commands don't seem to work.\n\n### Semantic versioning\n\nThe npm helper we use for versioning simplifies matching version numbers with the various `MAJOR`, `MINOR`, `PATCH` increment types. For guidance on what type of release you're making, refer to [https://semver.org/](https://semver.org/)\n\nGenerally, you could base your increment type on the following list:\n\n- MAJOR version = CSS changes that visually break layouts where `ferris-ds` is used on production\n- MINOR version = CSS changes that have no visual effect on production\n- PATCH version = CSS changes that fix a previous bug introduced on production or in development\n\n### Deploying our docs\n\nOur docs are automatically published from the `master` branch by AWS Amplify.\n","licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@1.0.0-24","dist":{"shasum":"f971bfddd9e83925ee41e90cbe2ad1aa4c9e466d","integrity":"sha512-sq+SE8yxFA+qBPweHqOUkYdlwzAxe+u5cknRJgOIWSsPtntnXh1P8nT3yjttwkDcST0IYEuWrIaPUdRbYiiruw==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-1.0.0-24.tgz","fileCount":200,"unpackedSize":763686,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/OyVCRA9TVsSAnZWagAAybMP/jkqYmbVtW6eJu4wr6Mw\nvt45Ruw1zUvEiy0AX3yib+GydPSt0OUGr5sK5lfOnIEmguAew7HPidg9Q8/h\nw+YS+eBmkPz8RCV6A/r39ij+mZqWnFt3SG6w1oxrP8kZNw+a067EqbSkxwzm\nOqeSna6O74hMWHhZBi38Gj1hL8cxEPFVGqnfcOf5c8lsBpd2xmN9US2XSQDw\n+yqYdTUYqnZl6K0fq7vKr9Migah5GtpSOjmklPANwtiXR7g72Cm/hohMJV/m\nzB9GjG4KcUPRUo8S0kAgMTGF/4YGKjmVr2KHPY02ygFj45WcE3QHezK8zwzk\nDY+kIhuQ0mcByVYw3bTsGQiSNG4a0yj9s4uu+Y9DoknT5t0Ja00o9hgAcyZR\n0z00ZtwQ8pmpQBz3nMkF4BtsR4mh8Pq8rBGclVcDFk2nnudqx4PCTjE6qLLO\n8c8NVlNqj0pSvC0VdwPohqsQ0VeYImEVSJUf0Scgn6PnFs0uRmqFcK7p9VWO\nAq0gScZki40QiwrYXx6h4l1auD4+ixUMLUOfUFJc+snKTnvFq223fi2dP4+p\nK8sANS81bdXrjuunt3VNoiFl4lq+6ldc1IfMJIsIQzcisNbT6CFBWxlX2KeS\njkkXayDOwYS5iQ3raz1aaJVBRCMmTh65vHSsXR97rqmI4OdpYhYruH4PcqJA\no/gO\r\n=i8Ym\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIExzofGbPvk3qk0cjZBfdc3yWAIqmc32s7MT5+KmVG7hAiAdpnXC9L/oji1yHzbaApR3kURS/3daJvi5Pn2uEkiOzQ=="}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_1.0.0-24_1576856724778_0.6763494168699"},"_hasShrinkwrap":false},"2.0.0-0":{"name":"@wbez/ferris-ds","version":"2.0.0-0","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"readmeFilename":"README.md","readme":"# @wbez/ferris-ds\n\n> Centralizing styles for product development at WBEZ\n\nThis repo contains a library of styles and icons available to import via npm.\n\nAlong with the library, we set up a few tools that help document updates. CSS comments are parsed to create a JSON object of documentation. That data is rendered with nunjucks to give us a visual representation of the various components and rule-sets we're building.\n\nOur goal is that as we iterate upon the design of our products, we document everything along the way. This keeps our **style docs current and allows for continuous optimization our CSS.**\n\nThis repo is forked from [texastribune/queso-ui@v3.2.0](https://github.com/texastribune/queso-ui/releases/tag/v3.2.0). Much thanks and props for building out such a great base for us to launch from.\n\n## Index\n\n- [Getting started](#getting-started)\n- [Installing as a dependency](#installing-as-a-dependency)\n- [Using assets](#using-assets)\n- [Folders](#folders)\n- [Adding to the CSS framework](#adding-to-the-css-framework)\n- [Using this system in our products](#using-this-system-in-our-products)\n- [Publishing](#publishing)\n\n## Getting started\n\nTo preview these assets and accompanying docs locally, run the following commands:\n\n```sh\nyarn\n```\n\n```sh\nyarn dev\n```\n\nVisit http://wbez.local:3000\n\nThis spins up a browsersync server and watch task for all SCSS and HTML files.\n\n**Requirements**\n\n- node >=8.11.3\n\n## Installing as a dependency\n\n```sh\nyarn add @wbez/ferris-ds\n```\n\n```sh\nnpm install @wbez/ferris-ds\n```\n\n## Using assets\n\nSCSS\n\n```scss\n@import '~@wbez/ferris-ds';\n```\n\nCSS in `` via CDN\n\n```html\n\n```\n\nSingle icon\n\n```js\nimport linkIcon from '@wbez/ferris-ds/assets/icons/wbez/link.svg';\n\n\"\";\n```\n\nIcon using spritesheet\n\n```jsx\nimport icons from '@wbez/ferris-ds/assets/dist/sprites/wbez.svg';\n\n\n \n;\n```\n\nLogo (CDN)\n\n```html\n\n```\n\nLogo (direct)\n\n```jsx\nimport logo from \"@wbez/ferris-ds/assets/logos/wbez/wbez-chicago-logo-oneline.svg\";\n\n\"WBEZ\n```\n\n## Folders\n\n| directory | description |\n| ------------ | ----------------------------------------------------------------------------------------------------------- |\n| assets/scss | Various SASS files establishing our CSS framework |\n| assets/icons | Sets of individual SVG icons used throughout our products |\n| assets/logos | Individual SVG/PNG logos used throughout our products |\n| docs | Tools and templates to statically render documentation, code examples, and usage info for our design system |\n\n## Adding to the CSS framework\n\nWhen you add a new class, component, scss variable, mixin, etc., you'll want to add a short bit of syntax to enable it to appear in the docs. Use the boilerplate below to get started.\n\n### SCSS docs boilerplate\n\n> How to document a new CSS class\n\nWe use a comment parser along with some [extra logic](https://github.com/wbez/ferris-ds/blob/master/tasks/style-doc.js) to generate our docs. To add a new section of documentation, add a boilerplate above your CSS rules like the one below:\n\n```scss\n// Title of Section (root-class-name)\n//\n// Description {{isWide}} {{isHelper}}\n//\n// root-class-name-modifier - desc\n//\n// Markup: 6-components/test/test.html\n//\n// Styleguide 6.0.1\n//\n.root-class-name {\n}\n```\n\n- `{{isWide}}` is used to display the demo of each modifier at full width\n- `{{isHelper}}` is used to hide main demo and only display modifiers\n- `// Deprecated` is used to signify a class to be removed.\n- `// Experimental` is used to signify a class we're considering.\n\n**Deprecated** and **Experimental** are named per [KSS syntax](https://warpspire.com/kss/syntax/).\n\n### Naming and organization\n\nWhen building CSS dispersed on a variety of platforms, it can be difficult to know where certain style rules should live and what to call them. We use the following guideline to help with those decisions as we scale our framework.\n\n#### ITCSS\n\nWe organize our SCSS files with the [inverted triangle](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) approach in mind. We put our own spin on it by adding a `typography`, `layouts` and `blocks` folder, but the general idea is all the same; increased specificity as you move down the stylesheet.\n\nSee also Brad Frost's write-up on atomic design for the rationale behind composable components. (`components` → `blocks` → `pages`)\n\n#### BEM\n\nWe closely follow the BEM (Block Element Modifier) class naming convention in our `components` folder, but we break BEM rules in other places. This is a deliberate attempt to create a hybrid approach of using BEM when scoped to a component and helper classes when styling globally in a more ad hoc context.\n\n#### Namespacing\n\nUse namespacing for quick reference of the function of a CSS class. The following key can be used as a guideline for naming your class:\n\n---\n\nComponents\n\n```css\n.c-component-name[__|-<-modifier>] {\n}\n```\n\n_Example: `c-button`_\n\n---\n\nTypography\n\n```css\n.t-type-util {\n}\n```\n\n_Example: `t-headline`_\n\n---\n\nLayout\n\n```css\n.l-layout-util {\n}\n```\n\n_Example: `l-container`_\n\n---\n\nBlocks\n\n```css\n.b-block-name {\n}\n```\n\n_Example: `b-site-footer`_\n\n---\n\nUtilities\n\n```css\n.[is|has]-state {\n}\n```\n\n_Example: `has-bg-yellow`_\n\n---\n\n## Using this system in our products\n\nThis system is experimental and under rapid development. Use it in situations where it makes sense for the scope of your task.\n\n**Do** use this system when...\n\n- Coding a new template from scratch (new landing pages)\n- Creating something in a isolated environment outside of legacy systems (newsletters, new static sites, UMP)\n\n**Don't** use this system when...\n\n- Making a small CSS change to the legacy system (tiny visual tweak to our main repo)\n- The system creates an unnecessarily layer of complexity (take the path of least resistance)\n\n---\n\n## Publishing\n\nMake sure you're authenticated for npm publishing.\n\n1. `npm login` - then follow the prompts\n2. `npm run release` - There's a [bug](https://github.com/sindresorhus/np/issues/420#issuecomment-499273013) in the `np` publishing tool we use where `yarn` commands don't seem to work.\n\n### Semantic versioning\n\nThe npm helper we use for versioning simplifies matching version numbers with the various `MAJOR`, `MINOR`, `PATCH` increment types. For guidance on what type of release you're making, refer to [https://semver.org/](https://semver.org/)\n\nGenerally, you could base your increment type on the following list:\n\n- MAJOR version = CSS changes that visually break layouts where `ferris-ds` is used on production\n- MINOR version = CSS changes that have no visual effect on production\n- PATCH version = CSS changes that fix a previous bug introduced on production or in development\n\n### Deploying our docs\n\nOur docs are automatically published from the `master` branch by AWS Amplify.\n","licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@2.0.0-0","dist":{"shasum":"07a7651eebc68c89bd2bebafecaa5177dbd6f376","integrity":"sha512-BXtQe+AqAm27RWfoud481escolXeXaAfmTADGaiXZkxqmBmI2Nl8YFxxRm4k02lPeHj7ovDmKX2rfUTrYXTCBw==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-2.0.0-0.tgz","fileCount":209,"unpackedSize":766077,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFNs4CRA9TVsSAnZWagAAcmwP/2ZG/Zq+KGOUc+cYkOrg\nfJKFXdmuQjrks2GtAx2xSnnfEvwmcLLoH0dml6obNppA4rXztSzw//sOJ6jp\niiHQwDBN8zOdO44o0yB8wNzCreH90FXL7oA0ynwiqBGIynDo+XUvAISymZy3\n0YMP0mxgc+x4S8VPG/zCgAn/r2YXPCJ2GP2/fwyESH3DmPBuZ3ag5XZNAfrO\nRV6QjqTDxeB2rlPevfQVVOORNrcda/sAM53xfLxrz+Rhf5M9aMVBnEGfdqQI\ngl0Iyt3Dv9Vh/wzKVw4Oa8niPgTlZIZu1wNO/Xgp1zPxbl4E7XF45Erbrr3m\ndOpxOQ5hSYigrvxswgQ6KtDY3RFXznTdWcGqW9NxfryBtIMlyfg738f0wK0j\nSVwcx7ex2/D9E8TXNytPDP7r3xiD416kCpWnrBWLzPDQd1qtzkg5ZIWIJVsR\nU9wekopAtz618RnYTjwWC94650v1hOZxP4PQnsrKSep3BSbJF/MBcXy2x3B/\nS5BxHMsnPraAS03U1RNR9pM4/0RG8c8qBVDdMadesHvQUGcoQX8VSEufiLg/\nAjrBq7dmUdziO6wJUdz4yrZvnJBmoifQl0r7Pj/dUYETVAnIHygcOgdvFOvr\nHsHoQV0X3SaxTIMf6x5Vzw5ydHXzraikZSHkpAYnbXc9WaldQZGhtrNjlAon\nnwLJ\r\n=T2Ss\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAvadnBANG9n903SeWmmm+5bxC2oPx9Yqx19Y68mq9P/AiAhoiQydMDSgHXF3W3+THVZ+H91gXaHIVseEE9mUTxOUg=="}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_2.0.0-0_1578425143479_0.7327542935525533"},"_hasShrinkwrap":false},"2.1.0-0":{"name":"@wbez/ferris-ds","version":"2.1.0-0","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"readmeFilename":"README.md","readme":"# @wbez/ferris-ds\n\n> Centralizing styles for product development at WBEZ\n\nThis repo contains a library of styles and icons available to import via npm.\n\nAlong with the library, we set up a few tools that help document updates. CSS comments are parsed to create a JSON object of documentation. That data is rendered with nunjucks to give us a visual representation of the various components and rule-sets we're building.\n\nOur goal is that as we iterate upon the design of our products, we document everything along the way. This keeps our **style docs current and allows for continuous optimization our CSS.**\n\nThis repo is forked from [texastribune/queso-ui@v3.2.0](https://github.com/texastribune/queso-ui/releases/tag/v3.2.0). Much thanks and props for building out such a great base for us to launch from.\n\n## Index\n\n- [Getting started](#getting-started)\n- [Installing as a dependency](#installing-as-a-dependency)\n- [Using assets](#using-assets)\n- [Folders](#folders)\n- [Adding to the CSS framework](#adding-to-the-css-framework)\n- [Using this system in our products](#using-this-system-in-our-products)\n- [Publishing](#publishing)\n\n## Getting started\n\nTo preview these assets and accompanying docs locally, run the following commands:\n\n```sh\nyarn\n```\n\n```sh\nyarn dev\n```\n\nVisit http://wbez.local:3000\n\nThis spins up a browsersync server and watch task for all SCSS and HTML files.\n\n**Requirements**\n\n- node >=8.11.3\n\n## Installing as a dependency\n\n```sh\nyarn add @wbez/ferris-ds\n```\n\n```sh\nnpm install @wbez/ferris-ds\n```\n\n## Using assets\n\nSCSS\n\n```scss\n@import '~@wbez/ferris-ds';\n```\n\nCSS in `` via CDN\n\n```html\n\n```\n\nSingle icon\n\n```js\nimport linkIcon from '@wbez/ferris-ds/assets/icons/wbez/link.svg';\n\n\"\";\n```\n\nIcon using spritesheet\n\n```jsx\nimport icons from '@wbez/ferris-ds/assets/dist/sprites/wbez.svg';\n\n\n \n;\n```\n\nLogo (CDN)\n\n```html\n\n```\n\nLogo (direct)\n\n```jsx\nimport logo from \"@wbez/ferris-ds/assets/logos/wbez/wbez-chicago-logo-oneline.svg\";\n\n\"WBEZ\n```\n\n## Folders\n\n| directory | description |\n| ------------ | ----------------------------------------------------------------------------------------------------------- |\n| assets/scss | Various SASS files establishing our CSS framework |\n| assets/icons | Sets of individual SVG icons used throughout our products |\n| assets/logos | Individual SVG/PNG logos used throughout our products |\n| docs | Tools and templates to statically render documentation, code examples, and usage info for our design system |\n\n## Adding to the CSS framework\n\nWhen you add a new class, component, scss variable, mixin, etc., you'll want to add a short bit of syntax to enable it to appear in the docs. Use the boilerplate below to get started.\n\n### SCSS docs boilerplate\n\n> How to document a new CSS class\n\nWe use a comment parser along with some [extra logic](https://github.com/wbez/ferris-ds/blob/master/tasks/style-doc.js) to generate our docs. To add a new section of documentation, add a boilerplate above your CSS rules like the one below:\n\n```scss\n// Title of Section (root-class-name)\n//\n// Description {{isWide}} {{isHelper}}\n//\n// root-class-name-modifier - desc\n//\n// Markup: 6-components/test/test.html\n//\n// Styleguide 6.0.1\n//\n.root-class-name {\n}\n```\n\n- `{{isWide}}` is used to display the demo of each modifier at full width\n- `{{isHelper}}` is used to hide main demo and only display modifiers\n- `// Deprecated` is used to signify a class to be removed.\n- `// Experimental` is used to signify a class we're considering.\n\n**Deprecated** and **Experimental** are named per [KSS syntax](https://warpspire.com/kss/syntax/).\n\n### Naming and organization\n\nWhen building CSS dispersed on a variety of platforms, it can be difficult to know where certain style rules should live and what to call them. We use the following guideline to help with those decisions as we scale our framework.\n\n#### ITCSS\n\nWe organize our SCSS files with the [inverted triangle](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) approach in mind. We put our own spin on it by adding a `typography`, `layouts` and `blocks` folder, but the general idea is all the same; increased specificity as you move down the stylesheet.\n\nSee also Brad Frost's write-up on atomic design for the rationale behind composable components. (`components` → `blocks` → `pages`)\n\n#### BEM\n\nWe closely follow the BEM (Block Element Modifier) class naming convention in our `components` folder, but we break BEM rules in other places. This is a deliberate attempt to create a hybrid approach of using BEM when scoped to a component and helper classes when styling globally in a more ad hoc context.\n\n#### Namespacing\n\nUse namespacing for quick reference of the function of a CSS class. The following key can be used as a guideline for naming your class:\n\n---\n\nComponents\n\n```css\n.c-component-name[__|-<-modifier>] {\n}\n```\n\n_Example: `c-button`_\n\n---\n\nTypography\n\n```css\n.t-type-util {\n}\n```\n\n_Example: `t-headline`_\n\n---\n\nLayout\n\n```css\n.l-layout-util {\n}\n```\n\n_Example: `l-container`_\n\n---\n\nBlocks\n\n```css\n.b-block-name {\n}\n```\n\n_Example: `b-site-footer`_\n\n---\n\nUtilities\n\n```css\n.[is|has]-state {\n}\n```\n\n_Example: `has-bg-yellow`_\n\n---\n\n## Using this system in our products\n\nThis system is experimental and under rapid development. Use it in situations where it makes sense for the scope of your task.\n\n**Do** use this system when...\n\n- Coding a new template from scratch (new landing pages)\n- Creating something in a isolated environment outside of legacy systems (newsletters, new static sites, UMP)\n\n**Don't** use this system when...\n\n- Making a small CSS change to the legacy system (tiny visual tweak to our main repo)\n- The system creates an unnecessarily layer of complexity (take the path of least resistance)\n\n---\n\n## Publishing\n\nMake sure you're authenticated for npm publishing.\n\n1. `npm login` - then follow the prompts\n2. `npm run release` - There's a [bug](https://github.com/sindresorhus/np/issues/420#issuecomment-499273013) in the `np` publishing tool we use where `yarn` commands don't seem to work.\n\n### Semantic versioning\n\nThe npm helper we use for versioning simplifies matching version numbers with the various `MAJOR`, `MINOR`, `PATCH` increment types. For guidance on what type of release you're making, refer to [https://semver.org/](https://semver.org/)\n\nGenerally, you could base your increment type on the following list:\n\n- MAJOR version = CSS changes that visually break layouts where `ferris-ds` is used on production\n- MINOR version = CSS changes that have no visual effect on production\n- PATCH version = CSS changes that fix a previous bug introduced on production or in development\n\n### Deploying our docs\n\nOur docs are automatically published from the `master` branch by AWS Amplify.\n","licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@2.1.0-0","dist":{"shasum":"2f57da85b03d98a2ed1ac89ed5d44386f6ae648e","integrity":"sha512-D6Zs7WxhdIXo319PkvantQik+RMJrYDNiwNQCxgOc9hdwtxcIkF8KEHTlcoiWolcIGWtT+LOalp/TW3GjOVBYg==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-2.1.0-0.tgz","fileCount":210,"unpackedSize":769779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIJefCRA9TVsSAnZWagAAJzoQAIl9I5YvJUPBSS0ZbIcQ\ntO+0ohwIJ4/UksyR9xZBY61ziCqy+vuRheo4VRuR2dN+Jx4VPk5oFTbOGRlZ\nlosk4x0kTpZdf/tITncbS0W8ZjcLWBEoe+WaNRWimx5ogBrWbQtwM3Dfhz6w\nsWbVGnSIyGSfBIYJZanzt776jBaNHVCJp7gM0NwF49ZaRPNd2mlZ2WiS3LU6\n2GBLa/0UYCHE+cr3NjsvQjf/CUc6ygVQr4SY3kGZ+AU6Gn01vuUSuci0elE/\nb8SYoZnECYmisooGIDDU+MYELf5hy2zwxMLL9eUp3K5somkYE0prXduvyRJT\n7FwlOSV4MhauzenxTQrtrWU9nFh1NYJGTnUc9Voo4ZCLgWOWXdUKbsU/Bv3+\n1dvFDr+ZInaGm2Nq+HK6OjpZqMe1JVbXF9/pVT11FkGJE1XAHIM1GN8Hl0U4\n2/pMp7BffCo7EYIUp2d1Sp0m2k3pwpZ+sfA2cJJ6jAAuIMZqF1Y5+jfK9ReH\nt+3G4Dk2ix8M/cDbQbwoceExfrUg71UsqDvKZ8ninLlJNIyascr5yLR1Cglc\nPOR8znX2l/04t/ARbHQH5qiH8PmwjCDSIpVen3jB/edLceb/mCu+naPOFe1x\nYXc1y74XjA4q2IEfGfPWcuLVw3/yG+KV9y7F83cGdwD5pUQ+5d6vsA7ObQC2\nOGbV\r\n=dx8u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGeDIMgiBl1gufbRBSLmj/YznnSd/OQ7PX6wsNOtzShIAiEArHR2O0jkNw6cK1quCadYW80gVUAGiKBRIMN4uH5aBIA="}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_2.1.0-0_1579194270586_0.6028960156189245"},"_hasShrinkwrap":false},"2.1.0-1":{"name":"@wbez/ferris-ds","version":"2.1.0-1","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"readmeFilename":"README.md","readme":"# @wbez/ferris-ds\n\n> Centralizing styles for product development at WBEZ\n\nThis repo contains a library of styles and icons available to import via npm.\n\nAlong with the library, we set up a few tools that help document updates. CSS comments are parsed to create a JSON object of documentation. That data is rendered with nunjucks to give us a visual representation of the various components and rule-sets we're building.\n\nOur goal is that as we iterate upon the design of our products, we document everything along the way. This keeps our **style docs current and allows for continuous optimization our CSS.**\n\nThis repo is forked from [texastribune/queso-ui@v3.2.0](https://github.com/texastribune/queso-ui/releases/tag/v3.2.0). Much thanks and props for building out such a great base for us to launch from.\n\n## Index\n\n- [Getting started](#getting-started)\n- [Installing as a dependency](#installing-as-a-dependency)\n- [Using assets](#using-assets)\n- [Folders](#folders)\n- [Adding to the CSS framework](#adding-to-the-css-framework)\n- [Using this system in our products](#using-this-system-in-our-products)\n- [Publishing](#publishing)\n\n## Getting started\n\nTo preview these assets and accompanying docs locally, run the following commands:\n\n```sh\nyarn\n```\n\n```sh\nyarn dev\n```\n\nVisit http://wbez.local:3000\n\nThis spins up a browsersync server and watch task for all SCSS and HTML files.\n\n**Requirements**\n\n- node >=8.11.3\n\n## Installing as a dependency\n\n```sh\nyarn add @wbez/ferris-ds\n```\n\n```sh\nnpm install @wbez/ferris-ds\n```\n\n## Using assets\n\nSCSS\n\n```scss\n@import '~@wbez/ferris-ds';\n```\n\nCSS in `` via CDN\n\n```html\n\n```\n\nSingle icon\n\n```js\nimport linkIcon from '@wbez/ferris-ds/assets/icons/wbez/link.svg';\n\n\"\";\n```\n\nIcon using spritesheet\n\n```jsx\nimport icons from '@wbez/ferris-ds/assets/dist/sprites/wbez.svg';\n\n\n \n;\n```\n\nLogo (CDN)\n\n```html\n\n```\n\nLogo (direct)\n\n```jsx\nimport logo from \"@wbez/ferris-ds/assets/logos/wbez/wbez-chicago-logo-oneline.svg\";\n\n\"WBEZ\n```\n\n## Folders\n\n| directory | description |\n| ------------ | ----------------------------------------------------------------------------------------------------------- |\n| assets/scss | Various SASS files establishing our CSS framework |\n| assets/icons | Sets of individual SVG icons used throughout our products |\n| assets/logos | Individual SVG/PNG logos used throughout our products |\n| docs | Tools and templates to statically render documentation, code examples, and usage info for our design system |\n\n## Adding to the CSS framework\n\nWhen you add a new class, component, scss variable, mixin, etc., you'll want to add a short bit of syntax to enable it to appear in the docs. Use the boilerplate below to get started.\n\n### SCSS docs boilerplate\n\n> How to document a new CSS class\n\nWe use a comment parser along with some [extra logic](https://github.com/wbez/ferris-ds/blob/master/tasks/style-doc.js) to generate our docs. To add a new section of documentation, add a boilerplate above your CSS rules like the one below:\n\n```scss\n// Title of Section (root-class-name)\n//\n// Description {{isWide}} {{isHelper}}\n//\n// root-class-name-modifier - desc\n//\n// Markup: 6-components/test/test.html\n//\n// Styleguide 6.0.1\n//\n.root-class-name {\n}\n```\n\n- `{{isWide}}` is used to display the demo of each modifier at full width\n- `{{isHelper}}` is used to hide main demo and only display modifiers\n- `// Deprecated` is used to signify a class to be removed.\n- `// Experimental` is used to signify a class we're considering.\n\n**Deprecated** and **Experimental** are named per [KSS syntax](https://warpspire.com/kss/syntax/).\n\n### Naming and organization\n\nWhen building CSS dispersed on a variety of platforms, it can be difficult to know where certain style rules should live and what to call them. We use the following guideline to help with those decisions as we scale our framework.\n\n#### ITCSS\n\nWe organize our SCSS files with the [inverted triangle](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) approach in mind. We put our own spin on it by adding a `typography`, `layouts` and `blocks` folder, but the general idea is all the same; increased specificity as you move down the stylesheet.\n\nSee also Brad Frost's write-up on atomic design for the rationale behind composable components. (`components` → `blocks` → `pages`)\n\n#### BEM\n\nWe closely follow the BEM (Block Element Modifier) class naming convention in our `components` folder, but we break BEM rules in other places. This is a deliberate attempt to create a hybrid approach of using BEM when scoped to a component and helper classes when styling globally in a more ad hoc context.\n\n#### Namespacing\n\nUse namespacing for quick reference of the function of a CSS class. The following key can be used as a guideline for naming your class:\n\n---\n\nComponents\n\n```css\n.c-component-name[__|-<-modifier>] {\n}\n```\n\n_Example: `c-button`_\n\n---\n\nTypography\n\n```css\n.t-type-util {\n}\n```\n\n_Example: `t-headline`_\n\n---\n\nLayout\n\n```css\n.l-layout-util {\n}\n```\n\n_Example: `l-container`_\n\n---\n\nBlocks\n\n```css\n.b-block-name {\n}\n```\n\n_Example: `b-site-footer`_\n\n---\n\nUtilities\n\n```css\n.[is|has]-state {\n}\n```\n\n_Example: `has-bg-yellow`_\n\n---\n\n## Using this system in our products\n\nThis system is experimental and under rapid development. Use it in situations where it makes sense for the scope of your task.\n\n**Do** use this system when...\n\n- Coding a new template from scratch (new landing pages)\n- Creating something in a isolated environment outside of legacy systems (newsletters, new static sites, UMP)\n\n**Don't** use this system when...\n\n- Making a small CSS change to the legacy system (tiny visual tweak to our main repo)\n- The system creates an unnecessarily layer of complexity (take the path of least resistance)\n\n---\n\n## Publishing\n\nMake sure you're authenticated for npm publishing.\n\n1. `npm login` - then follow the prompts\n2. `npm run release` - There's a [bug](https://github.com/sindresorhus/np/issues/420#issuecomment-499273013) in the `np` publishing tool we use where `yarn` commands don't seem to work.\n\n### Semantic versioning\n\nThe npm helper we use for versioning simplifies matching version numbers with the various `MAJOR`, `MINOR`, `PATCH` increment types. For guidance on what type of release you're making, refer to [https://semver.org/](https://semver.org/)\n\nGenerally, you could base your increment type on the following list:\n\n- MAJOR version = CSS changes that visually break layouts where `ferris-ds` is used on production\n- MINOR version = CSS changes that have no visual effect on production\n- PATCH version = CSS changes that fix a previous bug introduced on production or in development\n\n### Deploying our docs\n\nOur docs are automatically published from the `master` branch by AWS Amplify.\n","licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@2.1.0-1","dist":{"shasum":"74d73a3c54caff92cc553b8f37e89e0681cc97de","integrity":"sha512-mRZ0bFVsLQ3UjwRTsuT/f1J6xgB+AtIvJ+WpWmhyCMb19D78aaj89qjZC6KDb1/oqUF2EGF75UAF4/7s7vJceA==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-2.1.0-1.tgz","fileCount":210,"unpackedSize":770121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIL7xCRA9TVsSAnZWagAAdbYQAJ5wPNzRGRKRCGzF6hAn\nHQH7eZbi1Jq0GjmY6NHBdOBwzGqY+V3QhpjOW0drHZHG06Tt7S6kpFwdF6XW\nE5PJdfd18S529YDlWoZz284VxMG8VF6G2HT/h4UgDDa6drDHf0D10h8GRxyd\n5ISQ7tj//jX+w0CE3tfeN+I0Gwo0Kzs3pTORC3FG9RxcLwttUZ2bDr/EPiRt\nPnm5WvctO+9j0zwVazVgejmC5qQoqXVoN2sY9bymHgEUFGOAY8ulSJy+s7rU\ndVkLvr2ZHmviP4Nlt4QIE9rTvSsSiO7P7YcMGDHJ2+3ID+6t20XaSPbTRz4a\n13X+sCbqXDmGV8GvBdfb2qW4CxABpKoQOtqc7OkQVBdQ8jCC4yjW5GcLuATW\n/+0Al542EYnfdR4qoxodWDW+XFPHPtI+r6Q5YOaxMs6DDP2q4UtZOA05v3LH\ndSuUMMo1K8IXsmNFaOiIIpf8TT2PTkOj62z4fWR478OC5f6LekQ8XCC1VgBi\npjN6Go5Ckqs3yyTiW/FiU+gB2vyRRyi85dfRkvK0lEFWtiVwv50a4uF9oNNq\nsofsw5v6FapftGUJ1vxiL7ZuKhDBZzaDIZETLf3oGeQXST2DUGrUv+sNGFLI\nUjH6pXJeQ4btk0u6c1YSbVgo3dvxBJplihJj1kCZRwbxHg5k6djGRbjFfWzQ\ndx0K\r\n=ZxgW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrc8iV8wwYB75oWs0XiSnkLNZ3sAj7s9PWF1Y3WlOkeAIhAOPJJYv8DMY/DP/qWNLf26IQbq7nICTEhBWPF7vUuE6/"}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_2.1.0-1_1579204337019_0.9901883698250638"},"_hasShrinkwrap":false},"2.1.0-2":{"name":"@wbez/ferris-ds","version":"2.1.0-2","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"readmeFilename":"README.md","readme":"# @wbez/ferris-ds\n\n> Centralizing styles for product development at WBEZ\n\nThis repo contains a library of styles and icons available to import via npm.\n\nAlong with the library, we set up a few tools that help document updates. CSS comments are parsed to create a JSON object of documentation. That data is rendered with nunjucks to give us a visual representation of the various components and rule-sets we're building.\n\nOur goal is that as we iterate upon the design of our products, we document everything along the way. This keeps our **style docs current and allows for continuous optimization our CSS.**\n\nThis repo is forked from [texastribune/queso-ui@v3.2.0](https://github.com/texastribune/queso-ui/releases/tag/v3.2.0). Much thanks and props for building out such a great base for us to launch from.\n\n## Index\n\n- [Getting started](#getting-started)\n- [Installing as a dependency](#installing-as-a-dependency)\n- [Using assets](#using-assets)\n- [Folders](#folders)\n- [Adding to the CSS framework](#adding-to-the-css-framework)\n- [Using this system in our products](#using-this-system-in-our-products)\n- [Publishing](#publishing)\n\n## Getting started\n\nTo preview these assets and accompanying docs locally, run the following commands:\n\n```sh\nyarn\n```\n\n```sh\nyarn dev\n```\n\nVisit http://wbez.local:3000\n\nThis spins up a browsersync server and watch task for all SCSS and HTML files.\n\n**Requirements**\n\n- node >=8.11.3\n\n## Installing as a dependency\n\n```sh\nyarn add @wbez/ferris-ds\n```\n\n```sh\nnpm install @wbez/ferris-ds\n```\n\n## Using assets\n\nSCSS\n\n```scss\n@import '~@wbez/ferris-ds';\n```\n\nCSS in `` via CDN\n\n```html\n\n```\n\nSingle icon\n\n```js\nimport linkIcon from '@wbez/ferris-ds/assets/icons/wbez/link.svg';\n\n\"\";\n```\n\nIcon using spritesheet\n\n```jsx\nimport icons from '@wbez/ferris-ds/assets/dist/sprites/wbez.svg';\n\n\n \n;\n```\n\nLogo (CDN)\n\n```html\n\n```\n\nLogo (direct)\n\n```jsx\nimport logo from \"@wbez/ferris-ds/assets/logos/wbez/wbez-chicago-logo-oneline.svg\";\n\n\"WBEZ\n```\n\n## Folders\n\n| directory | description |\n| ------------ | ----------------------------------------------------------------------------------------------------------- |\n| assets/scss | Various SASS files establishing our CSS framework |\n| assets/icons | Sets of individual SVG icons used throughout our products |\n| assets/logos | Individual SVG/PNG logos used throughout our products |\n| docs | Tools and templates to statically render documentation, code examples, and usage info for our design system |\n\n## Adding to the CSS framework\n\nWhen you add a new class, component, scss variable, mixin, etc., you'll want to add a short bit of syntax to enable it to appear in the docs. Use the boilerplate below to get started.\n\n### SCSS docs boilerplate\n\n> How to document a new CSS class\n\nWe use a comment parser along with some [extra logic](https://github.com/wbez/ferris-ds/blob/master/tasks/style-doc.js) to generate our docs. To add a new section of documentation, add a boilerplate above your CSS rules like the one below:\n\n```scss\n// Title of Section (root-class-name)\n//\n// Description {{isWide}} {{isHelper}}\n//\n// root-class-name-modifier - desc\n//\n// Markup: 6-components/test/test.html\n//\n// Styleguide 6.0.1\n//\n.root-class-name {\n}\n```\n\n- `{{isWide}}` is used to display the demo of each modifier at full width\n- `{{isHelper}}` is used to hide main demo and only display modifiers\n- `// Deprecated` is used to signify a class to be removed.\n- `// Experimental` is used to signify a class we're considering.\n\n**Deprecated** and **Experimental** are named per [KSS syntax](https://warpspire.com/kss/syntax/).\n\n### Naming and organization\n\nWhen building CSS dispersed on a variety of platforms, it can be difficult to know where certain style rules should live and what to call them. We use the following guideline to help with those decisions as we scale our framework.\n\n#### ITCSS\n\nWe organize our SCSS files with the [inverted triangle](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) approach in mind. We put our own spin on it by adding a `typography`, `layouts` and `blocks` folder, but the general idea is all the same; increased specificity as you move down the stylesheet.\n\nSee also Brad Frost's write-up on atomic design for the rationale behind composable components. (`components` → `blocks` → `pages`)\n\n#### BEM\n\nWe closely follow the BEM (Block Element Modifier) class naming convention in our `components` folder, but we break BEM rules in other places. This is a deliberate attempt to create a hybrid approach of using BEM when scoped to a component and helper classes when styling globally in a more ad hoc context.\n\n#### Namespacing\n\nUse namespacing for quick reference of the function of a CSS class. The following key can be used as a guideline for naming your class:\n\n---\n\nComponents\n\n```css\n.c-component-name[__|-<-modifier>] {\n}\n```\n\n_Example: `c-button`_\n\n---\n\nTypography\n\n```css\n.t-type-util {\n}\n```\n\n_Example: `t-headline`_\n\n---\n\nLayout\n\n```css\n.l-layout-util {\n}\n```\n\n_Example: `l-container`_\n\n---\n\nBlocks\n\n```css\n.b-block-name {\n}\n```\n\n_Example: `b-site-footer`_\n\n---\n\nUtilities\n\n```css\n.[is|has]-state {\n}\n```\n\n_Example: `has-bg-yellow`_\n\n---\n\n## Using this system in our products\n\nThis system is experimental and under rapid development. Use it in situations where it makes sense for the scope of your task.\n\n**Do** use this system when...\n\n- Coding a new template from scratch (new landing pages)\n- Creating something in a isolated environment outside of legacy systems (newsletters, new static sites, UMP)\n\n**Don't** use this system when...\n\n- Making a small CSS change to the legacy system (tiny visual tweak to our main repo)\n- The system creates an unnecessarily layer of complexity (take the path of least resistance)\n\n---\n\n## Publishing\n\nMake sure you're authenticated for npm publishing.\n\n1. `npm login` - then follow the prompts\n2. `npm run release` - There's a [bug](https://github.com/sindresorhus/np/issues/420#issuecomment-499273013) in the `np` publishing tool we use where `yarn` commands don't seem to work.\n\n### Semantic versioning\n\nThe npm helper we use for versioning simplifies matching version numbers with the various `MAJOR`, `MINOR`, `PATCH` increment types. For guidance on what type of release you're making, refer to [https://semver.org/](https://semver.org/)\n\nGenerally, you could base your increment type on the following list:\n\n- MAJOR version = CSS changes that visually break layouts where `ferris-ds` is used on production\n- MINOR version = CSS changes that have no visual effect on production\n- PATCH version = CSS changes that fix a previous bug introduced on production or in development\n\n### Deploying our docs\n\nOur docs are automatically published from the `master` branch by AWS Amplify.\n","licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@2.1.0-2","dist":{"shasum":"3ca1007f1efd4876ec7d452be0a3ef0c83e45353","integrity":"sha512-8H5NRHjGgF6FsEGbl7DZ5TiiydAb4dZOce0yWYyxeiPcXBNYh7aTUQQipL2Q6HKLxB+jHTa3UO6AlRDLD9C+uw==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-2.1.0-2.tgz","fileCount":208,"unpackedSize":759724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKMASCRA9TVsSAnZWagAAHHgP/iwF7W8SfdTP0+yNSdBa\ntO2avUmnd2U4G6T/nUtE003xB59FjTwK5fW37EoLCP1madSLTnsFJ0PIlofd\nxIslOZ4HVl7NqxzrWfeAOfj08zpFjK7F8AMT4y/fKcb2yP+MP9z3nKsx7tHd\nqXDhkVnwUR5Xh+sdhJavLCQqGKpJ5Yz4dfAMSCyqLG6JBV3MlL/I6IZddZBF\nDfC+pjZ3u10CIrlaqNztABHfoddDH92bbdE1CXaOITQ6+6Sx4Lxi2rWGvi4/\nKfR6ExVfPP14G8TKsgR0YlfUm1k0ENa1LZaoWw/xzQyEqOabDCT9NGOIE4l8\nqyIQtlN5y3Ny2u8X2E4PJT55CqoJ06bp4p3dbY8JogofZfMAJxTB+qovDkn/\nzJd6rgutxzofEBXWH8rHfx/CQEwbJbwvCBIGgQjJJNvQ1WorcEzowY0x/REx\nFhetJoMxd11NOFOxZ1z2cbQNkIewkXRuRKtfqgoAjmnIJvc4L/5O+vbGBoj3\nPfCVT+9UmDNVrhfCH7jd354gbMPaCYONuvrxeVKIaHvwh7Mu9gxbo1J58w5m\nf0rHXYmUIz8nd8JzxKkR+siaM/4yrK3S2ALdz81EoxLWFmV8hbjIfYfEt3MM\nzVBcjAR/O7IdqcD0x+PfOw14gfH8xYFg7QouYp27yf7AEa+9ap9vIzHX66G4\nOuKZ\r\n=iTuj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6omCB2Btl6wFCgIb2PxQ5/TZe9cCvwj9ln9aVbcouNwIgGJRztWUnuNft3cbCrEjlbL26JE7WkHcBc/kwjq3nYc4="}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_2.1.0-2_1579728914004_0.3605847433824416"},"_hasShrinkwrap":false},"3.0.0":{"name":"@wbez/ferris-ds","version":"3.0.0","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@3.0.0","dist":{"shasum":"8ad5c934a911d0fba0805d7d32bdd90411bc517f","integrity":"sha512-1VGGboYDg6dwzAit3PizPLW6XHi7uWLSxIZ3LIdZNvpJy8WUNck3CrVIykCN2JCkG33DITOHBJ89deAXYkAf3w==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-3.0.0.tgz","fileCount":206,"unpackedSize":768918,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMFjTCRA9TVsSAnZWagAAHqgP/j6dAoxRI20DbGxQqPHs\nQtzpyw70AJjulGcAN0Itn/qCpz+qqxlqt18j8Z7PP8PpI4M+wAQtTXetxhAX\n0J4hPOtzQ0gKCJ6rGR+QRpSl5GeaRH0fee5V9ZJ+sov/1AfOOd/7Y8Jf87TX\nysrInKQL43AALzw3onGw+qS2ocuHZxiXHW9cRz4TuYBzHkvBBm8Ik4pCNRSj\nbQ9Wt2VkkbH2G32K2+cLe/+xfW9KZaoMLv1MB+8rT6hFAPV9OjhPBZji+aNp\nmaOXQW9SYenTPHOj5yMnz3YWul1KMsAZIZwgNs0k6SXkxFX9Ty4d+69bLtXq\noF18eGXRty7tJ3H47nFEedd/lXU0K3sqjGCbpiiPyGFMjDVUOslxDSEWLgSZ\n6PgwZ0UU2QlIwwmjVXULgtYlRbkjfVPPQ5DzxwqGs0wlhoojrRUoBRNattex\n6LROva7IcGRMnPpAlmKnjZYQo+b0lHrw4ojbYt3mJZN851t4rAZ2BRv3N6HL\niakgeCak87i7sBzPXTAXjrHQgndar8PsLDXdMbUc1MmCqLH4FFO7clnFmRVY\n5sXBlGrQAn8izei3BL6KxCtcxheCpDFJFEoW7r++9jHbxGXDyVSmvJa0+I2T\n5sKInirdRCs+mh+/RUWh/5XukXhas1oXM3Ke3Yzhgcr1e/MKIzcSwGT+o4a3\nxiG8\r\n=Axpd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUu+V0dhKshCTdEn2qIt64CKLtpurwQvqqtKVYjGrM8gIhAIlaPfXKyI4yoNj/98JdNrjmiRdlGXJeDqA64Zwscw7+"}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_3.0.0_1580226771177_0.5839287590524969"},"_hasShrinkwrap":false},"3.0.1":{"name":"@wbez/ferris-ds","version":"3.0.1","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@3.0.1","dist":{"shasum":"8b282e8415a81d2f6d2a7936d622fc5112bc2db5","integrity":"sha512-xvRM6PgjB+kjQ+Da1mpX7OLv6WhiUpn88/xFpbzBw+adHaJXMwDDGYdYapxtl9e4YtrVi/qQmAS4+SPzlGtITQ==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-3.0.1.tgz","fileCount":206,"unpackedSize":768862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMGBYCRA9TVsSAnZWagAAwYEP/jmpHitbVOMGeyx7xevl\nokLKzdQuTLxeWHew7e/fwHgW2haMSoj+zXzK+252G44JoP1ZFE5SWKF7//V/\nkY0umBlC3hCKRpOvl3QLJVoXm0P/SG9WiamQVQWb7O7ir9bKxClHhhNaWh9G\ntHCZy8VuWJ3MCRfH69IFZ3aBe1kYBRPn7Admsy+2U5u/1FTgssLC9QfGfP9f\nnZY2UIL9k9pphxQsS82uJelweBsuj2bYx359TsAFPL0XzAU5py2eI3ukHpj1\nTeqtewRxljkdzds6Tia4uiDBPvkwXLK/C63kON3Fks9LCk0X5PW3MOP/HwyA\nmlLj8gyt9FpuUOEXhu8tvxxASDB/4TINzH0zEViNDSo11tyljR4TnxqLLAKl\nl6ihSZIh4SVpyPrbcxdrLyWNi8HWiSYb6YI3D23eFII5Rs4CNU36Lwq5nYMY\n92EgSSld45yooSJ5FuhImB0YmuwuAggyduT8xcFQSQwP+XwIsCvlLs8v+O5+\nIbIJhZXbqvN1D5rTaJskPg2Fnum82/6Dh4dCmw1/K0sDvZlIqiGY2jOnMCFJ\nShF2hb9QXgAtpYTpJpM0EcvgJBvitjY+6ZBU+bPTEt3xOgcY9nmFwi3xt3Nf\npziMpSIHY+yLpHFD8QtMh4wcEEPQBub+DxhDg6Qu3NVQb5XX6GX1pl5tLkkv\nU1nt\r\n=07rQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDG73xlm6CB4qeilzvHVXoibVli2SJfRHhXVsZR+2cDKwIhAL7SYjf3R7zyrD/ZvY3Imb4e8NPDxhAyYQ8ElweIO2+X"}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_3.0.1_1580228696318_0.7995551121591136"},"_hasShrinkwrap":false},"3.0.2":{"name":"@wbez/ferris-ds","version":"3.0.2","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@3.0.2","dist":{"shasum":"cc9061910c8c91b4206d5d77fbf0cfee7b767fc3","integrity":"sha512-zpWYYUNPslt1kGtHWO071aNk+r7SY+/SmhrfxdN8yBI4JFS4OgmFMz1X1OXNI2NxjbkTxUucO/iND70pQnYqvg==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-3.0.2.tgz","fileCount":207,"unpackedSize":773053,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMfIwCRA9TVsSAnZWagAA9q8QAItzrnus5v6XaqvG3JZR\n5HT0RPq33yiptpx3ZBRAWO+lKwCQv4AI2NnuOliCRUNnYZ9ucDGf06MFvAFf\nuzypyXbWJy7snilGbumXRUbrNBt3qepXDMALtinBdOoNKf1MMlZrziUGCbHI\nQsBZlUj/jHEwrZ0BW0UdjB7LxlbTz8BiNdzl+6IqFFhE20sIOUlbtrwOdyX0\n2kGRF8CJd0+RwEvxxrqGVe/OiXftbrTfe1hoQz8JW2Utmqs3OPXtA+AoWpdH\nwdedIN3y2naRCilo58YHE4E3o/Ssf9S6+pjLAZX9WXzFizvWSE84g4rv7MtW\nx9uCRBqfKNHueGMrWMIzNPPmTcLBJws4lBEYEqqs2x9ljFzlpiJLW+kf8zRk\ney4I8rfoyzMGKt5Sw8uycSU/xNM+X9zvDormMeQtnrJucW101JECmKZdlerj\nRIYsgD/O1hTs3iVDrFumnNttyJIEmwSU6zEAffFdMdxicgSWntbSY1qKj4oH\nTNWz6fLF2qiSk1l55KepAdhzjGGMrY+/+S0O3luskRIpRRgooYpahyeoVEH5\nqMkOvzWEu8M3Z72EZ95bLKiV7w4uAFI5y/dHgE3xNoRdi8mxiLr2dZdPRhjE\nd6bAPfk4515TO7zpCqkqYRAoCXVBhDDmzfMZTM7Ih/sjDooy5WtXxTmR3fS1\nJo3z\r\n=JOkX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrHcVWKE0nqZJ8iuxQlDo70+JWC4L3Ga7FQRfi6/IVQQIgbdi13PksbWAhlAtd6cB2/N41unWaIq3Xe4bvymCKCNA="}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_3.0.2_1580331568153_0.252796966589949"},"_hasShrinkwrap":false},"3.0.3":{"name":"@wbez/ferris-ds","version":"3.0.3","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@3.0.3","dist":{"shasum":"85286e2335d1724a7b48fb3a03ca25b6df5bd96b","integrity":"sha512-uj3gdvX8lGPCUvOltHSMxabgclD186qHlWwwztvN8H2rxG709ydCQnZLBNpmek/Exjl57/BYvxPCHr1LE/+7Yw==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-3.0.3.tgz","fileCount":207,"unpackedSize":773241,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMxbCCRA9TVsSAnZWagAAb2sP/1+Xiny/zQyZyvtjV5IS\nV+oCd4R0deNBJ2+B2YLkupv4fTH++UjLm0ow2wg7GOGGekUJmTnVHg+VZaQd\nqBh5SLfCMkYK5Qsfx52JFED2/eo+zPkpjdxrndlb7Ei6zZ8uxfCfbfwQenmt\ncdNDiCF6g1U7YwgzIZmhzlJ9nsW00b4NvjI96i6X+GazAiqXCSb4tiOh/1YH\n9A4AVdhAKbFYvZqJZ1WM4H6NO52FXCywvUVNjqDmkoxS8qZNCAsWmQqcFkTq\nAAUyjNp+7TfbkkNAofvYpELCYNBfl9qwVQDwHOfkopKF4NpOLksa++cxb1ZW\nZDKc2MQwYBGo0Vdr0QyD/tVevbJldn49vnz5/2E8U1FrWeEQ2+G4LR/GJyJC\ndwMuJy30oWD24doUz4w8SDtWF0s53+v5DcDw4Qa+tU4bUTiklstMpgKvEXmk\neJseMPSnlSlRcBx+AgAwW62+jF3E1cXPVm66KGMSbhE3mDmP7xV88gNkt3Fa\nXuq9IyaNnGGsfdvAZxLTOUDXAZV3B/ciP+wOV4svx03m2LjZUdn3wrjBcL7e\n+hl2R6iN5q/35s8G3KtJ3X8YCR8/N9POwmOhguLp5kwVNXBp21BdK0fYO+E3\naLVixmg0QOcTWUgJApHO1/kgByZzaShCk3FBLq1gbc5dt+UI60s7gGZKzt8g\nfu/6\r\n=ReIQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEfbO8E/uLd0lSOtgxEC5XhJ2fpa7Q16W8wXmMCywzg6AiEA8JnmgOZO1D9hdcC99yBVIsGV8W8VGAhKZwW6XZAxUNw="}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_3.0.3_1580406465638_0.24744373286049082"},"_hasShrinkwrap":false},"3.1.0":{"name":"@wbez/ferris-ds","version":"3.1.0","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@3.1.0","dist":{"shasum":"50104c2f4e6bac1c4729297aff0e160f23a35beb","integrity":"sha512-/p7FC/NKHnmxQWp+5jRljQAQAw0n9LFMsY2/msvzuxnYiVyHbw2ou12vYR0Qon9Js/+PjbdrlrPMibsptLVlAg==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-3.1.0.tgz","fileCount":211,"unpackedSize":818397,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOEkFCRA9TVsSAnZWagAAaKMP/1uIM+GA8OxSJwfcohC3\nkkjRrqtA845CLVhCvDfAvRYFwBa4UPSbcsZcoqJUuSR7Dfn11f8JUMyZ6eGM\nYvPI7uBfqtPXGOF3Gj7bm64u6zytc3eWP5fdBbnFeiNE8CTCk6s/KeYqBIsw\npO5CT95cYg5k7mk3Na1wNSyCwepMGYObmzO9v2JsDvIRvHuHqoKS4UZJWj/3\n8y7dJarEjBV4aZMKH+zeQXoC+7aTFQFCacAU7K3KHT5P+s67albLEzxNzssn\ndUi3pFEsKVsFIN1SM3etjpAywxqm4ENQMSmg7YuauzLljkserqsihk20Krpx\nMDWKbDyHBy7sR7fEcG1hm8wXwW7PcIXTqJn6nlpKf/FM0k99vHspfBCFcJic\nGryzBRPyzxIbvFj/kR/wm8KAGg8bbE/SMX+rZ7yFZ1Exwi+9LpfFGgjDUZD9\nS1axhF3NFWfG7EDyDhZVbaCkicj6V8kkyf3yxq5NVWCLHqruvtzYfVGDSPZD\nBg8juqTlDVgK6fT4uvywVd3V1y7CQfCbekOu3jUIv/2/ZNn7ur6w8o7nrVjn\nArqCk7v0pfPng2ruq3StHe88XmMuKPGVlB4BVWiUj3D5rDJLX13bXjKWDlHB\nUfiz6r/HxkyR6hyFwxRFABXrPHO9Vsm4JIJ96wjJaEsrTQipCi5T7RQsAq/Z\nRKvE\r\n=uL2P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHKgc2/iyzOHdearqSweKcTrXMAl841834MFJgZmCxMgAiAPsFphmChqJ4vziSbrntowXxVPPdaTqpfQKtCpltWzBw=="}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_3.1.0_1580747012855_0.5230865036064516"},"_hasShrinkwrap":false},"3.2.0":{"name":"@wbez/ferris-ds","version":"3.2.0","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@3.2.0","dist":{"shasum":"9b89716dc5939ff4b8f238d5257ede0db80de73d","integrity":"sha512-Z2EuQyCwyycxnKJWn7MJ/0Gu6B5brPk1uE9O0htkYH3syRWIn/EpgysMe9EbnXZBDR65qJogT29yrB1fWTzGXg==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-3.2.0.tgz","fileCount":211,"unpackedSize":818192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeREIoCRA9TVsSAnZWagAAcekP/2uZ8VwN2Qdk0mTXMOcq\nzp6DDbHMs+ROah+tmbVjVLBTiFkR/XtuINq2a96aHF2R/bSlNgVZDbK0ar8l\nugtkrcr2pWicFCVQWlQQwrA3LswNg2Pkgdk5+LrAWU+pr/cH059L3Cul+MTP\nYLK4BkEtbZw0N0c717gnzprg6PRcKVk7ndJ02PL5lnXcewZ+K0O4eBSzXn/R\nGJQIKHlkhP6daXFZ9cdUBbrcfr2CEHY8W4JJEwJ3DgG94waik58lva972y73\nbllz2nr1lP/KwHXdBN7ud3SedBUzx9CoEN5uztn0XhJDKw8J8kq1IDVApvh3\nEeL0HhYJm0Cc7oBboyjBK4iZNHV/0ouBrQj3gVfGWxqXLmQp479PIxOO3gSR\nge7aOHguPdVCJQ4kKaVjl1fMvpyFH/miwGxYILI6qzybgSqxlmDgXSVjV6EK\nChrBzYV8daVE8RLwbVVAFOpI+QGmq6QBhxxaoKhYVn6OKscdjDyqhQ88zRAA\nhpgftMYqdR/vFVmjyWDh8C0/TNeagXTzl4q2GZUn4KGA50zHdKHvZvuXDzlj\nw0cllBqSUwaVuCqXQuZDRVS+ndaNcmw6kyOFG3UGI5Avu4kEhahGS0nRK/ng\n5nbi3oQHdq4hnCiI8Y1KUBxaFNQ4HOApxYPnygaS2O3iIOGmWOExV7Nqx7mA\nXoiB\r\n=y9CF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDsO2/MZujo0LqKB2kPeTU6kv8LWuiLlv2G9E/41cYcqgIgS2ZXYvRXpu1s/QEqmn06/hXgp+GlHJvxsCgAR3DR0/s="}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_3.2.0_1581531688359_0.4082567443363889"},"_hasShrinkwrap":false},"3.3.0":{"name":"@wbez/ferris-ds","version":"3.3.0","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@3.3.0","dist":{"shasum":"06d425edce52c6c5a9fe3fa122fc8cd9c4475b7b","integrity":"sha512-5FhGYSI5BJqMY+hDkn5k4kmwK9L9XZVjP+b/RYpm/00Kfen/3PuwoYdfd66Ey6UDhMuF9X+4uYn9IjJkChxVgQ==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-3.3.0.tgz","fileCount":210,"unpackedSize":818170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTtAMCRA9TVsSAnZWagAAodkP/iOjUsmMrBbRImmxpqjG\n8vOKFcBeNWe6Ti1jIesBL+kCMJLc8BYc3SrOR8GxMVfeCTS+GbaDIk+eBqiX\nuCz1kLdZ/kEnKpMElR5y+gA7QgM3wwZljrsc/rTabr1E2RGDmeUHXQ2nmxuh\n63gyw7/PwraBMJckOz2iz/zJRpsbIGcqmxS/EvhxI832H5HL2JYQM95tQIJT\nJfm3hMRuEHRlA+dCjLC9fm/a1+jnkT3o0l3fNCkWWAYRSH/FBkoMteF84tyU\nikPjWHSC9FzF6hK4FOlHhi6P50yRWo6YTxImo8BqrP/LrOrspgWNSRyncuyv\nMWQfQYvvoDy3TXbMxAXxaY00G9PlvlzT3SAV1Da0f4D1oZE0v9MlyZzlpzdr\nkSHPzpjdiZu5nW4UmKZrvVQKWYG9ZcMK0K2wL7NkVnRB3conOOJmhgJq57uH\nHxe7qBJop7yFf/YK9vGAcr6l1OVTADp/SZa6Fvoxuqxc08Qh3dfmT25So/Kq\nspha61fDL38bGR7hLATIQcuDgJP6P4jXouNMqj20sc5lRsxyOER7LvUNbxcR\nq+zOnqBOmEM7Pd+N9Aab1MBMj+hxaV4wNKpjKoZP2OjfgyLkqqoy9AP+JB+w\n0B3HsQjFGm3/nIML+QaniAbxfxisfNyG/Sl788mozN39hbmDV2szRGSnXhBo\n1lgc\r\n=nQiK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFnqao87aYoURA/lunaRii7nnDQr6SJSR1qF4ZSGmvORAiEAguWJrQC5wwdoq/n4cbJ9YSt7kyKHwiNoYxDUBUmS0YU="}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_3.3.0_1582223371850_0.1719956759371568"},"_hasShrinkwrap":false},"3.4.0":{"name":"@wbez/ferris-ds","version":"3.4.0","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@3.4.0","dist":{"shasum":"16137d578872317595158dd5688dbf6af68be19b","integrity":"sha512-9JTKKypLSrriqFgjIQZncX2ABWn0DaUSABGucMsFhqKdUd0VYUvAEe+cmupFWX7gtvr3yQZWZsnvR69CFZ+V+A==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-3.4.0.tgz","fileCount":213,"unpackedSize":824663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVXRGCRA9TVsSAnZWagAAiD4P/idXqqTNi5b1n8O1ptGp\n+xHOZ21g63VBn/fj3ChqlCUFy3gE1GnD8F1FXr+aYEDtlPwpGxCK+JyDl/ND\nc9f5udMkICNCJV0r6p+2sTQX5yMKPoEfRsafBgZr24ZAFTrO4Hem9BMvxUFJ\n8GgIaJ3dRYih12C+aMkyDkcK7bA4kysVJr1T/vSM+AXwDy/Clcov1RflIU8+\n0MJIbuCqrHuFJ3xRpnqdXWVz+HXUCud0bqUrovTBRHgHcxEMCL/CeEHf9Xq2\n6B+7yOXDKWnshFrTlNefmIqlxecUb18n31jA2g2QcD4YeNkP0Uk/I8TEODMt\n1k9+n2fkbOfmzXNQ+DTOV0Laz6sfVVWTQ7FQoDtwsPoietj4xfw5F3Z5PByT\nSsAE9KxJZ3FD+OyBg/E9NSUca6PTuocB7P2Lasm+5w6WgEd4NuoHNSa02Mnd\nLfzfnlHa3mS8Z6b3JT5yxnKbd4jwkcr9NoFQUzwt23mYpHis7TdvrxKwGDy8\nGHlbY4u3p0aUI5iMQJkEv5AWc3UtRiZaAs8Kk4ao0+l9caBNFAwrLEZRoWpC\n2REjeFFEX5esRYg5qEL/qOL+nxyLP0jhTZHE1WHA+4cJhxvijz20fYl/PhKX\nzZfPWC14Drm7l38yKnaYVA6fZ9KGk3LMGwtYE2AO8iCr2l1G1/4r4S6vzlS1\nY7V9\r\n=ot6t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyH28Tww35djwKgX7bwSmsHkM9Fri8cSHmaXJIrdqBBAIhAM89xkI8NLycgYWu8nnyLr6IUvu8JmYFvvE98EZqE/vZ"}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_3.4.0_1582658629453_0.7924809809016351"},"_hasShrinkwrap":false},"4.0.0":{"name":"@wbez/ferris-ds","version":"4.0.0","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@4.0.0","dist":{"shasum":"674a1fa011a4eb6589cc7cd73086d1f6f0ea71b7","integrity":"sha512-ZHMYuHaDmuLNuAft/BmC1kLlY3qAFO2i122zK6werpjxM3OnWB1QnzV0OV813pdUsgBGlbIU2VZ6YngDa7oc+g==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-4.0.0.tgz","fileCount":243,"unpackedSize":853644,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZnreCRA9TVsSAnZWagAA740QAIfZQEaDUSGjHTAgalTR\n/rFTZcF9/2CLbVeBiyHqj2O/a7ldgJsQClSlmtUz1vpByCKjyoKWoXgJG8Wf\nOZWBRaf8MtYazlY6uY//h6N6zkK2f74DlEYf1v36X0IfV5HY0guc/iiMqY99\n6iC14qqwmrvDJlFAF3Y9Qq1qbd6EEjgygJAJ+aHEgQ0JMD04U+b35g0P7yps\ngBfLB57sKUUkaohxIVVU3vXCIYR325FRlOm4J3qwBmdMIO4a6wldg+Iy7WWn\nHOA6UD33owBMYOoXVKDbjKPR5YhViTBRye+rlhyCQbwNc6F0C4N24LBp1sUY\nzu5JM/LJ2nZNdNcxiGjTvlwOhGvxxinSIU1AMN0LH1ni+i15+GnRXhmc+Izk\nJSnrw5oKamiK0WJLmNdIMYKs1Dl1JDEAGhIRH+o8BCyXVBM4PlUSlxfoqZ+U\nPUTOmfb+xWU4RMuwMVKiuOvXzbLASgn8cYLuAVGa13mKvTspv5nUbAd0dkUG\nQwLlSvdYdESjPPPWzishw0akw4HuXvYNR82n+58hfXQqHSGY6QZxkGQ11Ykd\nkX6LidyB/M4N6+vDzGivN+5+1YfIrGXNrfmUGlJxqmecZcORNYu5OVu6ECWX\nKcVeCUT9isYHB7KMzpzgEPixzFTFZC8gmP6JXcTqFz7ag9MVtNt4tzK86nQ4\nl9Ez\r\n=MrVK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEDTaSZuAtutOznyISkEr2PUDS37S5dAIeHmxMoDB1WcAiEA7/adZ/xwZsS5PByY6udDbr5XMAfwcFH8m1c7eDFr+B4="}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_4.0.0_1583774430313_0.18038603502716843"},"_hasShrinkwrap":false},"4.1.0":{"name":"@wbez/ferris-ds","version":"4.1.0","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@4.1.0","dist":{"shasum":"01f19dc820b58bbed036025b2570886a7d8f7057","integrity":"sha512-fFkL1xbKoJZuWIxmpM4eo1Z4flSmcZjeOXyl7iBngD4Wd+5QTOPbZvj1iC3JHdgbwQ03Gkf1v7wK/UwHFaAbbg==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-4.1.0.tgz","fileCount":261,"unpackedSize":1071961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee14GCRA9TVsSAnZWagAALJUQAKDVss9DXGp4xQ5vNa7T\nHfrUxCsIxA+1ALX2u3TgUz65QR1fdylOXAkS/AtWHCa90Vo5eYODUJygoiTl\nnE/QyN2/+DaTRld9AAZodqW77EtO42HIxVT3TbV+n2jyKAuusK1EOjNDFAS1\nDpb6QPJRFEvmde2TbOJ4sY2bg7uPtXbiWZgtgkAzjjhgoDIE7kMk3zj4dauz\nGvxqoOuMUwSy4A68jPxQrsyO2bu3z/znXKL1k6aXF/rmmpU5ek1DshJ3Fg/d\n96uq3PcGLy+HN630xJPnprYNz474RQWlnz+/xTnIuZxEEp0ssI6yTAMSG8i+\nOKCgLgO/2ko3FMYNBJI2R9Zj5DOKlFZ2vrndvNRcTEv6stu5hxZxzf/mTkgH\nDb68AVoBtUM5HaLQmKaMGas4zhwp1+EbfBJudacpDapVeQCrkbcC45L9v2Ws\nyi82ExPQBoHh8vAMosN76uHET3JzBa+52B8WikPFMVjUI4dBf8/Ddp9jLB6W\niBc5GyKQKXYm2DjpMsJsQ7WxKojlQ51BgSWgcJHZfmgny6dwQuh2cw7+++Nk\njS39QLtu1mq73v5nd+5nSOaDp9A6Sbn6r+gL1CKwP+arR6d6RNWw6VQIMks1\nsIM6sC7+FJAHnlc0qJqk0kq36+oSZ/ZAiDPKjBeyIIxbEn81UdTCA9M6mm4l\niVCd\r\n=AQYC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYlLCL/bhGf7xxd6pHoP/U110xrJcQlW3bJWHARynL2QIgQdfxcSnnAEv9alYRI4EErpyrpIrGNWXPiKV9RQAaoQ4="}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_4.1.0_1585143302009_0.5040015999449283"},"_hasShrinkwrap":false},"4.1.1":{"name":"@wbez/ferris-ds","version":"4.1.1","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@4.1.1","dist":{"shasum":"258b34f83ca0b152c67840ca0eb60ee0a9796cf8","integrity":"sha512-J/fVE53G+O04Em+eiszvziBFBNnr9Y4Hwy3Nt8V9G/GnNtvbSrJ/EV1DgZqc1Zyybfboz2KpFtJPNjW0b1pteQ==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-4.1.1.tgz","fileCount":265,"unpackedSize":1079884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee2DLCRA9TVsSAnZWagAAkwoP/RS4TN8+ouEA4HTyyQbK\ngJSlV1ux09E5sjbYj/GsvYdB7+lYa8uzYR/N0ejqbG6e/N8rr54TwK9KdA80\nRJ/b8GkEETY852ii+a2pyVKE0NLnJrAhW2lHZyiiF+AvWiYHUZFGtW6/bWI/\nfQfqGhBreIlhT4ZELNhJHyFyM1eYLnNy8afrPIA+BKIFI4CdziBLLZM7wUBr\nNUKdVbdCWbTR0QN+/JE+DNIrgIC/EFgn5zSYootGGmOweMHOWYBppNiZ5k+L\ntrtgaoJB5kcbbFkwdKdUvzZ0uMj4qDdbxEARmRYpqhdXc6GE0Bj5DGqoXbT3\nGn4knhUzbEBld+wynH5YMFZi4KKRNpccisayHngtKCvuxWtCYu4y+ZdCmDpg\ntpD15/0iCELvAVtmNTMO8WNADaebYd68I2TyakIGna3hkAyT0V101kHgAKXQ\n8mNzJ+jDhAnPOMdLhDYnLdXggu21Cye08aEP02hTSZgFYNha226eBBLqETak\nqzNjH0hyBVbZBzm69qzgee5CiXyMOZhwWfdSyosrB2M9ddV7/0gaeXw9wEQa\nPdA2SRtky/hBQvQiZ6gR5hafQhFx1CilmZ+6tXYkU4zgcI0A2NJzgZp+oGA8\nw/dGn4B8l83mxefkF4g89gA7XbEO3+la92Uw4ZNik4wJv2jvQL363hjjTbQu\nnK2D\r\n=utUU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAeKDl2vEhOVQqS33MLca+zv7BrLbda0oC41pYNtBZmlAiEAnrqrx+jhh2w0v0PyXpi++bd3ryQDwxhLC1cnWUj1wvE="}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_4.1.1_1585144010871_0.49576829158661884"},"_hasShrinkwrap":false},"4.1.2":{"name":"@wbez/ferris-ds","version":"4.1.2","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@4.1.2","dist":{"shasum":"d0b316a3e922ae63446a2603559287c7946136a5","integrity":"sha512-GNXdWH/rZCxGbH3rGsWRHpbzJTx47pibDwJ2ShKbgN8PYt20tQLQHlbwNZ7WWnmFfwDr1xkAiJlZ/j4kOnz1QA==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-4.1.2.tgz","fileCount":265,"unpackedSize":1079953,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefP91CRA9TVsSAnZWagAA6iYQAIjx8RcbfPopw+TdVmCa\nR/utRgyHbL3mzXtDSwxe5U7+n9STDSjoKBiuM5B1cdcQd2uXSPAEPCVHV/01\nyoSI6zivZfggFJQkH3NibwxtkqWis/9+k1Qk35XgKwTuMx1xBKWSEc0UWJ5J\n14WhSkkcMLaoTQ8ifxAnDIj6FjNWmHXpIYacjt20RBz91fRSPI8G2xd4Swck\n2ydEHpW6upQ3FCXHm42rmfd6y7ajOtkk5hp7J9x6RXTusNmJ1mxjTzc5A5ZJ\n+q1LEZWp5LHHaGcdFL0z05LoN/0H57qSRsRu+1k+xog8b4ntWWwFNUlkz70j\nzSHFS28SFsQpySPC9f/5VEeS966QxWHEVb4Lxfcu+Xy6a3BheWEioH3M5UnQ\n2aZ+UThGrYyQmv9wETw2POVbaASz/21kMnOKKqQaGYV9d8UUww2jscRSgkx0\nCVO6vbHLFixE6lRxFzOozS5h1P5kw1XJJRzVr0F7XyqVnjgBwsFEVUDtu72v\n0lokL5tq/hkiDgs9H1OHgC2l5FomGgVRvIt+43zFepGCdYCsH06Z81xu1TBE\n17uGZIhk60TOOSyKrnLnqrAnADs8FAfcjENUQIYuUHfdsWqC6dHgUJ6KfyrK\nJu3Vd+Sa6Vt3Cyf0pGm0C9pra9oTwDFdcZsIRlx6QInxuig4NTXemnd7OLjg\nCMwa\r\n=bLpM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0gPFfEfL8bmWWIAFzLpK5PKqdZEPkOiRNDCyCleY3hgIgKewKi+X/0KN/YoV3VySKd04gq5WIGSC0Ef6L0vc3V6w="}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_4.1.2_1585250165449_0.7405715365304977"},"_hasShrinkwrap":false},"4.2.0":{"name":"@wbez/ferris-ds","version":"4.2.0","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@4.2.0","dist":{"shasum":"be8f75f4ae895d650880eca2583d500c57d77c50","integrity":"sha512-9Bp0VuiOo4feEimjSB2qwFMK6dxicxfqV7wZ5tYN1rKrXYOvXvX6uxkSBOb1Mn7DpjU00qLDJG0OMmBf+AaUyQ==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-4.2.0.tgz","fileCount":266,"unpackedSize":1081863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehLClCRA9TVsSAnZWagAADYMP/2BT5pjV4yTn7dAwAG3U\n8Y5EP39Zsm2XqzdHr6uxyAu4TzrWs23o6/JYBNUWnaiVawSAOsOz2WJp+b2S\nXlEBVm4fGP6Pp5CwLr1p/GRiOuIKpvKN0KPpEGd2uW2Mq5aegS8RMo0DL9gr\n7xCxtE6WEVLxYcRYg4jyuadYTlPf6of3Lixxg7P/oWzpwyMe/O1d0quROqAx\nK5qMFsyWbNn5lCXkGYyc5akBuZR5oNaEoZD4LyRqMtnD15R9eDU4T36ENZ3v\nqjfcQ86RszmOCcw7fcRJMnZ9N7BPUxaDlN7/rjMkuSPVKRp5KUiGV7w8LKhr\nr+/28lNE8nAaRXYLBlAVnB4V3GxRLIslXoYYye7OvtotUhx94Ocgycbi+HEw\nkpviPGMvyMO8Jnisw5xzFQ1zSE7dcESexm+oVNlrv6T3kZjAchJ66IrxIsVp\nTWM7HhWUYIuhz7mBuKCTayjajbv79iyYIDnkIhHOhfnBH8p5PFqK79ee8OrI\nwUrvHjA+Cc9um+lyBkh5F4wKu7cUqf9tW94afDFKhznuCF/nC2IITAyu75AZ\nnuysvItX682iIqHiUsif6N6nS5BguxeXf8ApBrl41yYmqTDnZqmxRpAlR2ej\nQOcIqX6g2Pv+D5nAB0wD08CUHXauxMDZ2p+Op/rXHBLH/BN+PKcFAA7Ak5nD\nYuiP\r\n=OiQf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICM3Yvf2zMjYEfbuNVoRHJNhj814vmDxnqXv396k558DAiAwSR4rMDwWKds4YS3hsxLBfE/IcDl3HepBpoe8+ZxE/g=="}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_4.2.0_1585754276754_0.5809684664305703"},"_hasShrinkwrap":false},"4.2.1":{"name":"@wbez/ferris-ds","version":"4.2.1","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@4.2.1","dist":{"shasum":"c4c21bd25acd3041fa4f7fd9aec1945a6a2f2309","integrity":"sha512-InWPfA0ZISUA7jCYBCMGlQ4BriKkYCdTd6v7SMldVkGUsiWSNmmyO4tKd9Rfgl2byaBmRhI0t6CgkKIru6O6ZA==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-4.2.1.tgz","fileCount":266,"unpackedSize":1087316,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6YwCRA9TVsSAnZWagAAYK0P/2bJqadTasGl3KTuwsjG\nSyW8p+Zrl0l+aFFzGHsMLtd4+f2pslwUZ1K0kWKzmzzPTfK3phBgtH45P25x\ntnmm1jCWvsPQsAHIc5k5KhSAIJwIfZ5dybcDnhqcnSNCSRktk4Fah4xlAL1y\nwV+4mLW9ZqbXoVnjLE4vDZ+65fmyoXDKE1SZ/JE9itvJppz875vaLEFhCgyi\nGts7+JJHU2LalX3Xr0BJgVOynnJ2MisD/V+kwp0+etmwnCnA9P2nmMWyj7cc\nSh1SEd77Yk2YYkB1gLQ6fmF9ASLlhEehUEkNPffBJXSVNcKvZYW62zGl2B0+\nnRs1UHMtwEf5mySYLjfmuoCSBO2rVh9ahxwHTiwuDFFYQEA6kB5w6jg7d4kW\nmtwzq12qTnUOJwLs+0PGX/AsDxdcjVTqTSUEXvxXoL/IwCZwzFB8MrWABrih\nWMPQLQyVxNuOE/7Q1tP0VtpujgpXPh+NfRDrB+n0y+24h6FGhyxxua6YVVax\nIToQVW2dEuV9DwqMRPtwdHeBgqZmrfo97bRZVY0dGHa3h52jNua503NUb1gK\nYZPH7IOyyp14ThAwuVAnYfWCobN9yuCxlOPRsgnXS6vaYF22vGOgsSBj+ogG\nFOzx9m0O8DP/teEs1rplkCNQoPHBR0Qj5IfwsmRkqIjfNVkyyiEBxk1PFjhX\nDZBy\r\n=FeGm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHGdD73t9EnJLn6TJKQuDJfcLuV6mHjt4d1X5vVmElBgAiAuKmyauusueKOdPBSbN2q9bQ8oHJkxwvDhaO7WrIg/iQ=="}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_4.2.1_1585948207949_0.04757822465827788"},"_hasShrinkwrap":false},"4.2.2-0":{"name":"@wbez/ferris-ds","version":"4.2.2-0","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"readmeFilename":"README.md","readme":"# @wbez/ferris-ds \n\n> Centralizing styles for product development at WBEZ\n\nThis repo contains a library of styles and icons available to import via npm.\n\nAlong with the library, we set up a few tools that help document updates. CSS comments are parsed to create a JSON object of documentation. That data is rendered with nunjucks to give us a visual representation of the various components and rule-sets we're building.\n\nOur goal is that as we iterate upon the design of our products, we document everything along the way. This keeps our **style docs current and allows for continuous optimization our CSS.**\n\nThis repo is forked from [texastribune/queso-ui@v3.2.0](https://github.com/texastribune/queso-ui/releases/tag/v3.2.0). Much thanks and props for building out such a great base for us to launch from.\n\n## Index\n\n- [Getting started](#getting-started)\n- [Installing as a dependency](#installing-as-a-dependency)\n- [Using assets](#using-assets)\n- [Folders](#folders)\n- [Adding to the CSS framework](#adding-to-the-css-framework)\n- [Using this system in our products](#using-this-system-in-our-products)\n- [Publishing](#publishing)\n\n## Getting started\n\nTo preview these assets and accompanying docs locally, run the following commands:\n\n```sh\nyarn\n```\n\n```sh\nyarn dev\n```\n\nVisit http://wbez.local:3000\n\nThis spins up a browsersync server and watch task for all SCSS and HTML files.\n\n**Requirements**\n\n- node >=8.11.3\n\n## Installing as a dependency\n\n```sh\nyarn add @wbez/ferris-ds\n```\n\n```sh\nnpm install @wbez/ferris-ds\n```\n\n## Using assets\n\nSCSS\n\n```scss\n@import '~@wbez/ferris-ds';\n```\n\nCSS in `` via CDN\n\n```html\n\n```\n\nSingle icon\n\n```js\nimport linkIcon from '@wbez/ferris-ds/assets/icons/wbez/link.svg';\n\n\"\";\n```\n\nIcon using spritesheet\n\n```jsx\nimport icons from '@wbez/ferris-ds/assets/dist/sprites/wbez.svg';\n\n\n \n;\n```\n\nLogo (CDN)\n\n```html\n\n```\n\nLogo (direct)\n\n```jsx\nimport logo from \"@wbez/ferris-ds/assets/logos/wbez/wbez-chicago-logo-oneline.svg\";\n\n\"WBEZ\n```\n\n## Folders\n\n| directory | description |\n| ------------ | ----------------------------------------------------------------------------------------------------------- |\n| assets/scss | Various SASS files establishing our CSS framework |\n| assets/icons | Sets of individual SVG icons used throughout our products |\n| assets/logos | Individual SVG/PNG logos used throughout our products |\n| docs | Tools and templates to statically render documentation, code examples, and usage info for our design system |\n\n## Adding to the CSS framework\n\nWhen you add a new class, component, scss variable, mixin, etc., you'll want to add a short bit of syntax to enable it to appear in the docs. Use the boilerplate below to get started.\n\n### SCSS docs boilerplate\n\n> How to document a new CSS class\n\nWe use a comment parser along with some [extra logic](https://github.com/wbez/ferris-ds/blob/master/tasks/style-doc.js) to generate our docs. To add a new section of documentation, add a boilerplate above your CSS rules like the one below:\n\n```scss\n// Title of Section (root-class-name)\n//\n// Description {{isWide}} {{isHelper}} {{isProse}}\n//\n// root-class-name-modifier - desc\n//\n// Markup: 6-components/test/test.html\n//\n// Styleguide 6.0.1\n//\n.root-class-name {\n}\n```\n\n- `{{isWide}}` is used to display the demo of each modifier at full width\n- `{{isHelper}}` is used to hide main demo and only display modifiers\n- `{{isProse}}` is used to wrap the demo as if it were in a prose container\n- `// Deprecated` is used to signify a class to be removed.\n- `// Experimental` is used to signify a class we're considering.\n\n**Deprecated** and **Experimental** are named per [KSS syntax](https://warpspire.com/kss/syntax/).\n\n### Naming and organization\n\nWhen building CSS dispersed on a variety of platforms, it can be difficult to know where certain style rules should live and what to call them. We use the following guideline to help with those decisions as we scale our framework.\n\n#### ITCSS\n\nWe organize our SCSS files with the [inverted triangle](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) approach in mind. We put our own spin on it by adding a `typography`, `layouts` and `blocks` folder, but the general idea is all the same; increased specificity as you move down the stylesheet.\n\nSee also Brad Frost's write-up on atomic design for the rationale behind composable components. (`components` → `blocks` → `pages`)\n\n#### BEM\n\nWe closely follow the BEM (Block Element Modifier) class naming convention in our `components` folder, but we break BEM rules in other places. This is a deliberate attempt to create a hybrid approach of using BEM when scoped to a component and helper classes when styling globally in a more ad hoc context.\n\n#### Namespacing\n\nUse namespacing for quick reference of the function of a CSS class. The following key can be used as a guideline for naming your class:\n\n---\n\nComponents\n\n```css\n.c-component-name[__|-<-modifier>] {\n}\n```\n\n_Example: `c-button`_\n\n---\n\nTypography\n\n```css\n.t-type-util {\n}\n```\n\n_Example: `t-headline`_\n\n---\n\nLayout\n\n```css\n.l-layout-util {\n}\n```\n\n_Example: `l-container`_\n\n---\n\nBlocks\n\n```css\n.b-block-name {\n}\n```\n\n_Example: `b-site-footer`_\n\n---\n\nUtilities\n\n```css\n.[is|has]-state {\n}\n```\n\n_Example: `has-bg-yellow`_\n\n---\n\n## Using this system in our products\n\nThis system is experimental and under rapid development. Use it in situations where it makes sense for the scope of your task.\n\n**Do** use this system when...\n\n- Coding a new template from scratch (new landing pages)\n- Creating something in a isolated environment outside of legacy systems (newsletters, new static sites, UMP)\n\n**Don't** use this system when...\n\n- Making a small CSS change to the legacy system (tiny visual tweak to our main repo)\n- The system creates an unnecessarily layer of complexity (take the path of least resistance)\n\n---\n\n## Publishing\n\nMake sure you're authenticated for npm publishing.\n\n1. `npm login` - then follow the prompts\n2. `npm run release` - There's a [bug](https://github.com/sindresorhus/np/issues/420#issuecomment-499273013) in the `np` publishing tool we use where `yarn` commands don't seem to work.\n\n### Semantic versioning\n\nThe npm helper we use for versioning simplifies matching version numbers with the various `MAJOR`, `MINOR`, `PATCH` increment types. For guidance on what type of release you're making, refer to [https://semver.org/](https://semver.org/)\n\nGenerally, you could base your increment type on the following list:\n\n- MAJOR version = CSS changes that visually break layouts where `ferris-ds` is used on production\n- MINOR version = CSS changes that have no visual effect on production\n- PATCH version = CSS changes that fix a previous bug introduced on production or in development\n\n### Deploying our docs\n\nOur docs are automatically published from the `master` branch by AWS Amplify.\n","licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@4.2.2-0","dist":{"shasum":"aa8859aa77cf407761c6e93c19449080e4642952","integrity":"sha512-f4tai4GAC64VVkSkg/IIMtVnJwmsCaznqk+YhJuhpG9UuWBFW9BlEV42pwDSunvdt3t4XS8D3+VkeUpvs1cD0w==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-4.2.2-0.tgz","fileCount":266,"unpackedSize":1089732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekKpiCRA9TVsSAnZWagAAGRAP/iqyS49shaLyVe2QQNhL\npi1Tt7M2OmZEYPSX76aK/fCfguA29cgDLXdUwS0i6crAbB7EWg4K3ELebYqG\nGvuF7KjZc4+jHx0Wvf64yXZYoUtd0NMeaZ7SYwiccOn/h3tdAIvIhaa7bXgm\n2CKEyY8ZNNtWwEMI6SoqGWU4160KnRtWR+VqSMiii8IDioUd7RAoLwQS6DJL\nroJg5QSYaQHLqLMv5OzYpRnWfuI+0ZYoRbsIA4m9dBI7NFqOsIAh8i8bAhs7\nvQpdRK7tjNYkQEJgVuUh11sZnay31q03HH6BcIzJ8ENxpmGU0894TmVkQI3s\nmDRDmQ7Vj3/5prqNKwdNdPeBPK7Lw3cPyRRduHDPcDKexfKsDMz8t1a+CVri\nUZZt53HSsXZuqL7cClx55kDqP3gwkvBFTt0NVjiAoq62eNOBQyJro4vhAqgZ\nBNF0ywv+JodEv6+t/jpoV+W9R/ppMbUl+DoA/42a0JGVWm5WgVouSXoLzLQ3\nRxRcWRbdMbcBB1Iehs9mf7j94HkPU7JG2GKK2hOzZQySFgiuksC1S5e1Qb4H\n0hl0DXGUCTY+XZjFQycX4bQtJgW8y8cAI/fhz81+Bo8SV1beQ4Uo1BVhd+vA\nvbvFUKhPDs8WM3hwA9Ef5sRrI1SFDEAIOmX2LM78yy4ew2NHWOLubPQUL0GX\n832C\r\n=SNri\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6LcYbxrMreKwDirb7TO641GSfqzCS8Vc7QISDwaTXEwIgJqP7+Dki2YyHtaead9w8jJmAhUn0ajx4LZZz0FzUReE="}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_4.2.2-0_1586539105446_0.06503732419249286"},"_hasShrinkwrap":false},"4.2.2-1":{"name":"@wbez/ferris-ds","version":"4.2.2-1","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"readmeFilename":"README.md","readme":"# @wbez/ferris-ds \n\n> Centralizing styles for product development at WBEZ\n\nThis repo contains a library of styles and icons available to import via npm.\n\nAlong with the library, we set up a few tools that help document updates. CSS comments are parsed to create a JSON object of documentation. That data is rendered with nunjucks to give us a visual representation of the various components and rule-sets we're building.\n\nOur goal is that as we iterate upon the design of our products, we document everything along the way. This keeps our **style docs current and allows for continuous optimization our CSS.**\n\nThis repo is forked from [texastribune/queso-ui@v3.2.0](https://github.com/texastribune/queso-ui/releases/tag/v3.2.0). Much thanks and props for building out such a great base for us to launch from.\n\n## Index\n\n- [Getting started](#getting-started)\n- [Installing as a dependency](#installing-as-a-dependency)\n- [Using assets](#using-assets)\n- [Folders](#folders)\n- [Adding to the CSS framework](#adding-to-the-css-framework)\n- [Using this system in our products](#using-this-system-in-our-products)\n- [Publishing](#publishing)\n\n## Getting started\n\nTo preview these assets and accompanying docs locally, run the following commands:\n\n```sh\nyarn\n```\n\n```sh\nyarn dev\n```\n\nVisit http://wbez.local:3000\n\nThis spins up a browsersync server and watch task for all SCSS and HTML files.\n\n**Requirements**\n\n- node >=8.11.3\n\n## Installing as a dependency\n\n```sh\nyarn add @wbez/ferris-ds\n```\n\n```sh\nnpm install @wbez/ferris-ds\n```\n\n## Using assets\n\nSCSS\n\n```scss\n@import '~@wbez/ferris-ds';\n```\n\nCSS in `` via CDN\n\n```html\n\n```\n\nSingle icon\n\n```js\nimport linkIcon from '@wbez/ferris-ds/assets/icons/wbez/link.svg';\n\n\"\";\n```\n\nIcon using spritesheet\n\n```jsx\nimport icons from '@wbez/ferris-ds/assets/dist/sprites/wbez.svg';\n\n\n \n;\n```\n\nLogo (CDN)\n\n```html\n\n```\n\nLogo (direct)\n\n```jsx\nimport logo from \"@wbez/ferris-ds/assets/logos/wbez/wbez-chicago-logo-oneline.svg\";\n\n\"WBEZ\n```\n\n## Folders\n\n| directory | description |\n| ------------ | ----------------------------------------------------------------------------------------------------------- |\n| assets/scss | Various SASS files establishing our CSS framework |\n| assets/icons | Sets of individual SVG icons used throughout our products |\n| assets/logos | Individual SVG/PNG logos used throughout our products |\n| docs | Tools and templates to statically render documentation, code examples, and usage info for our design system |\n\n## Adding to the CSS framework\n\nWhen you add a new class, component, scss variable, mixin, etc., you'll want to add a short bit of syntax to enable it to appear in the docs. Use the boilerplate below to get started.\n\n### SCSS docs boilerplate\n\n> How to document a new CSS class\n\nWe use a comment parser along with some [extra logic](https://github.com/wbez/ferris-ds/blob/master/tasks/style-doc.js) to generate our docs. To add a new section of documentation, add a boilerplate above your CSS rules like the one below:\n\n```scss\n// Title of Section (root-class-name)\n//\n// Description {{isWide}} {{isHelper}} {{isProse}}\n//\n// root-class-name-modifier - desc\n//\n// Markup: 6-components/test/test.html\n//\n// Styleguide 6.0.1\n//\n.root-class-name {\n}\n```\n\n- `{{isWide}}` is used to display the demo of each modifier at full width\n- `{{isHelper}}` is used to hide main demo and only display modifiers\n- `{{isProse}}` is used to wrap the demo as if it were in a prose container\n- `// Deprecated` is used to signify a class to be removed.\n- `// Experimental` is used to signify a class we're considering.\n\n**Deprecated** and **Experimental** are named per [KSS syntax](https://warpspire.com/kss/syntax/).\n\n### Naming and organization\n\nWhen building CSS dispersed on a variety of platforms, it can be difficult to know where certain style rules should live and what to call them. We use the following guideline to help with those decisions as we scale our framework.\n\n#### ITCSS\n\nWe organize our SCSS files with the [inverted triangle](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) approach in mind. We put our own spin on it by adding a `typography`, `layouts` and `blocks` folder, but the general idea is all the same; increased specificity as you move down the stylesheet.\n\nSee also Brad Frost's write-up on atomic design for the rationale behind composable components. (`components` → `blocks` → `pages`)\n\n#### BEM\n\nWe closely follow the BEM (Block Element Modifier) class naming convention in our `components` folder, but we break BEM rules in other places. This is a deliberate attempt to create a hybrid approach of using BEM when scoped to a component and helper classes when styling globally in a more ad hoc context.\n\n#### Namespacing\n\nUse namespacing for quick reference of the function of a CSS class. The following key can be used as a guideline for naming your class:\n\n---\n\nComponents\n\n```css\n.c-component-name[__|-<-modifier>] {\n}\n```\n\n_Example: `c-button`_\n\n---\n\nTypography\n\n```css\n.t-type-util {\n}\n```\n\n_Example: `t-headline`_\n\n---\n\nLayout\n\n```css\n.l-layout-util {\n}\n```\n\n_Example: `l-container`_\n\n---\n\nBlocks\n\n```css\n.b-block-name {\n}\n```\n\n_Example: `b-site-footer`_\n\n---\n\nUtilities\n\n```css\n.[is|has]-state {\n}\n```\n\n_Example: `has-bg-yellow`_\n\n---\n\n## Using this system in our products\n\nThis system is experimental and under rapid development. Use it in situations where it makes sense for the scope of your task.\n\n**Do** use this system when...\n\n- Coding a new template from scratch (new landing pages)\n- Creating something in a isolated environment outside of legacy systems (newsletters, new static sites, UMP)\n\n**Don't** use this system when...\n\n- Making a small CSS change to the legacy system (tiny visual tweak to our main repo)\n- The system creates an unnecessarily layer of complexity (take the path of least resistance)\n\n---\n\n## Publishing\n\nMake sure you're authenticated for npm publishing.\n\n1. `npm login` - then follow the prompts\n2. `npm run release` - There's a [bug](https://github.com/sindresorhus/np/issues/420#issuecomment-499273013) in the `np` publishing tool we use where `yarn` commands don't seem to work.\n\n### Semantic versioning\n\nThe npm helper we use for versioning simplifies matching version numbers with the various `MAJOR`, `MINOR`, `PATCH` increment types. For guidance on what type of release you're making, refer to [https://semver.org/](https://semver.org/)\n\nGenerally, you could base your increment type on the following list:\n\n- MAJOR version = CSS changes that visually break layouts where `ferris-ds` is used on production\n- MINOR version = CSS changes that have no visual effect on production\n- PATCH version = CSS changes that fix a previous bug introduced on production or in development\n\n### Deploying our docs\n\nOur docs are automatically published from the `master` branch by AWS Amplify.\n","licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@4.2.2-1","dist":{"shasum":"d56b814aff1fb4f4ea4a061b9ffb35da484a3267","integrity":"sha512-tqsokeJ8Uyj3+qF6U6VCZ6xKDZXYu/S30/f8HF/V/T1tdVD/Ezh83AoK40PZ+vEpb3biad1Do85zO8lOsAQRHA==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-4.2.2-1.tgz","fileCount":266,"unpackedSize":1092174,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelJ9JCRA9TVsSAnZWagAAGtAP/0zLoUqfDkU5GrTYjA/9\nWXzhHljYluwVnuRn/3CAsH0z1tPaYvNZ5KBmmrczQ+o82acOs5SfcLB/Uz8u\nkfZ6hQTjMv67KBU7lo1mtxxmPfC69/nI0V5DHcg8+9Aov3CWXAohhcVgLzda\nVrITa/1VLPlZrx9wXqMjXDPrjJH5VQXxmimPiBgsxLrzchZ2VtldIpGa2kJW\naEYnuJ0xcmZD7ux5uSIboAbcE0VlqpwqsT+kJgaiYuhDZd4DgvzosfPsUP5r\nQnNqWOmdIbwAn0/ctekKp5qUL0pZXM/CSxS5FHTWlF1jLnnS8CDpuZHRaI7k\n0aChadAnrbCyF/J+Gs7Cw00s8QYnPINURy/jhQNJgfQ8sjq3bVT/eNxV1sN/\nGNjZpg5pgJ/PD1s1vCtABzFgXVKtA0jFHuNUv4pNDV2oYFQ9Rgpeh25a+GLQ\n86ukZAZrcIJoatWJMzo3V51civZPVPQLheCUBfgYIEiYbG2SE1+gpMwJqvjr\nITTCMMk3RgVWyw+sQtYEpQFsA9atP4vM6O6SOOFrUhj3x903hmOTIWzhKZDS\nDePE60SicnelrtWFNwccTg9BD0HmI3mkIincErybtUsVdRRGdOy50lpvVCU0\n8suk87imTC0TvsvTiptJfwa/JbVuCdEQI8CtDIgugGAGT7jlQiMpqUXubmaB\nbOD+\r\n=RaYH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB4pw5tExgPxqKOeHpSxQEoCBQHTZI8L25FPcgSDXH/ZAiBJ19qzTgv9RI4lVxpOuDLRaiO/4O0LpT/I9IqX+M67ng=="}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_4.2.2-1_1586798409116_0.9224832836176495"},"_hasShrinkwrap":false},"4.2.2":{"name":"@wbez/ferris-ds","version":"4.2.2","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@4.2.2","dist":{"shasum":"1bfd964f34f88df856f101b6d9c0907dabd725bc","integrity":"sha512-xiJ/AYDNvaqAPM0xs+KYHb6/N4DhQGjhs4XJO//ojvGrCu6b1jeT8egUd1hy9tIlBIzNjGIymk2DU1T8LhblLQ==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-4.2.2.tgz","fileCount":266,"unpackedSize":1092172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJene4JCRA9TVsSAnZWagAAwHIP/AntBoNS3peIyB5pwntE\n/hoelIndvGc7RNY2MfeYX4sCqvwCgITETWjfPzcbhqr0MJJRXKXyE6Rk/ZX7\nbn77HRO5i59gIg5q5P3EbligoPHnbxT5lbii8/wX58vSpqj+zN1ZQtxf4HQ/\nBz6PLcIjdxcVLdy7T2dAMkR7jE0fUt9DFLDW4F0EZurpZ3L2Bg1/mTd8x68j\n9zsfiRH0XF0nRNWPDQ2mUSUe6HHzPZuugkWUaZySMchPdsAiI4bXsjMOq7Kc\nJKDvT2samkh8DEf8uiaDA0he/iTWVfKcciWWTj3i5ivBk0OOx2ni7ZpJ8Gxb\nQuQhaJIN4ABROM91RUG0vp46yZ8P2IHadr911MZjNbszx+P1dCXllilQxuFH\nGbGDDXzwiqD8/uowukPC8DEumRui4aT52IZQn9bdJbaRYs9bJz2h8rHDWuN8\nUvcqYCaqTDIeLQjB9NYKYJLbyAFFh2eB8YE9CBA8TDMGrkhzaFeLsEChJhQY\nkU+WhyR7myUHF1PxpkdKhulnL6NujYQgPggAdYjHrNUnhiBIDHjjYyvnS4cR\naUZ1MYPk9McuD9QJ9TJb04O1jZaldEG/vDaL/ErjZQKmX7/V6u1jIdeRR9kE\nFwpaw37gfpGlCFSTvkHNuBXkMJBwxvwjarttzsOu1PmEctLyIvmr5nPzQUS2\nhknO\r\n=uQ4H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEmqLSd7P+MDIO1+NQG6//fXKt8BFnzcUBoHrBeHEjDYAiEAxsOJeo8WGPDhByAi7Sfjz6W/49xJrMdWvx4XrwUbOoM="}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_4.2.2_1587408392922_0.6467126793429037"},"_hasShrinkwrap":false},"4.2.3":{"name":"@wbez/ferris-ds","version":"4.2.3","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","node-sass":"^4.12.0","node-sass-tilde-importer":"^1.0.2","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@4.2.3","dist":{"shasum":"67b9004fb3da0626c646d63c7e6c53b587404b3e","integrity":"sha512-gLCa1yM2JZoKspVa4Os82o0CF8kDyVn+s/kjtA7isHcrfvuTfgT/s5logIpMdf7/DQYXIwrfAcCII2QhnwVUjw==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-4.2.3.tgz","fileCount":274,"unpackedSize":1316750,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJex9ZmCRA9TVsSAnZWagAAT+EP/ApRlI021Wegnuhim1sB\nqqqn43g9dVsaww5blzm+TmqlkwBrWTdcF9nSDpEDMhWLgkVEBPbismcryX9N\nUjmPAW4kXwMDaOcz7m/52RL+Zy8AjPclXxsjEzw/A27MCta/x1doHNPJHDSY\nSWTdbaW8Bs25+nKZ/5UNtnOhKKsDm0dEzjpXv6ZGJzOiBgaaQAqQNsZBuwuS\nOHtnUYZUcypI699Iom29djzZSTL5fgwVK3oxvMlf599k/yv0JF5+TSzcxkcB\n8qm1wJwboDTtqMuTL3mrBGRsrUNJ1gRzpcWur8DM/suNZIVZOucql8G9oRj3\nYdGdbMf7brKvsgts50X2ch3FVS+Pk1amB8u2yacn9SPqcnQgNm2GPzfGoko6\nBHrJBNBgCyxHJhtECEcG0S2UL/QBX3Mb16d6AdDzlF9L4KsAYRlsPyV1roxa\n0b4ontwiEb1xeoeAXd6w/oSUJCYbMCFdwr3ibmwvugREZDP5dOdeW0n4KTXq\neEDAdaYQX6Y3PIivehFFVY4kD0JEUzOCk9fHrEUA6VrG2zUQFXV85WjfvLBt\nwh+5AdviLBWWhnzOJCjKexeXaovAzFUOk06L9Z+8rye7j+yYGs7cB/PdZtyn\n89Vkzsr1po9w+3ejH1bMwa/ifs7Nolo2tyIjS3mDQ9LkwjqpMe0ousEZNzqP\nqUX9\r\n=bRGV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHaBTwyDjiYLtuzbYtOj+UKp6TM6piHxovwCmOf+LJJAAiEArrRZVxGcoY+0EGYknchzKDpmq/dAZo3tM0aFoNqQvoc="}]},"maintainers":[{"email":"mmcclintock@wbez.org","name":"mmcclintock-wbez"},{"email":"oholmberg@wbez.org","name":"oliverholmberg"},{"email":"pjudge@wbez.org","name":"phjudge"},{"email":"npm-admin@wbez.org","name":"wbez-npm-admin"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_4.2.3_1590154853909_0.933403321234872"},"_hasShrinkwrap":false},"5.0.0-0":{"name":"@wbez/ferris-ds","version":"5.0.0-0","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","sass":"^1.26.11","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"peerDependencies":{"sass":"^1.26.11"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"readmeFilename":"README.md","readme":"# @wbez/ferris-ds\n\n> Centralizing styles for product development at WBEZ\n\nThis repo contains a library of styles and icons available to import via npm.\n\nAlong with the library, we set up a few tools that help document updates. CSS comments are parsed to create a JSON object of documentation. That data is rendered with nunjucks to give us a visual representation of the various components and rule-sets we're building.\n\nOur goal is that as we iterate upon the design of our products, we document everything along the way. This keeps our **style docs current and allows for continuous optimization our CSS.**\n\nThis repo is forked from [texastribune/queso-ui@v3.2.0](https://github.com/texastribune/queso-ui/releases/tag/v3.2.0). Much thanks and props for building out such a great base for us to launch from.\n\n## Index\n\n- [Getting started](#getting-started)\n- [Installing as a dependency](#installing-as-a-dependency)\n- [Using assets](#using-assets)\n- [Folders](#folders)\n- [Adding to the CSS framework](#adding-to-the-css-framework)\n- [Using this system in our products](#using-this-system-in-our-products)\n- [Publishing](#publishing)\n\n## Getting started\n\nTo preview these assets and accompanying docs locally, run the following commands:\n\n```sh\nyarn\n```\n\n```sh\nyarn dev\n```\n\nVisit http://local.wbez.org:1234\n\nThis spins up a browsersync server and watch task for all SCSS and HTML files.\n\n**Requirements**\n\n- node >=8.11.3\n- [Dart Sass](https://github.com/sass/dart-sass)\n\n## Installing as a dependency\n\n```sh\nyarn add --dev @wbez/ferris-ds sass\n```\n\n```sh\nnpm install --save-dev @wbez/ferris-ds sass\n```\n\n## Using assets\n\nSCSS\n\n```scss\n@import '@wbez/ferris-ds';\n```\n\nCSS in `` via CDN\n\n```html\n\n```\n\nSingle icon\n\n```js\nimport linkIcon from '@wbez/ferris-ds/assets/icons/wbez/link.svg';\n\n\"\";\n```\n\nIcon using spritesheet\n\n```jsx\nimport icons from '@wbez/ferris-ds/assets/dist/sprites/wbez.svg';\n\n\n \n;\n```\n\nLogo (CDN)\n\n```html\n\n```\n\nLogo (direct)\n\n```jsx\nimport logo from \"@wbez/ferris-ds/assets/logos/wbez/wbez-chicago-logo-oneline.svg\";\n\n\"WBEZ\n```\n\n## Folders\n\n| directory | description |\n| ------------ | ----------------------------------------------------------------------------------------------------------- |\n| assets/scss | Various SASS files establishing our CSS framework |\n| assets/icons | Sets of individual SVG icons used throughout our products |\n| assets/logos | Individual SVG/PNG logos used throughout our products |\n| docs | Tools and templates to statically render documentation, code examples, and usage info for our design system |\n\n## Adding to the CSS framework\n\nWhen you add a new class, component, scss variable, mixin, etc., you'll want to add a short bit of syntax to enable it to appear in the docs. Use the boilerplate below to get started.\n\n### SCSS docs boilerplate\n\n> How to document a new CSS class\n\nWe use a comment parser along with some [extra logic](https://github.com/wbez/ferris-ds/blob/master/tasks/style-doc.js) to generate our docs. To add a new section of documentation, add a boilerplate above your CSS rules like the one below:\n\n```scss\n// Title of Section (root-class-name)\n//\n// Description {{isWide}} {{isHelper}} {{isProse}}\n//\n// root-class-name-modifier - desc\n//\n// Markup: 6-components/test/test.html\n//\n// Styleguide 6.0.1\n//\n.root-class-name {\n}\n```\n\n- `{{isWide}}` is used to display the demo of each modifier at full width\n- `{{isHelper}}` is used to hide main demo and only display modifiers\n- `{{isProse}}` is used to wrap the demo as if it were in a prose container\n- `// Deprecated` is used to signify a class to be removed.\n- `// Experimental` is used to signify a class we're considering.\n\n**Deprecated** and **Experimental** are named per [KSS syntax](https://warpspire.com/kss/syntax/).\n\n### Naming and organization\n\nWhen building CSS dispersed on a variety of platforms, it can be difficult to know where certain style rules should live and what to call them. We use the following guideline to help with those decisions as we scale our framework.\n\n#### ITCSS\n\nWe organize our SCSS files with the [inverted triangle](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) approach in mind. We put our own spin on it by adding a `typography`, `layouts` and `blocks` folder, but the general idea is all the same; increased specificity as you move down the stylesheet.\n\nSee also Brad Frost's write-up on atomic design for the rationale behind composable components. (`components` → `blocks` → `pages`)\n\n#### BEM\n\nWe closely follow the BEM (Block Element Modifier) class naming convention in our `components` folder, but we break BEM rules in other places. This is a deliberate attempt to create a hybrid approach of using BEM when scoped to a component and helper classes when styling globally in a more ad hoc context.\n\n#### Namespacing\n\nUse namespacing for quick reference of the function of a CSS class. The following key can be used as a guideline for naming your class:\n\n---\n\nComponents\n\n```css\n.c-component-name[__|-<-modifier>] {\n}\n```\n\n_Example: `c-button`_\n\n---\n\nTypography\n\n```css\n.t-type-util {\n}\n```\n\n_Example: `t-headline`_\n\n---\n\nLayout\n\n```css\n.l-layout-util {\n}\n```\n\n_Example: `l-container`_\n\n---\n\nBlocks\n\n```css\n.b-block-name {\n}\n```\n\n_Example: `b-site-footer`_\n\n---\n\nUtilities\n\n```css\n.[is|has]-state {\n}\n```\n\n_Example: `has-bg-yellow`_\n\n---\n\n## Using this system in our products\n\nThis system is experimental and under rapid development. Use it in situations where it makes sense for the scope of your task.\n\n**Do** use this system when...\n\n- Coding a new template from scratch (new landing pages)\n- Creating something in a isolated environment outside of legacy systems (newsletters, new static sites, UMP)\n\n**Don't** use this system when...\n\n- Making a small CSS change to the legacy system (tiny visual tweak to our main repo)\n- The system creates an unnecessarily layer of complexity (take the path of least resistance)\n\n---\n\n## Publishing\n\nMake sure you're authenticated for npm publishing.\n\n1. `npm login` - then follow the prompts\n2. `npm run release` - There's a [bug](https://github.com/sindresorhus/np/issues/420#issuecomment-499273013) in the `np` publishing tool we use where `yarn` commands don't seem to work.\n\n### Semantic versioning\n\nThe npm helper we use for versioning simplifies matching version numbers with the various `MAJOR`, `MINOR`, `PATCH` increment types. For guidance on what type of release you're making, refer to [https://semver.org/](https://semver.org/)\n\nGenerally, you could base your increment type on the following list:\n\n- MAJOR version = CSS changes that visually break layouts where `ferris-ds` is used on production\n- MINOR version = CSS changes that have no visual effect on production\n- PATCH version = CSS changes that fix a previous bug introduced on production or in development\n\n### Deploying our docs\n\nOur docs are automatically published from the `master` branch by AWS Amplify.\n","licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@5.0.0-0","dist":{"shasum":"1f0d0b8ae531d4513d60aed02ab2b3f908cb10f0","integrity":"sha512-993s051h+J57fCcf2yaKQdkrYp7SiC97dCnKCba+gB+kRoBjgGoCAtBiMtmuxq4SK/IcVHTUR/8Z78m7GMz2QQ==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-5.0.0-0.tgz","fileCount":298,"unpackedSize":1419658,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfc3x1CRA9TVsSAnZWagAAvqQQAJRrKZP5EYkWJ/eF/Q1r\n5Vi1s0YJGOxBum2Hg1ncuL6TZXMf646DDf8IdXV+AFXPB45/8yw4n/3qX7Kf\np9XuEIOL1KNh48cbKZpon6ZPHwUi4MAwSFXRxYea20gP7K3rLCqnWetSi7JB\nN2nEjloJKGBSV/Fm24HbaLSAnkiGBrCth5DNICA2MXQmbOud+0phKeym6ede\nZr//0pSAgNpb8fHkn0q0hudSPmIYodKvebBMfYLShjFWbscJoUXNC/5GgFhI\nUzaI3bBDKmLu7WF02S/d54wTfm199Zzq270ml6Vkoi7ljEUO38a2kzrUojVF\nnA5zXqzVoJ5KtVhtqGN0yLxwwBAlxLZPgz1Z0756PgK9x9wzvLTGqctcmjyq\n50BSp+mSiZ1uE63JECn9H272TxmnYYbUrunazZsQxIOUEXRQFGXiRPCibDnT\nmFGR2aosqkf9vMEMN091kJD4aMEPejB2tcVNhq90X3t1mHK6lLaJ1e9zvYP0\nI2Fo8KpGDPmxIK0/necpWviMBW3i6A0wOchjA6Iq7u1++ILFEqR20uIEnj82\n+a5vG1+GH1uyFT/rIRRiRpR2V6balofOBxwWE7C0G24x15cEJneexgOOt16V\njEQYioQVVMpC+NqPd0YlXGLA31Z88NENy/aDafL7cxy7aUpBDlSl96GFbxyS\nh4nb\r\n=5U/V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH6/9nbKInhtTkgyZTfhhGMFWBCxO4dg2fPOcouZVQlcAiAT37Bhs0wX7ykWmo7tOZpzoOlG8lEfq7s1ywBEJ4cAnQ=="}]},"maintainers":[{"name":"wbez-npm-admin","email":"npm-admin@wbez.org"},{"name":"oliverholmberg","email":"oholmberg@wbez.org"},{"name":"mmcclintock-wbez","email":"mmcclintock@wbez.org"},{"name":"phjudge","email":"pjudge@wbez.org"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_5.0.0-0_1601404020404_0.17688399476698557"},"_hasShrinkwrap":false},"5.0.0":{"name":"@wbez/ferris-ds","version":"5.0.0","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"yarn run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"np --any-branch"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"https://github.com/kss-node/kss-node","lint-staged":"^9.2.5","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","np":"^5.0.3","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","sass":"^1.26.11","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"peerDependencies":{"sass":"^1.26.11"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"licenseText":"MIT License\n\nCopyright (c) 2019 The Texas Tribune\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@wbez/ferris-ds@5.0.0","dist":{"shasum":"9f4b7c649b15ba5847cb33109658eb4c1d81d245","integrity":"sha512-ezR5e1Z4bcwzW7Y2ZViw/Eykj4KGY/p0Tn+HStSMayPLOQ636sDIrLjukL1IrRahV0SrP2PxwlIgtO3CGrPrlw==","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-5.0.0.tgz","fileCount":298,"unpackedSize":1419656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdK/uCRA9TVsSAnZWagAAhEwP/ifs6GKR+uW5XNiVlfs7\nnLOyrzEsGOBN8vLhaHd6khS9EI+u2AxKL3FKS370YhfHtpMN/1hucVkojzxN\nMRy07O2gW3aADILCKpNHx8l1yUZDJXZqliqUwTdL+0r01HKYdJmGkJApFlBH\nmbGlrW02bnOq2b/be4XYTM5yMpLCqeVMALtfbsnSSybMEtUFxk3i/glAn8sL\nEhsRhC/NiwO/x7QswB3rkgE64GPFS5KVVN1rLInXEwFHuEk7syeJ4rcIvoQi\nDFEi+ZPveJSYEgk5r+u200r5aTmj1uK3VYIoMEjXJ3lPlx2B3+Wcr2Bgv6GO\nVlQhrQP1vtM9EAEGFGfhg4AQbvFmeVjnIo6mvQ+vYCPfsYwKnS6si5I3KLHz\nnwwBh4Rxlvb+KaSxiXJjvk321M5heIkTMRQgCQTrHUdWNWA5d7n1uckqX19r\nZmyu8NYi8n4Et2P7bcYeDPHRPX6xhV31x44AWQOboa9aDHxGAPioPLEEkhRZ\nEy4aOJ/uRXGZlpbk/neUNMVw32rp5JGe98sY/rWMUNt1m11M7sskvqhYPXg7\nbceFRYT+5R5v2O/1sWuQmn+tvGPuWmhPkHuSZfe80+G5brvvTLuk+khXGwPs\njXNH5IKB3BvcV3RBU0UbayzBBpZyVNq2cig+WfOJwAOYAM5oZI1Olt1IOD+b\nphEL\r\n=20WW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6bNox+BpI4BcFmjqoaMcnkqJR1/thNb3nkokcWd19egIhANkeO6C2qukYwNPDJ+0uRwyGLxErXigj9dyynSLV0qN1"}]},"maintainers":[{"name":"wbez-npm-admin","email":"npm-admin@wbez.org"},{"name":"oliverholmberg","email":"oholmberg@wbez.org"},{"name":"mmcclintock-wbez","email":"mmcclintock@wbez.org"},{"name":"phjudge","email":"pjudge@wbez.org"}],"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_5.0.0_1601482734022_0.0654211728183558"},"_hasShrinkwrap":false},"6.0.0":{"name":"@wbez/ferris-ds","version":"6.0.0","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"npm run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"release-it"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"git+https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","axios":"^0.21.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"git+https://github.com/kss-node/kss-node.git","lint-staged":"^9.2.5","lodash":"^4.17.20","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","release-it":"^14.2.2","sass":"^1.26.11","simple-git":"^2.31.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"peerDependencies":{"sass":"^1.26.11"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"release-it":{"git":{"commitMessage":"🔖 Release ${version}","requireBranch":"main","requireCleanWorkingDir":true},"npm":{"publish":true},"github":{"release":true,"releaseName":"v${version}","releaseNotes":"npx ./scripts/generate-release-notes.js v${latestVersion} v${version}","draft":true}},"gitHead":"254bdae95e791fc5def953b3172d318ae2ee9c8e","bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"_id":"@wbez/ferris-ds@6.0.0","_nodeVersion":"12.19.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-Vkh5XA1lH3yrbLA00oA6Es5g6+sd0tuv0zKQMFitpCUCC5HCPhD/D3vjxinqVx68VR62aQn48M1Dx1r9aJmCHw==","shasum":"80fc94072ef6ad857c1f8fbc7f3da5d4e91c98ee","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-6.0.0.tgz","fileCount":233,"unpackedSize":1421056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf629dCRA9TVsSAnZWagAAAn0QAJFOWXtFxy2PVSR5cOIk\nJxJWyk0u3ecD2aHZFB2YCSTES+cAlo435fqIHYkypXQyx4TdQ3or9E0hilt9\nQUoy0b48fP+j5JiFJfIIKcimXGHNhxnktI7z8USKnJoDXMk2KadDjtv70SiY\njAdBg3OugJJGVyTyfG2RzhFheEJuysgZgM+Gwc0r1JKvZB8idn7+ObLy0Fhj\n02IHvtVu/jAACNawAQkwoiNsT7E6rdnbnjJau/CzcLIDzNfwkRmG8lP3YfTz\naHFeeI4hiVSooCxiZH+F6fvBe5bgCurs1T1s7Kio+lWppWBMwWFP3fYDa0Ul\n1nLP6gsiAJlYXD2UHcJehiyFfNmBuDHMTJDd3Ot0hzPUUyZWGybqgDeJw9ad\n+XzJ6G6r0Yl9zzYz/dslbWaCsm9K1f3+sw2Q2G/hwVV3J2hvHZaVGmvsf3Ca\nBVUjB2SMRL0qppDtbnGbMfOXKG7Vu5if05ME86GCENBAsmXM4IUxAt+ii1T9\nTDf0RXzQk4oyc6aMlRQkStbQT50P9BACqEuTbKHLKUW+yWT3FpARaIAluMxr\nD8GHTzNCv2XcpxySTP/J8HnpXpOB5kE7yhdQkBKVDFfzN1LjOEN0C55JIW8m\nQtywSYjrBhvjChWd4myuZlAhrsCl9adXn+kNGIMHQaZcZVjhKrg9dc4/Xh5Y\nHvmJ\r\n=ze8B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGwwh6OZjSmHXEuTdGPC9FOtVj7pLnAaCXnXgsCitCovAiEAo7P8k7fak8RWjqpYa3pJ3isUFvw3C03SLITmtRi7QWM="}]},"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"maintainers":[{"name":"phjudge","email":"pjudge@wbez.org"},{"name":"mmcclintock-wbez","email":"mmcclintock@wbez.org"},{"name":"oliverholmberg","email":"oholmberg@wbez.org"},{"name":"wbez-npm-admin","email":"npm-admin@wbez.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_6.0.0_1609264988600_0.11527198449349618"},"_hasShrinkwrap":false},"6.0.1":{"name":"@wbez/ferris-ds","version":"6.0.1","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"npm run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"release-it"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"git+https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","axios":"^0.21.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"git+https://github.com/kss-node/kss-node.git","lint-staged":"^9.2.5","lodash":"^4.17.20","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","release-it":"^14.2.2","sass":"^1.26.11","simple-git":"^2.31.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"peerDependencies":{"sass":"^1.26.11"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"release-it":{"git":{"commitMessage":"🔖 Release ${version}","requireBranch":"main","requireCleanWorkingDir":true},"npm":{"publish":true},"github":{"release":true,"releaseName":"v${version}","releaseNotes":"npx ./scripts/generate-release-notes.js v${latestVersion} v${version}","draft":true}},"gitHead":"30de521eab092b6d328bedf6ac95f414d68b3bd0","bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"_id":"@wbez/ferris-ds@6.0.1","_nodeVersion":"12.19.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-mJI5NLA8eZPfO2rUFarffvQBWQYIaiGt5oOUrqqtQdexmgs1bNxkZ627LBAnBzAXJ0nc/CtDQ+3gUZu2NHWldA==","shasum":"81f3e55af24b1a60ae25f6caddcc578621d64c3f","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-6.0.1.tgz","fileCount":233,"unpackedSize":1000403,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/LhUCRA9TVsSAnZWagAAqokP/R/EC5oFblDm/3SgSErd\nSbsli8Zx/wNlwEc8OrC0ZUu56ZMc7T8fKuRgzBwTAzaRVdzE/z13yB5D8vPu\ntowBKa+jD15BpHKCAws49bteBgI//qSkrjsWddK8Tc4UImbGD6BiLM8zAlmV\nCR2k8QnsZ8k8rq0b/zooK7U5bO3+BkK5scZ5MQXtPRk7SeH5J4Cb/Kv9yV1O\nyDdBbyRtNTazzQtp/6GL0fsUKZPzjlMt86N9I4Y8yiyS2FiBH6HchMjLiGG8\nJeoo0tPWqH+IWrG0evtJKh5S+1PBSI80DR2yHVthPnBtSatln1aXW2f4AGxY\nEfQENOAN9SydgyVTX8dqakWxVrZNyu68pIU15aezCNLgKzofyF3Iysd2xvHY\ndak408e+QbRNThXlrxKTVQTYhuKA+mpW53+4eTMRoVPKCvqvztB8Qufc0E5l\ng8ctV3ToPKg1h9wcSNpFKy12K/rElUwYKhHQp3QzBl/xS07zlAm5/pI/a9gw\nx9zLrPg19tipvGSCWydkDVnq3W716eUdVEkyQLBXDIMy3BPXtCBldViQxGTm\nCtrBoxsAbsv5iVoHaJEDAEVUDqizqdV61XLvlUxmzHQkunflqP7dcAqlIdSW\naTMmeaKAqidLKu3cpr+JadSbfDca+OtvLVccp4bKUHcCn3wQ0uED+Vf3joev\nKSmE\r\n=21T0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH4chhTM4sFdgBNSUzoeHJjKYcRcpnxg40UmSOG7C8LHAiBhsT/VGLr5LACm+s2UcdRVLQYTk36bq5zuw6ZECNHCug=="}]},"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"maintainers":[{"name":"phjudge","email":"pjudge@wbez.org"},{"name":"mmcclintock-wbez","email":"mmcclintock@wbez.org"},{"name":"oliverholmberg","email":"oholmberg@wbez.org"},{"name":"wbez-npm-admin","email":"npm-admin@wbez.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_6.0.1_1610397780037_0.7086669183367529"},"_hasShrinkwrap":false},"6.0.2":{"name":"@wbez/ferris-ds","version":"6.0.2","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"npm run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"release-it"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"git+https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","axios":"^0.21.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"git+https://github.com/kss-node/kss-node.git","lint-staged":"^9.2.5","lodash":"^4.17.20","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^7.0.18","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","release-it":"^14.2.2","sass":"^1.26.11","simple-git":"^2.31.0","stylelint":"^11.0.0","stylelint-config-recommended-scss":"^3.3.0","stylelint-scss":"^3.11.0","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"peerDependencies":{"sass":"^1.26.11"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"release-it":{"git":{"commitMessage":"🔖 Release ${version}","requireBranch":"main","requireCleanWorkingDir":true},"npm":{"publish":true},"github":{"release":true,"releaseName":"v${version}","releaseNotes":"npx ./scripts/generate-release-notes.js v${latestVersion} v${version}","draft":false}},"gitHead":"ca4737e0b9a7fff699ed5e7307d7fedf04e3528d","bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"_id":"@wbez/ferris-ds@6.0.2","_nodeVersion":"12.19.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-OT+Z1CzBDKrOt1TYdKSTzD7lk/RP/9Z6NDYTbYFLOap+OOU3vzPE+Igcu/yXt3FYgoxfhT8712LG5Lt2uXrFqQ==","shasum":"89c3703589a8744e2ba71438e265144af2532a3b","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-6.0.2.tgz","fileCount":233,"unpackedSize":1421821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/al2CRA9TVsSAnZWagAAzyEP/2Uf3ruk2EZzAhTETS0e\npdX98XK8PZGGXtofeQqbMo13yQFDrDBKk9iRfSmuBKlOHKpEddXLPP1xIZ/1\nSCN/HpbLqqk/aXru3oB3sYnm5I63AETd5TemiHWkBtZTWH+zTeUZM1YuJG96\nQroX8PNH0XbVwWmog+0biXk5xU5CVh2t7NS0BnGfihxhG6Tzrv3fbwBb8AAp\nWjrm6VqY74akZbn+tfSl//j4UZabdBRhygGAlaz1lVDjjg2dXuNq62AKMyFX\nH4I4i7D1POg4KzIGzCi3B30sjRXEcNRZVG80tWhSkCxUPnvtsPDiTXE5L7Aj\ngHMHh/S4jSdZ8Ic0QGLOlX1qbxcHkRkGNyOEe/lq/upmrO/S1KTTxlykSYaO\nLVSM9BM8dzjhU6igBoDs/h0PsPsP4bgicnZiEJdctTTNi/Ijzd8mTN/bF4wN\njKWwwZN1ym9lmS+gRmCdUgmp6NpKH46s5+83t2vvS06SQiYec3ctRfivuUGU\nQ9LWHmX5IgnnpK3Z0OsbAEQpywIh1ivsj0Eerocv4yRxmsVj/n+oqiw0X5+t\ntLfhfOrPQ9fu2sT4g/uo4N4mUygh28SjS4by/UTcIkk1UmpP4vxLeKgyplWJ\n1bFyX9sWHlvxF87ChIkjEE9x19BoTi83HRtGyWQIBjKHeJJ6huE7XrOhQB8p\nMXY2\r\n=ekMa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8jhNAuRFwafDYGMYpQxwvQ3lMegy/TE7cd6CDaTLRgAIhAPbbfBW8sS80uab78QUxbzVO00v9R0uRItS8WCvv1Dcq"}]},"_npmUser":{"name":"phjudge","email":"pjudge@wbez.org"},"directories":{},"maintainers":[{"name":"phjudge","email":"pjudge@wbez.org"},{"name":"mmcclintock-wbez","email":"mmcclintock@wbez.org"},{"name":"oliverholmberg","email":"oholmberg@wbez.org"},{"name":"wbez-npm-admin","email":"npm-admin@wbez.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_6.0.2_1610459510175_0.030206620728021383"},"_hasShrinkwrap":false},"7.0.0":{"name":"@wbez/ferris-ds","version":"7.0.0","description":"Asset library of SCSS and SVG files","scripts":{"build":"node docs/config/tasks/build.js","dev":"node docs/config/tasks/dev.js","test":"npm run build","prettify":"prettier --write \"./**/*.{js,html,json,md}\"","release":"release-it"},"style":"/assets/dist/css/all.css","sass":"/assets/scss/all.scss","repository":{"type":"git","url":"git+https://github.com/wbez/ferris-ds.git"},"license":"MIT","author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"homepage":"https://github.com/wbez/ferris-ds#readme","devDependencies":{"@texastribune/postcss-amp":"^1.4.0","@texastribune/queso-tools":"1.3.0","autoprefixer":"^9.6.1","axios":"^0.21.1","browser-sync":"^2.26.3","clean-css":"^4.2.1","eslint":"^5.16.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^5.0.0","eslint-plugin-import":"^2.17.3","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-react":"^7.13.0","fast-glob":"^3.0.1","fs-extra":"^8.0.1","glob-watcher":"^5.0.3","husky":"^3.0.5","kss":"git+https://github.com/kss-node/kss-node.git","lint-staged":"^9.2.5","lodash":"^4.17.20","markdown-it":"^8.4.2","node-html-parser":"^1.1.16","nunjucks":"^3.1.7","ora":"^3.4.0","postcss":"^8.3.3","prettier":"^1.18.2","purgecss":"^1.3.0","purgecss-from-html":"^1.1.0","release-it":"^14.2.2","sass":"^1.62.0","simple-git":"^2.31.0","stylelint":"^14.16.1","stylelint-config-standard-scss":"^6.0.0","stylelint-scss":"^4.0.1","svgo":"^1.3.0","svgstore":"^3.0.0-2"},"dependencies":{"normalize.css":"^8.0.1"},"peerDependencies":{"sass":"^1.62.0"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,html,json,md}":["prettier --check"],"docs/config/**/*.js":["eslint --fix","git add"],"*.scss":["stylelint --fix","git add"]},"release-it":{"git":{"commitMessage":"🔖 Release ${version}","requireBranch":"main","requireCleanWorkingDir":true},"npm":{"publish":true},"github":{"release":true,"releaseName":"v${version}","releaseNotes":"node ./scripts/generate-release-notes.js v${latestVersion} v${version}","draft":false}},"gitHead":"9b16d0154c8aca04bfc08811fe8a779ba2a4ebf3","bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"_id":"@wbez/ferris-ds@7.0.0","_nodeVersion":"14.18.1","_npmVersion":"9.5.1","dist":{"integrity":"sha512-xRvnBzT89VEBUpas8Jbrn680DJ4yEPKyCMn7zZBDBNddj5ZpA8dJ8ZilbMBADlMSq35Wjxnvln0LZlqi1brPag==","shasum":"de053be7889e8d8b88924a48514929da56e04f00","tarball":"https://registry.npmjs.org/@wbez/ferris-ds/-/ferris-ds-7.0.0.tgz","fileCount":232,"unpackedSize":1246216,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGV/MgHRbHacJyH+PlJR+CA76275YbgjOX0PEfwnBdGwAiAdqcbY+RZogeTQntEySU7FGW1CA6KOhkTx0bvOblmgEw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPrJLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpA5g//cFD36i8752ReuTFuw7Q4eVlW2vmMi8r4th84I396Bsv8pjlG\r\nkg5GWimXWu3ZjHZRciYeYrYC2IBGRgWD21Hvt2PaWFvSO3KBFcCURXjqUdLU\r\nA7BYUicEhNQE8LqIRJs5qlLH/4sDO7gFhTLwLN5mRzmNFoa0GprCBd/f25Lx\r\nOaW2J0h0BIpZFpbHA/5XP4n13aUwED49hJH4wJ0goVZ5P5qRSaEXl4G3U6Qd\r\nzzqrT8v3rkpirueWWpTOC6ImHBOGtCcbUgUVBk485Yvc6NAQclLcnReQHGZh\r\nKFL8DVJKYbDwu/wNE9PBAb+L7G1Yg4ATxuq0Csw0uJkqkfVuN4Jnnozshp3U\r\nnVQs4kl5n5O4oCPRIEQJl7yLw4qmqBW9mkQI5TfJ8Ta+Qa+3IQK977bC7M6m\r\nzyn4g94TzrH4Z3bjbXOm810w0JAtPklTaQDMMQafNx9LIZ4BbBCKCdDUKSMR\r\nXcMWS8FNsw6G5PXOuq1JHEBtCNM0jo4QCg7QB/N8MFBG5F3X31EDa2gm16iB\r\nytA5jnjfC1e4ysN8XU2PvYHNicQi8jVUGTSJd2PRsaI6tkz3H7SZtcpGp+rH\r\nE3yDmBaKEY/fQq6KF9w2otqVtwROIld3B/kwHx/ipv+97L6ewApgzWEYfo8R\r\nHF2SFzGUuvUELacNat3emIUe/6DCCcdoYOs=\r\n=8mce\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"wbez-npm-admin","email":"npm-admin@wbez.org"},"directories":{},"maintainers":[{"name":"phjudge","email":"pjudge@wbez.org"},{"name":"mmcclintock-wbez","email":"mmcclintock@wbez.org"},{"name":"oliverholmberg","email":"oholmberg@wbez.org"},{"name":"wbez-npm-admin","email":"npm-admin@wbez.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ferris-ds_7.0.0_1681830474726_0.6693369472929649"},"_hasShrinkwrap":false}},"time":{"created":"2019-09-25T14:03:06.806Z","1.0.0-0":"2019-09-25T14:03:07.217Z","modified":"2023-04-18T15:07:55.137Z","1.0.0-1":"2019-09-25T14:04:45.325Z","1.0.0-2":"2019-10-01T19:59:03.824Z","1.0.0-3":"2019-10-04T12:38:26.524Z","1.0.0-4":"2019-10-07T15:55:10.102Z","1.0.0-5":"2019-10-08T17:35:59.651Z","1.0.0-6":"2019-10-11T16:32:39.296Z","1.0.0-7":"2019-10-11T20:23:03.627Z","1.0.0-8":"2019-10-14T19:53:44.721Z","1.0.0-9":"2019-10-15T14:10:13.745Z","1.0.0-10":"2019-10-15T16:23:16.327Z","1.0.0-11":"2019-10-15T18:28:29.016Z","1.0.0-12":"2019-10-15T20:01:21.469Z","1.0.0-13":"2019-10-21T17:55:56.598Z","1.0.0-14":"2019-10-23T17:42:56.913Z","1.0.0-15":"2019-11-08T22:40:46.040Z","1.0.0-16":"2019-11-12T16:43:13.851Z","1.0.0-17":"2019-11-12T16:52:07.742Z","1.0.0-18":"2019-11-13T16:55:02.725Z","1.0.0-19":"2019-11-13T18:01:56.862Z","1.0.0-20":"2019-11-21T15:16:42.197Z","1.0.0-21":"2019-11-29T16:56:07.983Z","1.0.0-22":"2019-11-29T21:56:17.822Z","1.0.0-23":"2019-12-20T14:57:09.927Z","1.0.0-24":"2019-12-20T15:45:24.964Z","2.0.0-0":"2020-01-07T19:25:43.719Z","2.1.0-0":"2020-01-16T17:04:30.819Z","2.1.0-1":"2020-01-16T19:52:17.208Z","2.1.0-2":"2020-01-22T21:35:14.214Z","3.0.0":"2020-01-28T15:52:51.373Z","3.0.1":"2020-01-28T16:24:56.512Z","3.0.2":"2020-01-29T20:59:28.323Z","3.0.3":"2020-01-30T17:47:45.847Z","3.1.0":"2020-02-03T16:23:33.056Z","3.2.0":"2020-02-12T18:21:28.504Z","3.3.0":"2020-02-20T18:29:32.117Z","3.4.0":"2020-02-25T19:23:49.695Z","4.0.0":"2020-03-09T17:20:30.461Z","4.1.0":"2020-03-25T13:35:02.223Z","4.1.1":"2020-03-25T13:46:51.029Z","4.1.2":"2020-03-26T19:16:05.648Z","4.2.0":"2020-04-01T15:17:57.025Z","4.2.1":"2020-04-03T21:10:08.196Z","4.2.2-0":"2020-04-10T17:18:25.684Z","4.2.2-1":"2020-04-13T17:20:09.266Z","4.2.2":"2020-04-20T18:46:33.240Z","4.2.3":"2020-05-22T13:40:54.146Z","5.0.0-0":"2020-09-29T18:27:00.604Z","5.0.0":"2020-09-30T16:18:54.286Z","6.0.0":"2020-12-29T18:03:08.862Z","6.0.1":"2021-01-11T20:43:00.273Z","6.0.2":"2021-01-12T13:51:50.395Z","7.0.0":"2023-04-18T15:07:54.965Z"},"maintainers":[{"name":"phjudge","email":"pjudge@wbez.org"},{"name":"mmcclintock-wbez","email":"mmcclintock@wbez.org"},{"name":"oliverholmberg","email":"oholmberg@wbez.org"},{"name":"wbez-npm-admin","email":"npm-admin@wbez.org"}],"description":"Asset library of SCSS and SVG files","homepage":"https://github.com/wbez/ferris-ds#readme","repository":{"type":"git","url":"git+https://github.com/wbez/ferris-ds.git"},"author":{"name":"CPM Digital Development","email":"webteam@wbez.org"},"bugs":{"url":"https://github.com/wbez/ferris-ds/issues"},"license":"MIT","readme":"# @wbez/ferris-ds\n\n> Centralizing styles for product development at WBEZ\n\nThis repo contains a library of styles and icons available to import via npm.\n\nAlong with the library, we set up a few tools that help document updates. CSS comments are parsed to create a JSON object of documentation. That data is rendered with nunjucks to give us a visual representation of the various components and rule-sets we're building.\n\nOur goal is that as we iterate upon the design of our products, we document everything along the way. This keeps our **style docs current and allows for continuous optimization our CSS.**\n\nThis repo is forked from [texastribune/queso-ui@v3.2.0](https://github.com/texastribune/queso-ui/releases/tag/v3.2.0). Much thanks and props for building out such a great base for us to launch from.\n\n## Index\n\n- [Getting started](#getting-started)\n- [Installing as a dependency](#installing-as-a-dependency)\n- [Using assets](#using-assets)\n- [Folders](#folders)\n- [Adding to the CSS framework](#adding-to-the-css-framework)\n- [Using this system in our products](#using-this-system-in-our-products)\n- [Publishing](#publishing)\n\n## Getting started\n\nTo preview these assets and accompanying docs locally, run the following commands:\n\n```sh\nnpm i\n```\n\n```sh\nnpm run dev\n```\n\nVisit http://local.wbez.org:1234\n\nThis spins up a browsersync server and watch task for all SCSS and HTML files.\n\n**Requirements**\n\n- node >=8.11.3\n- [Dart Sass](https://github.com/sass/dart-sass)\n\n## Installing as a dependency\n\n```sh\nyarn add --dev @wbez/ferris-ds sass\n```\n\n```sh\nnpm install --save-dev @wbez/ferris-ds sass\n```\n\n## Using assets\n\nSCSS\n\n```scss\n@import '@wbez/ferris-ds';\n```\n\nCSS in `` via CDN\n\n```html\n\n```\n\nSingle icon\n\n```js\nimport linkIcon from '@wbez/ferris-ds/assets/icons/wbez/link.svg';\n\n\"\";\n```\n\nIcon using spritesheet\n\n```jsx\nimport icons from '@wbez/ferris-ds/assets/dist/sprites/wbez.svg';\n\n\n \n;\n```\n\nLogo (CDN)\n\n```html\n\n```\n\nLogo (direct)\n\n```jsx\nimport logo from \"@wbez/ferris-ds/assets/logos/wbez/wbez-chicago-logo-oneline.svg\";\n\n\"WBEZ\n```\n\n## Folders\n\n| directory | description |\n| ------------ | ----------------------------------------------------------------------------------------------------------- |\n| assets/scss | Various SASS files establishing our CSS framework |\n| assets/icons | Sets of individual SVG icons used throughout our products |\n| assets/logos | Individual SVG/PNG logos used throughout our products |\n| docs | Tools and templates to statically render documentation, code examples, and usage info for our design system |\n\n## Adding to the CSS framework\n\nWhen you add a new class, component, scss variable, mixin, etc., you'll want to add a short bit of syntax to enable it to appear in the docs. Use the boilerplate below to get started.\n\n### SCSS docs boilerplate\n\n> How to document a new CSS class\n\nWe use a comment parser along with some [extra logic](https://github.com/wbez/ferris-ds/blob/master/tasks/style-doc.js) to generate our docs. To add a new section of documentation, add a boilerplate above your CSS rules like the one below:\n\n```scss\n// Title of Section (root-class-name)\n//\n// Description {{isWide}} {{isHelper}} {{isProse}}\n//\n// root-class-name-modifier - desc\n//\n// Markup: 6-components/test/test.html\n//\n// Styleguide 6.0.1\n//\n.root-class-name {\n}\n```\n\n- `{{isWide}}` is used to display the demo of each modifier at full width\n- `{{isHelper}}` is used to hide main demo and only display modifiers\n- `{{isProse}}` is used to wrap the demo as if it were in a prose container\n- `// Deprecated` is used to signify a class to be removed.\n- `// Experimental` is used to signify a class we're considering.\n\n**Deprecated** and **Experimental** are named per [KSS syntax](https://warpspire.com/kss/syntax/).\n\n### Naming and organization\n\nWhen building CSS dispersed on a variety of platforms, it can be difficult to know where certain style rules should live and what to call them. We use the following guideline to help with those decisions as we scale our framework.\n\n#### ITCSS\n\nWe organize our SCSS files with the [inverted triangle](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) approach in mind. We put our own spin on it by adding a `typography`, `layouts` and `blocks` folder, but the general idea is all the same; increased specificity as you move down the stylesheet.\n\nSee also Brad Frost's write-up on atomic design for the rationale behind composable components. (`components` → `blocks` → `pages`)\n\n#### BEM\n\nWe closely follow the BEM (Block Element Modifier) class naming convention in our `components` folder, but we break BEM rules in other places. This is a deliberate attempt to create a hybrid approach of using BEM when scoped to a component and helper classes when styling globally in a more ad hoc context.\n\n#### Namespacing\n\nUse namespacing for quick reference of the function of a CSS class. The following key can be used as a guideline for naming your class:\n\n---\n\nComponents\n\n```css\n.c-component-name[__|-<-modifier>] {\n}\n```\n\n_Example: `c-button`_\n\n---\n\nTypography\n\n```css\n.t-type-util {\n}\n```\n\n_Example: `t-headline`_\n\n---\n\nLayout\n\n```css\n.l-layout-util {\n}\n```\n\n_Example: `l-container`_\n\n---\n\nBlocks\n\n```css\n.b-block-name {\n}\n```\n\n_Example: `b-site-footer`_\n\n---\n\nUtilities\n\n```css\n.[is|has]-state {\n}\n```\n\n_Example: `has-bg-yellow`_\n\n---\n\n## Using this system in our products\n\nThis system is experimental and under rapid development. Use it in situations where it makes sense for the scope of your task.\n\n**Do** use this system when...\n\n- Coding a new template from scratch (new landing pages)\n- Creating something in a isolated environment outside of legacy systems (newsletters, new static sites, UMP)\n\n**Don't** use this system when...\n\n- Making a small CSS change to the legacy system (tiny visual tweak to our main repo)\n- The system creates an unnecessarily layer of complexity (take the path of least resistance)\n\n---\n\n## Publishing\n\nMake sure you have a [personal access token](https://github.com/settings/tokens) for GitHub and that token is available as the environment variable `GITHUB_TOKEN`.\n\nAlso make sure you have a [personal access token](https://app.shortcut.com/chicagopublicmedia/settings/account/api-tokens) for Shortcut and that token is available as the environment variable `SHORTCUT_API_TOKEN`.\n\nMake sure you're authenticated for npm publishing.\n\n1. `npm login` - then follow the prompts\n2. `npm run release`\n\nThis invokes [release-it](https://github.com/release-it/release-it), which automatically bumps the `package.json` version and drafts a release in GitHub.\n\nThe release will deploy to the production env when published.\n\n### Semantic versioning\n\nThe npm helper we use for versioning simplifies matching version numbers with the various `MAJOR`, `MINOR`, `PATCH` increment types. For guidance on what type of release you're making, refer to [https://semver.org/](https://semver.org/)\n\nGenerally, you could base your increment type on the following list:\n\n- MAJOR version = CSS changes that visually break layouts where `ferris-ds` is used on production\n- MINOR version = CSS changes that have no visual effect on production\n- PATCH version = CSS changes that fix a previous bug introduced on production or in development\n\n### Deploying our docs\n\nOur docs are automatically published from the `master` branch by AWS Amplify.\n","readmeFilename":"README.md"}