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
- 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
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" > <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <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> </head> <body> <!-- 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> <script> $(document).foundation(); </script> </body> </html>
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.