ThemeKit Responsive

ThemeKit Responsive X

Header

The ThemeKit RWD-X Header creates an h1 through h3 heading with a three color gradient, image or GIF text background. The background is achieved by setting the text-fill-color property to transparent and inserting the color gradient, image or animated GIF in the background.
The letters are embellished with a text stroke which has controls for width and color.
Font Size
Responsive text size is best achieved by using viewport units instead of pixels. Unfortunately EverWeb doesn't support these units at the time of writing.
The widget has controls for setting the font size for each device type.
Font Properties
Bold and italic are not desirable in web design. They make the design look outdated and, more importantly, causeproblems for those who have reading difficulties.
Letter Spacing
Letter spacing is another property which should be avoided unless it is absolutely necessary.
A feature heading like the one above is the exception since it usually employs a Google hosted display style font. Being of this century, these fonts generally don't have weight and style versions anyway.
The only good reason to add letter spacing is when adding properties such as text stroke and text shadow to a feature heading.

Responsive Article

ThemeKit Responsive Article

ThemeKit RWD-X Article

The ThemeKit RWD-X article can be used with a one column layout for text alone or with two columns for adding an image.
The relative column widths can be adjusted, the layout switched and the text appearing above or below the image below the breakpoint.
The optional link can open internal or external pages and has a new window option.
The link can also be used for smooth scrolling to an anchor on another page as described on the "Anchors" page.

Anchors

Heading

Heading - No Anchor

The item above is the ThemeKit RWD-X Anchor widget which can be inserted with or without an anhor ID and used as a section heading.
When using HTML5 only three headings are required …
h1 for the website name
h2 for the page name
h3 for section headings
Icon
The heading has an option for an SVG icon configured as an internal link. It has controls for icon size, color, background color, border radius and padding.
To install an SVG open the SVG download folder and double click the icon file to open it in TextEdit.app in plain text mode. Copy the code and paste it into the widgets settings SVG Code box.

Responsive Toggle Box

ThemeKit Responsive ToggleBox

Toggle Box

The header has a heading and the aciton tab. The heading can have a solid or two color gradient background and the action tab has controls for icon color, border color and for the background color and its opacity.
Box Content
The box has an optional image, a heading, text and an optional internal/external CTA (call to action) style link.
Images
If the image file is more than about 600px wide the option to insert a smaller image should be used. There is an option to lazy load the images if the item is not in the viewport on page load.
The box has the option for a border to separate it from the browser background and controls to space it down from the header and up from the item below.

Page Scroll

Viewport Scrolling

The ThemeKit RWD-X Scroll widget enables scrolling down by increments equal to the height of the browser/device screen viewport and smooth scrolling back to the top.
The scroll action tabs can have different colored backgrounds and the scroll times are set in milliseconds.
The item can be positioned left or right and there are conrols for tab spacing and inset from the edge.
The scroll function can be removed for mobile phones if required.

Slide Out Note

Auto Pop

Items that popup over the page content are really irritating and should be avoided if possible. The slide out side note is less obtrusive.
The note has a heading, text, an optional link and a close tab. It cam slide out from the left or right at a fixed distance from the top of the browser/device window. This distance is set in viewport height units (vh) rather than pixels to give better performance on all devices.

EverWeb Widgets

ThemeKit Themes
37 Clyde View,
Helensburgh
G84 7SD
Scotland
UK

Disclaimer

EverWeb ThemeKit is only for use with EverWeb web design app.
Digital goods cannot be returned. All sales are final with no refunds.

© EverWeb Widgets -

Side Note

Slide out from left or right with adjustable time and delay

Media