Every Framework7 572,986 screen in this chapter uses the same pieces, nested in this order. The <head> adds a viewport meta tag ending in viewport-fit=cover and, optionally, a theme-color for Android's status bar.
| Piece | Classes | What it does |
|---|---|---|
| App root | #app, gains framework7-root | Holds views, panels and popups |
| Views wrapper | views (with tabs for tab bars) | Groups several views; one per app |
| View | view view-main, optional view-init | Router and history; view-init auto-creates it |
| Page | page with data-name | One screen, moved by page-current and friends |
| Bars | navbar, toolbar toolbar-bottom, tabbar | Stay fixed, padded by the safe-area variables |
| Scroller | page-content | The only element that scrolls |
| Edges | safe-areas, no-safe-area-left/-right | Landscape side insets |