Saturday, May 20 had us discussing Google Material Design specification and specifically, focusing on the Material Design Lite framework.
Today’s post is a quick catch summary of the resources we reviewed. This will provide you with ample opportunity to review the topic a little more on your own before in advance to our deeper dive into it in June.
The Web Design SIG started with 2 very quick videos. The first, just about 60 seconds was brief glitzy marketing view of Material Design, while the second, still short at just under 5 minutes, offered a little more meat on the topic. As was noted during our session on Saturday morning, the topic being discussed became clearer to me after 3 – 4 viewings. I encourage you to try it at least a couple of times.
Video 1: ‘Watch the video’ from material.io
Video 2: What is Material Design Lite?
Here are a few of the online resources we touched on:
- Parent Material Design site: https://material.io/
- Main Material Design Lite site: https://getmdl.io/
- Color Palette Customizer: https://getmdl.io/customize/index.html
- Sitepoint Introduction to Material Design Lite – This is the guide for the in class demo: Building a static site with Material Design Lite (MDL)
The code that was demo’ed in the meeting may be downloaded from Github: https://github.com/MattRy/pacsmdl052017.
The demo code is currently setup for use in a local instance of a website. The downloaded repository contains all of the website code needed to display the final version of the demo we worked through.
If using Local By Flywheel as your local web server environment, this code can be unzipped and dumped directly into your \Local Sites\pacsmdldemo\app\public folder to view the pacsmdldemo.dev website.
Note that even though Local By Flywheel is a local WordPress development environment tool, in this case we are only using it as a web server and all of the WordPress specific files are removed from the public folder.
Local By Flywheel is supported in both the Windows and OSX environments.
Alternatively, the code can be copied to the \public_html folder on your web server to view the new site publicly.
More details on the setup are forthcoming, but this can get you started.
