{"id":22021492,"url":"https://github.com/peterbenoit/getviewport","last_synced_at":"2025-03-23T10:19:12.143Z","repository":{"id":262890349,"uuid":"888683544","full_name":"peterbenoit/GetViewport","owner":"peterbenoit","description":"GetViewport is a lightweight JavaScript utility for responsive breakpoint detection. It dynamically injects CSS breakpoints and allows JavaScript to check the current viewport size directly. This setup avoids the need for complex SCSS configurations and pseudo-elements, making it simple to integrate into any web project.","archived":false,"fork":false,"pushed_at":"2024-11-14T21:19:23.000Z","size":7,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-28T16:45:00.235Z","etag":null,"topics":["javascript","media-queries","responsive-design","viewport"],"latest_commit_sha":null,"homepage":"https://codepen.io/peterbenoit/pen/GRVLPjJ","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/peterbenoit.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-14T20:29:02.000Z","updated_at":"2024-11-17T19:53:43.000Z","dependencies_parsed_at":"2024-11-14T21:30:14.126Z","dependency_job_id":"53fa5861-c6e6-40bb-b766-0807ad077f71","html_url":"https://github.com/peterbenoit/GetViewport","commit_stats":null,"previous_names":["peterbenoit/getviewport"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterbenoit%2FGetViewport","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterbenoit%2FGetViewport/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterbenoit%2FGetViewport/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterbenoit%2FGetViewport/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/peterbenoit","download_url":"https://codeload.github.com/peterbenoit/GetViewport/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245084931,"owners_count":20558306,"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":["javascript","media-queries","responsive-design","viewport"],"created_at":"2024-11-30T06:12:18.474Z","updated_at":"2025-03-23T10:19:12.121Z","avatar_url":"https://github.com/peterbenoit.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# GetViewport\n\n**GetViewport** is a lightweight JavaScript utility for responsive breakpoint detection. It dynamically injects CSS breakpoints and allows JavaScript to check the current viewport size directly. This setup avoids the need for complex SCSS configurations and pseudo-elements, making it simple to integrate into any web project.\n\n## Features\n\n- **Responsive Breakpoints**: Define custom breakpoints directly within the JavaScript file.\n- **JavaScript Access to CSS Variables**: Dynamically injected CSS allows JavaScript to detect the current breakpoint and viewport range.\n- **Mobile/Desktop Detection**: Helper methods to determine if the viewport is mobile-sized or desktop-sized.\n- **Automatic Updates**: Listens to window resize events to update the breakpoint detection on the fly.\n\n## Installation\n\n1. Clone the repository:\n   ```bash\n   git clone https://github.com/peterbenoit/GetViewport.git\n   cd GetViewport\n   ```\n\n2. Include the `getViewport.js` file in your project:\n   ```html\n   \u003cscript src=\"getViewport.js\"\u003e\u003c/script\u003e\n   ```\n\n## Usage\n\n### 1. Initialize\n\nCreate an instance of `GetViewport` to access the viewport properties:\n\n```javascript\nconst viewport = new GetViewport();\n```\n\n### 2. Methods\n\n- **`getBreakpoint()`**: Returns the current breakpoint name (e.g., `'sm'`, `'md'`).\n- **`getBreakpointValue()`**: Returns the numeric value for the current breakpoint (e.g., `1` for `xs`, `2` for `sm`, etc.).\n- **`isMobile()`**: Returns `true` if the viewport is a mobile size (breakpoints `xs`, `sm`).\n- **`isDesktop()`**: Returns `true` if the viewport is a desktop size (breakpoints `lg`, `xl`, `xxl`).\n\n### Examples\n\n```javascript\nconst viewport = new GetViewport();\n\nconsole.log(viewport.getBreakpoint());     // e.g., 'md'\nconsole.log(viewport.isMobile());          // true or false\nconsole.log(viewport.isDesktop());         // true or false\n```\n\n```javascript\n['load', 'resize'].forEach(event =\u003e {\n\tconst viewport = new GetViewport();\n    window.addEventListener(event, () =\u003e {\n\t\tconsole.clear();\n        console.table({\n            Breakpoint: viewport.getBreakpoint(),\n            BreakpointValue: viewport.getBreakpointValue(),\n            IsMobile: viewport.isMobile(),\n            IsDesktop: viewport.isDesktop()\n        });\n    });\n});\n```\n\n### 3. Customize Breakpoints\n\nModify the `breakpoints` object within `GetViewport` to set custom breakpoint values:\n\n```javascript\nthis.breakpoints = {\n\txs: 0,\n\tsm: 576,\n\tmd: 768,\n\tlg: 992,\n\txl: 1200,\n\txxl: 1400\n};\n```\n\n## How It Works\n\nGetViewport creates CSS rules with media queries for each breakpoint. It assigns a CSS variable `--viewport` based on the current breakpoint range. The JavaScript then reads this CSS variable to detect the viewport state, making it easy to adjust content based on the viewport size.\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeterbenoit%2Fgetviewport","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpeterbenoit%2Fgetviewport","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeterbenoit%2Fgetviewport/lists"}