EverWeb ThemeKit Row Wrap

Grid

This grid demonstrates how to wrap text around a round image.

ThemeKit Row Wrap

The container uses the CSS Grid Layout Module which allows all the items to maintain the same height with no extra code required using its auto align feature
Vertical Align
The grid layout has a "align-self" property. This can have a value of "start", "center", "end" or "auto". Auto is the default setting if the selector is not present and this is what makes all the height equal by stretching each item to the same height as the tallest one in any row.

Row [1]

Curves

The text can be made to follow the curve of a round image.

image 2

The image is floated left in a container which is defined as a block element. The image itself is inserted in another <div> which is given the resuired width and height. This container can also turn square images round if its border radius is set to 50% and the overflow selector is set to "hidden".
The magic happens by adding the "shape-outside" selector with a value of "circle" and a right margin to space the text away from the image.

Row [2]

Links

Links can be added below the text if required.

image 3

The link is positioned absolutely in relation to the bottom and center using a CSS transform.
The container has extra padding at the bottom. to accommodate the link. This keeps all the links in line and creates a more uniform appearance to the layout.
The link can be configured to open internal or external pages using relative and absolute file paths. There is a checkbox to turn on the function to open the link in a new window.

Row [4]

ThemeKit Row Image Rotate

Rotation

Items like this help get away from the boring rows of boxes seen on so many websites and help to create a little more separation of the items.
The images have an overlay which can show on hover on computers. It has a caption which can be aligned top, center or bottom.
The images can be configured as hyerlinks to open internal or external pages. When the link option is selected an icon is inserted at the top right of the image to let mobile touch device users know that the image is a link.

ThemeKit Row Image Cluster

ThemeKit Row Image Cluster
Image [1]
Link to Row [1]
image 2
Image [2]
Lonk to Row [3]
image 3
Image [3]
Link to Row [4]

ThemeKit Row Image Cluster

The cluster can show either two or three overlapped images. When three images are present the center image can be brought to the front if required so that it is above both the top and bottom image.
Switch
The layout can be switched by checking a box so that the image cluster is to the right.
The image layout can be switched so that the center image is to the left.
Images
The images have an overlay which can display on hover when viewed on computers. The caption can have two or more lines and can be aligned at the top, center or bottom.
The images have a border and there is an option for a scale on hover animation.
Links
Individual images can be configured as an internal link. When this option is selected an icon appears at the top right so that those using mobile touch devices know it is a link.

ThemeKit Row Image Cluster
Top Image
No Link
Image [2]
Bottom Image
Link to Icons

Row Cluster 2 Images

In this example only two images are displayed, the images were switched to the right hand column and the image positions were switched.
The red overlay has the captions aligned at the top.
Using items like this creates space in a page layout and moves the design away from the neat rows of boxes that too many websites use.