ThemeKit Responsive Design

EverWeb
ThemeKit

Custom Layout

Stroke Heading

If a page needs a striking heading the ThemeKit Buzz Stroke Heading should be noticeable enough.
It uses the CSS background-clip property to create a three color gradient text stroke.
Responsive Text
If you want to avoid adding a whole bunch of media queries the easiest way to make a heading text responsive is to use viewport units.
Unfortunately EverWeb doesn't render all items like a code editor or a browser. It can't trigger animations and doesn't know what to do with viewport units.
The widget has a font size setting in pixels for mobile phones so this can be used to make the text large enough to edit on the EverWeb design canvas and then reduced to the required value before publishing.
Letter Spacing
The letter spacing control is also set in viewport units so the heading needs to be previewed in the browser to see the result.
Font
The font used in the demo is the Google hosted Zen Dots. Any display type font like Alfa Slab One should work in this application.
If an Apple font is used it won't render on non Apple devices so the fallback font needs to be selected with this in mind.


Versa Article

To make a website design stand out for the boring masses requires some features that are never if rarely seen.
Animation needs to be used sparingly and be somewhat unique. Too many websites use the animations from the animate.css stylesheet - as do the EverWeb default animations.
These have been around for years, are inefficent and have been over used and abused in zillions of websites.
This design was created for a client who wanted a versatile content block with options for different permutations.
Sliding animated items in is easy but sliding them from the center out - not so much!

Info Link

Versa Module

Items animating in from the top, right, bottom and left are the norm since they are easy to achieve but don't increase the visitor's experience since everybody has seen them too often.
Items animating from the center out will add an extra memorable function to any web page.
The two column grid layout can have several permutations.
The version above has two images and a text block showing the optional link. The bottom image shows the optional image link function.
The item below shows a single image in one column and two in the other and all the images configured as links.
Images
The images can be lazy loaded if the item is not in view on page load to speed up the page download time.
Animation
There are separate animation controls for each column and the animations are chosen from the ThemeKit custom animation stylesheet.
The items can animate once only or every time the item enters the viewport.
By default the animations are removed on mobile phones as they should be!
This can be overridden by checking a box if required.

Buzz List

The ThemeKit Buzz List widget has an optional heading and text, a list and a second optional heading and text area and a CTA style link to open internal/external pages with a new window option.

  • Transform the way you create web pages in EverWeb
  • Future proof responsive layout using HTML5 and the CSS Grid Layout Module
  • Create web page layouts like the professionals
  • Excellent user experience on all devices
  • Better layouts with less code
  • Complete package includes project file, widgets and media

ThemeKit

Start creating a website with up to date styling, structure and features. Click the link below to see the widgets, themes and extensions …

Learn More