Up and running with Textpattern CMS and Foundation 5


My previous Textpattern CMS article for the Arvixe blog was a fast-track way to get started with Bootstrap 3 development. Bootstrap was the first front-end framework that I used and became familiar with. I built many Textpattern sites atop Bootstrap, without really changing much of the underlying fabric of the template. It was ideal when time was of the essence and the website needed to be developed or made live in a short timespan. Harnessing the design chops of hundreds of designers and contributors was so straightforward that it almost made me lazy.

There came a point when I was building sites on Textpattern with Bootstrap, and – well – the sheen kind of faded a bit. Bootstrap websites all look very similar, at least if the stock CSS is used with few or no changes, and there comes a point when the burden of knowledge is such that you can instantly recognise a Bootstrap-built site. I also became aware of other front-end frameworks, such as ZURB Foundation, that had the edge of Bootstrap for certain things I wanted to see in my websites. A bit plus was the availability of CSS source code for Foundation in the form of SCSS files for Sass. Only now am I starting to harness the power and flexibility of Sass for new site builds – and I will say that Sass is too far out of the scope of this article for me to show you – but Foundation is my current go-to framework for most site builds.

I’m going to show you how to get started with Foundation 5 on Textpattern with Arvixe hosting, with minimal muss and fuss. There’s a slightly different approach to Bootstrap, but the setup is largely similar: the most straightforward to get going is to load Foundation components from a content delivery network (CDN) and put the page skeleton into a Textpattern page. In my previous article, I used cdnjs (reminder of disclosure: I was previously a volunteer librarian at cdnjs) as the CDN and as I write this in late summer 2015 they are hosting the latest version of Foundation 5 (5.5.2, for completeness), so I’ll continue with cdnjs.

CDNs vary, and some will have better presence for your area than others. Bear this in mind if you do decide to use a CDN for framework assets. Community-driven projects like cdnjs often have a lot of activity and more eyeballs on a project mean that the current/latest versions of libraries are added more quickly. A quick check of other public CDNs show mixed availability of 5.5.1, so cdnjs is what we’ll use.

Let’s get started. To get Foundation up and rolling, the following items need to be loaded:

  • Foundation CSS
  • Foundation JavaScript
  • jQuery JavaScript
  • Modernizr JavaScript
  • Normalize CSS

I’ve consciously listed those items in alphabetical order, but the preferred order for speed and browser responsiveness is a little different:

  • Normalize CSS
  • Foundation CSS
  • Modernizr JavaScript
  • jQuery JavaScript
  • Foundation JavaScript

To load all those things and get started, use this code in a Textpattern page:

<!DOCTYPE html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" >
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/modernizr.js"></script>
<!-- body content here -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation/foundation.min.js"></script>

Note that the CSS and one of the JavaScript files have `.min.*` in their file extension. This is an indication that the file is minified. Minifying is a technique to remove the whitespace from a file while retaining all the functionality. Modernizr and jQuery are not explicitly called with a minified extension, but if you examine the files in a browser you will see they are already minified, so you’re still pulling the minified versions down. The neat thing about CDNs is that if another site points to the same file(s) and the browser is able to cache the file, then the browser will load the page more quickly. There’s less of a delay, and the experience is better all round.

Next time, I’m going to show you how to get started with Semantic UI 2 on Textpattern. Semantic UI is a framework I’m looking at for marketing-centric sites, and I really like the look-and-feel of it out of the box. I hope you’ll join me.

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 *