ThemeKit Modals

Content Items

ThemeKit Modals

The ThemeKit Modal Artice, Icon Tabs, Media Row, Icon Row, Text and Text Wrap widgets all have functions to open the various types of modal.
The modals are

  • Image with alt text and caption
  • Content - optional image, heading, text, optional list, more text and an optional link
  • Responsive interactive map with aspect ratio switch on phones.
  • Lightbox slideshow with captions
  • Specifications list with zebra strip option
  • MP4 video with file inserted in two sizes
  • YouTube video with lazy loading function

Modal Text Module

This example of the ThemeKit Modal Text widget has an action tab to open a modal and shows the optional link function.
The widget can be used without the modal function as a text box with options for a paragraph, optional list and another optional paragraph.

Open MapModal Tabs

Modal Wrap

Wrapping an image floated left is rather old fashioned ut can be usefull for raducing the image file width to 50% of the content width which means that a second smaller image is not required for mobile devices.

Wrap Text

The ThemeKit Modal Wrap widget has an optionl heading and text followed by the wrapped image floated left, a second haeading, the wrap text and an optional link.
Image
The image file width should be about 50% of the content width which, in this case, is 1200px.
The image used in the demo is 600 x 600px and was optimised before importing into EverWeb.
Like all images in a responsive page design it has a lzy loading option.
The image can have a border and/or a bottom box shadow if required.
Modal
By checing a box the image can become the trigger to open any of the varioud modals by entering the modal's ID number.
Icon
Checking a box inserts an SVG icon which has controls for icon size, color, padding, background color, hover background color and border radius.
The icon in the demo is made round by setting the border radius slider to its maximum value.
SVGs
SVG icons should always be used to replace PNG and font icons like Font Awesome. PNG icons are very inefficient an require extra server requests and should be avoided for responsive website use. Font Awesome doesn't have the same quality as SVGs and requires a large stylesheet or Javascript file to be downloaded from another server even if only a few icons are inserted.
To insert an SVG open the SVG icon download folder, double click the icon to open it in TextEdit.app set to plain text mode or a code editior. Copy the code and paste it into the widget settings.
Icon Position
The icon can be aligned top, center or bottom and left, center or right.
Container
The container itself can have a border and/or a box shadow to define its edges and lift it off the canvas. The wrapper can have a solid or gradient background color.

Info Link
ThemeKit Modal Article

Article

Layout

The article has a two column grid layout with an image in an HTML5 <figure> element and text content in an <article> element.
The article has a heading, styled span text and an optional link

Modal Tabs

Modal Article

The article above has a two column grid layout with adjustable relative widths. Below the breakpoint the text can be above or below the image.
Trigger
The image has a lzy loading option and is used as the trigger to launch any of the modals - in this case a video.

SVG Icon

The SVG icon can be changed to any of the 100s available in the download folder and has controls for size, icon color, icon padding, background color and its opacity, hover backgroundand its opacity and for border radius.
Setting the border radius slider to maximu will make the icon round.
Icon Position
The icon can be positioned horizontally left, center or right and vertically top, center or bottom.