One of the current trends in website design is the widespread (but not universal) adoption of flat user interfaces. There are, of course, limits to how three-dimensional a flat screen can be, but with the advent of mobile-first architecture the taste for flat UI has become more acceptable and far more commonplace. Front-end CSS frameworks are a great example of how design patterns have evolved in the past 5 years or so. Taking Bootstrap as a well-known example, version 1 of Bootstrap has buttons with gradients and subtle bordering to give the effect of a raised button. The next iteration, version 2, presented buttons with a bit more ‘pop’ and clarity, but still with the gradient approach and borders. Version 3 took a u-turn and the button component was now gradient-less with and almost invisible border.
I say all this because during the time Bootstrap was being concocted, Google introduced Material Design, a user interface approach that couldn’t get much flatter if it tried. When it was announced, I was unconvinced that it would get traction – whether this was because it was Google’s latest thing or an unwillingness on my part is unclear. In 2015, hindsight is a wonderful thing, and now the flat UI approach is more accepted in website design, front-end frameworks are taking notice of the flat hotness. One of these frameworks is the relevantly-named Materialize, and plugging it into your Textpattern on Arvixe is easy when you know how.
OK, let’s go. As always, we start with an HTML5 standards-compliant skeleton:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- your content goes here --> </body> </html>
Materialize follows the commonly-used approach taken by many frameworks of compiling then minifying the CSS and JS components. Adding these components into the skeleton, along with some mobile-specific fairy dust for the viewport, we get this:
When the page skeleton is in place with Materialize scaffolding, the best approach from there is to check out the various Materialize components and see what you want to snag for your website.