Website Platform + Themes

Creek is fundamentally a flexible website platform.

Design toolkit: Themes

You can edit themes with the Theme Toolkit and our npm package called: thm

This allows you to edit theme files on your desktop code editing environment, and use things like git and build tools like webpack, browserify, or gulp.

Read more about the Theme Toolkit.

Tags

Get theme path: {cfm-theme-dir}

This gives you the theme folder including, importantly, the ID, which is different for each theme, and generated when you create the theme.

Anti-caching tag: {/js/name-of-file.js|no-cache}

Adds anti-cache string based on the last-modified time of the file, and includes the current theme directory.

Output: /theme/38/js/name-of-file.js?x=1497160377

Theme Options

You can define options for a theme with a flexible YAML-compatible options tool.

Editing options

When editing the theme, go to the Options editor, and add YAML data to the options text editor that appears.

Working with git, thm, and options

You should also store a copy of this YAML data in options.yml alongside theme.json so that it's committed to git.

However, there is no current way to push the options.yml file to the remote Themes API. You must manually edit the options YAML data in the browser-based theme options editor. This prevents you from overriding options that were edited by the user in the browser.

Also, each theme has a different copy of the options, so if you are using thm then you must manually copy the options YAML data between each version (or sync'd git branch) of the theme by using the browser-based theme options editor.

Later on, we will figure out a workflow for options.yml that will let you push changes to the remote theme, without overriding the changes made in the browser. (If you have ideas, let us know. It's a tricky issue.)

Example YAML

Announcement Banner:

  Message: We are running a fundraiser. Please donate today!

  Visible: yes

  Button Text: Donate

  Button URL: /donate

Output JS

Add this tag to your theme to output the options: {theme-options-js}

All of the keys in your YAML data will be converted to camel-case. So Announcement Banner becomes announcementBanner.

This will render as:

<script type="text/javascript">Creek.theme = {}; Creek.theme.options = {
    "announcementBanner": {
        "message": "We are running a fundraiser. Please donate today!",
        "visible": true,
        "buttonText": "Donate",
        "buttonURL": "\/donate"
    }
}</script>

Tips

• Use yes and no in your options in place of true and false. YAML by default will convert these to booleans. This allows for a more "natural" option language for users without code experience.