EverWeb Widgets

CSS Layout

Grid Module

Flexible

Responsive

Website

Designs

Ionicon Icons

The Ionicon icons are not so well known as the Font Awesome icons. They have a bit more "class" than most other icons and help to differentiated a web page design from all the millions of others that use Font Awesome.
Use the link below to launch a cheatsheet which makes it easy to search for icons by name and to copy the icon name for inserting into the widget Assets List

Ionicon Cheatsheet

Icons

The icon container can have a border and/or a box shadow and can be set up square with radiused corners or made round by checking a box. These can be links if required and can have a box shadow animation on hover. Links are created using relative or absolute file paths. Follow the link below for more info about doing this.
Each grid item can also have an optional heading and optional text.
The items animate upwards as they are scrolled into view. Each item can have a different animation delay. In the example below the delays are set to increase by 0.1 sec from left to right.
The animation can fire just once when the grid is scrolled into view or every time it is scrolled out and back in to the viewport.
The animation can be prevented from firing when the page is viewed on a mobile phone.
When two or more widgets are inserted on the same page, only the last one of them needs to be be set to animate.

File Paths

Grid Item Setup

Set the maximum width and check the boxes to create icon links and add headings and text if required.
Items are added and their data entered as described below …

Click the "Add" button to add an item and select it in the list
Enter the icon name
Tab down to the next box and add the heading
Tab again and enter the text
For links, enter a relative or absolute file path and check the box if the link is to open in a new window
Choose the item's delay time from the dropdown menu
Set the number of items per row for each device type

Grid

The grid shows four items per row on wider screens reducing to two and then one on narrower devices.

Grid Items

Each item has an icon link with optional scale animation, a heading and text.

Animation

Each item has a slightly longer delay than the one on its left to stagger the slide in.

Settings

Animations can be set to fire once or every time they enter the viewport and defeated on mobile phones if required.

Styles

The grid items have controls for background color and opacity and can have a border and/or a box shadow.
Grid items are spaced out horizontally and vertically using the Grid Gap control. The left/right padding can be adjusted to move the grid away from the left/right edge of the browser/device window.
The wrapper background color and its opacity can be adjusted and there is a Vertical Spacing control to move it away from the items above and below.

Sale Tag Grid

A responsive image grid with price info and sale tags.

Product Tab

An image grid for displaying products with corner tabs, caption and optional top caption.

Image Scale Grid

An image grid with scale and caption animations on hover.

Badges

Animated badge grid for creating sponsor and affiliate links to monetise a website

Testing

Responsive pages need to be tested in Chrome and Firefox and then launched in the iOS Simulator to test them in both landscape and portrait mode on an iPad and an iPhone simulation.

iOS Simulator Testing