{"id":19376034,"url":"https://github.com/keenanpayne/postcss-npm-boilerplate","last_synced_at":"2026-05-07T19:08:17.191Z","repository":{"id":82633421,"uuid":"74613339","full_name":"keenanpayne/postcss-npm-boilerplate","owner":"keenanpayne","description":"This is a simple boilerplate for using NPM and PostCSS to handle common front-end development environments","archived":false,"fork":false,"pushed_at":"2016-11-27T22:13:05.000Z","size":142,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-07T04:07:13.555Z","etag":null,"topics":["boilerplate","cssnano","minify","postcss","postcss-plugins","stylelint","yarn"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/keenanpayne.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-11-23T20:55:41.000Z","updated_at":"2019-08-28T16:51:08.000Z","dependencies_parsed_at":"2023-03-12T16:22:02.228Z","dependency_job_id":null,"html_url":"https://github.com/keenanpayne/postcss-npm-boilerplate","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keenanpayne%2Fpostcss-npm-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keenanpayne%2Fpostcss-npm-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keenanpayne%2Fpostcss-npm-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keenanpayne%2Fpostcss-npm-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/keenanpayne","download_url":"https://codeload.github.com/keenanpayne/postcss-npm-boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240507029,"owners_count":19812710,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate","cssnano","minify","postcss","postcss-plugins","stylelint","yarn"],"created_at":"2024-11-10T08:42:42.205Z","updated_at":"2026-05-07T19:08:12.142Z","avatar_url":"https://github.com/keenanpayne.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PostCSS NPM Boilerplate\n\nThis is a simple boilerplate for using [NPM](https://www.npmjs.com/) and [PostCSS](http://postcss.org/) to handle common front-end development environments.\n\n## Setup\n\n1. Clone the repository\n * `git clone https://github.com/keenanpayne/postcss-npm-boilerplate.git`\n2. **(optional)** Install [Yarn Package Manager](https://yarnpkg.com/en/docs/install). Alternatively, you can use NPM as you may already be used to. I recommend Yarn for easier and more expedited package installation.\n3. Install dependencies\n * **Using Yarn:** `yarn`\n * **Using NPM:** `npm install`\n\n## Features\n\nThis boilerplate features many features similar to [Sass](http://sass-lang.com/) without including the entire feature set. I have hand-picked the functionality that I use most commonly in my projects.\n\n### Imports\n\nImports are handled similar to Sass. You can may import a file by doing the following:\n\n```\n@import \"_variables.css\";\n```\n\n### Variables\n\n```\n$display: flex;\n\n.element {\n  display: $display;\n}\n```\n\nCompiles To:\n\n```\n.element {\n  display: flex;\n}\n```\n\n### Nested Elements\n\n```\n.element {\n  \u0026:hover {\n    background: white;\n  }\n\n  .element-child {\n    position: relative;\n  }\n}\n```\n\nCompiles to:\n\n```\n.element:hover {\n  background: white;\n}\n\n.element .element-child {\n  position: relative;\n}\n```\n\n### Loops\n\n```\n@each $icon in (foo, bar, baz) {\n  .icon-$icon {\n    background: url('path/to/$icon.png');\n  }\n}\n\n@for $index from 1 to 5 by 2 {\n  .col-$index {\n    width: $(index)0%;\n  }\n}\n```\n\nCompiles to:\n\n```\n.icon-foo {\n  background: url('path/to/foo.png');\n}\n\n.icon-bar {\n  background: url('path/to/bar.png');\n}\n\n.icon-baz {\n  background: url('path/to/baz.png');\n}\n\n.col-1 {\n  width: 10%;\n}\n\n.col-3 {\n  width: 30%;\n}\n\n.col-5 {\n  width: 50%;\n}\n```\n\n### Custom Breakpoints\n\n```\n@custom-media --small-max (max-width: 30em);\n\n@media (--small-max) {\n  /* styles for small viewport */\n}\n```\n\nCompiles to:\n\n```\n@media (max-width: 30em) {\n  /* styles for small viewport */\n}\n```\n\n## Scripts\n\nThis boilerplate relies only on NPM scripts as the build tool. Included build processes are as follows:\n\n#### `npm start`\n\nCompiles the `/src/css/app.css` file and outputs to `/dist/css/app.css`. This command watches the file tree inside of `/src/css` for changes and recompiles when necessary.\n\n#### `npm run build`\n\nOnly compiles the `/src/css/app.css` file and outputs to `/dist/css/app.css` without watching the file tree.\n\n#### `npm run minify`\n\nUses cssnano to minify the `/dist/css/app.css` file and output a minified version to `/dist/css/app.min.css`.\n\n#### `npm run stylefmt`\n\nUses a combination of [stylelint](http://stylelint.io/) and [stylemt](https://github.com/morishitter/stylefmt) PostCSS plugins to organize **source** CSS files according to style lint rules (located in `.stylelintrc`).\n\n#### `npm run compile`\n\nRuns the `clean`, `build` and `stylefmt` commands to clean the `/dist` directory as well as build distribution files and format source files.\n\n#### `npm run clean`\n\nDeletes all files from the `/dist` directory.\n\n## Plugins\n\nThis boilerplate relies on the following PostCSS plugins:\n\n- [autoprefixer](https://github.com/postcss/autoprefixer)\n- [del-cli](https://www.npmjs.com/package/del-cli)\n- [cssnano-cli](https://www.npmjs.com/package/cssnano-cli)\n- [postcss-advanced-variables](https://github.com/jonathantneal/postcss-advanced-variables)\n- [postcss-custom-media](https://github.com/postcss/postcss-custom-media)\n- [postcss-import](https://github.com/postcss/postcss-import)\n- [postcss-mixins](https://github.com/postcss/postcss-mixins)\n- [postcss-nested](https://github.com/postcss/postcss-nested)\n- [stylefmt](https://github.com/morishitter/stylefmt)\n- [stylelint](http://stylelint.io/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeenanpayne%2Fpostcss-npm-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkeenanpayne%2Fpostcss-npm-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeenanpayne%2Fpostcss-npm-boilerplate/lists"}