ThemeKit UI

Overlapping Grid Elements

ThemeKit UI Lap Grid

This is an example of using a grid to create a spacious layout with multiple items to reduce the amount of code required to enable faster page download.

ThemeKit UI Lap Grid

The grid consists of row with alternating layout of an HTML5 <figure> and an <article> element
Overlapping items visually connects the text content to the image. and the available "white" space allows for separation of the content items.

Relative Widths

The relative widths of the row items can be adjusted. In this case the width ratio is 3:2 image to text.
Overlap
The overlap is a percentage value adjustied using a slider control.

ThemeKit UI Lap Grid [3] — Lazy Loading Images

Images

The images have an optional caption. The images in the demo were sized to 800 x 500px and optimised before importing into EverWeb.
Links
Links are denoted by an animated icon and can be globally configured to internal or external.

ThemeKit UI Lap Grid [4] — HTML5 <figure> Element

Article

The text block has a heading, descriptive text and has the option to add styled spans
Span
The spans are used here to create sub headings.

Element Styles

The image and the text block share the same controls for adding a border with radius control and/or a bottom box shadow.
The article has the option to remove the bottom border when the shadow is present.