{"id":22603507,"url":"https://github.com/rrmn/composition-grid","last_synced_at":"2026-02-24T21:33:53.209Z","repository":{"id":264547827,"uuid":"893643407","full_name":"rrmn/composition-grid","owner":"rrmn","description":"Composition Grid is a free open-source browser extension that lets you analyze website layouts instantly with composition grids.  You can toggle between  Golden Ratio (Phi) Grid Rule of Thirds Grid and change the color of the grid. Free, open source, and works on any website. Built for designers, developers, product managers who value precision.","archived":false,"fork":false,"pushed_at":"2025-01-06T00:07:40.000Z","size":22,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-10T22:04:53.322Z","etag":null,"topics":["design","golden-ratio","ui"],"latest_commit_sha":null,"homepage":"https://github.com/rrmn/composition-grid/","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/rrmn.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-25T00:06:50.000Z","updated_at":"2025-02-20T22:57:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"08a04d5d-b1cb-47fd-ae1e-22d8d925a25a","html_url":"https://github.com/rrmn/composition-grid","commit_stats":null,"previous_names":["rrmn/composition-grid"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/rrmn/composition-grid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rrmn%2Fcomposition-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rrmn%2Fcomposition-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rrmn%2Fcomposition-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rrmn%2Fcomposition-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rrmn","download_url":"https://codeload.github.com/rrmn/composition-grid/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rrmn%2Fcomposition-grid/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29801022,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-24T21:02:39.706Z","status":"ssl_error","status_checked_at":"2026-02-24T21:02:21.834Z","response_time":75,"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":["design","golden-ratio","ui"],"created_at":"2024-12-08T13:06:43.525Z","updated_at":"2026-02-24T21:33:53.193Z","avatar_url":"https://github.com/rrmn.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"https://github.com/user-attachments/assets/8962f0ff-5d33-4409-b97a-c95e717dbcd7\" alt=\"Composition Grid screenshot\" height=\"300\"\u003e\n\n# Composition Grid\nComposition Grid is a free open source browser extension that lets you analyze website layouts instantly with composition grids.\n\nYou can toggle between \n- **Golden Ratio** (Phi) Grid\n- **Rule of Thirds** Grid\n\nand **change the color of the grid** by entering a HEX code or CSS color name (e.g. `#00FF00` or `purple`).\n\nFree, open source, and works on any website. Built for designers,  developers, and product managers who value precision.\n\n# Installation\n\n1. Go to Composition Grid in the\n    1. [Google Chrome Webstore](https://chromewebstore.google.com/detail/composition-grid/bkoakbekeejaepenfddjcehomnkpgonk)\n    2. [Mozilla Firefox Browser Add-ons](https://addons.mozilla.org/en-US/firefox/addon/composition-grid/)\n    3. [Microsoft Edge Add-ons](https://microsoftedge.microsoft.com/addons/detail/composition-grid/bjhalbeaddpjdacgpclnppcaipdbledd) \n3. Press \"Add to Chrome/Firefox/Edge\"\n4. Done!\n\n# Something not working? Ideas for features?\n\nIf you have ideas, questions: Just [open an issue](https://github.com/rrmn/composition-grid/issues/new/choose) here on Github.\n\nYour requests are being heard! I recently added the ability to set a different grid color based on a Google Review.\n\n\n# Contributions\n\nIf you want to contribute: Just open a PR here on Github.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frrmn%2Fcomposition-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frrmn%2Fcomposition-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frrmn%2Fcomposition-grid/lists"}