ThemeKit Brand

Image Gallery

Lightbox Gallery

Large image grids are not suitablefor use on responsive pages that will be shown on mobile devices and tend to overpower a page design.
A better option is to use a single image with a description to launch a lightbox gallery. This has the added advantage of only requiring one small image on page load and no separate thumbnails.

Responsive Gallery

Large image grids that launch a lightbox slider are popular on photography websites but are pretty much useless for responsive pages that will be seen on mobile phones. These grids take to long to load if there are more then a dozen or so images and force phone users to do a lot of unnecessary scrolling.

Slide Bar Panel [1]

Info

Slide Bar Panel

The slide panel has options for an image, map and text area and can slide from the left, top, right or bottom.
This example shows the optional taext area only. The items are a heading, text and an optional link.
The link can open internal or external pages with a new window option.
Spans
Spans can be used as sub heading or for inline content. They have controls for font size and color.
Content Width & Height
The content is centered with a maximum width setting and the height adjust to the amount of content.
When the content excedes the height of the browser/device window any overflow will scroll.
Overlay
The overlay has controls for background color and opacity and for z-index. The panel can be closed by clicking anywhere so the close tab is optional.
The close tab has controls for icon color and background color and can be psoitioned left or right. Its position on the X-axis is adjusted in pixels and on the Y-axis in viewport height units (vh) from the top so that it can be psoitioned in the bottom half of the device's screen for the convenience of mobile device users.

Content

Off Screen Content

When planning a responsive website it is important to keep the amount of page content down to a reasonale amount. A contemt height of 4 or 5 thousand pixels may be OK for desktop users but is way too much for small mobile devices.
Using a bar with info text and an action tab to slide in blocks of content makes it easier for visitors to find the content they are searching for without too much scrolling.
Slide Bar
The bar has the option for a two color gradient background. The content area is a two column grid with a maximum width setting containing text and the action tab.

Slide Bar Panel [2]

Map

Panel Setup

The widget shows the slide panel content area initially so that its content can be seen while editing. A checkbox hides the panel and shows the bar with the action tab.
Z-index
The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
The panel has a relatively high z-index which can be increased if any other page content appears above the panel when it is opened.

Slide Bar Panel [3]

Image

Product Slider

Optional Span

A content slider with adjustable column widths.
Adjustable transition time and a slide ir fade transition.

Hero

Content

The content area has a heading, optional span for price etc, text and an optional link to open internal/external pages.

Images

Lazy Loading

The demo images were sized to 600 x 600px and optimised before importing into EverWeb and are lazy loading.

Items

Controls

Arrows

The directional arrows can be hidden below a preselected breakpoint for swiping on touch devices.

Video

Content Slider

Most responsive slideshows aren't much good for displaying procucts or items that require a description.
The ThemeKit Brand Slider uses an adjustable two column grid layout with the image in one column and an article in the other.
The article has a heading, optional styled span for price etc, text and an optional link.
Images
Since the images are not content width there is no need for a mobile version of the image. The images in the demo were cropped to 600 x 600ox and optimised before importing into EverWeb.
Content
Below the breakpoint the content is below the image so it has to have a minimum height setting to compensate for varying amount of content.