Tidy produces static html files. When you’re done editing and press save, Tidy automatically creates the files and either saves them on our servers or sends them to any hosting provider you want. When the end user visits your site, the server just returns the html files and Tidy isn’t called at all.
Tidy itself is offered as SaaS, it can’t be downloaded and installed. But as we mentioned above, you can choose to host the actual website on any host you choose (like GoDaddy) or host it on our Amazon servers.
Tidy provides two different ways to manage your website. You can either use the UI to make changes without coding or then you can write the code directly in the Ace based text editor in Tidy’s files section. Tidy is reactive, so changes you make in the UI are immediately visible in the code and vice versa.
The basic building blocks of a Tidy website are pages and templates.
A page is a result of merging two things:
Examples of pages are “About” and “Contact”, examples of templates are “Frontpage” and “Subpage”.
The same template can be shared by many pages and when you make changes to that template it affects all pages that share that template. When you make changes to a page’s content it only affects the page in question.
When you save changes made to pages, templates and styles, they are still just visible to you. Changes must also be published to appear on the live site.
You can jump right into the Create Site wizard without registering
The wizard asks you to pick a template, give the site a name and then you’re done.
There are three user levels in Tidy
When you create the site, you’re automatically an Admin with all rights. By default, a Designer can do everything else except creating new Admins and major changes like deleting the entire site.
An editor can just make changes to the website content, which is why the Editor sees a different UI than Designers and Admins. If you’re an Admin or a Designer, you can switch between editor view (for editors) and designer views (for designers and admins) from the account icon in the bottom left corner. Designers and Admins can switch to editor view, but editors can’t switch to designer view.
Create new pages and edit content (text and images) of existing ones.
A file manager where the end user can manage her files (images and public documents like Word documents etc.). She can’t see any other files like templates or css files.
Make changes to the layout.
Manage all the files of the website except the static html files. Files include all assets, template files, style files, configuration files etc.
Currently, you can't see the static html files anywhere in the UI.
Manage global styles.
Manage users, domains, analytics etc.
The Tidy UI consists of 4 main panels, of which the left and right panel can be minimised. The panels from left to right are:
The Tidy main menu.
To choose which page, template or file is displayed in the centre panel.
Displays the page, template or file you’re editing.
Displays properties of the active page, template, file or element.
In the page section, click on the add page button at the top of the left panel. A create page modal will open asking you to provide basic information about the page like title and template. The create page modal and what pages are shown in the create page menu can be customised using page types.
To edit text that has been made editable in the template, just click on it to show the editor. Depending on the type of text block the editor grants you different tools to edit the content. In a rich text block, you can also use the editor to add images, lists etc. To change an image within an editable text block, you need to click it twice. One time to fire up the editor and another to change the image.
To change single images (that are not within an editable text block) or background images, just click the image.
When you click save, your changes are saved in the CMS, but not yet visible on the public site. Click "Publish" to make them visible on the public site
In the right panel, you can find a link to page properties, where you can edit the page’s metadata, including the most common SEO fields. The fields that are shown in page properties can be configured with page types.
The file manager in editor view is called Media, and the file manager in designer view is called Files. Files shows the entire file tree, while Media only shows one folder: /media. All content files (images, attachments) should, therefore, be saved in the media folder. When the client clicks an image to change it, she only sees media and its subfolders.
In the editor view file manager (Media) you can:
By clicking the plus icon at the top of the left panel.
Using the buttons in the right panel.
A page template defines the layout of a single page. A website usually consists of more than one-page template, at least separate frontpage and subpage templates.
The collection of page templates for a site forms a site template. Site templates are only used in the create site process so when we refer to “templates” we mean page templates.
A Tidy page template is a single file specifying the layout of a page. You can include other partial templates (we call them includes) using the include command. A simple html template structure looks like this:
<html>
<head>
….
<head>
<body>
<!--#include file="_header.html" -->
<div>Page content comes here</div>
<!--#include file="_footer.html" -->
</body>
</html>
Tidy interprets all template files that doesn't start with '_' as complete page templates, so start your include filenames with an underscore (_).
You can use includes however you like and even include includes in includes, but each template and include must be valid and complete html. This means that you can’t open a tag in one include and close it in another. All tags must be open and closed in the same file.
When you edit and save an include, the change is immediately updated and published to all pages using templates that use the edited include. For example, if you include the same header.html to all your templates and edit that file, your header changes on all pages.
If you code the templates yourself, you can use any responsive framework (or none). If you’re using Tidy’s layout and style tools they can be configured to support any (or no) framework.
Currently Tidy only supports Bootstrap 3, but we’ll add support more if there’s demand. You can affect our roadmap by voting for more frameworks. The voting link is inside the CMS.
If you prefer code you can just open the file in the file manager and make the changes there. Regarding the template html there are no Tidy specific rules (except that files need to be valid). Just write whatever you like.
Alternatively, you can use the drag and drop editor (or use both) in the templates section. The template section shows the template in the centre panel and its html structure in the left panel.
You can use either panel to make your changes and they are automatically kept in sync.
We call any html snippet that can be edited a block. A single heading element (<h1>Hi!) is a block. An entire form with fields and buttons is also a block. Blocks can contain other blocks so the submit button in your form is also a block.
What’s distinctive about a block is that it:
First select where you want to add a new block by clicking on an adjacent block either in the tree or the centre panel. Then click one of the appearing plus icons depending on if you want to add a new block before or after the block you clicked.
The add block panel appears with all the preconfigured blocks Tidy provides. Click on whatever block you want to add to add it.
Drag & drop any block in the html tree to where you want it. Drag & drop currently only works in the html panel (vote in our feature request system to add it to the centre panel).
Click the block to select it and then click remove in the right panel.
Blocks primarily get their styles from the global styles, but you can change the styles of a single block in block properties, which opens in the right panel whenever you select (click on) a block.
The block properties vary depending on block type and can be configured. When you make changes to block styles in the right panel, they are written to the template as inline styles (<div style=”color: green;”></div>).
This is something Tidy can't do yet. Vote for the feature if you want it.
You can 'import' your template by creating a new empty template file, cut-pasting your code into it and then manually upload your assets and styles.
It's clunky, we know. Vote for a better template importer if you want it.
If you make a template for each page you can type the content directly into the template code (<h1>Hi!</h1>), but if you want to use the same template on several pages and make the content editable with the inline editor, you need to separate template and content.
In Tidy, that is done by specifying a path from where the html element gets its data
<h1 v-html=“page.heading”>Some placeholder text</h1>
We use the Vue.js framework to populate template with content and you can use all Vue features in Tidy.
To make an text element editable, just add v-html="page.something" where something can be any string you want.
When you create a page it has no data, meaning that page.heading is empty. If an elements data field is empty it shows the contents of the element in the template code.
<h1 v-html=“page.heading”>Some placeholder text</h1>
In the case above a new page heading would be "Some placeholder text" until you click the heading and give it some new content with the inline editor, "My heading" for example. "My heading" is then saved to page.heading and from that moment on the heading says "My heading" on that page.
Example:
<html>
<head>
<title v-text="meta.title"></title>
</head>
<body>
<h1 v-html="page.heading"></h1>
<footer>
<a :href="'tel:'+site.phone" v-html="site.phone"></a>
</footer>
</body>
</html>
In the example above the title and heading change on every page, but the phone number is the same on every page. If you change the phone number on any page, it will change on all pages.
Eventually you will be able to make any html attribute editable, but currently tidy supports the following:
Example with placeholders:
<header>
<span v-html="page.call_to_action">Call us at</span><a :href="'tel:'+site.phone" v-html="site.phone">555 123 4567</a>
</header>
<h1 v-html="page.heading">Type heading here</h1>
<img class="hero-image" :src="page.hero_image" :alt="page.hero_image_alt" src="http://placehold.it/350x150" alt="Alt placeholder">
<div class="wrapper" :style="{ backgroundImage: 'url(' + page.background_image + ')' }" style="background-image: url('http://placehold.it/2000x100');">
<div class="content" v-html="page.content">Type page content here</div>
</div>
Components are custom tags like <tidyBsNav></tidyBsNav> that can be added to templates and uses VUE.js to generate html code.
The tidyBSNav component, for example, adds a Bootstrap navbar to the template.
The render object gives you access to all the site's pages and content. You can for example create a list of news headings by looping trough all news pages and displaying a heading from each page.
Below is an example of the render object structure. 'Page' and 'Meta' contain page specific content, 'Site' contains sitewide contente and 'Lang' contains language wide content. 'Tree' contains all the pages in the site.
Lists fields from subpages. Normally use for news list and product lists.
Arguments:
Inside the list component you also need to add a template for the list items.
Example:
//code
<tidy-list root="news" limit="10">
<ul>
<li v-for="post in pages">
<a :href="'.' + post.info.pathname">
<h3 v-text="post.page.heading"></h3>
</a>
</li>
</ul>
</tidy-list>
//result
<ul>
<li>
<a href="/news/post-1">
<h3>This is the heading of post 1</h3>
</a>
</li>
<li>
<a href="/news/post-2">
<h3>This is the heading of post 2</h3>
</a>
</li>
</ul>
Generates the navigation structure for the site as a list.
It takes the following arguments:
Example:
//code
<nav id="main-nav">
<tidy-ulnav levels="2"></tidy-ulnav>
</nav>
//result
<nav id="main-nav">
<ul>
<li>
<a href="/">Frontpage
</li>
<li>
<a href="/subpage">Subpage
</li>
<ul>
</nav>
Adds a Bootstrap navbar to the template and automatically generates the navigation structure for the site.
It can be styled with normal Bootstrap classes/variables and takes the following arguments:
Example:
//code
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" v-html="site.title">Bootstrap starter</a>
</div>
<div class="collapse navbar-collapse navbar-right" id="navbar">
<tidy-bsnav levels="2"></tidy-bsnav>
</div>
</div>
</nav>
//result
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" v-html="site.title">Bootstrap starter</a>
</div>
<div class="collapse navbar-collapse navbar-right" id="navbar">
<ul class="nav navbar-nav">
<li>
<a href="/">Frontpage
</li>
<li>
<a href="/subpage">Subpage
</li>
<ul>
</div>
</div>
</nav>
There are three levels of configs and resources:
The CMS and team configs and resources are found in the shared folder (/shared/cms and /shared/[teamName]), the site config in the /config folder.
Folder structure:
ROOT
|-- config
|-- shared
|-- cms
|-- config
|-- blocks
|-- elementProperties
|-- modules
|-- pageTypes
|-- styleProperties
|-- templates
|-- [teamName]
A config with a narrower scope overrides broader scope configs, so site overrides team and team overrides CMS. This means that you can change the Tidy configuration on team level and even for single sites.
Configurable stuff:
We'll go through each one separately
Tidy is configured using JSON files. JSON files are merged in a specific order so that files in the in the /config folder overwrite /shared/[teamName]/*/*.json which overwrite /shared/cms/*/*.json.
To overwrite defaults, you need to create a similar folder/file structure in your config or team folder and overwrite the parts you want.
Let's take a simple example with blocks. Suppose you don't want to encourage designers to add buttons to their templates. Then you can remove the button sections from the Add block panel for your team.
//part of orginial /shared/cms/config.json
{
"blocks": {
"text": {
"visible": true,
"require": "shared/cms/config/blocks/text.json"
},
"image": {
"visible": true,
"require": "shared/cms/config/blocks/image.json"
},
"button": {
"visible": true,
"require": "shared/cms/config/blocks/button.json"
}
}
}
//you add to /shared/[teamName]/config.json
{
"blocks": {
"button": {
"visible": false
}
}
}
//end result when files are merged
{
"blocks": {
"text": {
"visible": true,
"require": "shared/cms/config/blocks/text.json"
},
"image": {
"visible": true,
"require": "shared/cms/config/blocks/image.json"
},
"button": {
"visible": false,
"require": "shared/cms/config/blocks/button.json"
}
}
}
Note that creating a new team config.json, doesn't overwrite the CMS config.json completely. Only the values you change are changed.
Also, note that you need to recreate the object structure all the way up to the root object:
//won't work
{
"button": {
"visible": false
}
}
//works
{
"blocks": {
"button": {
"visible": false
}
}
}
Content blocks are premade HTML snippets that you can add to your template.
You can control what blocks appear in the Add block panel and create your own blocks.
The sections that appear in the block panel are listed in /shared/cms/config.json.
/shared/cms/config.json
{
"blocks": {
"text": {
"visible": true,
"require": "shared/cms/config/blocks/text.json"
},
"image": {
"visible": true,
"require": "shared/cms/config/blocks/image.json"
}
}
}
To add a new block category to your team, add a line
/shared/[teamName]/config.json
{
"blocks": {
"myCategory": {
"visible": true,
"require": "shared/[teamName]/config/blocks/myCategory.json"
}
}
}
Then add the new category JSON and specify the blocks. You can divide the panel into subcategories (example: Green elements, Red elements) and specify elements for each subcategory (Green 1, Green 2).
Each element needs a title and a preview file that is shown in the panel and a template containing the actual block. The preview can be an html, png or a jpg file.
/shared/[teamName]/config/blocks/myCategory.json
{
"title": "My category",
"description": "",
"subcategories": {
"greenElements": {
"title": "Green elements",
"blocks": {
"green1": {
"title": "Green 1",
"preview": "shared/[teamName]/config/blocks/myCategory/green1-preview.html",
"template": "shared/[teamName]/config/blocks/myCategory/green1-template.html"
},
"green2": {
"title": "Green 2",
"preview": "shared/[teamName]/config/blocks/myCategory/green2-preview.png",
"template": "shared/[teamName]/config/blocks/myCategory/green2-template.html"
},
}
},
"redElements": {
"title": "Red elements",
"blocks": {
"green1": {
"title": "Green 1",
"preview": "shared/[teamName]/config/blocks/myCategory/red1-preview.jpg",
"template": "shared/[teamName]/config/blocks/myCategory/red1-template.html"
},
}
}
}
The preview file.
(Website CSS isn't available in the Add block panel. Use an image of you want a more styled preview)
/shared/[teamName]/config/blocks/myCategory/green1-preview.html"
<h1 style="color:green"></h1>
The template file
/shared/[teamName]/config/blocks/myCategory/green1-template.html"
<h1 class="green" v-html="page.green">Some placeholder text</h1>
Tidy blocks are always editable by default, but yours don't have to be.
Modules are collections of templates that work together. Examples are news and products. You can also create your own.
Available modules are listed in /shared/cms/config.json:
/shared/cms/config.json
{
"modules": {
"news": {
"visible": true,
"require": "shared/cms/config/modules/news.json"
},
"products": {
"visible": true,
"require": "shared/cms/config/modules/products.json"
}
}
}
To add your own module, add it to the list in the corresponding team file:
/shared/[teamName]/config.json
{
"modules": {
"myProductModule": {
"visible": true,
"require": "shared/[teamName]/config/modules/myProductModule.json"
}
}
}
When you install a module to your site Tidy:
How this is done is specified in the module's own JSON. In the example below we create a new module called 'My product module', which when it is installed:
You can prepopulate the pages with any content you want, by using the structure of the site object. In the example, we've prepopulated the fields page.title and page.content for the list page and page.title, page.price and page.description
/shared/[teamName]/config/modules/myProductModule.json
{
"title": "My product module",
"thumbnail": "shared/[teamName]/config/modules/myProductModule/my-product-module-thumb.jpg",
"pageTypes": [
"/shared/[teamName]/pageTypes/myProductList.json",
"/shared/[teamName]/pageTypes/myProductItem.json"
],
"templates": [
"/shared/[teamName]/modules/resources/myProductModule/my-product-list.html",
"/shared/[teamName]/modules/resources/myProductModule/my-product-item-one-column.html",
"/shared/[teamName]/modules/resources/myProductModule/my-product-item-two-columns.html"
],
"pages": [
{
"pageType": "myProductList",
"template": "my-product-list.html",
"name": "My products",
"data": {
"page": {
"title": "My products",
"content": "Below is a list of products"
}
},
"children": [
{
"pageType": "myProductItem",
"template": "my-product-item-one-column.html",
"name": "Product item 1",
"data": {
"page": {
"title": "Product item 1",
"price": "$10",
"description": "This is the description of Product 1"
}
}
},
{
"pageType": "myProductItem",
"template": "my-product-item-one-column.html",
"name": "Product item 2",
"data": {
"page": {
"title": "Product item 2",
"price": "$20",
"description": "This is the description of Product 2"
}
}
},
{
"pageType": "myProductItem",
"template": "my-product-item-two-columns.html",
"name": "Product item 3",
"data": {
"page": {
"title": "Product item 3",
"price": "$30",
"description": "This is the description of Product 3"
}
}
}
]
}
]
}
Now you're done configuring your module, but you still have to create everything the module needs:
and put them in the right places (the paths you've specified in myProductModule.json
Whenever a page is created, it's assigned a page type. The page types define:
Example: You want:
All of the above is configured in the page type newsItem.
Available page types are listed in config.json. If you don't specify a page type for a page it gets the default page type included in all sites.
/shared/cms/config/config.json
{
"pageTypes": {
"default": {
"require": "shared/cms/config/pageTypes/default.json",
"visible": true
}
}
}
To add a new page type to your team's sites, add it in the team's config.json.
/shared/[teamName]/config/config.json
{
"pageTypes": {
"myNewsItem": {
"require": "shared/[teamName]/config/pageTypes/myNewsItem.json",
"visible": true
}
}
}
Then in that file you configure the page type itself. We start simple by defining how the new page type appears in the 'Add page menu', and how pages are sorted
/shared/[teamName]/config/pageTypes/myNewsItem.json
{
"title": "News item",
"addPageMenuTitle": "Add news",
"navOrder": {
"sortBy": "page.date",
"order": "descending"
}
}
Next, we add the fields shown in the 'Add page modal' and the 'Page properties panel'. Fields are divided into sections that can be opened/closed. Fields accept the following configurations:
Below is an example of a newsItem page type. Template choices are limited to two and a news page is always created under /news. The configurations for section seoMetaData is left out to save space. You can find more examples of page types under /shared/cms/config/pageTypes
/shared/[teamName]/config/pageTypes/myNewsItem.json
{
"title": "News",
"addPageMenuTitle": "Add news item",
"navOrder": {
"sortBy": "page.date",
"order": "descending"
},
"sections": {
"general": {
"title": "General",
"fields": {
"heading": {
"label": "Heading",
"type": "text",
"visible": true,
"dataPath": "page.title",
"placeholder": "Write your heading here",
"modalClass": "half"
},
"titleInNavigation": {
"label": "Title in navigation",
"type": "text",
"visible": true,
"dataPath": "page.navigation_title",
"modalClass": "half",
"autoFill": true,
"autoFillPath": "page.title",
},
"template": {
"label": "Template",
"type": "template",
"visible": true,
"modalClass": "half",
"optionsMode": "show",
"options": ["news-one-column.html", "news-two-column.html"]
},
"date": {
"label": "Date",
"type": "date",
"visible": true,
"dataPath": "page.date",
"modalClass": "half"
},
"parentPage": {
"label": "Parent page",
"type": "page-selector",
"visible": true,
"modalClass": "half",
"editable": false,
"options": {
"path": "/news"
}
},
"slug": {
"label": "Slug",
"type": "text",
"visible": true,
"dataPath": "info.slug",
"value": {
"from": "page.title"
}
},
"pagePath": {
"label": "Page path",
"type": "display",
"visible": true,
"value": {
"from": "info.pathlabel"
}
}
}
},
"seoMetaData": {
...
}
}
}
Stuff still missing from the docs.