CMS

The inputs of the editor of the Usecue CMS, with its class names, so they move back into the CMS as they are.

CMS fields

Every input of the editor of the Usecue CMS. A field of the front matter of a page or a data file gets its type from its name or its value, and its name as label. The date, time and colour pickers are the ones of the browser.

Text, e-mail and address

The address suggests the pages of the website, from a datalist.

HTML

<form data-demo>
<div class="form-group">
<label for="cms-title">Title</label>
<input type="text" id="cms-title" name="title" value="About us">
</div>
<div class="form-group">
<label for="cms-email">E-mail</label>
<input type="email" id="cms-email" name="email" value="name@example.com">
</div>
<div class="form-group">
<label for="cms-link">Link</label>
<input type="text" id="cms-link" name="link" list="site-urls" value="/contact/">
<datalist id="site-urls">
<option value="/"></option>
<option value="/about-us/"></option>
<option value="/contact/"></option>
</datalist>
</div>
</form>

Long text

A textarea for a description, html and a code block. The content of a page (markdown) gets the EasyMDE editor in the CMS, which is not part of the kitchensink.

Description

HTML

<div class="form-group">
<label for="cms-description">Description</label>
<textarea id="cms-description" rows="6">We build and host websites for small businesses.</textarea>
</div>

Number, date and time

HTML

<form data-demo>
<div class="form-group">
<label for="cms-weight">Weight</label>
<input type="number" id="cms-weight" name="weight" value="10">
</div>
<div class="form-group">
<label for="cms-date">Date</label>
<input type="date" id="cms-date" name="date" value="2026-10-30">
</div>
<div class="form-group">
<label for="cms-publishdate">Publish date</label>
<input type="datetime-local" id="cms-publishdate" name="publishdate" value="2026-11-01T09:00">
</div>
<div class="form-group">
<label for="cms-opens">Opens</label>
<input type="time" id="cms-opens" name="opens" value="09:00">
</div>
</form>

Colour

Background

HTML

<div class="form-group">
<label for="cms-background">Background</label>
<input type="color" id="cms-background" name="background" value="#2e3192">
</div>

True or false, and a choice

True or false is a select, so it can not be left in between. A select starts with “…” for no choice. The multiselect and the translations are in Forms; a hidden field (like the key that links the translations) shows nothing.

Draft

Layout

HTML

<div class="form-group">
<label for="cms-draft">Draft</label>
<select id="cms-draft" name="draft">
<option value="1">true</option>
<option value="0" selected>false</option>
</select>
</div>
<div class="form-group">
<label for="cms-layout">Layout</label>
<select id="cms-layout" name="layout">
<option value="">...</option>
<option value="landing">Landing page</option>
<option value="docs">Manual</option>
</select>
</div>

Uploads

A picture shows itself, a file, a document or a video its name, each with a cross to remove it. Empty, “No file selected…” opens the file dialog of the website; here it puts the example back.

Image

Price list

documents/price-list.pdf

Terms

No file selected...

HTML

<div class="form-group upload">
<label>Image</label>
<div class="previewState">
<img src="/img/example.svg" alt="">
<button type="button" class="button ghost icon" title="Remove"><img src="/img/icons/close.svg" alt="Remove"></button>
</div>
<div class="selectState" hidden>
<a href="#uploads" class="array">No file selected...</a>
</div>
<input type="hidden" name="image" value="/uploads/office.jpg" data-example="/uploads/office.jpg">
</div>
<div class="form-group upload">
<label>Price list</label>
<div class="previewState">
<div class="array">documents/price-list.pdf</div>
<button type="button" class="button ghost icon" title="Remove"><img src="/img/icons/close.svg" alt="Remove"></button>
</div>
<div class="selectState" hidden>
<a href="#uploads" class="array">No file selected...</a>
</div>
<input type="hidden" name="pricelist" value="/uploads/documents/price-list.pdf" data-example="/uploads/documents/price-list.pdf">
</div>
<div class="form-group upload">
<label>Terms</label>
<div class="previewState" hidden>
<div class="array">documents/terms.pdf</div>
<button type="button" class="button ghost icon" title="Remove"><img src="/img/icons/close.svg" alt="Remove"></button>
</div>
<div class="selectState">
<a href="#uploads" class="array">No file selected...</a>
</div>
<input type="hidden" name="terms" value="" data-example="/uploads/documents/terms.pdf">
</div>

Key/value pairs

A field that holds fields of its own (an object) or a list shows how many it holds, and opens them. In the CMS they open in an overlay, so the unsaved fields of the page stay where they are.

Hero 3 key/value pairs

Services 4 items

HTML

<div class="form-group">
<label>Hero</label>
<a href="#an-opened-object" class="object">3 key/value pairs</a>
</div>
<div class="form-group">
<label>Services</label>
<a href="#lists" class="array">4 items</a>
</div>

An opened object

Its fields, of any type, also an object or a list again. Apply only changes the draft: the Save of the page writes the file.

HTML

<form data-demo>
<div class="form-group">
<label for="hero-title">Title</label>
<input type="text" id="hero-title" name="title" value="We build websites">
</div>
<div class="form-group">
<label for="hero-text">Text</label>
<textarea id="hero-text" name="text">Fast, safe and live within a second.</textarea>
</div>
<div class="form-group">
<label>Button</label>
<a href="#an-opened-object" class="object">2 key/value pairs</a>
</div>
<button class="button">Apply</button>
</form>

Lists

The items of a list, each with its title as a link to the item, and up, down and remove. An item that is a picture shows it. Below the list Add item, and behind “advanced” Reorder.

Websites
Hosting
Office
Advice

Add item Reorder

HTML

<ul class="list">
<li>
<a href="#lists">Websites</a>
<span class="item-actions">
<a href="#lists" class="button ghost icon" title="Up"><img src="/img/icons/chevronup.svg" alt="Up"></a>
<a href="#lists" class="button ghost icon" title="Down"><img src="/img/icons/chevrondown.svg" alt="Down"></a>
<a href="#lists" class="button ghost icon" title="Remove"><img src="/img/icons/close.svg" alt="Remove"></a>
</span>
</li>
<li>
<a href="#lists">Hosting</a>
<span class="item-actions">
<a href="#lists" class="button ghost icon" title="Up"><img src="/img/icons/chevronup.svg" alt="Up"></a>
<a href="#lists" class="button ghost icon" title="Down"><img src="/img/icons/chevrondown.svg" alt="Down"></a>
<a href="#lists" class="button ghost icon" title="Remove"><img src="/img/icons/close.svg" alt="Remove"></a>
</span>
</li>
<li class="image">
<a href="#lists">Office</a>
<span class="item-actions">
<a href="#lists" class="button ghost icon" title="Up"><img src="/img/icons/chevronup.svg" alt="Up"></a>
<a href="#lists" class="button ghost icon" title="Down"><img src="/img/icons/chevrondown.svg" alt="Down"></a>
<a href="#lists" class="button ghost icon" title="Remove"><img src="/img/icons/close.svg" alt="Remove"></a>
</span>
<a href="#lists" class="item-preview"><img src="/img/example.svg" alt="Office"></a>
</li>
<li>
<a href="#lists">Advice</a>
<span class="item-actions">
<a href="#lists" class="button ghost icon" title="Up"><img src="/img/icons/chevronup.svg" alt="Up"></a>
<a href="#lists" class="button ghost icon" title="Down"><img src="/img/icons/chevrondown.svg" alt="Down"></a>
<a href="#lists" class="button ghost icon" title="Remove"><img src="/img/icons/close.svg" alt="Remove"></a>
</span>
</li>
</ul>
<div class="buttons">
<a href="#lists" class="button">Add item</a>
<span class="advanced">
<button type="button" class="advanced-toggle" aria-expanded="false">advanced</button>
<span class="advanced-actions">
<a href="#reorder" class="button ghost">Reorder</a>
</span>
</span>
</div>

Reorder

Drag an item by its grip. Each item has a hidden order[] field with its place in the list, so Save order sends the new order. The up and down buttons of the list do the same with the keyboard.

HTML

<form data-demo>
<ul class="list reorder-list">
<li class="reorder-item"><span class="reorder-handle" title="Drag to reorder"><img src="/img/icons/grip.svg" alt=""></span><span class="reorder-title">Websites</span><input type="hidden" name="order[]" value="0"></li>
<li class="reorder-item"><span class="reorder-handle" title="Drag to reorder"><img src="/img/icons/grip.svg" alt=""></span><span class="reorder-title">Hosting</span><input type="hidden" name="order[]" value="1"></li>
<li class="reorder-item"><span class="reorder-handle" title="Drag to reorder"><img src="/img/icons/grip.svg" alt=""></span><img class="reorder-thumb" src="/img/example.svg" alt=""><span class="reorder-title">Office</span><input type="hidden" name="order[]" value="2"></li>
<li class="reorder-item"><span class="reorder-handle" title="Drag to reorder"><img src="/img/icons/grip.svg" alt=""></span><span class="reorder-title">Advice</span><input type="hidden" name="order[]" value="3"></li>
</ul>
<div class="buttons">
<button class="button">Save order</button>
<a href="#reorder" class="button ghost">Cancel</a>
</div>
</form>