ThemeKit Responsive

Responsive Website

ThemeKit Themes

The ThemeKit download folder contains all the required widgets and a project file with examples of all the widgets in the pack.
With the EverWeb window closed …

  • Open the Finder's Go menu while holding down the option key and click on "Library"
  • Open the Application Support folder and then the EverWeb folder
  • Locate the ThemeKit project file which has a .everweb extension and drag it into the EverWeb folder
  • Double click all the widgets to install them or drag them into a new folder in EverWeb Widgets panel
  • Open EverWeb and the ThemeKit project will be in the list
  • Select the ThemeKit project and click the little up/down arrows to the right
  • Select "Duplicate …" from the list to make a copy to use for the project
  • Open the duplicate file in EverWeb by double clicking it and give it a suitable name
  • Keep the original ThemeKit file - with all its original settings - as a reference

EverWeb Design Canvas

EverWeb cannot render any animated or active items, slideshows, audio or video on the design canvas.
Animation
When using a ThemeKit project file, select an item that appears to be blank and look for any animation checkboxes. Turn these off to see the widget's content.
Lazy Loading
Media widgets have a lazy loading function to allow the items to load fast on all devices. If the media is not visible on the EverWeb design canvas turn the lazy loading function off while making changes.

Extra Items

Download the ThemeKit Phone Simulator and the SVG Icons from the links in the Read-Me-First file in the theme pack.
Install the simulator in the project.
SVG Icons
To insert an icon double click it to launch it in TextEdit.app set to plain text mode, copy the code and paste it into the SVG Code section in the widget settings panel.

Template & Basic Items

The "template" page is a blank page set up with the necessary settings. This page can be duplicated any time a new page is required.
NOTE: that if a new blank page is selected from the toolbar in the EverWeb window it MUST be modified to have the same settings as the default template page in the ThemeKit project.
The default EverWeb responsive template is not set up correctly and the Responsive Row widget is NOT required.
Items
To save time when startimg a new page, duplicate the "template" page, name it "items" and insert the frequently used items like header, footer, heading, image and text box with your default styles.

Inserting Widgets

Creating a website with the EverWeb ThemeKit widgets is a lot quicker with better results than using the default EverWeb items.

  • Responsive widgets are relatively positioned and are stacked vertically
  • Drag a widget onto the page
  • The widget outline will show and it will position itself below any previous widget(s)
  • Rearrange widgets by dragging them up or down the page
  • NOTE: The EverWeb Responsive Row widget is NOT required when using these widgets.

Important Notes

Responsive widgets are centered in the browser and must have an appropriate setting for maximum width.
The maximum width for inline text should not exceed 1000px and should ideally be less. Otherwise it becomes difficult for the eye to follow through from the end of one line to the begining of the next.
Media files such as images slideshows and video should have their maximum width set to that of the actual media file to allow for reasonable quality when viewed on computers.
If media files are wider than 800px they will be far too large for downloading over cell phone networks when the visitor is using a smart phone. Use a widget that allows a second mobile size file for images, slideshows and video players.