{"id":13727385,"url":"https://github.com/Brew-Brew/css-in-js-media","last_synced_at":"2025-05-07T22:31:09.844Z","repository":{"id":43943895,"uuid":"187421360","full_name":"Brew-Brew/css-in-js-media","owner":"Brew-Brew","description":":art: Deal with responsive design simply when use CSS-in-JS  (styled-components,emotion.js)","archived":false,"fork":false,"pushed_at":"2023-02-28T18:57:36.000Z","size":1467,"stargazers_count":141,"open_issues_count":10,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-11T18:54:57.250Z","etag":null,"topics":["css","emotion","include-media","styled-components"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/css-in-js-media","language":"TypeScript","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/Brew-Brew.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}},"created_at":"2019-05-19T01:30:01.000Z","updated_at":"2024-08-07T09:35:45.000Z","dependencies_parsed_at":"2024-01-07T21:06:51.079Z","dependency_job_id":"5e33d1e6-4a50-4623-9db5-6a5ac0694654","html_url":"https://github.com/Brew-Brew/css-in-js-media","commit_stats":{"total_commits":96,"total_committers":5,"mean_commits":19.2,"dds":"0.32291666666666663","last_synced_commit":"8324b59912693a0b773fdf3a2c9bd2dd65add1d6"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Brew-Brew%2Fcss-in-js-media","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Brew-Brew%2Fcss-in-js-media/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Brew-Brew%2Fcss-in-js-media/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Brew-Brew%2Fcss-in-js-media/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Brew-Brew","download_url":"https://codeload.github.com/Brew-Brew/css-in-js-media/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224663763,"owners_count":17349263,"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":["css","emotion","include-media","styled-components"],"created_at":"2024-08-03T01:03:53.074Z","updated_at":"2024-11-14T17:31:39.915Z","avatar_url":"https://github.com/Brew-Brew.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# css-in-js-media :art:\n\n**Minified and Simplified include-media with CSS-in-JS**\n\nwhen you style with css-in-js (emotion, styled-component) you can perfectly and easily deal with responsive design with this `css-in-js-media` which is similar with [include-media](https://eduardoboucas.github.io/include-media/) and support type system(ts)\n\nIf you think this library is helpful, Support by give :star:\n\n**Migrate to Typescript at version V2 :tada:**\n\n**Introduced at**\n\n- https://styled-components.com/ecosystem helpers section\n- https://github.com/emotion-js/emotion#ecosystem\n\n---\n\n### :book: documentation\n\n- https://css-in-js-media.netlify.app/#/\n\n---\n\n### :rocket: install \u0026 default usage\n\n```\nnpm install css-in-js-media\nimport media from \"css-in-js-media\";\n```\n\n- example in `code-sandbox-link` : https://codesandbox.io/embed/k28q2nv2w7\n\n#### media-query break-point (default breakpoint)\n\n```\nsmallPhone: 320\nphone: 375\ntablet: 768\ndesktop: 1024\nlargeDesktop: 1440\n\n```\n\n---\n\n### :school_satchel: size\n\n![image](https://user-images.githubusercontent.com/26598542/57980351-92853600-7a65-11e9-8ce0-5e0f5acead4f.png)\n\n---\n\n### :question: how-to-use\n\nwith css-in-js library (ex: emotion.js , styled-component)\n\n- example with `emotion.js`\n\n```javascript\nimport media from \"css-in-js-media\";\n\nexport const exampleClass = css`\n  color: red;\n  ${media(\"\u003edesktop\")} {\n    font-size: 15px;\n  }\n  ${media(\"\u003c=desktop\", \"\u003etablet\")} {\n    font-size: 20px;\n  }\n  ${media(\"\u003c=tablet\", \"\u003ephone\")} {\n    font-size: 25px;\n  }\n  ${media(\"\u003c=phone\")} {\n    font-size: 30px;\n  }\n`;\n```\n\n- example with `styled-component`\n\n```javascript\nimport media from \"css-in-js-media\";\n\nconst exampleClass = styled.h1`\n  color: red;\n  ${media(\"\u003edesktop\")} {\n    font-size: 15px;\n  }\n  ${media(\"\u003c=desktop\", \"\u003etablet\")} {\n    font-size: 20px;\n  }\n  ${media(\"\u003c=tablet\", \"\u003ephone\")} {\n    font-size: 25px;\n  }\n  ${media(\"\u003c=phone\")} {\n    font-size: 30px;\n  }\n`;\n```\n\n#### set flexible breakpoints (optional)\n\n⚠️ You should set this in entry point file (root file) \n\n```javascript\nimport { setBreakPoints } from \"css-in-js-media\";\nsetBreakPoints({ desktop: 1440, largeDesktop: 1500 });\n\n// or string size\nsetBreakPoints({ desktop: \"140rem\", largeDesktop: \"calc(30 * 50px)\" });\n```\n\n#### get breakpoints (optional)\n\n```javascript\nimport { getBreakPoints } from \"css-in-js-media\";\ngetBreakPoints();\n// default breakpoints\n// {\n//   smallPhone: 320;\n//   phone: 375;\n//   tablet: 768;\n//   desktop: 1024;\n//   largeDesktop: 1440;\n// }\n```\n\n---\n\n### :heart: THANKS\n\n- https://github.com/koansang\n- https://github.com/yongdamsh\n\n### :bug: Bug reporting\n\n[Issue](https://github.com/Brew-Brew/css-in-js-media/issues)\n\n### License\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBrew-Brew%2Fcss-in-js-media","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBrew-Brew%2Fcss-in-js-media","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBrew-Brew%2Fcss-in-js-media/lists"}