# sistema de design Fomantic UI ## Prévia da interface do sistema de design Fomantic UI Filtre três sugestões de leitura originais, avalie-as com estrelas ou teclas de seta e mantenha uma lista para discussão. ## Referência de design do sistema de design Fomantic UI Fomantic UI 2.9.4 compilado CSS inspecionado diretamente. Estes são valores padrão no nível dos seletores do tema baseado em Less, não tokens CSS de tempo de execução inventados. As cores originais das capas e as dimensões da aplicação são identificadas separadamente. ### Tipografia padrão do site | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | html font-size | 14px | Linha de base padrão de rem. | | body font-family | Lato, system-ui, platform and emoji fallbacks | A prévia inclui os dados locais da fonte Lato. | | body line-height | 1.4285em | Cerca de 20px com o tamanho de texto padrão de 14px. | | body text color | rgba(0, 0, 0, 0.87) | Texto padrão de alto destaque. | | h1 / h2 / h3 | 2rem / 1.71428571rem / 1.28571429rem | Tamanhos padrão dos títulos antes das substituições originais da página. | | heading line-height | 1.28571429em | Ritmo padrão dos títulos. | ### Botões padrão | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | .ui.button background | #e0e1e2 | Botão padrão neutro. | | .ui.button border-radius | 0.28571429rem | Aproximadamente 4px com o tamanho padrão da raiz. | | .ui.teal.button background | #00b5ad | Cor de ação turquesa nativa usada na lista de seleção. | | .ui.teal.button:hover | #009c95 | Estado de foco turquesa nativo. | | .ui.teal.button:focus | #008c86 | Fundo de foco turquesa nativo. | | .ui.teal.button:active | #00827c | Fundo pressionado turquesa nativo. | | .ui.primary.button background | #2185d0 | O azul primário é separado da variante turquesa nomeada. | ### Geometria padrão dos cartões | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | .ui.card width | 290px | Largura fixa padrão; a variação fluida preenche esta grade da aplicação. | | .ui.card border-radius | 0.28571429rem | Aproximadamente 4px com o tamanho padrão da raiz. | | .ui.card box-shadow | 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5 | Elevação e contorno padrão. | | .ui.card margin | 1em 0 | A grade original substitui a margem por zero para alinhar os cartões. | | .ui.card transition | box-shadow 0.1s ease, transform 0.1s ease | Animação padrão do cartão. | ### Configuração de avaliação | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | maxRating | 4 by default; 5 in this example | A escala explícita de cinco pontos corresponde ao valor máximo acessível do controle deslizante. | | initialRating | 0 | Sem avaliação antes da interação do usuário. | | clearable | auto by default; true in this example | Permite limpar uma avaliação existente. | | interactive | true | A interação com o mouse está habilitada. | | onRate(value) | Callback after a rating is selected | Sincroniza o texto exibido e o valor acessível. | ### Escala original da sala de leitura | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Page padding | 36px 28px / 24px 18px mobile | Espaçamento original do layout. | | Grid gap | 22px | Estante de leitura original com três colunas. | | Page heading | 34px / 1.15; 29px mobile | Substituição original do título. | | Cover height | 175px / 155px mobile | Arte original da capa do livro CSS. | | Layout breakpoint | 760px | Substituição original para uma única coluna de cartões. | ## Fomantic UI Guia completo do sistema de design 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. ## Fomantic UI Vocabulário do sistema de design A CSS com módulos jQuery ### Um vocabulário CSS com módulos jQuery > Fomantic UI combina sequências de classes semânticas com módulos opcionais com estado. A estante de leitura usa ui fluid card, ui teal button e ui basic label para definir a aparência. O menu suspenso e as avaliações são inicializados explicitamente por meio do jQuery. Carregar apenas a folha de estilos renderizaria os cartões, mas não ofereceria a mesma interação. Este exemplo fixa as versões Fomantic UI 2.9.4 e jQuery 3.7.1. Ele inclui o módulo de transição antes de dropdown e, em seguida, rating. Deixar essas dependências visíveis é mais útil do que exibir uma fileira estática de estrelas e chamá-la de exemplo de biblioteca interativa. O módulo original da aplicação é executado somente depois que a marcação dos cartões existe. Consulte a especificação de apoio ## Fomantic UI Os valores padrão compilados do sistema de design não são nomes de tokens em tempo de execução ### Os valores padrão compilados não são nomes de tokens em tempo de execução O tema padrão do Fomantic é criado por meio do Less. Por isso, a referência registra valores reais dos seletores, como o fundo do botão turquesa e o raio da borda do cartão. Ela não inventa um token --fomantic-primary API que o pacote compilado não expõe. Uma alteração mais ampla do tema deve usar os arquivos documentados de variáveis e de compilação do tema. A variação turquesa nomeada é separada da variação azul primária. Nesta estante de leitura, a ação de adicionar à lista de seleção é turquesa, enquanto a arte original das capas usa tons de papel, sálvia e argila quente. Essas capas são ilustrações da aplicação, não amostras oficiais da paleta. Os valores de hover, foco e botão pressionado continuam sendo os padrões nativos do Fomantic. Consulte a especificação de apoio ## Fomantic UI No sistema de design, raízes de 14px alteram a geometria ### Rems de 14 pixels alteram a geometria A folha de estilos padrão do site define o texto da raiz e do corpo em quatorze pixels. Assim, o raio de 0.28571429rem dos botões e cartões corresponde a aproximadamente quatro pixels. Copiar esse valor em rem para uma raiz não relacionada de dezesseis pixels produziria uma geometria diferente. Por isso, a referência inclui o tamanho da raiz, em vez de apresentar apenas um raio sem contexto. Lato é a família preferencial, e o pacote compilado inclui arquivos de fonte locais. Esta prévia independente incorpora esses recursos de fonte em vez de solicitá-los a um serviço de fontes da Web. O título da página é uma substituição original de trinta e quatro pixels; as descrições dos cartões mantêm o texto compacto do corpo, com uma altura de linha mais generosa na aplicação. Consulte a especificação de apoio ## Fomantic UI No sistema de design, a anatomia do cartão mantém o conteúdo separado das ações ### A estrutura dos cards mantém o conteúdo e as ações separados Cada cartão nativo contém uma capa decorativa, um bloco de conteúdo para o tema e a descrição, outro bloco de conteúdo para a avaliação e um bloco de conteúdo adicional para a ação de adicionar à lista de seleção. Os cartões fluidos preenchem a grade original de três colunas, em vez de usar a largura padrão de 290px do pacote. A página remove as margens de cada cartão para que a grade forneça espaçamentos uniformes. As propostas envolvem diferentes tarefas de leitura: comparar o espaçamento entre letras, remover um elemento para estudar o espaço negativo e observar mudanças de cor conforme o contexto. As capas ecoam visualmente esses exercícios por meio de tipografia, retângulos e sobreposições de cores. São propostas originais explícitas e não implicam endosso de uma editora. Consulte a especificação de apoio ## Fomantic UI No sistema de design, acione o comportamento nativo de avaliação para cada forma de entrada ### Acione o comportamento nativo de avaliação em todas as formas de entrada O módulo de avaliação é configurado com máximo de cinco e clearable true. onRate recebe o valor numérico atual e sincroniza a pontuação visível com o valor acessível do controle deslizante. A ação Limpar avaliação aciona o comportamento clear rating do módulo, em vez de remover classes ativas manualmente. O módulo nativo de estrelas permite a interação com o mouse, mas este exemplo também adiciona um comportamento explícito para o teclado. O contêiner da avaliação é um controle deslizante identificado por um rótulo, com intervalo de zero a cinco. As teclas de seta alteram a avaliação em um ponto; Home limpa a avaliação e End seleciona cinco. Cada interação chama set rating, garantindo que as estrelas exibidas e o resultado da aplicação usem o mesmo estado do módulo. 1. Use Tab para acessar uma avaliação e pressione a seta para a direita duas vezes para selecionar dois de cinco. 2. Pressione End para selecionar cinco e, depois, Home para voltar a Sem avaliação. 3. Clique em uma estrela e confirme que o texto exibido e o valor acessível são atualizados juntos. Consulte a especificação de apoio ## Fomantic UI No sistema de design, o filtro do menu suspenso preserva o estado oculto ### A filtragem do menu suspenso preserva o estado oculto O seletor de temas se transforma em um menu suspenso nativo do Fomantic por meio do inicializador dropdown. Seu retorno de chamada onChange oculta os cartões cujo tema não corresponde ao valor selecionado e atualiza a contagem de propostas visíveis. A opção Todos os temas restaura a estante completa. O componente usa o módulo de transição para animar o movimento do menu. O filtro não destrói nem recria um cartão. As avaliações existentes e a inclusão na lista de seleção permanecem associadas aos registros originais enquanto estão ocultos. Esse comportamento é intencional: restringir a estante é uma forma de visualização, não um pedido para apagar as escolhas anteriores do usuário. Assim, o resumo pode mencionar um item que não aparece no filtro atual. Consulte a especificação de apoio ## Sistema de design Fomantic UI: uma lista de seleção é independente de uma avaliação ### Uma lista de favoritos não depende de uma avaliação A avaliação expressa o interesse em uma escala de zero a cinco, enquanto fazer parte da lista de seleção é uma decisão separada, de sim ou não. A pessoa pode guardar um tópico para discussão antes de avaliá-lo. O botão da lista informa seu estado de seleção por meio de aria-pressed e alterna entre os rótulos Adicionar e Remover. O resumo obtém os nomes a partir de um conjunto de IDs de tópicos estáveis. A região de status descreve os tópicos selecionados sem afirmar que uma coleção foi salva remotamente. Recarregar o navegador limpa este exemplo. Uma lista de leitura compartilhada de verdade precisaria de persistência, identidade do usuário e tratamento de conflitos; adicionar uma classe ao cartão não oferece esses recursos. Consulte a especificação de apoio ## Sistema de design Fomantic UI: preserve o significado numérico além das estrelas decorativas ### Preserve o significado numérico além das estrelas decorativas Os ícones de estrela ficam ocultos para tecnologias assistivas, pois o controle deslizante pai expõe o valor numérico e o rótulo. Um texto visível — Não avaliado ou uma fração — transmite o mesmo significado sem exigir que a pessoa conte os ícones coloridos. Um contorno visível ao receber foco destaca o controle deslizante ativo, e o botão Limpar devolve o foco a esse controle. As formas das capas dos livros também são decorativas. O título real do tópico, a duração e a descrição permanecem como texto dentro do cartão. Em telas estreitas, os cartões ficam empilhados no breakpoint original de 760px. O exemplo redefine para auto a altura da janela de visualização do body compilado e desativa o overflow horizontal oculto. Assim, a incorporação usa a altura real do conteúdo e não encobre falhas de layout. - Exponha o número atual em texto e como valor acessível. - Use botões nativos para limpar e alterar a lista de seleção. - Preserve os rótulos e as descrições completas quando a grade passar a ter uma única coluna. Consulte a especificação de apoio ## Sistema de design Fomantic UI: inclua as fontes junto aos estilos ou empacote-as ### Inclua as fontes junto aos estilos ou no pacote Em um projeto comum, copie o diretório fomantic-ui-css completo em vez de extrair semantic.css e esquecer os recursos de temas. Os estilos compilados usam caminhos relativos para os arquivos de fontes Lato e de ícones. A configuração abaixo mantém esses caminhos intactos e carrega jQuery antes dos módulos do pacote. A prévia local usa apenas os estilos e scripts necessários dos componentes e, em seguida, incorpora em um único documento os recursos referenciados por eles. Não há solicitações externas de fontes. Os empacotadores de produção podem processar esses recursos de outras maneiras, mas ainda é preciso testar o caminho da fonte e a ordem dos módulos na página entregue, em vez de presumir que funcionarão só porque a instalação com npm foi concluída com sucesso. Consulte a especificação de apoio ## Sistema de design Fomantic UI: exemplos de componentes ### Estante de leitura com três cartões Cartões, rótulos, botões, marcação de menu suspenso e contêineres de avaliação nativos. ```

FOMANTIC UI · READING ROOM

Make a shelf worth returning to.

Rate three original reading prompts and build a local discussion shortlist.

Local collection
3 prompts
TYPOGRAPHY · 18 MIN

Letters in the margins

Compare a narrow editorial column with a generous display line. Find where the rhythm changes.
Not rated
SPACE & RHYTHM · 12 MIN

The space between

Remove one element from a crowded page. Rebalance the remaining space without adding decoration.
Not rated
COLOR · 15 MIN

A color and its neighbor

Place the same accent on two backgrounds. Describe the shift before changing its value.
Not rated

Discussion shortlist

No prompts selected. Add one to begin.

Ratings and selections stay in this browser page. These are original prompts, not published books.

``` Referência de código - Estes são tópicos originais para exercícios, não capas de livros reais. - Cada avaliação tem seu próprio rótulo acessível e intervalo numérico. - As ações da lista de seleção expõem aria-pressed. ### Inicialização dos módulos e interação local Filtragem do menu suspenso, comportamento da avaliação, aprimoramentos de teclado e estado da lista de seleção. ``` const cards=[...document.querySelectorAll('.book-grid article')],selected=new Set(); $('#topic').dropdown({onShow(){this.setAttribute('aria-expanded','true');},onHide(){this.setAttribute('aria-expanded','false');},onChange(value){let count=0;cards.forEach(card=>{card.hidden=value!=='all'&&card.dataset.topic!==value;if(!card.hidden)count++;});document.querySelectorAll('.toolbar .menu .item').forEach(item=>item.setAttribute('aria-selected',String(item.dataset.value===value)));document.querySelector('#visible-count').textContent=`${count} ${count===1?'prompt':'prompts'}`;}}); const dropdown=document.querySelector('.toolbar div.dropdown');dropdown.setAttribute('role','combobox');dropdown.setAttribute('aria-label','Show topic');dropdown.setAttribute('aria-expanded','false');dropdown.setAttribute('aria-haspopup','listbox');dropdown.querySelector('.menu').setAttribute('role','listbox');dropdown.querySelectorAll('.menu .item').forEach(item=>{item.setAttribute('role','option');item.setAttribute('aria-selected',String(item.dataset.value==='all'));}); $('.ui.rating').each(function(){const node=this,$rating=$(node);$rating.rating({maxRating:5,clearable:true,onRate(value){node.setAttribute('aria-valuenow',value);node.setAttribute('aria-valuetext',value?`${value} out of 5`:'Not rated');node.closest('article').querySelector('.score').textContent=value?`${value} / 5`:'Not rated';}});node.setAttribute('aria-valuetext','Not rated');node.querySelectorAll('.icon').forEach(i=>i.setAttribute('aria-hidden','true'));node.addEventListener('keydown',e=>{let value=Number($rating.rating('get rating'));if(['ArrowRight','ArrowUp'].includes(e.key))value=Math.min(5,value+1);else if(['ArrowLeft','ArrowDown'].includes(e.key))value=Math.max(0,value-1);else if(e.key==='Home')value=0;else if(e.key==='End')value=5;else return;e.preventDefault();$rating.rating('set rating',value);});node.closest('article').querySelector('.clear-rating').onclick=()=>{$rating.rating('clear rating');node.focus();};}); cards.forEach(card=>{card.querySelector('.shortlist').onclick=e=>{const id=card.dataset.topic,button=e.currentTarget;if(selected.has(id)){selected.delete(id);button.textContent='Add to shortlist';button.setAttribute('aria-pressed','false');}else{selected.add(id);button.textContent='Remove from shortlist';button.setAttribute('aria-pressed','true');}const names=cards.filter(c=>selected.has(c.dataset.topic)).map(c=>c.dataset.name);document.querySelector('#summary').textContent=names.length?`${names.length} selected: ${names.join('; ')}.`:'No prompts selected. Add one to begin.';};}); ``` Referência de código - jQuery e os módulos do Fomantic precisam ser carregados antes deste arquivo. - O mesmo método set rating é usado para alterações pelas teclas de seta. - A filtragem oculta os cartões sem apagar as avaliações nem as seleções. ### Composição original da estante Grade responsiva, ilustrações das capas e tratamento explícito do foco. ``` body{background:#f6f5f2}.reading-room{max-width:1120px;margin:auto;padding:36px 28px}.reading-room header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:32px}.kicker{font-size:11px;letter-spacing:.14em;font-weight:700;color:#008c86}h1{font-size:34px;line-height:1.15;margin:12px 0}.intro{color:#666;font-size:15px;line-height:1.6}.toolbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:24px;font-size:14px}.toolbar>label{font-weight:700}.toolbar>span{color:#767676;margin-left:auto}.book-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}.book-grid>.ui.card{margin:0;height:100%}.book-grid>.ui.card[hidden]{display:none}.book-cover{height:175px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.book-cover small{position:absolute;bottom:16px;left:18px;letter-spacing:.15em;font-size:9px;font-weight:700}.type-cover{background:#e2ccb0;color:#4a332a}.type-cover>span{font-family:Georgia,serif;font-size:90px;line-height:1}.space-cover{background:#ccd7d5;gap:10px}.space-cover>span{height:65px;width:25px;background:#3c6763}.space-cover>span:nth-child(2){height:90px;width:45px}.color-cover{background:#dcb9b0}.color-cover>span{width:85px;height:85px;background:#a85243}.color-cover>span:nth-child(2){width:50px;height:50px;border-radius:50%;background:#e6c57c;position:absolute}.book-grid .description{font-size:14px;line-height:1.6;min-height:88px}.rating-label{display:block;font-size:12px;font-weight:bold;margin-bottom:10px}.score{display:block;font-size:12px;color:#666;margin:8px 0 12px}.clear-rating{margin-bottom:0!important}.book-grid .ui.rating:focus-visible{outline:3px solid #00b5ad;outline-offset:4px}.summary{margin-top:28px!important}.scope{font-size:12px;color:#666}button:focus-visible{outline:3px solid #00b5ad!important;outline-offset:3px}@media(max-width:760px){.reading-room{padding:24px 18px}.reading-room header{flex-direction:column;gap:8px}h1{font-size:29px}.book-grid{grid-template-columns:1fr}.book-grid .description{min-height:0}.book-cover{height:155px}.toolbar>span{width:100%;margin-left:0}.toolbar .dropdown{min-width:180px}} html,body{height:auto;min-height:0}body{min-width:0;overflow-x:visible} ``` Referência de código - O valor padrão compilado height:100% do site é redefinido como auto para a incorporação. - O overflow do body não é usado para encobrir erros de layout. ## Sistema de design Fomantic UI Configuração do agente ### Ponto de partida para implementação Verificado com Fomantic UI 2.9.4 e jQuery 3.7.1. O exemplo independente incorpora os recursos de fonte necessários; a configuração comum mantém os caminhos relativos ao pacote. O wrapper HTML inclui toda a marcação do body; salve os exemplos de interação e de CSS fornecidos com os nomes de arquivo referenciados aqui. ```

FOMANTIC UI · READING ROOM

Make a shelf worth returning to.

Rate three original reading prompts and build a local discussion shortlist.

Local collection
3 prompts
TYPOGRAPHY · 18 MIN

Letters in the margins

Compare a narrow editorial column with a generous display line. Find where the rhythm changes.
Not rated
SPACE & RHYTHM · 12 MIN

The space between

Remove one element from a crowded page. Rebalance the remaining space without adding decoration.
Not rated
COLOR · 15 MIN

A color and its neighbor

Place the same accent on two backgrounds. Describe the shift before changing its value.
Not rated

Discussion shortlist

No prompts selected. Add one to begin.

Ratings and selections stay in this browser page. These are original prompts, not published books.

``` ### Um prompt para seu projeto ``` Amplie a lista de seleção da sala de leitura em Fomantic UI 2.9.4 usando a inicialização de módulos jQuery fornecida e os componentes Dropdown e Rating. Mantenha os três tópicos de leitura, o estado de avaliação e o comportamento local da lista de seleção conectados aos cartões visíveis. Preserve o suporte explícito ao teclado e a semântica de controle deslizante adicionados ao controle de avaliação, junto com os recursos correspondentes de tema e ícones. A lista de seleção deve impedir adições duplicadas e mostrar claramente seu conteúdo atual; ela não é um fluxo de trabalho para tickets de suporte nem um serviço remoto de recomendações. ``` ## Sistema de design Fomantic UI: fontes e escopo Fomantic UI 2.9.4 com jQuery 3.7.1. Os valores do tema são padrões compilados; as ilustrações originais das capas e os aprimoramentos de teclado estão identificados. Todas as seleções permanecem locais. - Primeiros passos Recursos compilados e configuração dos módulos. - Tematização Personalização de tema baseada em Less. - Site Tipografia global e padrões da página. - Cartão Estrutura e variações do conteúdo do cartão. - Avaliação Métodos de avaliação e callback onRate. - Dropdown Inicialização da seleção e tratamento de alterações. - Button Variantes e estados nativos com nome. ## Sistema de design Fomantic UI: recursos relacionados ### Foundation Uma bancada funcional de comprovação do Foundation que usa XY Grid, validadores personalizados do Abide, confirmação com Reveal, configurações Sass reais e código completo de integração local. ### Framework7 Um caderno de esboços nativo do Framework7 com ações reais de deslizar para fora, valores explícitos de tema do iOS, um acionador de ações acessível por teclado e uma lista filtrada que mantém os estudos concluídos até a redefinição. ### 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. - [Referência de implementação](https://fomantic-ui.com/modules/rating.html) - [Fonte](https://github.com/fomantic/Fomantic-UI-CSS/blob/master/components/site.css) - [Fonte](https://github.com/fomantic/Fomantic-UI-CSS/blob/master/components/button.css) - [Fonte](https://github.com/fomantic/Fomantic-UI-CSS/blob/master/components/card.css) - [Fonte](https://fomantic-ui.com/modules/rating.html) - [Fonte](https://fomantic-ui.com/usage/layout.html) - [Consulte a especificação de apoio](https://fomantic-ui.com/introduction/getting-started.html) - [Consulte a especificação de apoio](https://fomantic-ui.com/usage/theming.html) - [Consulte a especificação de apoio](https://fomantic-ui.com/globals/site.html) - [Consulte a especificação de apoio](https://fomantic-ui.com/views/card.html) - [Consulte a especificação de apoio](https://fomantic-ui.com/modules/rating.html) - [Consulte a especificação de apoio](https://fomantic-ui.com/modules/dropdown.html) - [Consulte a especificação de apoio](https://fomantic-ui.com/elements/button.html) - [Referência de código](https://fomantic-ui.com/views/card.html) - [Referência de código](https://fomantic-ui.com/modules/rating.html) - [Referência de código](https://fomantic-ui.com/usage/layout.html) - [Primeiros passos Recursos compilados e configuração dos módulos.](https://fomantic-ui.com/introduction/getting-started.html) - [Tematização Personalização de tema baseada em Less.](https://fomantic-ui.com/usage/theming.html) - [Site Tipografia global e padrões da página.](https://fomantic-ui.com/globals/site.html) - [Cartão Estrutura e variações do conteúdo do cartão.](https://fomantic-ui.com/views/card.html) - [Avaliação Métodos de avaliação e callback onRate.](https://fomantic-ui.com/modules/rating.html) - [Dropdown Inicialização da seleção e tratamento de alterações.](https://fomantic-ui.com/modules/dropdown.html) - [Button Variantes e estados nativos com nome.](https://fomantic-ui.com/elements/button.html)