{"id":19143642,"url":"https://github.com/cobyism/shapeshifter","last_synced_at":"2025-06-20T17:05:56.279Z","repository":{"id":6362835,"uuid":"7600015","full_name":"cobyism/shapeshifter","owner":"cobyism","description":"An always-on, in-browser, responsive design testing environment.","archived":false,"fork":false,"pushed_at":"2013-08-16T09:32:19.000Z","size":314,"stargazers_count":52,"open_issues_count":7,"forks_count":7,"subscribers_count":3,"default_branch":"gh-pages","last_synced_at":"2025-05-07T01:11:21.958Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://cobyism.com/shapeshifter","language":"CSS","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/cobyism.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":"2013-01-14T07:13:17.000Z","updated_at":"2023-05-17T02:51:01.000Z","dependencies_parsed_at":"2022-09-24T05:00:33.936Z","dependency_job_id":null,"html_url":"https://github.com/cobyism/shapeshifter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/cobyism/shapeshifter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cobyism%2Fshapeshifter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cobyism%2Fshapeshifter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cobyism%2Fshapeshifter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cobyism%2Fshapeshifter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cobyism","download_url":"https://codeload.github.com/cobyism/shapeshifter/tar.gz/refs/heads/gh-pages","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cobyism%2Fshapeshifter/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260985060,"owners_count":23092880,"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":[],"created_at":"2024-11-09T07:32:24.159Z","updated_at":"2025-06-20T17:05:51.234Z","avatar_url":"https://github.com/cobyism.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Shapeshifter\n\nShapeshifter is an in-browser responsive testing environment.\nHere’s [a demonstration](http://cobyism.com/shapeshifter).\n\n![Shapeshifter](http://cl.ly/MatS/shapeshifter-demo.gif)\n\n### Keyboard Shortcuts\n\nIn the demonstration above (and when using Shapeshifter yourself), the\nfollowing keyboard shortcuts are available:\n\n- `alt-shift-u`: Browser viewport\n- `alt-shift-i`: iPhone 3G/4 viewport\n- `alt-shift-o`: iPhone 5 viewport\n- `alt-shift-p`: iPad viewport\n- `alt-shift-l`: Rotate viewport (only available for mobile viewports)\n- `alt-shift-g`: Go to a new location\n\n## Why use Shapeshifter?\n\nResponsive design for the web requires thought throughout **the entire** design\nprocess, however current tools for testing the responsiveness of designs and\ninterfaces, such as bookmarklets and single-purpose sites, have many inherent\ndrawbacks that make them practical to use only as an afterthought, or at best\nas a sparodic spot-check.\n\nWhat we need—and what Shapeshifter aims to be—is a tool that allows you to\npay constant attention to your design and how it behaves in various common\nviewport sizes. My goal is for Shapeshifter to become an in-browser testing\nenvironment that stays with you throughout all stages of your projects.\n\n## How do I install this thing?\n\nThis project is still in its early stages, so the actual usage is far from\npolished. Ideally you should be able to use this in a number of ways.\n\n### Drag and drop\n\nAnyone should be able to use Shapeshifter with only the files in the repository.\n\n1. Download this project [as a Zip folder](https://github.com/cobyism/shapeshifter/archive/gh-pages.zip)\n2. Extract the contents, and place in the root directory of your project.\n3. Ensure the extracted subfolder is named `shapeshifter`.\n4. Add `/shapeshifter` to the end of your project’s URL.\n\n### Add as a Git submodule\n\nIf you use [Git](http://git-scm.com/) to manage your project, you can add\nshapeshifter as a submodule to easily pull in Shapeshifter updates.\n\n1. At your command prompt, `cd` into your project’s root directory.\n2. Next, run the command: `git submodule add https://github.com/cobyism/shapeshifter.git shapeshifter`\n3. Then commit the result: `git commit -m \"Add Shapeshifter as a submodule\"`\n4. Add `/shapeshifter` to the end of your project’s URL.\n\n### Future options\n\nIn the future, I’d like to experiment with other ways to allow people to use\nShapeshifter too, such as:\n\n- Creating a Rubygem (or similar) that allows people to quickly run Shapeshifter\nas a development server with the current directory as the web root. This would\nbe similar to the `server` command that [Yeoman](http://yeoman.io) has.\n- Releasing plugins specifically designed for various development stacks, such\nas [Ruby on Rails](http://rubyonrails.org), [Yeoman](http://yeoman.io), and\nso forth.\n\n## Help wanted!\n\nI’d love to receive contributions from anyone who cares to contribute. It\ndoesn’t matter how big or small your contribution is—whether it’s fixing a typo,\nadding a feature, or proposing an overhaul to the whole project—I’ll gladly\ntake a look at your change, and merge it in (within reason).\n\n## License\n\nSee [LICENSE](https://github.com/cobyism/shapeshifter/blob/gh-pages/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcobyism%2Fshapeshifter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcobyism%2Fshapeshifter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcobyism%2Fshapeshifter/lists"}