Kibble - to chop or grind coarsely 

Kibble enables Designers and Developers to have full control over their site. Kibble will give control over the html and css for your site. You need to be a designer / developer or an enthusiastic amateur. 

Kibble is a static site generator, it will make html pages using content from SHIFT72 site. As a designer we think this is where you add the most value.

Here is the scope of things you can modify:

  • Films
  • TV Shows
  • TV Seasons, Episodes
  • Content Pages
  • Sliders
  • Recommendations
  • Navigation

Additionally you can support

  • Custom pages
  • Embedding your own javascript
  • Custom analytics
  • CSS - including cross browser support


Included in Kibble templates is Relish a javascript library. Relish is responsible for the dynamic aspects of the site. We guard these things a little more closely, we want to iterate and continuously improve these things. 

Relish is responsible for:

  • Login / Logout
  • Purchase flow
  • Buy / Rent buttons (the price is dependent on location)
  • Account management

As a general rule as a Designer, you have control over the content layout via the kibble template, but you have much less control over the aspects that Relish manages. 

You make it beautiful and we make it work.

The best approach to seeing what a template can do is to download one and get started. 

Check out the getting started guide here.

Template Syntax

Kibble uses a templating language call jet https://github.com/CloudyKit/jet/wiki these files use the .jet  extension. 

Single file templates

Most templating work will use the routes and datasources to create your site. You can also render a single file. For example a file named /robots.txt.jet will be rendered to a file called /robots.txt 

Robots.txt doesn't do anything very interesting

File: /robots.txt.jet 

# robotstxt.org
User-agent: *
Allow: /
Sitemap: https://store.shift72.com/sitemap.txt


However the sitemap.txt.jet does use the templating to output all published content

File:
/sitemap.txt.jet 

{{range site.Pages}}{{routeToSlug(.Slug)}}
{{end}}
{{ range site.Films }}{{routeToSlug(.Slug)}}
{{ end }}
{{ range site.TVSeasons }}{{routeToSlug(.Slug)}}
{{ end }}
{{ range site.Collections }}{{routeToSlug(.Slug)}}
{{ end }}
{{ range site.Bundles }}{{routeToSlug(.Slug)}}
{{ end }}

File: /sitemap.txt 

https://store.shift72.com/page/terms-and-conditions
https://store.shift72.com/page/privacy
https://store.shift72.com/help
...
https://store.shift72.com/film/8065/home-run-showdown
https://store.shift72.com/8061/trailer-made
https://store.shift72.com/the-lion-of-judah
...

Using single file templates you can create custom pages to show off your content, or meet your specific requirements.

Template Global Functions

A guide to the available global functions is here

Template Known Paths

"No man is an island" - John Donne

True words, true also for templates. Templates are linked to from emails, and other parts of the SHIFT72 system. Not supplying them will be cause a user experience issue.

  • pin.html.jet - supports logging into your via a non keyboard device (Apple TV)
  • 404.html.jet - your 404 page
  • robots.txt.jet - take control of your seo
  • /templates - this stores all templates, no jet files will be rendered
  • /static  - store your static files here, everything in this directory will be uploaded as part of your template.
  • /styles - store your styles in here, everything in this directory will uploaded as part of your template. You can preprocess your css using any tool possible 
  • /.kibble  - this is the working directory, when you render a site it will put it inside this directory. Useful to know if you are not sure why your changes are appearing during testing.




Did this answer your question?