Introduction
What is Nectar?
Nectar is a Single Page Application (SPA) Frontend Kit built on the top of Framework7 Core (Vanilla JavaScript) v7, which can be used to develop Progressive Web Apps, Hybrid Apps for Android and iOS using Cordova, and Desktop Apps for Windows, Linux, and MacOS using Electron.
What are the main features of Nectar?
Nectar mainly uses Framework7 Core v7 for the UI and UX. Besides this, many important features are implemented on the top of it so that it can be used to create production-ready apps.
The main features of Nectar are:
Platform Agnostic UI & UX — Nectar uses Google's Material Design for Android, Apple's Cupertino Design for iOS, and Framework7's Aurora Design for Desktops.
Multiple Devices & Screen Resolutions — Nectar has responsive layout supporting devices with different sizes and screen resolutions – mobiles, tablets, and desktops.
Multiple Navigation Patterns — Nectar allows users to navigate within the app using two different navigation patterns – Sidebar and Tabbar.
Unlimited Colors & Dark Mode — You can style your app by choosing from 19 pre-built theme colors or apply any custom color matching your brand, with support for both Light & Dark modes.
Internationalization & RTL Support — Build your app for users around the world by localizing your user interface in various languages.
Does Nectar support Angular, React, Svelte, or Vue?
Framework7 comes in 4 variants — Core (Vanilla JavaScript), React, Vue, and Svelte. Nectar is based on the Core (Vanilla JavaScript) variant only. It does not support Angular, React, Svelte, or Vue. But it comes with features such as Routing, Templating, and State Management that are present in these frameworks and libraries.
Do I need prior knowledge for using Nectar?
Nectar mainly uses Web Technologies such as HTML, CSS, and JavaScript. You do not need to have any advanced knowledge for using Nectar. But you must have at least basic to intermediate knowledge of following:
HTML, CSS, and JavaScript
DOM Manipulation (Experience with jQuery can be useful as Framework7 comes with its own jQuery-like library — Dom7)
XMLHttpRequest / AJAX / Fetch API
Consuming REST APIs in JavaScript
It is highly advised that you must read about Framework7 in depth while working with Nectar.
Does Nectar come with any Backend or CMS?
No, Nectar does not come with any Backend or CMS. It is a Frontend solution only. However, if you already have a Backend or CMS and if it has a REST API, then you can use that REST API to develop a Frontend Client using Nectar. That's what Nectar is used for.
We have provided a basic WordPress REST API integration in Nectar. You can use this as a reference for integrating your own REST API with Nectar.
How can I integrate Nectar with PHP or any other Server-Side language?
Nectar is a Single Page Application (SPA). You cannot mix the frontend and backend code like traditional websites. Your backend must provide REST API which can then be consumed in Nectar using XMLHttpRequest (AJAX) or Fetch API.
Can I use/convert Nectar as/into WordPress/WooCommerce theme?
No, You cannot use/convert Nectar as/into installable WordPress/WooCommerce theme, but you can use WordPress/WooCommerce as a backend or headless CMS for Nectar.
Nectar provides basic integration for WordPress REST API. It means that you can use all those features of WordPress which are available via its REST API.
But this does not necessarily mean that all of the features of your WordPress site will work, especially the plugins. However, if the plugins also support REST API, then they can be used in Nectar.
Does Nectar support desktop resolution?
Yes, Nectar has responsive layout. It adapts to mobile, tablet and desktop resolutions very well.
Can I use Nectar with Framework7 based Drag & Drop Editors such as Wappler or Thorium?
No, Nectar does not support and has not been tested with any Drag & Drop Editors. You will need to use Code Editors such as VSCode or Brackets to edit Nectar.
Can I use other frameworks such as Bootstrap, Ionic in Nectar?
We have not tested Nectar with any other frameworks. Therefore, we cannot guarantee that Nectar will work perfectly well with them.
Demo
Test the Nectar demo at https://nectar.website/demo
Last updated