{"id":28383977,"url":"https://github.com/haneenmahd/responsive-web","last_synced_at":"2025-06-25T22:31:10.543Z","repository":{"id":51323067,"uuid":"337060097","full_name":"haneenmahd/responsive-web","owner":"haneenmahd","description":"A Simple npm package for using responsive media screen sizes in your web app.","archived":false,"fork":false,"pushed_at":"2022-01-15T07:52:47.000Z","size":29,"stargazers_count":7,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-30T08:15:43.332Z","etag":null,"topics":["angular","design","layout","media","polymer","react","responsive","responsive-css","responsive-design","responsive-grid","responsive-images","responsive-menu","responsive-theme","responsive-web-design","screen","size","vue","webpack"],"latest_commit_sha":null,"homepage":"https://haneenmahd.github.io/responsive-web/","language":"TypeScript","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/haneenmahd.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":"2021-02-08T11:53:51.000Z","updated_at":"2023-03-07T13:42:17.000Z","dependencies_parsed_at":"2022-09-20T12:52:31.236Z","dependency_job_id":null,"html_url":"https://github.com/haneenmahd/responsive-web","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/haneenmahd/responsive-web","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haneenmahd%2Fresponsive-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haneenmahd%2Fresponsive-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haneenmahd%2Fresponsive-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haneenmahd%2Fresponsive-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/haneenmahd","download_url":"https://codeload.github.com/haneenmahd/responsive-web/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haneenmahd%2Fresponsive-web/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261962167,"owners_count":23236880,"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":["angular","design","layout","media","polymer","react","responsive","responsive-css","responsive-design","responsive-grid","responsive-images","responsive-menu","responsive-theme","responsive-web-design","screen","size","vue","webpack"],"created_at":"2025-05-30T07:38:27.401Z","updated_at":"2025-06-25T22:31:10.511Z","avatar_url":"https://github.com/haneenmahd.png","language":"TypeScript","readme":"# @haneenmahd/responsive-web \nA Simple npm package for using responsive media screen sizes in your web app.\n\n![Node.js Package](https://github.com/haneenmahd/responsive-web/workflows/Node.js%20Package/badge.svg)\n![Node.js CI](https://github.com/haneenmahd/responsive-web/workflows/Node.js%20CI/badge.svg)\n\n## Now a Easier way to use media queries in your \n - Easy to use\n - Media screen sizes are completely made accurate for devices\n - Make your website Responsive to all devices\n\n# Installation\n### Using npm\n```\nnpm install @haneenmahd/responsive-web\n```\n### Using yarn\n```\nyarn add @haneenmahd/responsive-web\n```\n# How to Use\nExample:\n```jsx\nimport React from \"react\";\nimport styled from \"styled-components\";\nimport { Colors } from \"apple-colors\";\nimport QUERIES, { getWindowHeight, getWindowWidth, getWindowScrollPosX, getWindowScrollPosY, useScrollBy, useScrollTo } from \"responsive-web\";\n\nconst Wrapper = styled.div`\n  height: 300px;\n  width: 300px;\n  padding: 1.5rem 2rem;\n  border-radius: 1rem;\n  background: ${Colors.iOS.Light.Grey1};\n  @media screen and (${QUERIES.MOBILE}) {\n      background: ${Colors.iOS.Light.Grey1};\n\n  }\n`;\nconst Header = styled.h1`\n  font-size: 25px;\n  color: #fff;\n  @media screen and (${QUERIES.MOBILE}) {\n      font-size: 18px;\n  }\n`;\nconst Paragraph = styled.p`\n  font-size: 18px;\n  color: #fff;\n  @media screen and (${QUERIES.MOBILE}) {\n      font-size: 14px;\n  }\n`;\n\nconst MyDeviceQuery = () =\u003e {\n  const windowWidth = getWindowWidth();\n  const windowHeight = getWindowHeight();\n  const windowScrollPos = getWindowScrollPos();\n  return (\n    \u003cWrapper\u003e\n     \u003cHeader\u003eHello World\u003c/Header\u003e\n     {windowWidth \u003e 550 \u0026\u0026 \u003cp\u003eHello! Window width greater than 550px\u003c/p\u003e} \n     {windowHeight \u003e 500 \u0026\u0026 \u003cp\u003eHello! Window height greater than 500px\u003c/p\u003e}\n     \u003cp\u003eScroll amount x: {getWindowScrollX()}\u003c/p\u003e\n     \u003cp\u003eScroll amount y: {getWindowScrollY()}\u003c/p\u003e\n     \u003cParagraph\u003e\n     I am using queries to make my website responsive.\n     \u003c/Paragraph\u003e\n     \u003cbutton onclick={useScrollBy(20, 50)}\u003eScroll by\u003c/button\u003e\n     \u003cbutton onclick={useScrollTo(0, 50)}\u003eScroll To\u003c/button\u003e\n    \u003c/Wrapper\u003e\n  );\n}\n```\n\n\n## Available Sizes\n### Default:\n- MOBILE\n- TABLET\n- LAPTOP \n- DESKTOP \n- TV\n### You could Access these properties by: `QUERIES.OBJECTDEFINEDABOVE`\n\n## Cusom Device Sizes\n## IOS: \n- FOUR (iPhone 4 Models)   \n   - LANDSCAPE\n   - PORTRAIT\n- FIVE (iPhone 5 to 7 Models)\n   - LANDSCAPE\n   - PORTRAIT\n- EIGHT (iPhone 8 Models, excluding plus models)\n   - LANDSCAPE\n   - PORTRAIT\n- PLUS (iPhone 7 and 8 PLUS)\n   - LANDSCAPE\n   - PORTRAIT\n- X (iPhone X Models)\n   - LANDSCAPE\n   - PORTRAIT\n\n## SAMSUNG:\n- S3 (Also contains Note4 and Note5 Models Too.)\n  - LANDSCAPE\n  - PORTRAIT\n- NOTE3\n  - LANDSCAPE\n  - PORTRAIT\n- S6\n  - LANDSCAPE\n  - PORTRAIT\n\n## TABLETS:\n- IPAD \n  - MINI (This contains iPad 1, 2, Mini and Air too.)\n    - LANDSCAPE\n    - PORTRAIT\n  - IPAD4 (This contains iPad 3, 4 and iPad Pro 9.5\" Models too.)\n    - PORTRAIT\n    - LANDSCAPE\n  - PRO10\n    - LANDSCAPE\n    - PORTRAIT\n  - PRO12\n    - PORTRAIT\n    - LANDSCAPE\n\n\n## LAPTOPS\n- NONRETINA (Devices which have non-retina display)\n- RETINA (Devices Which have Retina display)\n\n# Developer\n## Haneen Mahdin\n\nFollow me on:\n- [Instagram](https://instagram.com/haneenmahdin)\n- [GitHub](https://github.com/haneenmahd)\n# License\n### `responsive-web` is licensed under MIT.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhaneenmahd%2Fresponsive-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhaneenmahd%2Fresponsive-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhaneenmahd%2Fresponsive-web/lists"}