Anchors

ThemeKit Responsive X

Smooth Scrolling

Smooth scrolling to an anchor on the same page is quite straight forward and very easy to set up when using ThemeKit widgets rather than the default EverWeb system.
A link to an anchor on a different page looks far more professional if the target page is opened at the top and then smooth scrolls to the anchor.
CSS Smooth Scrolling
Modern browsers can achieve this with just one line of CSS - in theory! Firefox works fine, Google's Chrome needs a CSS override and Safari doesn't support it at all at the time of writing.
Since this CSS method is fairly new it's probably better to use Javascript to support older borwsers and Apple's Safari for desktop.
Navigation
The ThemeKit Responsive Anchor Nav widget is a bar with text that can be aligned left or center and the show/hide action tab.
Links are added as required along with the page name without the .html extension and an ID number which can be just a single digit which is the same as the one entered in the target anchor.
Page Names
Page names should always be lowercase and use a hyphen to separate words rather than a space.
Directories
If the target page is in a directory in the same project as the navigation the page name should be preceded by the directory name …
directory-name/page-nameIf the page is on another website an absolute file path should be used …
http://website-name.com/directory-name/page-nameUse the anchor navigation or the link below for info about the anchors …

Customer Quotes

Testimonials

A different approach for a bunch of testimonials or quotes in a responsive grid.

Liam O'Leary

Responsive Grid

The grid uses the min-max property and the auto-fit keyword so no media queries are required.

Callum MacDonald

Article

Each article element has a heading, text and a "signature" which can use the browser default cursive or a Google font.

Fingal Robertson

Tail

The bubble's "tail" is optional and is created using CSS to make the triangle.

Marie Douglas

Icon

The optional icon is an SVG with controls for position, color and background.

Oscar Maxwell

Anchors

Rather than an item that just creates the anchor it is more usefull to combine it with another function.
Heading + Anchor
If a page has anchors it usually means that each one denotes a different subject. When using HTML5 only three headings are required …
h1 for the website name
h2 for the page name
h3 for section headingsThe ThemeKit RWD-X Anchor Heading widget has an h3 heading for use as a section heading and a control to add the anchor ID.
Spacer
The ThemeKit RWD-X Spacer widget can create a variable height spacer with a solid or gradient background color.
It can be used as a separator with the addition of a line. The line has controls for percentage width, height, color and style - dashed, dotted, double or solid.
It has a checkbox to turn on the anchor function and a control for entering the anchor's ID number.

Link Info

Widget Links

Most of the ThemeKit widget with text have the option to add an internal/external link which can be used to scroll to anchors on the same page, another page or another website.
Links
The image shows the settings for creating links to anchors on the same page, another page in the same directory, a page in another directory and to a page on another website.
The link below will smooth scroll to the testimonial/quotes grid.

Quotes

Hyperlinks

Just like image, video and audio files, page names must NOT be created with spaces between the words. Use a hyphen instead.
No matter what you name a page in EverWeb, the application will remove the spaces and insert hyphens. EverWeb changes the first page to "index".

Footer

Responsive Page Footer

Footers are one of those things that everybody seems to think is a necessary part of a web page just because most web designs have one. Most web designers follow the obsolete thinking that a footer should be packed with hard to find and read info that nobody ever reads.
Show off footers may be acceptable on the version that appears on computers but have no place on the mobile version where they are a complete waste of space and an aggrevation to mobile device users.
If a footer is required by by a client who doesn't know any better, an acceptable option is to use a show/hide toolbar with and action tab to open the footer panel.
Footer Bar
For those progressive thinkers who realise the folly of a jumbo footer, an alternative is shown below.