Up and running with Textpattern CMS and Bootstrap 3


I explained some of my personal favourite Textpattern CMS tips and tricks on the Arvixe blog back in spring 2014. I received a bunch of really positive and insightful feedback as a result of my ‘Ten Textpattern Tips’ series so it’s only fair that I roll out some more secret-ish weapons from my Textpattern arsenal. This time around, I’m going for a longer series of articles that I’ve tagged as the ‘Twenty Textpattern Tips and Tricks’ series. The series is broken down into 4 parts, and each part is a mini-series of 5 articles:

  • website construction
  • website optimisation
  • website maintenance
  • website traffic analysis

There are twice as many tips as the previous series, many of which I’ve learned or discovered in the decade that I’ve been using Textpattern. Frankly, many of these tips can be used with other software on Arvixe; being a Textpattern user or administrator is not a requirement for this series, though the workflows are tailored for Textpattern. The first part of the series deals with website construction and the main part of this article will explain how you can get up and running with Textpattern and Bootstrap, one of the most popular HTML and CSS front-end frameworks in 2015.

Bootstrap provides a defined look-and-feel to website components, but stops short of offering an all-encompassing Textpattern theme that can be dropped in. Think of Bootstrap as scaffolding for your website: you are provided with the tools to build what you want to your own design, and at your own pace. If you’re drawing a blank or struggling for inspiration, there are plenty of mockups to inspire you. From experience, if you’re keen to design your own website without reinventing the wheel or spending too much time on the process, Bootstrap is a good place to start.

Bootstrap in its simplest form exists as a collection of styles in a CSS file and a bunch of JavaScript. The most straightforward way to get started with Bootstrap is to take a valid HTML5 page skeleton and add the Bootstrap files from a content delivery network (CDN). The benefit of this is you get up and running quickly with minimal fuss. Given the choice of CDN, I go with cdnjs for Bootstrap. Disclosure: I am a former volunteer maintainer on cdnjs. In the interests of openness, there are many other CDNs that host Bootstrap components, including MaxCDN and jsDelivr.

Add this to a Textpattern page to get up and running with Bootstrap on cdnjs:

<!DOCTYPE html>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<!-- content goes here -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>

This will load the styles and JavaScript functions and you’re on the way. From there, depending on your confidence level and timeframes, you have a few options:

  • learn the Bootstrap specifics and build a Textpattern template from scratch
  • borrow some ideas from the Bootstrap gallery and build a Textpattern template
  • find an existing Bootstrap theme and port it over to Textpattern, with credit to the original author(s)

Remember you have a slew of resources at your disposal, so you’re never alone when you develop websites for Textpattern. These include:

The best way to learn Bootstrap is by doing – roll a fresh Textpattern on your Arvixe hosting, throw in some Bootstrap goodness and go nuts.

Next time: up and running with Textpattern and ZURB Foundation 5. This is the ideal article for you if you’re tired of Bootstrap and have a fondness for yetis.

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 *