Up and running with Textpattern CMS and Skeleton

In this series of articles for the Arvixe blog, I’ve shown you how to get up and running with Bootstrap 3, Foundation 5 and Semantic UI 2. This how-to is a little different because the framework is intentionally much simpler and lighter. Today is all about Skeleton. I briefly covered the current era of mobile-first and responsive development in a previous post. Increasing numbers of studies have shown that mobile web browsing activity has surpassed desktop, perhaps inevitably. At the same time, there’s been a renaissance in tools that help developers make their sites whizzy and amazing. New tools are released regularly, and the web developer’s tool arsenal is bigger than ever before.

Node, Gulp, Grunt, Bower, Yeoman – these are names you may have heard before. They’re all web development tools in some way or another. You can spend hours, days, weeks or months perfecting your skills in any or all of these things. Or, you can just load a nice-looking, pre-compiled stylesheet and concentrate on content instead of the machine that makes it appear. Enter Skeleton. There’s no Sass or LESS to mess with. Just load, and go.

For the example Skeleton scaffold, I’m going to use cdnjs for the style sheet and JavaScript, and Google for the font loading. Again, as before, starting with a standards-compliant shell and adding the components into place gets the job done:

Where you load the non-font components is up to you – there are many open source CDNs available for this kind of thing. Bear in mind that if you split the load across multiple networks (say, cdnjs, jsDelivr, jQuery CDN, etc) then additional DNS lookups will be required, which will incur a time cost. Loading the three non-font components from the same place involves a single DNS query, which takes less time than three queries to three domains. Depending on your location, you may find a certain CDN has better availability/speed for you and your users, so listen to feedback from your visitors if loading speed is important to you.

There are a bunch of components that can be added between the `<body>` tags to customise your website. One of the most commonly-used features of front-end frameworks is a grid system for laying out your content. Skeleton has a grid system that uses the following syntax:

So, there’s a container, and it has rows. Each row has one or more columns, and these columns can be a numbered value from 1 to 12, or a fraction of the 12-column width. Grid systems are really helpful for many projects, saving you time and money in development.

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.