ThemeKit Mobile First

The ThemeKit M1 widgets have been designed from the ground up to display content much more efficiently for mobile phones using lazy loading and offscreen items that don't download until they are in view.
Follow the links below to view the widget demos and click the logo at the top right of each page to return here.
Read the info page to find out the benefits and techniques for Mobile First Website Design …

Testing

There's no point intesting in a browser's responsive mode as it is a compromise at best. Use the iOS Simulator to test in an iPhone and iPad simulation.
Phone Simulator
the EverWeb ThemeKit Design widget pack has a widget that creates a mobile phone in the project for quickly testing how the site looks on phone using the desktop browser.

Installing ThemeKit

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
• 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

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.
Items
To save time when starting a new page, duplicate the "template" page, name it "items" and insert the frequently used items like header, footer, heading and text box with your default styles.