EverWeb Widgets

Slide Up In Viewport [1]

Staggered Animation

These widgets create three inline modules when viewed on wider screens and collapse to two plus one and then a vertical stack on mobile devices.
The optional slide up and in animation occurs when the item enteres the viewport. The items have the same animation time but are each given a slightly different delay time.
The animation can be turned on last. This allows the item can be seen on the EverWeb design canvas for setting it up.
Equal Heights
The items maintain equal height despite having varying amounts of content by setting the align-self property to "auto".

Slide [1]
Fountain

Grid Items

Info

Each item is an HTML5 article with a <figure>, an image, a <figcaption>, heading, paragraph and link.

Slide Up [2]
Slide [2]
Sunset

Options & Links

All the items are optional and are turned on as required using checkboxes.
The links are positioned absolutely at the bottom so that they remain inline.

Slide Up [3]
Slide [3]
Seagull Ship

Animation

The optional staggered, slide up and in animation occurs whenever the items enter the viewport.
The items are auto aligned to keep them the same height despite varying content.

Slide Up [4]

Lightbox Images

Each thumbnail image opens a larger version in a lightbox slideshow. The optional icon can be displayed on hover when viewed on computers and laptops.
The slideshow has image captions, a slide counter and navigation is by directional arrows on computers. The arrows can be hidden on touch devices where the slides are swiped.
Images
The slideshow image is responisve up to the width of the image file. The images in the above example were to 1200px wide and the thumbnails to 480px wide before importing into EverWeb.

Testimonials & Quotes

CSS Grid is a new way of creating layouts on the web. For the first time ever we have a proper layout system available natively in the browser.
If you compare it to the popular framework Bootstrap, not only can you create layouts that previously weren’t possible without introducing JavaScript, but your code will be easier to maintain and understand.

Hacker Noon

CSS Grid Layout is the most powerful layout system available for web design. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system and can only handle rows.
Grid Layout works by applying CSS rules both to a parent element - the Grid Container - and to the element's children - Grid Items.

Chris House

The people who are crazy enough to think they can change the world are the ones who actually do it. Creativity is finding the connection between things that others can't see.· · ·Anybody can have a great idea but it only exists in the ether until a creator connects it to reality by putting it into practice.

A Anon

More …

Fancy Quotes

The quotes can be used for customer testimonials or for quoting other sources.
The example above uses three Google Hosted fonts - Stint Ultra Expanded for the text, Coustard for the fancy quotes and Quigley for the "signature". Each one has a drop down for choosing a web safe fallback font.
The heading at the top is optional as is the link at the bottom which can be used to open a page with more testimonials if required.

Image 1
L Shaped Desk
Wood Frame

The Grid

The container uses the CSS Grid Layout Module which allows all the items to maintain the same height with no extra code required.
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 heights equal by stretching each item to the same height as the tallest one in any row.

Slide Up [2]
Image [2]
L Shaped Desk
Metal Frame

Images

The images are shown with the optional border and box shadow
The overlay can animate in on hover on computers and appear on page load on touch devices.
The caption can run to two or more lines by using the HTML5 line break <br> to create returns The caption has its own line height control to space out the lines.

Slide Up [3]
Image 3
Rolled Perspex
Transparent Desk

Link

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.

Slide Up [4]

© EverWeb Widgets -