{"id":20794580,"url":"https://github.com/silexlabs/responsize","last_synced_at":"2025-05-06T00:19:02.055Z","repository":{"id":23413199,"uuid":"26775664","full_name":"silexlabs/responsize","owner":"silexlabs","description":"Responsize is the tool to make any website responsive, quickly and efficiently.","archived":false,"fork":false,"pushed_at":"2022-03-12T20:18:41.000Z","size":6679,"stargazers_count":16,"open_issues_count":2,"forks_count":19,"subscribers_count":12,"default_branch":"main","last_synced_at":"2025-05-06T00:18:57.996Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://www.responsize.org/?url=http://silexlabs.org","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/silexlabs.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":"2014-11-17T20:26:06.000Z","updated_at":"2023-02-02T04:05:59.000Z","dependencies_parsed_at":"2022-08-21T17:20:53.607Z","dependency_job_id":null,"html_url":"https://github.com/silexlabs/responsize","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/silexlabs%2Fresponsize","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/silexlabs%2Fresponsize/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/silexlabs%2Fresponsize/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/silexlabs%2Fresponsize/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/silexlabs","download_url":"https://codeload.github.com/silexlabs/responsize/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252596433,"owners_count":21773846,"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-17T16:15:52.349Z","updated_at":"2025-05-06T00:19:02.011Z","avatar_url":"https://github.com/silexlabs.png","language":"JavaScript","readme":"# About Responsize\n\nDisplay websites on different screen sizes in the browser. Useful to visualize how a website looks on desktop while browsing on mobile, or on big screen while browsing on a laptop.\n\nResponsize can be used as an online tool, like the [Responsize app hosted by Silex Labs](http://app.responsize.org/). See the instructions bellow to host an instance on your servers.\n\nResponsize can be used as a library, providing app developers with the individual components used in Responsize, such as the resizeable Stage component.\n\nCopyright Silex Labs 2014. Licensed under the MIT license.\n\n# Use as a library\n\nInstall with bower\n\n```sh\n$ bower install responsize\n```\n\nLink the js and css files in your app\n\n```html\n\n\u003c!-- somewhere in your head tag --\u003e\n\u003cscript src=\"bower_components/responsize/dist/responsize.js\"\u003e\n\u003clink rel=\"bower_components/resonsize/dist/responsize.css\" rel=\"stylesheet\"\u003e\n\n\u003c!-- somewhere in your body tag --\u003e\n\u003cdiv id=\"stage\"\u003e\n  \u003ciframe\u003e\u003c/iframe\u003e\n\u003c/div\u003e\n```\n\nUse Responsize components in your app\n\n```js\nvar stage = new rsz.Stage(element.querySelector('#stage'));\n\n// load a website in the stage, beware of the cross site scripting,\n// security has to be met here\n// or you can load the HTML content with an ajax call\n// and then use stage.setHtml() to set the iframe HTML content\n// (note: use the HTML \u003cbase\u003e tag if needed to make sure the relative paths are loaded correctly)\nstage.setUrl('http://www.silexlabs.org').then(function(doc){\n  // here, the website is loaded,\n  // and the param `doc` is set to the iframe's document\n\n  // if you use the Wysiwyg class along with the Stage class\n  // you need to update the container to which to appy the Wysiwyg feature\n  wysiwyg.setDocument(doc);\n});\n\n// set the stage size to 1920x1024\n// if your screen is smaller than that,\n// Resonsize will load it with the desired size\n// and then scale it using css3 transform, to fit the #stage element.\n// you could simply let the stage auto size to loaded content: do not call Stage::setSize\n// or set stage.autoSize to true before calling stage.setUrl\nstage.setSize(1920, 1024);\n\n// add WYSIWYG feature (optional)\nvar wysiwyg = new Wysiwyg();\n\n// skin the selection marker and more\nwysiwyg.addTempStyle(window.location.href + '/css/wysiwyg-skin.css');\n\n// activate the mode where the user clicks are used to select elements\nwysiwyg.setSelectionMode(true);\n\n// optional: you can provide a function\n// to determine if the element can be selected by the user\nwysiwyg.setSelectFilter(function(element) {\n  return element.classList.has('my-selectable-css-class');\n});\n\n// provide a callback in order to be notified when the user has selected an element\nwysiwyg.setOnSelect(function() {\n  // retrieve the selected elements\n  var selection = wysiwyg.getSelected();\n  console.log('Selected elements: ', selection);\n});\n\n```\n\nTo remove the useless css classes and elements used during edition, use ```wysiwyg.getCleanHtml();```\n\n# Installation of the online tool\n\nRequirements\n\n* [node.js](http://nodejs.org/) installed\n* [NPM](https://npmjs.org/) installed\n* [python](https://www.python.org/downloads/) (version \u003e V2.7)\n* [java](https://www.java.com/en/download/index.jsp) (version \u003e 7)\n* grunt\n\n```\n$ npm install\n$ bower install\n$ grunt build\n$ npm start\n```\n\n# Develop\n\n```\n$ npm start\n$ grunt watch\n```\n\nThen open a browser at http://0.0.0.0:6969\n\n# Philosophy\n\nResponsize has a goal: allow web designers to be more efficient at handling responsiveness.\n\nThe user opens an HTML page and manage [bootstrap css classes](http://getbootstrap.com/) or [Simple Grid ones](https://github.com/ThisIsDallas/Simple-Grid] for example. And also hides or shows elements depending on the window size, or goup them into a [hamburger menu](http://www.designfloat.com/blog/2013/09/09/hamburger-menu-prominent-ui-evolution/).\n\n\u003e ResponSize is an amazing tool that enables the user to generate a responsive style sheet for a website. ResponSize can help you to have an optimal viewing experience for your website!\n\nUnlike [bootstrap builders](http://bootstrapbay.com/blog/bootstrap-editors/), Responsize does not let the user add elements or edit content. But it goes along with other free tools:\n\n* [silex](http://www.silex.me): edit design\n* [backnode](http://backnode.io): edit content\n* [responsize](http://responsize.org): handle responsiveness\n\n\n\n","funding_links":[],"categories":["📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsilexlabs%2Fresponsize","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsilexlabs%2Fresponsize","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsilexlabs%2Fresponsize/lists"}