ThemeKit Text

Basic Items

Content

There are certain items that will be inserted in every page. These should be created with minimal code and use external sccripts/stylesheets if possible for maximum efficiency and fast download in the browsers

Header

The ThemeKit Text Header has a grid layout with the option to add a logo configures as an iternal link.
The heading has the option to add siselines which can animate in when the header enters the viewport.

Heading

The h1 heading text has

  • Controls for font size plus mobile font size
  • Line height & mobile line height
  • Font weight & font style
  • Text shadow to thicken up Google hosted fonts
  • Letter spacing to use when the text shadow is present
  • Text can run to two or more lines
  • Sideline height, style, color and spacing from the text
  • Heading max width to adjust sideline length

Animation

The sidelines can animate in if required. The animation has a checkbox to turn it on and a control for the fade in time set in milliseconds.

Headings

ThemeKit Text Heading

The ThemeKit Text Heading widget creates an h1 through h3 heading with controls tp thicken up Google hosted fonts that don't have adjustable font weight.
Using Headings
All EverWeb responsive widgets, themekit widgets and themes use HTML5 containers for more efficiency, better layouts with less code and improved search engine indexing. In an HTML5 element the first heading is always an h1 since it is regarded as a mini "page".

  • h1 is used for the website name which is normally in the header
  • h2 is used for the page name
  • h3 is used for section headings or to denote a change in subject/content type

The heading has the option to add a styled SVG icon which is configured as an internal link.
Animation
The heading text has the option to add a swing in animation. The animation occurs when the heading enters the viewport. The animation is turned off for mobile phones since animation on these devices only causes confusion.

Next Page

Line/Spacer - Fade In

Rather than use an h3 heading to denote a change in subject or content type a line/spacer can be used to provide a visual break and add some "white" space.
The spacer with line is shown above and the spacer without line plus content fade is in inserted below the previous/next links.

Controls

The ThemeKit Text Line Spacer has a checkbox to turn on the line and controls for …

  • Spacer height & solid or gradient background
  • Line max width and percentage width
  • Line height & color
  • Line style - dashed, dotted, double or solid

Content Fade In

Allowing the page content to fade in over time has a couple of advantages. It creates a smooth entrance for the page content and the delay allows an item like a hero image time to download.
The fade in function has a checkbox to turn it on and a control for the fade in time set in milliseconds.

Footer Bar

A large footer packed with hard to find and read info is unnecessary, a complete waste of space causes a lot of extra scrolling for small mobile device users.
All that is required is a footer bar with home page link, email function, copyright info, phone function if appropriate and a smooth scroll to the top function.
The ThemeKit Text Footer bar has all the above plus an extra couple of optional internal links for info or T & C.

Action

The ThemeKit Text Footer Bar widget has &hellip

  • Icons created using CSS for better quality and fast download
  • Info tooltips on hover & click on mobile
  • The footer bar is show/hide on scroll