ThemeKit UI

LEGEND

Fieldset & Legand

A Fieldset

is used to group related items and has a legend which is normally positioned at the top and inset from the left edge.
The legend sits in a break in the fieldset and it can have its spacing adjusted as well its position relative to the left.
The fieldset provides a neat way to enclose an article and isolate it from the rest of the page content to allow the visitor to focus on its content.

MarK

The text layout is unusual in that a pseudo drop cap style item is created using a <mark> tag floated left so that the following text wraps around it.
The mark has controls for font size, color, background and border radius. The mark's line height control can be used to adjust its height in relation to the wrap text.
The ThemeKit Fieldset widget has a similar layout to the content module but has different styles for varying its design.

Fieldset

Fieldset + Image
ThemeKit UI Fieldset

Fieldset

This example shows the fieldset with the optional image with ta lazy load function. Tje image is inserted in two sizes for computer and mobile with the option of adding a portrait image for phones in portrait mode.

  • Optional list with seven list style types
  • List item font size & line height
  • List item inset & vertical spacing

Links

The optional links have a hover background animation and controls for min width and spacing..
The firddt two links open internal pages and the last one is for external pages or files.

Filter Navigation

Website Navigation

Navigation has changed a lot over the years since most website visitors use mobile touch devices.
The outdated horizontal navigation across the top - with or ithout dropdowns - has proved to be ineffective.
Smaller sites with up to about twenty pages should have a navigation showing all the pages. It should be vertical and appear front and center.
Larger sites with directies or product type sections should use a section navigation on the home page - preferably with representative images.
If all the pages need to be included in the navigation a filter menu is the best choice.

Categories

Each link is given an ID which is the name of the category. When published the action tabs appear in a row above the navigation links with the category names.

Menu