{"action":"created","issue":{"url":"https://api.github.com/repos/adobe/brackets/issues/8284","labels_url":"https://api.github.com/repos/adobe/brackets/issues/8284/labels{/name}","comments_url":"https://api.github.com/repos/adobe/brackets/issues/8284/comments","events_url":"https://api.github.com/repos/adobe/brackets/issues/8284/events","html_url":"https://github.com/adobe/brackets/issues/8284","id":36843817,"number":8284,"title":"Feature: Use Google's Polymer and Material Design","user":{"login":"chriswins2much","id":4203662,"avatar_url":"https://avatars.githubusercontent.com/u/4203662?v=3","gravatar_id":"","url":"https://api.github.com/users/chriswins2much","html_url":"https://github.com/chriswins2much","followers_url":"https://api.github.com/users/chriswins2much/followers","following_url":"https://api.github.com/users/chriswins2much/following{/other_user}","gists_url":"https://api.github.com/users/chriswins2much/gists{/gist_id}","starred_url":"https://api.github.com/users/chriswins2much/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/chriswins2much/subscriptions","organizations_url":"https://api.github.com/users/chriswins2much/orgs","repos_url":"https://api.github.com/users/chriswins2much/repos","events_url":"https://api.github.com/users/chriswins2much/events{/privacy}","received_events_url":"https://api.github.com/users/chriswins2much/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/adobe/brackets/labels/architecture","name":"architecture","color":"0b02e1"}],"state":"closed","locked":false,"assignee":{"login":"dangoor","id":55970,"avatar_url":"https://avatars.githubusercontent.com/u/55970?v=3","gravatar_id":"","url":"https://api.github.com/users/dangoor","html_url":"https://github.com/dangoor","followers_url":"https://api.github.com/users/dangoor/followers","following_url":"https://api.github.com/users/dangoor/following{/other_user}","gists_url":"https://api.github.com/users/dangoor/gists{/gist_id}","starred_url":"https://api.github.com/users/dangoor/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dangoor/subscriptions","organizations_url":"https://api.github.com/users/dangoor/orgs","repos_url":"https://api.github.com/users/dangoor/repos","events_url":"https://api.github.com/users/dangoor/events{/privacy}","received_events_url":"https://api.github.com/users/dangoor/received_events","type":"User","site_admin":false},"milestone":null,"comments":5,"created_at":"2014-06-30T22:10:41Z","updated_at":"2015-02-11T22:54:26Z","closed_at":"2014-07-14T16:20:46Z","body":"Google's new Polymer framework has recently added Google's paper material design. I propose that Brackets starts the integration of web components (as presented at [Polymer's website](http://www.polymer-project.org)) . Polymer allows developers to extend HTML by providing an interface for defining their own tags. This would provide an architecture change in the HTML layout of brackets that is broken down by component on the HTML side of things, greatly simplifying the final HTML layout of Brackets. It provides code that is more legible and is more clearly organized than a typical HTML page (although it is reminiscent of XHTML).\r\n\r\nRather than trying to explain its use to the Brackets team and developers, let me first give you an insight on translating current HTML as laid out in Brackets to Polymer HTML.\r\n\r\nInstead of `<div id=\"sidebar\" class=\"sidebar panel quiet-scrollbars horz-resizable right-resizer collapsible\" data-minsize=\"0\" data-forceleft=\".content\" style=\"box-sizing: border-box;\">......</div>` you could have `<sidebar>.....</sidebar>`\r\n\r\nInstead of `<div class=\"content\">....</div>` you could have `<content>....</content>`\r\n\r\nInstead of the trivial bootstrap example with super-complexities in a modal:\r\n```\r\n<!-- Button trigger modal -->\r\n<button class=\"btn btn-primary btn-lg\" data-toggle=\"modal\" data-target=\"#myModal\">\r\n  Launch demo modal\r\n</button>\r\n\r\n<!-- Modal -->\r\n<div class=\"modal fade\" id=\"myModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\"><span aria-hidden=\"true\">&times;</span><span class=\"sr-only\">Close</span></button>\r\n        <h4 class=\"modal-title\" id=\"myModalLabel\">Modal title</h4>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n        ...\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button>\r\n        <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n```\r\nyou could have:\r\n```\r\n<!-- Button trigger modal -->\r\n<button class=\"btn btn-primary btn-lg\" data-toggle=\"modal\" data-target=\"#myModal\">\r\n  Launch demo modal\r\n</button>\r\n\r\n<!-- Modal -->\r\n<modal id=\"myModal\">\r\n    <modal-header>\r\n      <button type=\"button\" class=\"close\" data-dismiss=\"modal\"><span aria-hidden=\"true\">&times;</span><span class=\"sr-only\">Close</span></button>\r\n      <h4 class=\"modal-title\" id=\"myModalLabel\">Modal title</h4>\r\n    </modal-header>\r\n    <modal-body>\r\n      ...\r\n    </modal-body>\r\n    <modal-footer>\r\n      <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button>\r\n      <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\r\n    </modal-footer>\r\n</modal>\r\n```\r\n\r\nThis would allow extension developers to more easily extend brackets using a bootstrap of Brackets components for developers to use, without having to worry about applying one of the brackets-defined classes to get a component to look or work right if extension developers are looking to manipulate the internal DOM of brackets rather than use JS classes for tabs (Tab), etc.\r\n\r\nEDIT: Another clear benefit I noticed about the Polymerized Bootstrap example was that the heirarchy of elements was clearer and more intuitive."},"comment":{"url":"https://api.github.com/repos/adobe/brackets/issues/comments/73982962","html_url":"https://github.com/adobe/brackets/issues/8284#issuecomment-73982962","issue_url":"https://api.github.com/repos/adobe/brackets/issues/8284","id":73982962,"user":{"login":"peterflynn","id":1197510,"avatar_url":"https://avatars.githubusercontent.com/u/1197510?v=3","gravatar_id":"","url":"https://api.github.com/users/peterflynn","html_url":"https://github.com/peterflynn","followers_url":"https://api.github.com/users/peterflynn/followers","following_url":"https://api.github.com/users/peterflynn/following{/other_user}","gists_url":"https://api.github.com/users/peterflynn/gists{/gist_id}","starred_url":"https://api.github.com/users/peterflynn/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/peterflynn/subscriptions","organizations_url":"https://api.github.com/users/peterflynn/orgs","repos_url":"https://api.github.com/users/peterflynn/repos","events_url":"https://api.github.com/users/peterflynn/events{/privacy}","received_events_url":"https://api.github.com/users/peterflynn/received_events","type":"User","site_admin":false},"created_at":"2015-02-11T22:54:26Z","updated_at":"2015-02-11T22:54:26Z","body":"@hdf What functionality are you looking for, specifically?  Since Brackets can edit any text files, you can use Brackets today to create Chrome Apps using Polymer -- but it sounds like there's some kind of framework-specific support you're interested in.  Could you give more detail?\r\n\r\n(Note that this bug was originally about rewriting _Brackets itself_ to use Polymer and/or Web Components internally, which wouldn't have any visible impact on end users of Brackets)."}}