Grid Hero

The ThemeKit Grid Hero has a header with an optional logo link and an h1 heading for the website name.
Either two or four images can be inserted below the header.
Heading
Since the main heading often uses a Google hosted font - and many of these only have a single font weight - the heading has the option to thicken up the text using the controls for text shadow, shadow color and letter spacing.
Animation
The optional image animation has controls to turn it on, animation time and delay in milliseconds and a slider to set the initial scale.
The images animate in clockwise and checking a box will stagger the animation.

Images

The images have the option to add a border and are spaced out using the grid gap control. The link icon at the top right animates on hover
As can be seen from the demo the captions can run to two or more lines and can appear on hover on computers.
Lazy Loading
There is no lazy load function since the hero id always in the viewport on page load.

SVG Icon Grid

Grid

Auto

A grid layout using the min-max function and the auto-fill keyword creates a responsive grid without using media queries.

EverWeb ThemeKit

Icons

SVG

SVG icons should be used instead of PNGs and have much better quality than font icons like Font Awesome.

Insert

SVG Code

Open the icon in TextEdit.app plain text mode to copy the code and paste it into the widget settings.

CSS3

Icon Styles

Icons have controls for icon colours background, padding, border width ,color and radius and a checkbox to make them round.

Links

Link Text

The links can have individual link text or - by checking a box - that can have common link text which only needs entering once.

Items

Styles

The items can have a border and/or a bottom box shadow and are spaced out using the column gap and row gap controls.

SVG Icons

SVG icons are used in modern web design rather than PNG images or font icons like Font Awesome.
PNGs
Avoid using PNG images for icons. Their relative file size is large and they require a server request for each one.
Font Icons
SVGs have better quality than font icons like Font Awesome.
Font icons usually require downloading a large stylesheet or Javascript file from another server, which contributes to slow download performance.

Inserting SVGs

Download the SVG icons using the link in the "Read Me First" file in the widget download folder.
Double click the icon to open it in TextEdit.app set to plain text mode or a code editor.
Copy the code and past it into the widget settings.
MacOS users can download a free app for opening and editing SVG files from the App Store …

© EverWeb Widgets -

MENU