OBLIQ Progressive Web Apps

OBLIQ 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). OBLIQ 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-obliq2 3. Swipe around and enjoy!

OBLIQ’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
OBLIQ 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

* Full-screen cover page
* Pages & sub-pages menu
* Large hero images in the articles carousel
* Side-to-side navigation with lateral swiping
* Maximum 2 articles per page

Obliq is bold. With sharp lines throughout the app, it’s best suited for an opinionated blog, one that is sure of its point of view and not afraid to show-off. Here, images are the heroes, making this theme a perfect fit for showcasing great visual content.

Cover Screen
OBLIQ’s homepage mimics a magazine cover, highlighting the latest article. There are 6 default covers which can be replaced with your own static ones. Alternatively you can choose a more dynamic approach by displaying the article’s hero image.

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 OBLIQ:

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