GHOST Progressive Web App

Description

GHOST is a Progressive Web Application built with Ionic Framework (1.x). Perfectly suited for publishers (bloggers and digital newspapers & magazines) – it has an outstanding look & feel and will speed up the process of creating your next mobile application (hybrid or not). GHOST comes equipped with the following options:

Over 10 carefully designed views and components such as social sharing (Facebook, Twitter, Google+), commenting and integration with Google DoubleClick for Publishers.
JSON REST API that can be extended to fit your needs
Compatibility with WordPress as the back-end CMS
Push Notifications by integrating with OneSignal
Angular/Ionic & SASS Source Code
Unit Tests and End-to-End Tests with Karma, Jasmine and Protractor (50-60% code coverage)
Extensive Documentation

Check out our entire collection of progressive web app themes on PWAThemes.com: BASE, MOSAIC, ELEVATE, FOLIO, INVISION, POPSICLE, PULSE, GHOST, PHANTOM, LUCID, EXTRUDE, VEDI, BLEND, PURE, GOTHAM, FUTURE & PALM.

TRY BEFORE YOU BUY

1. Open Chrome/Safari on your Android/iOS mobile device (smartphone or tablet) 2. Navigate to https://bit.ly/pwa-ghost 3. Swipe around and enjoy!

GHOST’S KEY FEATURES

Cross Platform All it takes for a mobile web application to run is a modern mobile browser (HTML5 compatible), thus allowing users to instantly have access to your content, without needing to go through an app store, download & install the app.

Responsive UI The mobile web application is sensitive to various screen sizes and orientation changes: landscape, portrait. In other words, the look and feel of the mobile web app seamlessly morphs into the screen size of users’ devices.

Theming You can offer your users an exceptional reading experience by giving them a mobile web application with a native app-like look & feel. WP Mobile Pack PRO comes with 3 fully customizable app themes.

Customize Appearance You can customize the colors & fonts, add your logo and graphic elements that can relate to your blog’s identity.

Sync Posts The posts inside the mobile web application are organized into their corresponding categories, thus readers can simply swipe through articles and jump from category to category in a seamless way.

Sync Pages Choose what pages you want to display on your mobile web application. You can edit, show/hide different pages and order them according to your needs.

Sync Comments All the comments that are displayed in the blog are also synchronized into the mobile web application. On top of that, comments that are posted from within the app are also displayed on the blog.

Google Analytics GHOST easily integrates with Google Analytics.

Google DoubleClick for Publishers Monetization options (Google AdSense & Double Click for Publishers).

Push Notifications via OneSignal Integration with OneSignal to enable push notifications management.

Add to Homescreen Users can add the mobile web application to their homescreen and run it in full-screen mode.

INCLUDED APP VIEWS

Main and Related Articles Swiping the cover left will bring to light the main articles, organized by category. Mobile users can swipe left or right to expose articles and tap on the card to read more.

Navigate through Categories The categories section consists of a vertical list of items that’s composed of a featured image and a category title. There can be as many categories as needed, 10 of them being displayed at loading time, with the others being showed when “load-more” is fired up.

Nested Pages Menu Pages are morphed into an app section which we entitled “More”. Its menu-like appearance makes it easy to navigate from “page” to “page” and its nested nature enables multi-level display. This is particularly useful if you’re based on WordPress CMS.

Pull-up Menu for Comments and Social Media Sharing Commenting and sharing is directly embedded within each article’s detail page. The panels are opened by pressing the corresponding buttons from the post’s footer bar. When commenting, mobile users don’t have to be authenticated. Sharing across Facebook, Twitter and Google Plus is as seamless as it should be on any mobile device.

STYLING THE APPLICATION

Here’s a brief overview of the main files that you’ll be receiving when downloading GHOST:

- Ionic.app.scss – this is where we import the Ionic library and you can import other partials before the library to override default Ionic variables. - Main.scss – this is where we import the main application styles.

By default we separate the files we import here into three categories:


BASE - where we include utilities, such as:

* SASS functions
* Variables
* Mixins
* Typography -- default styles for typography across the entire app. You can obviously override them in your components.
* Utility-classes -- are classes that help quickly style your design.

COMPONENTS - where we include the default styles for components, such as the ones in Ionic's list of CSS Components e.g. Forms, Buttons, Toggles etc.

MODULES - This is where we include styles specific to each module in your application.

In our experience working with a handful of developers over the past months, this structure has enabled us to greatly improve how we write CSS and handle our stylesheets, and we hope it will do the same to you too. More documentation available here: https://github.com/appticles/pwa-theme-obliq

If you have questions please don’t hesitate to get in touch: