Kibble is a static site generator, it will make HTML pages using content from the SHIFT72 site.

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 to use Kibble.

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, which is a javascript library. Relish is responsible for the dynamic aspects of the site.

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.

Template Syntax

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

Single file templates

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

Most templating work will use the routes and data sources 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
...

Template Known Paths

Templates are linked to from emails and other parts of the SHIFT72 system. Not supplying them will 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 styles in here, everything in this directory will upload as part of your template. You can preprocess your CSS using any tool possible

  • /styles - store your styles here, everything in this directory will be 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.

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




Did this answer your question?