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. 

See here for a list of what you can and can't change, and what you are responsible for as a designer.

On with the installation...

Prerequisites

Please ensure that you have the following installed on your system and available to your terminal / command prompt.

Install NodeJS

Instructions for your platform can be found here https://nodejs.org/

Install git

Installing on windows - https://gitforwindows.org/

Installing on linux and OSX - https://git-scm.com/downloads

Getting started

Newer versions of NodeJS come with a command which helps get us started.



# create a new directory to run your site from
mkdir newsite
cd newsite

# npx is supported in npm v5.2+
npx s72-kibble init
# select a template from the list available
...
...

# after the template has been downloaded, you need to install any template specific node modules
npm install

# this will ensure that the correct css gets generated and kibble is started.
npm start

# your site can now be seen in your browser

Note Windows Users: Kibble will run its own local webserver, expect to see a Window Defender message where kibble is asking to use the network. Click allow.

Configuration

Kibble manages the sites configuration inside the kibble.json  file. 

Take a moment to give your template a name, and reset the version number. The version number will need to be increased each time you publish your template.

File: kibble.json 

{
  "name": "my-new-template",
  "version": "0.0.0",
  ...
}


The siteUrl  determines where to load your site data from. If you have a site deployed you can update this URL to load your sites active domain (or testing domain) to design against your current data. 

Or use one of our pre-populated siteUrls we don't mind.

  • https://store.shift72.com 
  • https://channel.shift72.com 
  • https://studio.shift72.com 

File: kibble.json 

{
  "name": "shift72-template-one",
  "version": "0.0.29",  
  "siteUrl": "https://store.shift72.com",
  ...
}


Finally the builderVersion  is the version of kibble that you have used to develop the template. This lets us know which version we should use to make your site.

File: kibble.json 

{
  "name": "shift72-template-one",
  "version": "0.0.29",  
  "siteUrl": "https://store.shift72.com",
  "builderVersion": "0.9.10",
  ...
}

Developing

When kibble is running it will be monitoring your sites files for changes and automatically refresh the page for continuous feedback.

Bring Your Own Editor (BYOE) - vscode / sublime / notepad

We highly recommend storing your changes in source control. You can choose any source control provider, e.g. git, TFS, subversion??

Publishing

Once you ready to see your changes live, you are going to need to publish your template.

Publishing is done using the same set of tools.

NB: You currently need to be an Administrator on the site (see siteUrl ) to be allowed to publish a template.

npm publish

> [you will be asked to login]

> uploading name: shift72-template-one@0.0.29 built with 0.9.9
> upload successful

On successful publishing the site will be made available with the updated design!


Did this answer your question?