# Screens

## Overview

Nectar provides over 50 carefully crafted, commonly needed, ready-to-use, functional screens for building beautiful and intuitive user interfaces.

Each screen is designed using Google's Material Design System for Android, Apple's Cupertino Design System for iOS, and Framework7's Aurora Design System for Desktops.

Each screen is designed upon a Grid System for responsiveness, and therefore looks perfect on mobiles, tablets and desktops.

These screens are built using various Components, with some JavaScript code and HTML5 Web APIs for business logic and functionalities.

The data in these screens is populated using fake data generation library [Faker.js](https://fakerjs.dev) and some JSON files with dummy data located in `/assets/custom/dataset/` folder.

You can take this as a reference and populate the screens with your own data coming from an REST API.

You can access the code for screens in `/partials/screens/` folder. The code is pretty much self-explanatory and therefore can be modified easily as per your needs.

These screens strictly follows the Framework7's Router Component structure. Therefore it is highly advised to learn about them at <https://framework7.io/docs/router-component>

## Demo

<https://nectar.website/demo/screens/>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://pmsgz.gitbook.io/nectar/ui-ux/screens.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
