ThemeKit Lite Theme

Responsive Images

Responsive Image Insert

When an image occupies the full content width it must insert the image in two sizes - one for computers and the other smaller one for mobile devices.
The ThemeKit Lite Image widget can insert either one image in two sizes in a single column or two images side by side in a two column grid above the break point and stack them below the breakpoint.
Images
The single image files in the demo are are 960 x 600px and 600 x 375px respectively. The images in the two column layout were sized to 600 x 480px and optimised before importing into EverWeb.
Options
The captions are centered at the bottom of the image. The link icon appears at the top right when the image is configured as a hyperlink. The caption and icon can appear on hover when the page is viewed on a computer.

ThemeKit Lite Responsive Image Insert 1
Image No Link
ThemeKit Lite Responsive Image Insert 1
Image Link

ThemeKit Lite Info Grid

Content

Essential content items with info about responsive text, spacing, page load and article layout.

Image

How to prepare and optimise images and insert them for the best results on mobile devices.

Sliders

Most so called "responsive" slideshows are not suitable for use on responsive web pages. Find out more about this …

Carousel

The multi purpose carousel for displaying images or text - or both - with optional spans and links.

Image Grid

The ultimate image grid for use as a gallery or product navigation with lots of options

Image Gallery

A versatile image lightbox gallery for displaying a regular or irregular image grid with captions.

Video

A content width website video player needs to be able to show a larger video file for computers and a smaller one for mobile devices.

Column Grid

The grid can be used for info, events, navigation etc. It has a two column grid layout with the option of adding a third column with links.
On device screen widths below the breakpoint the label is in row one, the text content in row two and link in row three.
Links
The link column has the option of having the text entered once so that they are all the same or individual text by checking a box.

Social Links

The ThemeKit Lite Social Links creates icon links which stick to the left side of the browser/device screen above the breakpoint and become full width, flex links stuck to the bottom below the breakpoint.
The icons are SVGs and share the icon color, The link tab background can be all the same or individual colors.
When individual backgrounds are used the opacity can be reduced and return to max opacity on hover.
The tab size is adjustable and has a hover transition animation on computers.
Animation
The optional animation hides the links and then slides them into view after a preset delay. There are controls for animation time in milliseconds and delay in seconds.