While using a layout defined in the documentation of MDL, I noticed a oddity with my results compared to what the documentation was showing. The icon that opens the left drawer menu (a menu that slides in and out from the left of the page) was much higher up on my page than their example. It was noticeably bad.
The icon in the top left is too high up and looks bad.
I fixed the issue, though I don't completely know why this did it. If anyone has some insight, feel free to post it in the comments. It would be appreciated. I didn't do any research after I got it fixed, so it maybe something simple. I am posting this in case someone finds themselves frustrated and in the same place I was.
My implementation was a complete copy from their documentation with all required resources properly included on the page. However, spoiled by frameworks, I didn't bother putting the typical HTML skeleton on the page - that's the doctype, html tag, head tag, and body tag. When I looked at the page's source code in Chrome's developer tools, those pieces where there and my resources where properly placed in the head tag. However, this was apparently a problem.
After adding the standard tags, the problem was resolved. More specifically, the inclusion of the head tag itself is what seemed to solve the issue. Removing that tag alone from my code caused the icon to shift back up.
After adding the head tag to my html, the icon looked as expected.
I'm just not curious enough to dig into why this happened right now, but I thought it might be helpful to someone.
What (and Why) is this here?
Over the past 3 or more months, I've been taking the little spare time I manage to find and using it to research and try out various web programming libraries; focusing strongly on the visual stuff. I've been using Bootstrap for a long time now and think it is a great tool; however, I really love the concepts and detailed definitions found in Google's Material Design, which are not really demonstrated within bootstrap.
This lead me to finding Material Design Lite (MDL), which, on the surface, seemed like Bootstrap with Material Design being fully embraced. Since then I have found some odd gaps in support where Bootstrap did more and other things that Google's Material Design mentions but is not there. However, that is another story. I still like both libraries and recommend looking at both if you are interested. I will say that MDL is still rather new and evolving; so my concerns there will most likely be moot with time.
Thanks for reading! Questions? Comments? Concerns? Post them with any other thoughts below!