EverWeb Widgets

Image [1]
Image [1]
Image [2]
Image [2]
Image [3]
Image [3]
Image [4]
Image [4]
Image [5]
Image [5]
A Image [6]
Image [6]

ThemeKit Box Slider

The slideshow has dual control functions to allow different settings for mobile devices. For example the slider could be autoplay with a fade transition above the break point and manua; swipe with a slide transition below it.
The images in this example were cropped to 600px square before importing into EverWeb and are displaying the optional captions.
There are checkboxes to switch the slideshow to the other side and to switch the text above the slider on screen widths below the break point.

Info Link

ThemeKit Box Text x 2

The widget creates two HTML5 <article> elements which sit side by side when viewed on browser/screen widhs above the break point and stack below it.
Apart from the fact that they are more versatile and easier to use, it's better to use widgets for inserting items on a page since they use HTML5 containers which give the search engines a better chance to index the content properly.
Each article has a heading, text and an optional link. The link can be configured to open internal or external pages and has a new window option.

Info Link

Box Height

In addition to having a maximum width control there is one for minimum height. This can be set to half the maximum width to preserve the boxy look.
Vertical Align
Since this is a CSS grid layout, the box content can be vertically align at the top, center or bottom using the values "start", "center" and "end".
Spans
Spans can be inserted in <span></span> tags for sub headings or emphasis and there are controls for span font size and color.

Box Flex Nav

The navigation used on this page is the ThemeKit Box Flex Nav. This uses a flexbox layout for minimal code and easy centering.
Layout
As the browser/device screen width decreases the links will flow naturally to two or more lines and stay centered in the container.
There is an option to set a break point and change the layout to block with the links stacked vertically at screen widths below the break point.
Position Sticky
The navigation has the option to use the CSS position "sticky" which will allow it to scroll up with the rest of the page content and then stick at the top.
When the navigation has its display set to "block" on mobile phones the sticky class is removed.
Animation
There is an option to add a different background color on hover. The hovers have an ease-in-out animation. The other option is to allow the links to scale a little on hover.

Quotes/Testimonials

Creativity

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.

A Anon

Idiot Proof

Every time you make something idiot proof the universe produces a bigger idiot.

Steve Jobs

Ideas

Anybody can have a great idea but it only exists as energy in the cosmos until a creative person connects it to reality by putting it into practice.

Bert Stein

Web Designers

An amateur designer gives the client what they want - a professional gives them what they need.

C S Coderman

Box Quotes

The quotes are inserted in a grid which has controls for setting the number of items per row for each device type.
There are options for using Google hosted fonts with web safe fallbacks for the heading and text, the quotes and the "signature". The size, color and position of the quotes are all adjustable.
The example uses a 10px grid gap and padding to separate the blocks.