{"action":"created","issue":{"url":"https://api.github.com/repos/callemall/material-ui/issues/4066","repository_url":"https://api.github.com/repos/callemall/material-ui","labels_url":"https://api.github.com/repos/callemall/material-ui/issues/4066/labels{/name}","comments_url":"https://api.github.com/repos/callemall/material-ui/issues/4066/comments","events_url":"https://api.github.com/repos/callemall/material-ui/issues/4066/events","html_url":"https://github.com/callemall/material-ui/issues/4066","id":150367045,"number":4066,"title":"[Core] There should be a more sophisticated styling solution.","user":{"login":"nathanmarks","id":4420103,"avatar_url":"https://avatars.githubusercontent.com/u/4420103?v=3","gravatar_id":"","url":"https://api.github.com/users/nathanmarks","html_url":"https://github.com/nathanmarks","followers_url":"https://api.github.com/users/nathanmarks/followers","following_url":"https://api.github.com/users/nathanmarks/following{/other_user}","gists_url":"https://api.github.com/users/nathanmarks/gists{/gist_id}","starred_url":"https://api.github.com/users/nathanmarks/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nathanmarks/subscriptions","organizations_url":"https://api.github.com/users/nathanmarks/orgs","repos_url":"https://api.github.com/users/nathanmarks/repos","events_url":"https://api.github.com/users/nathanmarks/events{/privacy}","received_events_url":"https://api.github.com/users/nathanmarks/received_events","type":"User","site_admin":false},"labels":[{"id":297148466,"url":"https://api.github.com/repos/callemall/material-ui/labels/Core","name":"Core","color":"006b75","default":false},{"id":299360691,"url":"https://api.github.com/repos/callemall/material-ui/labels/Discussion","name":"Discussion","color":"bfdadc","default":false},{"id":297114765,"url":"https://api.github.com/repos/callemall/material-ui/labels/Performance","name":"Performance","color":"eb6420","default":false},{"id":302556123,"url":"https://api.github.com/repos/callemall/material-ui/labels/Umbrella","name":"Umbrella","color":"1a1a1a","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":{"url":"https://api.github.com/repos/callemall/material-ui/milestones/14","html_url":"https://github.com/callemall/material-ui/milestones/next","labels_url":"https://api.github.com/repos/callemall/material-ui/milestones/14/labels","id":1582007,"number":14,"title":"next","description":"","creator":{"login":"alitaheri","id":8528759,"avatar_url":"https://avatars.githubusercontent.com/u/8528759?v=3","gravatar_id":"","url":"https://api.github.com/users/alitaheri","html_url":"https://github.com/alitaheri","followers_url":"https://api.github.com/users/alitaheri/followers","following_url":"https://api.github.com/users/alitaheri/following{/other_user}","gists_url":"https://api.github.com/users/alitaheri/gists{/gist_id}","starred_url":"https://api.github.com/users/alitaheri/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/alitaheri/subscriptions","organizations_url":"https://api.github.com/users/alitaheri/orgs","repos_url":"https://api.github.com/users/alitaheri/repos","events_url":"https://api.github.com/users/alitaheri/events{/privacy}","received_events_url":"https://api.github.com/users/alitaheri/received_events","type":"User","site_admin":false},"open_issues":37,"closed_issues":35,"state":"open","created_at":"2016-02-14T16:34:47Z","updated_at":"2016-10-04T19:53:28Z","due_on":null,"closed_at":null},"comments":87,"created_at":"2016-04-22T13:15:11Z","updated_at":"2016-10-28T10:45:28Z","closed_at":null,"body":"@callemall/material-ui please leave some input here when you can 👍 \r\n\r\nWe need to decide on a styling solution for `0.16.0` that will help address long standing issues. Outside of performance issues, there are hacks and props all over the place to make up for the fact that we are missing out on some of the powerful features in CSS that cannot be used with inline styles -- pseudo classes, media queries (without matchmedia), etc.\r\n\r\nFrom what I understand, the general consensus is that we want a JS style solution that has the capability to write styles to an actual stylesheet in the DOM.\r\n\r\nHere are a few of the maintained solutions that do this:\r\nhttps://github.com/rofrischmann/react-look\r\nhttps://github.com/Khan/aphrodite\r\nhttps://github.com/jsstyles/react-jss\r\n\r\nHere are some points we need to consider when implementing the new solution (IMO):\r\n\r\n1. Does it align with our goals? (lightly touched on above)\r\n\r\n2. Implementing media queries that follow the high level breakpoints detailed [in the spec](https://www.google.com/design/spec/layout/responsive-ui.html) that can be easily used in components with a stylesheet mixin (or whatever the implementation we use calls them). If we're overhauling the style implementation, it is the opportune moment to plant the seed for much better responsive UI support in this library. It would be even better if these tools are available in userland too 👍 \r\n\r\n3. Should we create layout helper components and/or mixins to help unify flexbox layout implementations across the lib?\r\n\r\n4. Does theming needs to change to maximize best use of the new solution? While **theming** is one component of consistent styling, we should also look into creating variables for many of the common material styles such as global keylines/font sizes/spacing/margins/etc. I **strongly** recommend we improve our typography consistency by creating predefined type styles matching the material-ui typography guide, and try match up component elements like titles etc as best possible to these global type style variables as a default.\r\n\r\n5. ~~If using a library as large as [`react-look`](https://github.com/rofrischmann/react-look/), try and see how we can import modules for a minimal build size. The full build size is 16kb gzipped which is fairly large. It would be great if we can minimize the impact on build size.~~ I realized that 9kb of that is https://github.com/rofrischmann/inline-style-prefixer which we already use... 😄 \r\n"},"comment":{"url":"https://api.github.com/repos/callemall/material-ui/issues/comments/256891069","html_url":"https://github.com/callemall/material-ui/issues/4066#issuecomment-256891069","issue_url":"https://api.github.com/repos/callemall/material-ui/issues/4066","id":256891069,"user":{"login":"DominikGuzei","id":172414,"avatar_url":"https://avatars.githubusercontent.com/u/172414?v=3","gravatar_id":"","url":"https://api.github.com/users/DominikGuzei","html_url":"https://github.com/DominikGuzei","followers_url":"https://api.github.com/users/DominikGuzei/followers","following_url":"https://api.github.com/users/DominikGuzei/following{/other_user}","gists_url":"https://api.github.com/users/DominikGuzei/gists{/gist_id}","starred_url":"https://api.github.com/users/DominikGuzei/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/DominikGuzei/subscriptions","organizations_url":"https://api.github.com/users/DominikGuzei/orgs","repos_url":"https://api.github.com/users/DominikGuzei/repos","events_url":"https://api.github.com/users/DominikGuzei/events{/privacy}","received_events_url":"https://api.github.com/users/DominikGuzei/received_events","type":"User","site_admin":false},"created_at":"2016-10-28T10:45:28Z","updated_at":"2016-10-28T10:45:28Z","body":"@kof React is a very different story as it is used by hundred thousands of devs and is used and managed by Facebook (it won't go away over night), so it might be \"new\" but very solid (haven't run into many issues with it so far).\r\n\r\nSASS is one of the most established css preprocessor and can be used in any project – it's very solid and brings a lot of value to the table. So i would only choose something like JSS if absolutely necessary (e.g: because of dynamic themes) but dislike to throw out years of experience / frameworks / knowledge base etc. in a commercial software project with several devs. So i would even consider the building only the dynamic theme section in JSS and the rest with sass / css-modules."}}
{"actor":{"display_login":"DominikGuzei"}}