{"action":"created","issue":{"url":"https://api.github.com/repos/google/web-starter-kit/issues/296","labels_url":"https://api.github.com/repos/google/web-starter-kit/issues/296/labels{/name}","comments_url":"https://api.github.com/repos/google/web-starter-kit/issues/296/comments","events_url":"https://api.github.com/repos/google/web-starter-kit/issues/296/events","html_url":"https://github.com/google/web-starter-kit/issues/296","id":38100899,"number":296,"title":"Material Design > Components","user":{"login":"addyosmani","id":110953,"avatar_url":"https://avatars.githubusercontent.com/u/110953?v=3","gravatar_id":"","url":"https://api.github.com/users/addyosmani","html_url":"https://github.com/addyosmani","followers_url":"https://api.github.com/users/addyosmani/followers","following_url":"https://api.github.com/users/addyosmani/following{/other_user}","gists_url":"https://api.github.com/users/addyosmani/gists{/gist_id}","starred_url":"https://api.github.com/users/addyosmani/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/addyosmani/subscriptions","organizations_url":"https://api.github.com/users/addyosmani/orgs","repos_url":"https://api.github.com/users/addyosmani/repos","events_url":"https://api.github.com/users/addyosmani/events{/privacy}","received_events_url":"https://api.github.com/users/addyosmani/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/google/web-starter-kit/labels/bug","name":"bug","color":"5319e7"},{"url":"https://api.github.com/repos/google/web-starter-kit/labels/P1","name":"P1","color":"fbca04"}],"state":"closed","locked":false,"assignee":{"login":"addyosmani","id":110953,"avatar_url":"https://avatars.githubusercontent.com/u/110953?v=3","gravatar_id":"","url":"https://api.github.com/users/addyosmani","html_url":"https://github.com/addyosmani","followers_url":"https://api.github.com/users/addyosmani/followers","following_url":"https://api.github.com/users/addyosmani/following{/other_user}","gists_url":"https://api.github.com/users/addyosmani/gists{/gist_id}","starred_url":"https://api.github.com/users/addyosmani/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/addyosmani/subscriptions","organizations_url":"https://api.github.com/users/addyosmani/orgs","repos_url":"https://api.github.com/users/addyosmani/repos","events_url":"https://api.github.com/users/addyosmani/events{/privacy}","received_events_url":"https://api.github.com/users/addyosmani/received_events","type":"User","site_admin":false},"milestone":null,"comments":71,"created_at":"2014-07-17T16:27:27Z","updated_at":"2015-08-20T18:16:27Z","closed_at":"2015-01-05T15:58:29Z","body":"To give developers targeting older browsers and simple sites a path to using [Material Design](http://google.com/design/spec), we're going to implement an official light-weight version using just JavaScript and CSS.\r\n\r\nThese will strive to be simple enough that anyone can easily customise them. For evergreen browsers, we recommend just using Polymer directly where possible.\r\n\r\n**This is a preliminary list we hope to ship:**\r\n\r\n* Button ([spec](http://www.google.com/design/spec/components/buttons.html#))\r\n* Radio button\r\n* Input ([spec](http://www.google.com/design/spec/components/text-fields.html))\r\n* Toolbar\r\n* Card ([spec](http://www.google.com/design/spec/components/cards.html))\r\n* Progress bar\r\n* Slider ([spec](http://www.google.com/design/spec/components/sliders.html))\r\n* Icon button\r\n* Fab\r\n* Shadow\r\n* Toggle\r\n* Toolbar\r\n* Menu button ([spec](http://www.google.com/design/spec/components/menus.html))\r\n\r\n**Who is working on what?**\r\n\r\n| Element          | Author          | Prototype   |\r\n| ------------- | ------------- | ------------- |\r\n| Button          | @addyosmani      | http://codepen.io/addyosmani/pen/Cjlaz |\r\n| Input fields           | @mattcooper      | http://codepen.io/mattcooper/pen/jmIua |\r\n| Radio button          | @Itrulia       | http://jsfiddle.net/itrulia/25pj2/ |\r\n| Icon button   | Unassigned      | |\r\n| Checkbox          | @jasonmayes        | http://codepen.io/jasonmayes/pen/wxtFr |\r\n| Shadow & Cards           | @addyosmani       | http://codepen.io/addyosmani/pen/zimes |\r\n| Toggle button | @mattcooper  | http://codepen.io/mattcooper/pen/npEyu |\r\n| Progress        | @marcacohen      | |\r\n| Slider        | @devnook      | https://github.com/google/web-starter-kit/pull/334 |\r\n| FAB button           | @wibblymat | http://codepen.io/wibblymat/pen/mnGsu |\r\n| Menu button    | @nicolasgarnier | |\r\n| Theming | @devnook  | In progress |\r\n| Toast | @wibblymat   | http://codepen.io/wibblymat/pen/avAjq |\r\n| Layout (site) | @addyosmani  | https://github.com/google/web-starter-kit/issues/295 |\r\n| Layout (app) | @addyosmani  | unassigned | [Look](http://www.polymer-project.org/components/paper-elements/demo.html)\r\n**Technical details:**\r\n\r\n* Components need to support all of the browsers listed in our matrix\r\n* Components should be written using CSS and vanilla JS (no jQuery or additional libraries)\r\n* If we're sticking with Sass, must be written with Sass or CSS and we'll tweak as necessary.\r\n* Maintain fidelity with the Polymer paper elements as closely as possible.\r\n* Attempt to style native HTML elements over wrapping where possible (to preserve accessibility)\r\n\r\n**Web Starter Kit extras**\r\n\r\n* [Material layout](https://github.com/google/web-starter-kit/issues/295)\r\n* [Bring in the new Roboto](https://github.com/google/web-starter-kit/issues/294)\r\n* [Style guide > Icons](https://github.com/google/web-starter-kit/issues/293)\r\n* [Theming support](https://github.com/google/web-starter-kit/issues/292)\r\n* Refresh style guide to Material Design\r\n\r\n**Notes**\r\n\r\n* All elements will go through a UX review from the Material Design team before getting shipped as part of Web Starter Kit to make sure we're not messing up :)\r\n* The Polymer paper elements are going to be undergoing an accessibility review in the coming months. We'll keep a close eye on this and integrate any learnings that apply to our element set.\r\n\r\nInspiration:\r\n\r\n![](http://i.imgur.com/N3uoYYD.png)\r\n\r\n![](http://i.imgur.com/jbU9UnP.png)\r\n\r\nI'll work with Google's MD team to try getting a review process in place for anything we create here."},"comment":{"url":"https://api.github.com/repos/google/web-starter-kit/issues/comments/133105678","html_url":"https://github.com/google/web-starter-kit/issues/296#issuecomment-133105678","issue_url":"https://api.github.com/repos/google/web-starter-kit/issues/296","id":133105678,"user":{"login":"McOussKing","id":2561446,"avatar_url":"https://avatars.githubusercontent.com/u/2561446?v=3","gravatar_id":"","url":"https://api.github.com/users/McOussKing","html_url":"https://github.com/McOussKing","followers_url":"https://api.github.com/users/McOussKing/followers","following_url":"https://api.github.com/users/McOussKing/following{/other_user}","gists_url":"https://api.github.com/users/McOussKing/gists{/gist_id}","starred_url":"https://api.github.com/users/McOussKing/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/McOussKing/subscriptions","organizations_url":"https://api.github.com/users/McOussKing/orgs","repos_url":"https://api.github.com/users/McOussKing/repos","events_url":"https://api.github.com/users/McOussKing/events{/privacy}","received_events_url":"https://api.github.com/users/McOussKing/received_events","type":"User","site_admin":false},"created_at":"2015-08-20T18:16:27Z","updated_at":"2015-08-20T18:16:27Z","body":"Thank you\r\ni like MDL but the class are bit different that's why people choose Bootstrap because it's more clear and practical for Developers, Here a simple comparison :\r\n\r\nhttp://demo.tutorialzine.com/2015/07/comparing-bootstrap-with-mdl/?grid\r\nMDL is better in result but Bootstrap source code is more clear"}}