Follow

Getting Started Template Pack

Our Template Starter Pack is a set of responsive HTML templates designed to be used as a starting point for developers when building templates for Pugpig. You can simply change the CSS to style the templates, or go as crazy as you’d like changing and extending the layouts and options. Follow the steps below to get started. In addition to the static HTML pack we also provide accompanying CMS starter themes for Wordpress and Drupal.

Note: This code is provided by the Kaldor Professional Services team as an accelerator tool - the templates are not part of the supported Pugpig product. Please do not share these outside your own organisation. 

Step 1 - Pugpig Reader

First try our Pugpig Reader apps (available for iOS, Android, Windows 8 and the Web). This is a great tool to preview your content and our template pack on devices.

Step 2 - Download the pack

The starter pack provides a standalone Pugpig Edition with a range of sample templates along with the HTML/CSS/JS files needed to host on your own server. Download the static HTML pack below, unzip and place the files on any server, to use as a starting point for your content.

HTML Template Starter Pack 

Step 3 - Preview the templates 

Open Pugpig Reader on a device, navigate to settings, and enter the URL to the file editions-atom.xml in the root of what you just unzipped and uploaded to your server, for example:

http://www.myserver.com/pugpig/editions-atom.xml

If all goes well, you should see the sample content. This is a single edition which contains the following types of templates:  

  • Contents
  • Scrolling Hero
  • Scrolling hero with sidebar
  • Scrolling with sidebar and aside
  • Two columned
  • No main image
  • Full bleed image
  • Headline in image
  • Segmented columned

Step 4 - Change the content

The template pack is provided as-is as a starting point for creating your own templates. Feel free to change it. For example:

  • To change the styles, change the CSS by editing the CSS file for a specific template, the CSS files are located in the folder named CSS.
  • You can add new assets/images/fonts to the pages, but you’ll need to also add them to the HTML Manifest files associated with each page
  • To add pages to an edition, you will need to add the HTML file for that page to the root level of the folder and add an entry to the atom.xml file for that page.
  • The add a new edition, edit the top level edition-atom.xml file

We also provide accelerator code for advert templates and video integrations and JS components so you can take your content even further. All of this can be found here on our public github page: https://github.com/kaldor 

Next Steps

Now that you have everything working, you might want to use the same templates with a CMS and for that you need to build a theme. We already provide the starter pack as Drupal and WordPress themes, find out more about them here:

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk