# Sistema de design Framework7

## Prévia da interface do sistema de design Framework7

Abra a ação nativa de swipeout de um estudo, marque-o como esboçado e confira a lista filtrada.

## Referência de design do sistema de design Framework7

Framework7 Core/Vue 9.2.0 com o modo iOS definido explicitamente. As cores do tema abaixo foram verificadas no documento renderizado após a inicialização; os valores de lista e tipografia vêm da folha de estilos do iOS incluída no pacote. As ilustrações originais das notas e o layout externo são identificados separadamente.

### Cores resolvidas do tema iOS

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --f7-theme-color | #007aff | Cor primária padrão, verificada no documento iOS real. |
| --f7-theme-color-rgb | 0, 122, 255 | Canais RGB usados nos cálculos de alfa. |
| --f7-theme-color-shade | #0066d6 | Tom derivado da cor primária. |
| --f7-theme-color-tint | #298fff | Matiz derivada da cor primária. |
| colors.green | #4cd964 | Nome de cor verde padrão usado para concluir um swipeout. |
| colors.red | #ff3b30 | Referência à função vermelha padrão; este exemplo não inclui ação destrutiva. |
| --f7-text-color | #000 | Texto padrão nativo do iOS; o texto original da página usa #26343f. |
### Tipografia e geometria de lista nativas do iOS

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --f7-font-size | 14px | Tamanho base do texto do framework. |
| --f7-font-family | -apple-system, SF Pro Text, SF UI Text, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif | Pilha da plataforma iOS incluída no pacote. |
| --f7-line-height | 1.4 | Altura base da linha no iOS. |
| --f7-list-font-size | 17px | Texto de lista nativo do iOS. |
| --f7-list-item-padding-vertical | 12px | Recuo nativo da linha. |
| --f7-list-item-padding-horizontal | 16px | Recuo horizontal nativo. |
| --f7-list-item-min-height | 52px | Altura mínima nativa da linha no iOS. |
| --f7-list-item-media-margin | 16px | Espaçamento nativo de mídia. |
| --f7-list-inset-border-radius | 24px | Referência de raio nativo da lista com recuo. |
| --f7-list-item-subtitle-font-size | 15px | Padrão; o exemplo original substitui as legendas por 11px. |
| --f7-list-item-text-font-size | 15px | Padrão; o exemplo original substitui as descrições por 12px. |
| --f7-list-item-text-line-height | 21px | Altura de linha padrão das descrições nativas. |
### Composição original incorporada, definida explicitamente

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| Page title | 35px / 1.15; 29px narrow | Hierarquia original. |
| Advice title | Georgia, serif; 29px | Título editorial original. |
| Page/grid spacing | 32px page; 26px columns; 28px hero-to-grid | Valores originais do aplicativo. |
| Main panel | 22px inset; 16px narrow; 16px radius | Enquadramento original, independente dos padrões nativos da lista com recuo. |
| Grid breakpoint | 780px | Posicione o painel de recomendações abaixo da lista de esboços. |
| Artwork | 48×62px list thumbnails; 170px tall route illustration | CSS original, sem serviço de mapas ou imagens. |
| Embedding reset | html/body/#app/.framework7-root height:auto; min-height:0 | Adaptação explícita do exemplo, não uma orientação para apps em tela cheia. |
## Guia completo do sistema de design Framework7

Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real.

Orientações completas, um ponto de partida para a implementação e links para o código-fonte.

## O sistema de design Framework7 fornece comportamento para o app, além de componentes

### Framework7 fornece comportamento para o app, além de componentes

> A integração do Vue de Framework7 é baseada no runtime principal da aplicação. A entrada instala Framework7Vue em Framework7 antes de montar o Vue, e f7-app inicializa o aplicativo que gerencia o comportamento de swipeout. Importar apenas alguns wrappers estilizados para Vue não forneceria essa camada nativa de interação.

O exemplo local mantém o escopo reduzido: três sugestões originais de esboço, ações nativas de lista, um filtro de conclusão e uma opção para redefinir. Ele não configura um roteador, uma ponte para o dispositivo, um mapa nem um caderno persistente. Esses recursos mais amplos do app devem ser adicionados de forma deliberada, e não sugeridos implicitamente por uma prévia com aparência de aplicativo móvel.

Consulte a especificação de apoio

## Sistema de design Framework7: verifique se o tema da plataforma solicitada foi realmente aplicado

### Verifique se o tema da plataforma solicitada foi realmente aplicado

Esta versão aceita theme="ios" diretamente em f7-app. Um objeto params no estilo antigo não era uma prop equivalente funcional no componente inspecionado e, inicialmente, mantinha a detecção automática de desktop no modo Material. O exemplo corrigido verifica a classe html.ios renderizada e os valores resolvidos do tema antes de identificá-los como iOS.

No modo iOS verificado, --f7-theme-color é #007aff, com shade #0066d6 e tint #298fff. Uma cor-base do tema, um modo de renderização da plataforma e as funções de cor geradas para Material são conceitos distintos. Consultar o valor calculado após a inicialização evita documentar uma cor que o exemplo não exibe de fato.

Consulte a especificação de apoio

## Sistema de design Framework7: use linhas de mídia nativas e identifique as substituições tipográficas locais

### Use linhas de mídia nativas e identifique as substituições tipográficas locais

A lista usa f7-list media-list, com superfícies marcadas e divisórias do iOS. Cada linha fornece título, legenda e texto por meio do API nativo de item de lista, com pequenas ilustrações originais no espaço de mídia. A altura mínima padrão da lista no iOS é de cinquenta e dois pixels, mas o conteúdo de mídia com várias linhas naturalmente deixa essas linhas mais altas.

Os padrões nativos do iOS para legendas e descrições são de quinze pixels. O exemplo usa deliberadamente textos auxiliares de onze e doze pixels para esses breves cartões de estudo, permitindo que os títulos e as descrições ocupem mais de uma linha. Essas escolhas locais são indicadas separadamente das variáveis oficiais para que seja possível reproduzir tanto o padrão quanto o exemplo.

Consulte a especificação de apoio

## Sistema de design Framework7: um swipeout é uma configuração de item de lista com um contêiner de ações

### Um swipeout é uma configuração de item de lista com um contêiner de ações

A linha tem o swipeout habilitado e contém f7-swipeout-actions à direita. f7-swipeout-button fornece a superfície interativa e fecha a área revelada após a ativação. O aplicativo alterna o sinalizador done da nota em vez de habilitar a prop delete, pois a conclusão pode ser desfeita e o registro precisa continuar disponível.

O core nativo pode revelar as mesmas ações por meio de um gesto. Um controle visível Ações também chama f7.swipeout.open para o ID estável da linha. Assim, o comando fica fácil de encontrar para quem usa desktop ou teclado, sem exigir que todos descubram um gesto horizontal oculto.

1. Ative Ações em River steps e selecione Marcar como esboçado.

2. Mude para Esboçados e confirme que somente River steps continua visível.

3. Abra a ação novamente para desfazê-la ou redefina a lista inteira.

Consulte a especificação de apoio

## Framework7: mantenha a conclusão no modelo do sistema de design, em vez de removê-la de um elemento

### Mantenha a conclusão no modelo, não em um elemento removido

Os três objetos de anotação permanecem no array do Vue. Uma coleção computada os filtra apenas quando o segmento Esboçados está selecionado, e outro valor computado conta os estudos concluídos. IDs estáveis conectam cada acionador nativo de ação à linha correta, mesmo após a filtragem.

O rótulo da ação muda de Marcar como esboçado para Desfazer esboço em uma anotação concluída. Não há um atalho de deslize excessivo que execute uma ação inesperadamente após um gesto longo, nem exclusão automática que remova um elemento sem atualizar o modelo da aplicação. O mesmo registro pode voltar à lista ativa sem precisar ser recriado a partir de dados incompletos.

Consulte a especificação de apoio

## Framework7: explique a próxima ação no estado vazio do filtro do sistema de design

### Faça o estado vazio do filtro explicar a próxima ação

Quando Esboçados não tem registros, o painel informa que nenhum estudo foi marcado e oferece a opção Mostrar todos os estudos. Esse controle altera o mesmo modelo de filtro usado pelos botões segmentados. É uma forma real de recuperação, não uma ilustração decorativa de estado vazio sem nenhuma ação disponível.

Redefinir limpa todas as marcações de conclusão, volta para Todos os estudos e anuncia que os três estão disponíveis novamente. O texto de status identifica a anotação exata após cada ação individual. Ao recarregar a página, os dados de exemplo originais também são restaurados, pois esta prévia não salva um caderno no dispositivo nem em um servidor.

Consulte a especificação de apoio

## Sistema de design Framework7: adapte cuidadosamente um framework de aplicação completa para incorporação com altura determinada pelo conteúdo

### Adapte cuidadosamente um framework de aplicação completa para incorporação com altura determinada pelo conteúdo

Framework7 normalmente oferece suporte a layouts de aplicativos em tela cheia e contêineres de página. Este exemplo não tem páginas com roteamento e substitui intencionalmente a altura e o overflow do documento raiz para que o conteúdo determine a altura do iframe. Manter uma altura mínima baseada na viewport criaria um ciclo de retroalimentação com um elemento pai que redimensiona o iframe de acordo com o documento filho.

A lista nativa permanece dentro da raiz inicializada da aplicação. O layout original de duas colunas, com esboço e orientação, passa a ser empilhado em 780px; em linhas mais estreitas, a largura das miniaturas diminui, preservando descrições com quebra de linha. Essas escolhas para incorporação não devem ser copiadas indiscriminadamente para um aplicativo móvel comum com roteamento que dependa do modelo de rolagem de página do Framework7.

Consulte a especificação de apoio

## Framework7: combine ações por gesto com um controle explícito no sistema de design

### Combine ações por gesto com um controle explícito

O acionador de ação visível identifica a linha, como Ações para Etapas do rio. As opções segmentadas expõem o estado pressionado, o resultado é anunciado em uma região de status e a arte original é decorativa. A pessoa usuária pode acessar a mesma ação sem usar um gesto de toque e ouvir qual anotação foi alterada em seguida.

O teste local usou o acionador visível para exibir a área nativa de deslizar para ações, marcou Etapas do rio, filtrou a lista e confirmou que restou uma linha vinculada ao modelo. Também verificou o tema iOS renderizado e o layout de 280px. A simples presença de swipeout CSS não comprovaria nenhum desses comportamentos.

- Mantenha o rótulo do acionador de ação vinculado ao nome do registro.

- Use uma ação reversível no modelo em vez de excluir apenas o elemento do DOM.

- Teste a coleção filtrada e o status após a ação nativa.

Consulte a especificação de apoio

## Sistema de design Framework7: instale versões compatíveis do Core e do Vue

### Instale versões compatíveis do Core e do Vue

O ponto de entrada importa Framework7 de framework7/bundle, Framework7Vue de framework7-vue e a folha de estilos do bundle. O bundle inclui o módulo Swipeout necessário para este exemplo. Framework7.use(Framework7Vue) é executado antes de createApp montar o SFC completo.

Os dois pacotes estão fixados na versão 9.2.0. O SFC completo e a folha de estilos original acima são fornecidos, e o HTML raiz na configuração do Vite tem o ponto de montagem esperado para a aplicação. Não é necessário nenhum pacote de ícones para as ilustrações originais visíveis; o CSS principal do framework incorpora sua própria fonte interna de ícones compacta.

Consulte a especificação de apoio

## Framework7: exemplos de componentes do sistema de design

### Caderno de esboços completo com ações nativas de deslizar

f7App, botões segmentados, linhas de lista com mídia e ações nativas de deslizar com estado persistente no modelo do Vue.

```
<script setup>
import {ref,computed} from 'vue';
import {f7App,f7List,f7ListItem,f7SwipeoutActions,f7SwipeoutButton,f7Button,f7Segmented,f7} from 'framework7-vue';
const filter=ref('all'),message=ref('');
const notes=ref([{id:'river',title:'River steps',place:'North bank · 12-minute study',description:'Look for the rhythm between the stone edges and reflected lines.',done:false},{id:'market',title:'Market awning',place:'Old square · 8-minute study',description:'Use three values to separate canvas, shade and open sky.',done:false},{id:'window',title:'Window shadows',place:'Library wall · 10-minute study',description:'Follow the long diagonal before adding the smaller window shapes.',done:false}]);
const visible=computed(()=>notes.value.filter(n=>filter.value==='all'||n.done));const done=computed(()=>notes.value.filter(n=>n.done).length);
function actions(id){f7.swipeout.open('#note-'+id,'right')}
function toggle(note){note.done=!note.done;message.value=`${note.title} ${note.done?'marked as sketched':'returned to your sketch list'}.`}
function reset(){notes.value.forEach(n=>n.done=false);filter.value='all';message.value='All three studies are ready to sketch again.'}
</script>
<template><f7-app name="Field sketchbook" theme="ios"><main class="sketch-shell"><header><p class="eyebrow">FIELD SKETCHBOOK · THREE SMALL STUDIES</p><h1>A walk worth looking at.</h1><p>Keep a short list of things to draw. Swipe a study left, or use its Actions button, to mark it as sketched.</p></header><div class="sketch-layout"><section class="sketch-list"><div class="list-heading"><h2>Today's studies</h2><span>{{done}} / 3 sketched</span></div><f7-segmented strong><f7-button type="button" :active="filter==='all'" @click="filter='all'" :aria-pressed="filter==='all'">All studies</f7-button><f7-button type="button" :active="filter==='done'" @click="filter='done'" :aria-pressed="filter==='done'">Sketched</f7-button></f7-segmented><f7-list media-list strong dividers-ios class="study-list"><f7-list-item v-for="note in visible" :id="'note-'+note.id" :key="note.id" swipeout :title="note.title" :subtitle="note.place" :text="note.description"><template #media><div class="study-art" :class="note.id" aria-hidden="true"><i></i><b></b></div></template><template #after><f7-button type="button" small @click="actions(note.id)" :aria-label="'Actions for '+note.title">Actions</f7-button></template><f7-swipeout-actions right><f7-swipeout-button role="button" @keydown.space.prevent="$event.currentTarget.click()" close color="green" @click="toggle(note)">{{note.done?'Undo sketch':'Mark sketched'}}</f7-swipeout-button></f7-swipeout-actions></f7-list-item></f7-list><div v-if="!visible.length" class="empty"><strong>No studies marked yet.</strong><p>Return to All studies and mark one after you finish drawing.</p><f7-button type="button" @click="filter='all'">Show all studies</f7-button></div><p class="result" role="status">{{message||'Your list changes only in this local preview.'}}</p><f7-button type="button" outline @click="reset">Reset sketch list</f7-button></section><aside><div class="route-art" aria-hidden="true"><i></i><b></b><span></span><em></em></div><p class="eyebrow">A SIMPLE DRAWING ROUTINE</p><h2>Look. Reduce. Draw.</h2><ol><li><strong>Look for one relationship.</strong><span>Choose an edge, a shadow or a repeated shape.</span></li><li><strong>Reduce the scene.</strong><span>Keep only three values before adding detail.</span></li><li><strong>Stop at the time limit.</strong><span>A small finished study teaches more than an unfinished page.</span></li></ol><p class="aside-note">Original sample locations and prompts. No map, location service or real-world itinerary is connected.</p></aside></div></main></f7-app></template>
```

Referência de código

- Nesta versão, theme="ios" é uma propriedade direta de f7-app.

- O controle Ações visível chama o API nativo swipeout.open.

- A marcação altera o objeto do Vue; não exclui a linha do DOM.

### Layout original completo para incorporação

Substituições para altura determinada pelo conteúdo, quebra de linha em linhas estreitas e ilustrações originais de esboços.

```
html,body,#app,.framework7-root{height:auto!important;min-height:0!important;overflow:visible!important;position:relative!important}body{margin:0;background:#f1f3f6;color:#26343f}*{box-sizing:border-box}.sketch-shell{max-width:1120px;margin:auto;padding:32px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.14em;color:#6b7882}h1{font-size:35px;line-height:1.15;max-width:680px;margin:12px 0}header>p:last-child{font-size:15px;line-height:1.6;max-width:650px;color:#687986}.sketch-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:26px;margin-top:28px}.sketch-list{background:white;border:1px solid #dce3e9;border-radius:16px;padding:22px;min-width:0}.list-heading{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:20px}.list-heading h2{font-size:20px;margin:0}.list-heading span{font-size:12px;color:#6d7b84}.study-list{margin:24px -22px}.study-list .item-title-row{flex-wrap:wrap;gap:7px}.study-list .item-title{white-space:normal;overflow:visible}.study-list .item-after{margin-left:0}.study-list .item-subtitle{white-space:normal;font-size:11px;color:#72808a}.study-list .item-text{font-size:12px;line-height:1.5;max-height:none;-webkit-line-clamp:unset}.study-list .item-media{align-self:flex-start;padding-top:17px}.study-art{width:48px;height:62px;background:#e0e9ef;border-radius:7px;position:relative;overflow:hidden}.study-art i,.study-art b{position:absolute;display:block}.river i{width:55px;height:28px;top:30px;left:0;background:#8eaebe;transform:rotate(-18deg)}.river b{width:24px;height:40px;left:0;top:0;background:repeating-linear-gradient(#c5c1b6 0 8px,#a7a295 8px 10px)}.market{background:#ecdcbf}.market i{width:60px;height:24px;left:-5px;top:12px;background:repeating-linear-gradient(90deg,#bc735f 0 10px,#f9e9d1 10px 20px);transform:rotate(8deg)}.market b{width:26px;height:35px;left:11px;top:37px;background:#7b8072}.window{background:#ece9df}.window i{width:25px;height:29px;left:9px;top:9px;border:5px solid #617381}.window b{width:28px;height:55px;left:22px;top:25px;background:#b1b9b9;transform:skew(25deg)}.result{font-size:12px;line-height:1.6;color:#4f6a79;min-height:38px}.empty{padding:30px 12px;text-align:center;font-size:13px;line-height:1.6}.sketch-layout aside{padding:0 4px;min-width:0}.route-art{height:170px;border-radius:14px;background:#dce8df;position:relative;overflow:hidden;margin-bottom:24px}.route-art i{position:absolute;width:190px;height:190px;border:21px solid #aac6b4;border-radius:50%;left:55px;top:34px}.route-art b{position:absolute;width:90px;height:190px;border:15px solid #f4eed9;border-radius:50%;left:23px;top:-17px;transform:rotate(-25deg)}.route-art span,.route-art em{position:absolute;width:13px;height:13px;border:3px solid white;background:#537b70;border-radius:50%;left:67px;top:111px}.route-art em{left:167px;top:52px}.sketch-layout aside h2{font-family:Georgia,serif;font-size:29px;font-weight:400}.sketch-layout ol{padding-left:20px}.sketch-layout li{padding:0 0 20px;font-size:13px;line-height:1.6}.sketch-layout li strong,.sketch-layout li span{display:block}.sketch-layout li span{color:#71808a;font-size:12px;margin-top:5px}.aside-note{font-size:11px;line-height:1.6;color:#7b8790}@media(max-width:780px){.sketch-layout{grid-template-columns:minmax(0,1fr)}.sketch-shell{padding:20px}h1{font-size:29px}}@media(max-width:360px){.sketch-shell{padding:14px}.sketch-list{padding:16px}.study-list{margin:20px -16px}.study-art{width:34px}.study-list .item-media{--f7-list-item-media-margin:10px}.study-list .item-inner{min-width:0}.study-list .item-title{font-size:15px}}
```

Referência de código

- Esta redefinição destina-se a um exemplo incorporado, não a uma estrutura de aplicativo em tela cheia com roteamento.

- As substituições de subtítulo e descrição da lista são explícitas.

## Framework7: configuração do agente do sistema de design

### Ponto de partida para implementação

Compatibilidade verificada entre Framework7 e Core Vue 9.2.0. Este é um exemplo de componentes inicializado com substituições para altura determinada pelo conteúdo, não um aplicativo móvel completo com roteamento.

```
// npm create vite@latest field-sketchbook -- --template vue
// cd field-sketchbook && npm install
// npm install framework7@9.2.0 framework7-vue@9.2.0
// Save the complete examples as src/App.vue and src/style.css.
// src/main.js:
import {createApp} from 'vue';
import Framework7 from 'framework7/bundle';
import Framework7Vue from 'framework7-vue';
import 'framework7/css/bundle';
import './style.css';
import App from './App.vue';
Framework7.use(Framework7Vue);
createApp(App).mount('#app');
// index.html: <div id="app"></div><script type="module" src="/src/main.js"></script>
// npm run dev
```

### Um prompt para seu projeto

```
Use Framework7 Core/Vue 9.2.0 com o caderno de esboços Field fornecido, theme="ios" explícito e a estrutura nativa de swipeout em lista com mídia. Mantenha os três estudos de esboço, suas marcações reversíveis de conclusão e a filtragem Todos/Esboçados. Os botões Ações visíveis devem chamar f7.swipeout.open; a conclusão deve alternar o estado do modelo, em vez de excluir a linha. Preserve type="button" em f7-button e a semântica de botão e o suporte à tecla Espaço do comando swipeout. Mantenha o CSS de incorporação com altura determinada pelo conteúdo, a recuperação do filtro vazio e a redefinição. Não é necessário nenhum serviço de itinerário ou localização.
```

## Framework7: fontes e escopo do sistema de design

Framework7 Core/Vue 9.2.0 com o modo iOS verificado. Prompts de esboço originais e arte decorativa. A conclusão é um estado local reversível; não há conexão com mapa, serviço de localização, armazenamento do dispositivo ou aplicativo com roteamento.

- Instalação do Vue Integração com Core/Vue.

- Componente da aplicação Propriedades diretas de tema e aplicação.

- Swipeout Contêineres de ação, abertura/fechamento nativos e comportamento de exclusão.

- Item de lista Slots de mídia e APIs de título e descrição.

- Segmentado Apresentação de seleção agrupada.

- Variáveis CSS Tipografia e geometria dependentes da plataforma.

- Temas de cores Funções de tema e cores nomeadas.

- Layout da aplicação Estrutura normal de aplicativo em tela cheia.

## Framework7: recursos relacionados do sistema de design

### gluestack UI

Crie uma lista de conferência para um kit de campo com os criadores reais de Button e Input do gluestack, cores semânticas explícitas da v5 e o código-fonte completo de React Native Web. Examine a validação, as ações de teclado, a identidade estável dos itens e o progresso de preparação derivado localmente.

### Headless UI

Headless UI fornece componentes de interação sem estilos para React, como diálogos, listas de opções e interruptores. Este guia mostra como combinar o comportamento nativo de foco, seleção e pop-up desses componentes com CSS comum, usando como exemplo um fluxo de compartilhamento de documentos.

### HeroUI

Uma referência de HeroUI v3 com variáveis CSS semânticas reais, controles compostos de React, superfícies claras e escuras e um procedimento funcional de exportação de imagens.


- [Referência de implementação](https://framework7.io/vue/swipeout.html)
- [Fonte](https://framework7.io/docs/color-themes)
- [Fonte](https://framework7.io/docs/css-variables)
- [Fonte](https://framework7.io/vue/app-layout.html)
- [Consulte a especificação de apoio](https://framework7.io/vue/initialize-app.html)
- [Consulte a especificação de apoio](https://framework7.io/vue/app.html)
- [Consulte a especificação de apoio](https://framework7.io/vue/list-item.html)
- [Consulte a especificação de apoio](https://framework7.io/vue/swipeout.html)
- [Consulte a especificação de apoio](https://framework7.io/vue/segmented.html)
- [Consulte a especificação de apoio](https://framework7.io/vue/app-layout.html)
- [Consulte a especificação de apoio](https://framework7.io/vue/installation.html)
- [Referência de código](https://framework7.io/vue/swipeout.html)
- [Referência de código](https://framework7.io/docs/css-variables)
- [Instalação do Vue Integração com Core/Vue.](https://framework7.io/vue/installation.html)
- [Componente da aplicação Propriedades diretas de tema e aplicação.](https://framework7.io/vue/app.html)
- [Swipeout Contêineres de ação, abertura/fechamento nativos e comportamento de exclusão.](https://framework7.io/vue/swipeout.html)
- [Item de lista Slots de mídia e APIs de título e descrição.](https://framework7.io/vue/list-item.html)
- [Segmentado Apresentação de seleção agrupada.](https://framework7.io/vue/segmented.html)
- [Variáveis CSS Tipografia e geometria dependentes da plataforma.](https://framework7.io/docs/css-variables)
- [Temas de cores Funções de tema e cores nomeadas.](https://framework7.io/docs/color-themes)
- [Layout da aplicação Estrutura normal de aplicativo em tela cheia.](https://framework7.io/vue/app-layout.html)