Up and running with Textpattern CMS and Materialize

admin-ajax

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.

Start by reminding yourself that Textpattern page scaffolding happens in the administration area on the Presentation → Pages panel. As the fifth and final post in this series of ‘up and running’ blog articles, this is the last time I will use these two disclaimers: first, this how-to walkthrough is intended to get you started quickly and easily, and is not the most efficient way of delivering website components. If you grow fond of a particular framework that I’ve covered in this short series of articles, all of them offer more advanced ways of fine-tuning the CSS and/or JavaScript components to use only the components you select. Also, this how-to includes links to code hosted on cdnjs, but other open source CDNs are available. I say this because I was a volunteer maintainer at cdnjs so I know it well and still have love for the project; if there’s a more suitable network that includes the components you need, wheel that out instead.

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:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css" media="screen,projection"/>
</head>
<body>
<!-- your content goes here -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>
</body>
</html>

Briefly: the stylesheet is loaded inside the `head` tags and current best practise is to load the JavaScript after the body content. This order ensures that the browser can start constructing the page with the appropriate styling sooner rather than later, and the JavaScript will load later in the proceedings.

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.

Looking for quality Textpattern Hosting? Look no further than Arvixe Web Hosting and use coupon TEXTPATTERN for 20% off your first invoice!

Tags: , , , , , , , , , , | Posted under Textpattern | RSS 2.0

Author Spotlight

Pete Cooper

Pete Cooper has been using Textpattern since 2005. Textpattern is his preferred CMS weapon of choice. Its logical and flexible approach to content management makes Pete happy, as does its lightweight core and helpful user community. Pete's website - petecooper.org - runs on top of Textpattern and chronicles his day-to-day experiences from his home near the Atlantic in north Cornwall, United Kingdom.

Leave a Reply

Your email address will not be published. Required fields are marked *