{"id":40244108,"url":"https://github.com/danijelgrabez/responsively","last_synced_at":"2026-01-20T00:01:27.086Z","repository":{"id":57354861,"uuid":"141289002","full_name":"danijelgrabez/responsively","owner":"danijelgrabez","description":"Responsive styles with atomic CSS declarations.","archived":false,"fork":false,"pushed_at":"2018-12-16T17:42:03.000Z","size":27,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-10-26T03:53:53.982Z","etag":null,"topics":["css","css-in-js","emotion","media-query","react","styles"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/responsively","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/danijelgrabez.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":"2018-07-17T12:49:11.000Z","updated_at":"2022-06-12T07:42:25.000Z","dependencies_parsed_at":"2022-09-26T16:31:34.956Z","dependency_job_id":null,"html_url":"https://github.com/danijelgrabez/responsively","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/danijelgrabez/responsively","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danijelgrabez%2Fresponsively","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danijelgrabez%2Fresponsively/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danijelgrabez%2Fresponsively/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danijelgrabez%2Fresponsively/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danijelgrabez","download_url":"https://codeload.github.com/danijelgrabez/responsively/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danijelgrabez%2Fresponsively/sbom","scorecard":{"id":320732,"data":{"date":"2025-08-11","repo":{"name":"github.com/danijelgrabez/responsively","commit":"85cded5d4b8f40a7fb7637b3b50dbfbd6b3bf2fe"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3,"checks":[{"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":"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":"Code-Review","score":0,"reason":"Found 0/12 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":"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":"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":"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":"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":"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":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"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 2 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"}}]},"last_synced_at":"2025-08-18T01:17:50.316Z","repository_id":57354861,"created_at":"2025-08-18T01:17:50.316Z","updated_at":"2025-08-18T01:17:50.316Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28590676,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-19T23:59:00.777Z","status":"ssl_error","status_checked_at":"2026-01-19T23:58:54.030Z","response_time":67,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5: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","emotion","media-query","react","styles"],"created_at":"2026-01-20T00:01:13.583Z","updated_at":"2026-01-20T00:01:27.044Z","avatar_url":"https://github.com/danijelgrabez.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"http://www.danijelgrabez.com/public-links/github/responsively/responsively-logo.gif\" width=\"256\" alt= \"Responsively logo\"\u003e\n\n# Responsively\nResponsively is created with the intention to easily adjust components with a responsive, mobile-first approach in mind; it may resemble single purpose classes (e.g. `.mt-0`, or `.mt-0--mobile`).\n\nThis library plays nicely with libraries such 👩‍🎤 [Emotion](https://emotion.sh/) and 💅 [Styled Components](https://www.styled-components.com/) since the code output is string.\n\n## Table of contents\n\n\u003cdetails\u003e\n\u003c!-- toc --\u003e\n\n- [Usage](#usage)  \n- [Simple flow](#simple-flow)  \n  * [1. Configure breakpoints](#1-configure-breakpoints)    \n  * [2. Implementation](#2-implementation)  \n    * [Option 1: Pass props to component with supported functions](#option-1-pass-props-to-component-with-supported-functions)  \n    * [Option 2: Call the function with desired property and its responsive values in style declaration\n](#option-2-call-the-function-with-desired-property-and-its-responsive-values-in-style-declaration)  \n    * [Option 3: Pass property and values props to the component for single purpose usage](#option-3-pass-property-and-values-props-to-the-component-for-single-purpose-usage)  \n- [Try it out](#try-it-out)  \n- [Install](#install)  \n- [API](#api)  \n  * [Arguments](#arguments)  \n  * [`breakpointsArray` and `propertyArrayValues` values](#breakpointsarray-and-propertyarrayvalues-values)  \n  * [Warning message](#warning-message)  \n  * [Skipping breakpoints](#skipping-breakpoints)  \n- [TODO](#todo)  \n- [Suggestions](#suggestions)  \n \n\u003c!-- tocstop --\u003e\n\u003c/details\u003e\n\n## Usage\nThis library adjust the `value` of the passed property according to passed `breakpoints`. Breakpoints can be defined on a component/page basis, but it can also be defined across the whole app, depending on one's needs.\n\n## Simple flow\n1. Configure breakpoints\n2. Implement responsively in one of the following ways:\n    - Pass props to component with supported [functions](documentation/Property-list.md)\n    - Call the function with desired property and its responsive values via styles, or\n    - Pass `property` and `values` props to the component for single purpose usage\n3. Done 😇\n\n### 1. Configure breakpoints\n```javascript\n/**\n * Configure breakpoints in any file which is being called\n * on the top aplication level (e.g. App.js, utils.js, etc.)\n */\nimport Responsively from 'responsively';\n\nResponsively.configureBreakpoints([480, 768, 990, 1170]);\n```\n\n### 2. Implementation\n#### Option 1: Pass props to component with supported functions\nWith this handy approach we can integrate responsively functions which would provide an option to pass multiple responsive props to component. Check the documentation for all available [functions](documentation/Property-list.md).\n\n```javascript\nimport React from 'react';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/core';\nimport { background, text } from 'responsively';\n\nconst SectionStyles = styled('section')(\n  ...background,\n  ...text,\n);\n\n/**\n * Section component\n */\nconst Section = props =\u003e \u003cSectionStyles {...props} /\u003e;\n\nexport default Section;\n\n```\n\nthen, define as many properties as you need:\n ```javascript\nimport Section from '../ui';\n\n...\n\n\u003cSection\n  background={['#f9eeef', '#f5cbce', '#f2afb4', '#ef717c', '#f74b59']}\n  color={['black', 'white']}\n  textTransform={['uppercase']}\n\u003e\n  \u003ch1\u003eSection Heading\u003c/h1\u003e\n\u003c/Section\u003e\n ```\n\n #### Option 2: Call the function with desired property and its responsive values in style declaration\n```javascript\nimport React from 'react';\nimport { css } from '@emotion/core';\nimport Responsively from 'responsively';\n\nconst baseStyles = css`${Responsively.responsive('margin-top')([10, 20, 30, 40, 50])};`;\n\n// or, add responsively directly to the component\n\n\u003cComponent className={css`${Responsively.responsive('margin-top')([10, 20, 30, 40, 50])};`} /\u003e\n```\n\n#### Option 3: Pass `property` and `values` props to the component for single purpose usage\n```javascript\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/core';\nimport Responsively from 'responsively';\n\nconst baseStyles = ({ property, values }) =\u003e\n  css`\n    ${Responsively.responsive(property)(values)};\n  `;\n\nconst SectionStyles = styled('div')(baseStyles);\n\n/**\n * Section component\n */\nconst Section = ({ property, values }) =\u003e \u003cSectionStyles property={property} values={values} {...props} /\u003e;\n\nSection.propTypes = {\n  property: PropTypes.string.isRequired,\n  values: PropTypes.array.isRequired,\n};\n\nexport default Section;\n```\n\nthen, define its property and values as props:\n ```javascript\nimport Section from '../ui';\n\n...\n\n\u003cSection property=\"margin\" values={[10, 20, 30, 40, 50]}\u003e\n   \u003ch1\u003eSection Heading\u003c/h1\u003e\n\u003c/Section\u003e\n ```\n\n ## Try It Out\n Try the examples on CodeSandbox:\n - Option 1: 👩‍🎤 [Emotion](https://codesandbox.io/s/zn41vw6n9p)\n - Option 2: 👩‍🎤 [Emotion](https://codesandbox.io/s/xjyr0ox38w) | 💅 [Styled Components](https://codesandbox.io/s/7mo04o1361)\n - Option 3: 👩‍🎤 [Emotion](https://codesandbox.io/s/wqjymvnyjw) | 💅 [Styled Components](https://codesandbox.io/s/1qwzy9mq)\n\n\n## Install\n```npm i responsively -S```\n\nor,\n\n```yarn add responsively```\n\n\n## API\n```javascript\nResponsively.responsive([breakpointsArray])(propertyName)([propertyArrayValues]);\n```\n\n### Arguments\n* `breakpointsArray` — An array of breakpoint values\n* `propertyName` — CSS property name\n* `propertyArrayValues` — An array of values which maps to provided breakpoints. By default, the first value is applied without a media query, while the rest of the values are applied as children of media query selectors.\n\n### `breakpointsArray` and `propertyArrayValues` values\n* Support all unit kinds (px, em, rem, vw, vh, %, etc.).\u003cbr\u003e\nIf a unitless value is passed, it will automatically be converted to `px`. CSS properties with unitless values are processed as is (e.g. `line-height: 1.5;` or `flex: 1;`).\n```javascript\nResponsively.responsive('margin-top')([10, 20, 30, '4em', '5rem']);\n```\nwill yield:\n```css\nmargin-top: 10px;\n@media screen and (min-width: 480px) {\n  margin-top: 20px;\n}\n@media screen and (min-width: 768px) {\n  margin-top: 30px;\n}\n@media screen and (min-width: 990px) {\n  margin-top: 4em;\n}\n@media screen and (min-width: 1170px) {\n  margin-top: 5rem;\n}\n```\n\n* Clean output \u003cbr\u003e\nThe number of generated breakpoints depends on the number of passed property values.\n```javascript\nconst { responsive } = Responsively;\n\nresponsive('margin')([10]);\nresponsive('padding')([10, 20]);\n```\nwill yield:\n```css\nmargin: 10px;\npadding: 10px;\n@media screen and (min-width: 480px) {\n  margin-top: 20px;\n}\n```\n\n* Shorthand values per breakpoint\n```javascript\nResponsively.responsive('margin')(['10px 20px']);\n```\nwill yield:\n```css\nmargin: 10px 20px;\n```\n\n* Correction for common typos\n```javascript\nconst { responsive } = Responsively;\n\nResponsively.responsive('margin')(['10 20']);\nResponsively.responsive('padding')(['10px']);\n```\nwill yield:\n```css\nmargin: 10px 20px;\npadding: 10px;\n```\n\n### Warning message\nIn case one passed more property values then there are breakpoint values, responsively provides the warning in the browser's console.\n```javascript\nResponsively.configureBreakpoints([480, 768, 990, 1170]);\n\nResponsively.responsive('padding')([10, 20, 30, 40, 50, 60]); // first argument is `default value`\n```\nwill compile the code, but the last value will be nested in undefined breakpoint:\n```css\n...\n\n@media screen and (max-width: undefined) {\n  padding: 60px;\n}\n```\n\nConsole warning message:\n\n![responsively-warning](http://www.danijelgrabez.com/public-links/github/responsively/responsively-warning-message.png \"Image of responsively warning message\")\n\n### Skipping breakpoints\nIf particular breakpoint needs to be skipped, `undefined` value should be passed:\n```javascript\nResponsively.configureBreakpoints([480, 768, 990, 1170]);\nResponsively.responsive('padding')([undefined, 20, undefined, undefined, 60]);\n```\nwill yield:\n```css\n...\n\n@media screen and (max-width: 480px) {\n  padding: 20px;\n}\n@media screen and (max-width: 1170px) {\n  padding: 60px;\n}\n```\n\n## TODO\n- [ ] Merge exact shorthand values, e.g. `'10 10' → 10px`\n- [ ] Add shorthand properties, e.g. `m → margin`, or `p → padding`\n- [ ] \u003cimg src=\"http://www.danijelgrabez.com/public-links/github/responsively/shrug.gif\" height=\"18\" alt= \"Animated shrug\"\u003e\n\n\n## Suggestions?\n[Shoot me an email](mailto:danijel.grabez@gmail.com), or [submit an issue](https://github.com/danijelgrabez/responsively/issues) 🚀\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanijelgrabez%2Fresponsively","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanijelgrabez%2Fresponsively","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanijelgrabez%2Fresponsively/lists"}