{"action":"created","issue":{"url":"https://api.github.com/repos/firebase/firebaseui-web/issues/24","repository_url":"https://api.github.com/repos/firebase/firebaseui-web","labels_url":"https://api.github.com/repos/firebase/firebaseui-web/issues/24/labels{/name}","comments_url":"https://api.github.com/repos/firebase/firebaseui-web/issues/24/comments","events_url":"https://api.github.com/repos/firebase/firebaseui-web/issues/24/events","html_url":"https://github.com/firebase/firebaseui-web/issues/24","id":167044727,"number":24,"title":"Do not modify Material Design Lite CSS classes","user":{"login":"nicolasgarnier","id":3766663,"avatar_url":"https://avatars.githubusercontent.com/u/3766663?v=3","gravatar_id":"","url":"https://api.github.com/users/nicolasgarnier","html_url":"https://github.com/nicolasgarnier","followers_url":"https://api.github.com/users/nicolasgarnier/followers","following_url":"https://api.github.com/users/nicolasgarnier/following{/other_user}","gists_url":"https://api.github.com/users/nicolasgarnier/gists{/gist_id}","starred_url":"https://api.github.com/users/nicolasgarnier/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nicolasgarnier/subscriptions","organizations_url":"https://api.github.com/users/nicolasgarnier/orgs","repos_url":"https://api.github.com/users/nicolasgarnier/repos","events_url":"https://api.github.com/users/nicolasgarnier/events{/privacy}","received_events_url":"https://api.github.com/users/nicolasgarnier/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":{"login":"bojeil-google","id":13474811,"avatar_url":"https://avatars.githubusercontent.com/u/13474811?v=3","gravatar_id":"","url":"https://api.github.com/users/bojeil-google","html_url":"https://github.com/bojeil-google","followers_url":"https://api.github.com/users/bojeil-google/followers","following_url":"https://api.github.com/users/bojeil-google/following{/other_user}","gists_url":"https://api.github.com/users/bojeil-google/gists{/gist_id}","starred_url":"https://api.github.com/users/bojeil-google/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bojeil-google/subscriptions","organizations_url":"https://api.github.com/users/bojeil-google/orgs","repos_url":"https://api.github.com/users/bojeil-google/repos","events_url":"https://api.github.com/users/bojeil-google/events{/privacy}","received_events_url":"https://api.github.com/users/bojeil-google/received_events","type":"User","site_admin":false},"assignees":[{"login":"bojeil-google","id":13474811,"avatar_url":"https://avatars.githubusercontent.com/u/13474811?v=3","gravatar_id":"","url":"https://api.github.com/users/bojeil-google","html_url":"https://github.com/bojeil-google","followers_url":"https://api.github.com/users/bojeil-google/followers","following_url":"https://api.github.com/users/bojeil-google/following{/other_user}","gists_url":"https://api.github.com/users/bojeil-google/gists{/gist_id}","starred_url":"https://api.github.com/users/bojeil-google/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bojeil-google/subscriptions","organizations_url":"https://api.github.com/users/bojeil-google/orgs","repos_url":"https://api.github.com/users/bojeil-google/repos","events_url":"https://api.github.com/users/bojeil-google/events{/privacy}","received_events_url":"https://api.github.com/users/bojeil-google/received_events","type":"User","site_admin":false}],"milestone":null,"comments":3,"created_at":"2016-07-22T13:25:41Z","updated_at":"2016-07-22T18:54:12Z","closed_at":null,"body":"I'm currently integrating FirebaseUI Auth into the FriendlyPix sample which uses Material Design Lite (MDL) for styling.\r\n\r\nOne issue is that FirebaseUI has modified MDL CSS classes styling so importing the FirebaseUI CSS will mess up any website that's using MDL. For example here is FriendlyPix:\r\n\r\nBefore:\r\n\r\n![image](https://cloud.githubusercontent.com/assets/3766663/17058220/62083388-501f-11e6-9b62-4597d394f192.png)\r\n\r\nAfter:\r\n\r\n![image](https://cloud.githubusercontent.com/assets/3766663/17058226/6da770a0-501f-11e6-870c-0e48fa442420.png)\r\n\r\nMDL is a popular styling framework now so i'd be best not to re-use/modify their CSS class names. I suggest either:\r\n\r\n - Namespacing/Prefixing all the class names used in Firebase-ui. For instance rename all `mdl-button` into `fui-mdl-button` (or simply `fui-button`)\r\n - Keep using the MDL class name but do not modify them, instead add a second class name for all CSS overrides/changes: You button that had `class=\"mdl-button\"` would become `class=\"mdl-button fui-button\"` where `mdl-button` only contains the original v1 MDL CSS styles and `fui-button` would be any Firebase-UI specific additions.\r\n"},"comment":{"url":"https://api.github.com/repos/firebase/firebaseui-web/issues/comments/234626520","html_url":"https://github.com/firebase/firebaseui-web/issues/24#issuecomment-234626520","issue_url":"https://api.github.com/repos/firebase/firebaseui-web/issues/24","id":234626520,"user":{"login":"nicolasgarnier","id":3766663,"avatar_url":"https://avatars.githubusercontent.com/u/3766663?v=3","gravatar_id":"","url":"https://api.github.com/users/nicolasgarnier","html_url":"https://github.com/nicolasgarnier","followers_url":"https://api.github.com/users/nicolasgarnier/followers","following_url":"https://api.github.com/users/nicolasgarnier/following{/other_user}","gists_url":"https://api.github.com/users/nicolasgarnier/gists{/gist_id}","starred_url":"https://api.github.com/users/nicolasgarnier/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nicolasgarnier/subscriptions","organizations_url":"https://api.github.com/users/nicolasgarnier/orgs","repos_url":"https://api.github.com/users/nicolasgarnier/repos","events_url":"https://api.github.com/users/nicolasgarnier/events{/privacy}","received_events_url":"https://api.github.com/users/nicolasgarnier/received_events","type":"User","site_admin":false},"created_at":"2016-07-22T18:54:12Z","updated_at":"2016-07-22T18:54:12Z","body":"I just had a better look and some of these issues where on my end (like the color of the buttons). Actually it seems you guys are indeed not modifying any MDL classes (sorry for assuming that, I should have checked better) I was able to fix mostly issue with just importing my app's CSS last (which I should have done initially). However there is one tricky case where Firebase Auth UI's CSS interferes with MDL's, it's kind of what got me to wrongly assume you were modifying the classes:\r\n\r\nSince you are not including all of MDL classes (for instance you're not including `mdl-layout__tab`) in the Firebase UI CSS, some elements in the site that use multiple CSS class are changed. For instance in my first screenshots above you can see that the tabs height is shorter. This is because my tab element are also buttons:\r\n\r\n```html\r\n<a href=\"/feed\" class=\"mdl-layout__tab mdl-button ...\">Feed</a>\r\n```\r\n\r\nIn this case the `mdl-layout__tab` takes precedence on `mdl-button` in `material.min.css` but things change once we import `firebase-ui-auth.css` after that. To help you understand this is what Chrome shows me:\r\n\r\n![image](https://cloud.githubusercontent.com/assets/3766663/17067544/78626a90-504c-11e6-8649-00f79cce46de.png)\r\n![image](https://cloud.githubusercontent.com/assets/3766663/17067578/a73f9978-504c-11e6-8eed-d31fd32b2eb6.png)\r\n\r\nAs you can see usually `material.min.css > mdl-layout__tab` takes precedence on `material.min.css > mdl-button` but since we're importing `firebase-ui-auth.css` after `material.min.css` (we need to because of button styling) then `firebase-ui-auth.css > mdl-button` takes precedence again but then we don't have `firebase-ui-auth.css > mdl-layout__tab` that takes over again 💃 which explained the difference...\r\n\r\nWell just wanted to mention it. In my case I'll just modify my HTML structure to have the button inside the tab as this is really a corner case not sure worth fixing (fixing would mean you guys would need to include the whole MDL CSS which might not be best)... Feel free to close."}}
{"actor":{"display_login":"nicolasgarnier"}}