ThemeKit Click Hero

Click above to show web apps

ThemeKit Reveal Click Hero

The hero item above shows an image overlay on page load. The image container has left and right sections which slide aside on clicking the action tab.
The tab has controls for icon color and for the background color and its opacity. The optional bounce animation has a control for setting the animation time.
Image
The image is inserted in three sizes for computer, tablet and phone. The action tab has controls for icon color, background color and background opacity.
The angle at which the left and right "curtains" meet can be varied from approximately 45° left through vertical to 45° right using a slider.
Article
The overlay has a two column grid layout and the article can be aligned left center or right and top, center or bottom within the grid. On screen widths below the break point the article becomes centered horizontally.
Link
The optional link can open internal or external pages and has a new window option. It can be styled as a text link or, as shown in the example, a CTA (Call To Action) with a contrasting background and/or a border.

Essential Web Tools

EverWeb

EverWeb is the recommended replacement app for Apple's iWeb and brings web design from the far past to the present day.

Preview

Preview.app provides easy and quick image size reduction for single or bulk images and can be used for basic color adjustment too.

ImageOptim

ImageOptim is a free app for Mac which optimises JPG and PNG images quick and fast. Just drag an image or a bunch of images from a Finder folder onto the window and they will be optinised to the same folder.

Browser Testing

Safari for desktop has too many bugs to be useful for testing although it is still the best for checking the source code via Develop menu.
Use both Chrome and Firefox instead for desktop testing.

Simulator

Testing web pages in a desktop browser's responsive mode is not recommended.
Test in the iOS Simulator using at least one iPhone and one iPad simulation.

CotEditor

Use SVG (scaleable vector graphic) files to replace PNG and font icons. Drag the SVG file onto the app and it will open to reveal the code to copy and paste into the widget settings panel.

Minify

Any external files used in a project MUST be minified and have the .min pre extension.
The freeware Minify will do this quick and easy.

Whisk

Modifying code or creating a widget requires a good code editor.
Whisk by Tumult is an up to date HTML5 editor and is very reasonably priced for the versatility number of features available.

ThemeKit Reveal Card Grid

Card
The cards are an article element with a two column grid layout.. The relative widths of the columns can be adjusted.
The image is in the left column and the heading and text in the right one.
The optional tab link can open internal or external pages and has a new window option.
The cards can have a border and/or a bottom box shadow and there are controls for the grid padding and top/bottom and left/right padding.

ThemeKit Reveal Progress Bar

This simple widget lets visitors know how they are progressing down and up the page. The bar can be fixed at the top or bottom of the browser/device window.
The controls are for bar height, background color and its opacity, progress color, bullet with, color and radius, position top or bottom.
A z-index controls allows it to be place above other page items in the stacking order..