{"id":16295678,"url":"https://github.com/hamlim/resp","last_synced_at":"2026-02-17T05:01:57.523Z","repository":{"id":29237095,"uuid":"116740273","full_name":"hamlim/resp","owner":"hamlim","description":"A responsive helper utility for css-in-js","archived":false,"fork":false,"pushed_at":"2025-11-18T19:55:54.000Z","size":85,"stargazers_count":4,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-11-23T10:14:31.002Z","etag":null,"topics":["css","css-in-js","javascript","responsive"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hamlim.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-08T23:27:35.000Z","updated_at":"2025-01-12T02:50:40.000Z","dependencies_parsed_at":"2023-01-14T14:26:29.828Z","dependency_job_id":null,"html_url":"https://github.com/hamlim/resp","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/hamlim/resp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hamlim%2Fresp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hamlim%2Fresp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hamlim%2Fresp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hamlim%2Fresp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hamlim","download_url":"https://codeload.github.com/hamlim/resp/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hamlim%2Fresp/sbom","scorecard":{"id":453882,"data":{"date":"2025-08-11","repo":{"name":"github.com/hamlim/resp","commit":"3da08c8a9fdbe38f4c7bf1aebe55b6f992690f01"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.3,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Code-Review","score":0,"reason":"Found 0/4 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":0,"reason":"license file not detected","details":["Warn: project does not have a license file"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 28 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"35 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-rq8g-5pc5-wrhr","Warn: Project is vulnerable to: GHSA-qrmc-fj45-qfc2","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-44pw-h2cw-w3vq","Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp","Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546","Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp","Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3","Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-6g33-f262-xjp4","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp","Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr","Warn: Project is vulnerable to: GHSA-2m39-62fm-q8r3","Warn: Project is vulnerable to: GHSA-mf6x-7mm4-x2g7","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-19T09:01:27.013Z","repository_id":29237095,"created_at":"2025-08-19T09:01:27.013Z","updated_at":"2025-08-19T09:01:27.013Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29534447,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-17T05:00:25.817Z","status":"ssl_error","status_checked_at":"2026-02-17T04:57:16.126Z","response_time":100,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["css","css-in-js","javascript","responsive"],"created_at":"2024-10-10T20:19:29.592Z","updated_at":"2026-02-17T05:01:57.341Z","avatar_url":"https://github.com/hamlim.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Resp\n\nA css-in-js utility for writing responsive styles.\n\n### Usage\n\nResp is designed to be used along with a css-in-js library, however it can be used anywhere you would like to generate styles scoped to media queries.\n\nBy default Resp generates `min-width` media queries using `rems`. However you can customize the kind of media queries that resp generates by passing in a `mediaQueryFactory` function. See the [API](#API) section below for more.\n\nResp is a function that takes in two arguments, the first is an object with keys of the breakpoint names `small, medium, large` for example, and values of the pixel breakpoints that each of those labels applies to. The second argument which is optional is the root font size, this is used to determine the breakpoint in rems.\n\n```javascript\nimport resp from '@matthamlin/resp'\n\nconst breakpoints = {\n  small: 640, // small is the name of the breakpoint, 640px is the actual value of the breakpoint\n  medium: 800,\n  large: 1200,\n}\n\nconst mediaQueries = resp(breakpoints)\n\n/*\nmediaQueries === {\n  small: function,\n  medium: function,\n  large: function\n}\n*/\n```\n\nThe value returned after calling Resp is an object of keyed functions, with each key mapping to the same name as the breakpoint it represents. This function can then be used as a [tagged template literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_template_literals) which will return a string represention of the media query.\n\n```javascript\nconst { small } = mediaQueries\n\nconst redAboveSmallBreakpoint = small`\n  .class {\n    color: red;\n  }\n`\n\n// redAboveSmallBreakpoint === '@media screen and (min-width: 40rem) { .class { color: red; } }'\n```\n\nOne of the key values of the functions being tagged template literals is the ability to interpolate some data in your styles:\n\n```Javascript\nconst specialColor = 'mediumseagreen';\n\nconst greenText = small`.class { color: ${specialColor}; }`;\n```\n\nUsing these styles is as simple as providing this content as children to a style tag:\n\n```javascript\nrender(\n  \u003cReact.Fragment\u003e\n    \u003ch1 className=\"title\"\u003eHello\u003c/h1\u003e\n    \u003cstyle\u003e{small`.title { color: green; }`}\u003c/style\u003e\n  \u003c/React.Fragment\u003e,\n)\n```\n\nUsing these basics we can build an even more advanced example:\n\n```javascript\nimport resp from '@matthamlin/resp'\nimport styled from 'react-emotion'\n\nconst { small, medium, large } = resp({\n  small: 640,\n  medium: 800,\n  large: 1200,\n})\n\nconst Container = styled.div`\n  color: red;\n  ${medium`\n    color: blue;\n  `} ${large`\n    color: purple;\n    background-color: ${props.bg};\n  `};\n`\n\nrender(\n  \u003cContainer bg=\"mediumseagreen\"\u003eHello World\u003c/Container\u003e,\n)\n```\n\n### Using Resp with Emotion\n\nSee [this codesandbox link](https://codesandbox.io/s/xk7yj5ry4) for a simple example using Resp with Emotion.\n\n### Using Resp with Styled-Components\n\nSee [this codesandbox link](https://codesandbox.io/s/xzomwq46yq) for a simple example using Resp with Styled-Components.\n\n### Using Resp with Glamorous\n\nSee [this codesandbox link](https://codesandbox.io/s/o5826rnzl5) for a simple example using Resp with Glamorous\n\n### API\n\nResp exports a default function that accepts an object maping names to pixel breakpoint values. However it can be customized by passing in the optional second argument:\n\n```js\nimport resp from '@matthamlin/resp'\n\nconst result = resp(\n  {\n    print: 'print',\n    screen: 'screen',\n  },\n  {\n    mediaQueryFactory: ({ breakpoints }) =\u003e (\n      strings,\n      ...interpolations\n    ) =\u003e {\n      return `@media only ${breakpoint} { ${interpolations.reduce(\n        (acc, interpolation, ndx) =\u003e\n          `${acc}${interpolation}${strings[ndx + 1]}`,\n        strings[0],\n      )} }`\n    },\n  },\n)\n\n/**\n * result = {\n *   print: (...) =\u003e `@media only print { ... }`,\n *   screen: (...) =\u003e `@media only screen { ... }`\n * }\n */\n```\n\nIn the above example resp will generate print and screen based media queries.\n\nThe `mediaQueryFactory` function is a higher order function that accepts an object called with the breakpoint, and then returns a function that accepts one primary argument and then a spread of other values (assuming that it is used in a template literal use). If the first argument of the returned function isn't an array then it is being used as an object.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhamlim%2Fresp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhamlim%2Fresp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhamlim%2Fresp/lists"}