{"id":23633347,"url":"https://github.com/nymag/responsive-filenames","last_synced_at":"2025-11-08T20:30:25.308Z","repository":{"id":29460613,"uuid":"32997077","full_name":"nymag/responsive-filenames","owner":"nymag","description":"Easy CSS Breakpoints","archived":false,"fork":false,"pushed_at":"2018-10-03T19:28:46.000Z","size":28,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-01-28T10:36:02.361Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/nymag.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}},"created_at":"2015-03-27T16:29:15.000Z","updated_at":"2016-02-05T18:26:48.000Z","dependencies_parsed_at":"2022-09-06T17:51:57.499Z","dependency_job_id":null,"html_url":"https://github.com/nymag/responsive-filenames","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nymag%2Fresponsive-filenames","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nymag%2Fresponsive-filenames/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nymag%2Fresponsive-filenames/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nymag%2Fresponsive-filenames/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nymag","download_url":"https://codeload.github.com/nymag/responsive-filenames/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239560804,"owners_count":19659315,"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":[],"created_at":"2024-12-28T04:51:05.165Z","updated_at":"2025-11-08T20:30:25.258Z","avatar_url":"https://github.com/nymag.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# responsive-filenames\n📚📲 _\"Easy CSS Breakpoints\"_\n\n[![Build Status](https://travis-ci.org/nymag/responsive-filenames.svg)](https://travis-ci.org/nymag/responsive-filenames)\n[![Code Climate](https://codeclimate.com/github/nymag/responsive-filenames/badges/gpa.svg)](https://codeclimate.com/github/nymag/responsive-filenames)\n\nThis module allows you to easily delineate media query breakpoints by file name. For example, say we have five files:\n\n```\nall.css\nprint.css\n0-600.css\n600-1024.css\n1024+.css\n```\n\nWith responsive-filenames, you can write css in these files without worrying about cascading across media queries. The print stylesheet will be wrapped in `@media print`, and the various viewport stylesheets get wrapped in media queries based on their file name (hence `responsive-filenames`). A stylesheet called `0-600.css` will look like:\n\n```css\n@media screen and (min-width: 0px) and (max-width: 599.99px) {\n  /* styles */\n}\n```\n\nYou can specify any viewport size, and even have overlapping viewports. For example, you can have a combined mobile and tablet stylesheet, and some separate tablet fixes:\n\n```\n0-1024.css\n600-1024.css\n```\n\n# Install\n\n```\nnpm install --save responsive-filenames\n```\n\nIf you want to use it in your terminal, you can also install it globally.\n\n# Usage\n\n## Command line\n\n```bash\nresponsive-filenames input1.css [input2.css ...] [options]\n```\n\nYou can pass multiple files or glob patterns into responsive-filenames. These are all valid:\n\n```bash\nresponsive-filenames path/to/file1.css\nresponsive-filenames css/*.css\nresponsive-filenames css/*.css otherstyles/**\n```\n\nBy default the compiled css will output to stdout. You can also pass `-o filename` (or `--output filename`) to write it to a file.\n\n## In Node\n\n```js\nvar rfn = require('responsive-filenames');\n\nrfn('css/*.css', function (err, css) {\n  if (!err) {\n    // do something with the compiled css!\n  }\n});\n```\n\n### Flexible file arguments\n\nresponsive-filenames is very flexible about the arguments you pass in. You can give it a glob or an array of globs, or even multiple file arguments. These are all valid:\n\n```js\nvar callback = function (err, css) {\n  if (!err) {\n    // do something with the compiled css!\n  }\n};\n\nrfn('path/to/file1.css', callback);\nrfn(['path/to/file1.css', 'path/to/file2.css'], callback);\nrfn('css/*.css', callback);\nrfn('css/*.css', 'otherstyles/**', callback);\n```\n\n**NOTE:** The order of the files/globs you pass in is preserved, but globs themselves (usually) rely on filename order. [Read more about globbing](https://www.npmjs.com/package/glob#glob-primer).\n\n### But what about promises?\n\nThis module's async function follows node best practices, so you can easily promisify it with a library like [bluebird](https://github.com/petkaantonov/bluebird)\n\n```js\nvar Promise = require('bluebird'),\n  rfn = Promise.promisify(require('responsive-filenames'));\n\nrfn('css/*.css')\n  .then(function (css) {\n    // do something with the compiled css!\n  })\n  .catch(function (e) {\n    // oh noes!\n  });\n```\n\n## In Gulp (and other build tools)\n\nIf you pass a stream into responsive-filenames, it'll compile each file individually and output them as another stream.\n\n```js\nvar rfn = require('responsive-filenames');\n\ngulp.src('**/*.css')\n  .pipe(rfn())\n  .pipe(concat())\n  .pipe(cssmin())\n  .pipe(gulp.dest('compiled.css'));\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnymag%2Fresponsive-filenames","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnymag%2Fresponsive-filenames","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnymag%2Fresponsive-filenames/lists"}