Estilos Responsivos

Documentação da DOMLib

Documentação para usar a DOMLib, uma biblioteca JS para implementar a folha de estilos responsiva da Família STEM.

Essa biblioteca define funções para alguns elementos HTML, além de funções para elementos customizados:

• Função getImage e padronização da DOMLib
• Botões e botões encadeados
• Texto e links (Apenas DOM)
• Inputs e seletores
• Tabelas
• Containers
• Notificações
• Boxes descritivos
• Popups
• Loaders
• Mais exemplos de uso

Função getImage

Para definir as imagens e ícones a serem usados, é preciso definir uma função getImage, que será usada pela biblioteca para incluir as imagens nos elementos (Ex: botão, containers, notificações, boxes e popups). Essa função recebe apenas um argumento, o nome da imagem ou ícone, e deve retornar o código HTML (não o elemento em si) contendo a imagem em si.

Caso deseje utilizar os Assets da Família STEM, podem-se usar estas funções getImage.

// Usando os Assets diretamente como imagem function getImage(name) { return "<img src=\"https://projetos.familiastem.com.br/assets/get?i=" + name + "&p=%23corP&s=%23corS\">"; } } // Usando os Assets pela folha de estilo function getImage(name) { return "<i class=\"" + name + "\">"; } }

Nas funções acima, substitua corP pela cor primária do ícone e corS pela cor secundária do ícone.

Observação: Ao usar essa folha de estilo com os Assets, é interessante usar as mesmas definições de cores para os ícones, assim, é possível padronizar o estilo da página.

Na maioria dos casos, existem 3 tipos de função, distinguidas pelo início do nome: create, show e hide. As funções create criam elementos e retornam esses elementos diretamente, por exemplo, createButton e createBtnsHolder. Existem também as show e hide, que mostram e escondem elementos diretamente no body. Essas funções são usadas para elementos com posicionamento definido na tela, como popups e notificações.

Botões e botões encadeados

Esta folha de estilo define 3 tipos de botão, sendo eles:

Botões com texto:

Sobre Login

Botões com imagens e texto:

Sobre Login

Botões com imagens:

Para criá-los, a DOMLib fornece a função createButton. Esta função recebe um dicionário contendo pelo menos uma das seguintes propriedades. Além disso, pode receber outras propriedades, que serão adicionadas ao botão como atributos.

Propriedades	Explicação
text	Texto do botão
image	Imagem do botão

CreateButton(btnInfo)
Entrada	Explicação
btnInfo	Dicionário com propriedades do botão

Há casos em que se deseja usar mais de um botão para escolher uma ação dentre as disponíveis. Nesse caso, entram os botões encadeados. Estes consistem em um DIV de classe holder com vários botões dentro.

<div class="holder"> <button class="first">Opção 1</button> <button class="middle">Opção 2</button> <button class="middle">Opção 3</button> <button class="last">Opção 4</button> </div>

Para criá-los, a DOMLib fornece a função createBtnsHolder. Esta função recebe uma lista de dicionário, com cada dicionário representando um botão, com as mesmas condições da função createButton. Essa função também dimensiona os botões para ocuparem todo o DIV.

CreateBtnsHolder(btnInfo)
Entrada	Explicação
btnsInfo	Lista de dicionário, com cada dicionário contendo propriedades de um botão

Texto e links (Apenas DOM)

A folha de estilo define estilos para textos e elementos complementares. O texto usará a cor definida em "Cabeçalho e cores". Além disso, a folha define code para exibir texto usado em código ou links para copiar e textarea disabled para exibir trechos maiores de código (ou para uso normalmente como textarea).

DIV P

trecho de código /* . . . . */ <!-- --> { . . . . }

A DOMLib não possui funções para criá-los diretamente. Apesar disso, é possível criá-los a partir do uso direto da API DOM em JS.

Inputs e seletores

Os inputs, em geral, possuem estilo "pill button", ou seja, as bordas são totalmente arredondadas. Além disso, as bordas usam as cores primária e secundária definidas em "Cabeçalho e cores". Para ver todos os tipos de input, veja o template. Em especial, os inputs checkbox, radio e range possui um HTML especial, para padronizar a interface entre os navegadores.

Input de checkbox

Isso Aquilo

Input de radio

Isso Aquilo

Input de range

50

Observação: O valor no tipo range não é definido pela folha de estilos, mas sim apenas para demonstrar o funcionamento do input.

Para criá-los, a DOMLib fornece a função createInput. Esta função recebe um dicionário contendo pelo menos uma das seguintes propriedades. Além disso, pode receber outras propriedades, que serão adicionadas ao input como atributos.

Propriedades	Explicação
type	Tipo do input, se não especificado, será definido com text
value	Valor do input (como no atributo HTML)

CreateInfo(inputInfo)
Entrada	Explicação
inputInfo	Dicionário com propriedades do input

Além disso, a DOMLib define uma função para lidar com o input select, a função createSelect. Esta função recebe uma lista ou dicionário contendo as opções do select e um booleano indicando se serão usados os optgroup. Se o booleano useOptgroup for falso, a função recebe uma lista de dicionários, sendo cada dicionário uma opção. Se o booleano for verdadeiro, a função recebe um dicionário de opções, cada chave representa um grupo, e dentro da chave, o valor será uma lista de opções.

As opções são um dicionário com uma ou duas propriedades. A primeira, obrigatória, é o nome que aparecerá para o usuário (name), em seguida, a propriedade opcional define o valor a ser usado no select (o atributo value no elemento option).

CreateSelect(options, useOptgroups)
Entrada	Explicação
options	Dicionário ou lista de opções (ver useOptgroups)
useOptgroups	Define se o select usará ou não grupos de opções (optgroups)

Tabelas

As tabelas usam na borda a cor principal e as linhas apresentam um comportamento visual parecido com os botões quando o mouse passa por cima delas. É possível ver um exemplo de tabela em "Cabeçalho e cores" ou no template.

Para criá-los, a DOMLib fornece a função createTable. Esta função recebe uma lista de listas. Cada lista dentro dessa lista representa uma linha de dados e devem ter o mesmo tamanho. A primeira linha é usada como cabeçalho da tabela.

CreateTable(data)
Entrada	Explicação
data	Lista de listas com dados da tabela

Containers

Containers são DIVs customizados para exibir conjuntos de informações com imagem, texto e descrição. Também podem ser usados em uma lista de conversas, mostrando foto do perfil, nome de perfil e mensagens recentes. Além disso, possuem uma borda para delimitá-los de outros elementos na página e ocupam toda a largura do elemento pai. O título é colocado em um H3 e a descrição em um parágrafo simples. Um container pode conter outros elementos HTML na descrição para melhor descrever seu conteúdo.

<div class="container"> <img src="url"> <h3>Título</h3> <p>Descrição.</p> </div>

Para criá-los, a DOMLib fornece duas funções, createHtmlContainer e createContainer. Estas funções recebem três argumentos, como mostrados abaixo. A createHtmlContainer recebe como terceiro argumento um elemento DOM (preferencialmente um P) ao invés de texto, como na createContainer.

CreateHtmlContainer(image, title, htmlContent)
Entrada	Explicação
image	Imagem do container
title	Título do container (h3)
htmlContent	Elemento DOM com o conteúdo do container (preferencialmente p)

CreateContainer(image, title, text)
Entrada	Explicação
image	Imagem do container
title	Título do container (h3)
text	Texto do container (p)

Notificações

As notificações mostram a ocorrência de algum evento relevante na página e podem ter duração de 5 segundos ou necessitarem de alguma ação para serem descartadas. No computador, aparecem no canto inferior direito e no celular, no topo da tela. A notificação fica dentro de um DIV com id (atente que não é classe) notificationList. As notificações em si são containers, descritos acima, que podem conter botões para descartar a notificação ou realizar outra ação. Há exemplos de notificação no template.

Para mostrá-las, a DOMLib fornece a função showNotification e hideNotification. A primeira função recebe 7 argumentos e a segunda nenhum, apagando a notificação mais antiga, como mostrados abaixo. Dentre os argumentos da showNotification, há o argumento actions, que informa as opções disponíveis na notificação. Possui um formato similar ao usado pelo holder, mas com algumas particularidades, como mostrado abaixo.

Propriedades	Explicação
text	Texto da ação
image	Imagem da ação
action	Identificação da ação (Notification API)
onclick	Evento quando a ação é selecionada DENTRO do documento (Não se aplica à Notification API).

showNotification(image, title, text, onclick, actions, useExternal, externalOnclick)
Entrada	Explicação
image	Imagem da notificação
title	Título da notificação (h3)
text	Texto da notificação (p)
onclick	Função a ser chamada quando a notificação é clicada no documento
actions	Se especificado, define as opções da notificação, além de defini-la como persistente. Caso contrário, defina como null e a notificação irá desaparecer após 5 segundos. Sua definição é similar à createBtnsHolder.
useExternal	Se definido como verdadeiro, permite o uso da Notification API quando o documento não está visível ou o uso da função alert caso não seja possível acessar a Notification API. (ex: permissão negada ou incompatibilidade)
externalOnclick	Função a ser chamada quando a notificação é clicada fora do documento (através da Notification API)

hideNotification()
Entrada	Explicação
Esta função não recebe nenhum argumento

Boxes descritivos

Boxes descritivos são usados geralmente na página inicial ou na página de recursos para indicar e descrever recursos disponíveis. Neles, é possível colocar uma imagem, título e descrição. Além disso, possui cor de fundo descrita pela cor primária da folha de estilos. O box é definido com um DIV com classe box. Dentro dele, é colocado outro DIV com uma imagem dentro e, em seguida, o título (H3) e a descrição. Preferencialmente, utilizam-se esses boxes dentro de um DIV com estilo display: flex; flex-wrap: wrap.

<div class="box"> <div><img src="url"></div> <h3>Título</h3> <p>Descrição.</p> </div>

Para criá-los, a DOMLib fornece a função createBox. Esta função recebe três argumentos, como mostrados abaixo.

CreateBox(image, title, text)
Entrada	Explicação
image	Imagem do box
title	Título do box (h3)
text	Texto do box (p)

Popups

Popups são caixas modais que apresentam informações ou opções para o usuário e ocupam toda a interface até que o usuário feche o modal. Um popup é similar aos métodos JS alert(), prompt() ou confirm(), porém com mais opções de customização. O popup contém uma imagem, um título, uma descrição (que pode conter outros elementos HTML) e opções (botões encadeados). Consiste em um DIV com classe popup, contendo outro DIV com o conteúdo do popup em si. O conteúdo consiste em um DIV holder com uma imagem, um H3 com o título, um P com a descrição e um conjunto de botões encadeados. Exemplos de popup podem ser vistos no template.

Para mostrá-los, a DOMLib fornece três funções, showHtmlPopup, showPopup e hidePopup. As duas primeiras funções recebem quatro argumentos, como mostrados abaixo. A showHtmlPopup recebe como terceiro argumento um elemento DOM (preferencialmente um P) ao invés de texto, como na showPopup. A terceira função não recebe nenhum argumento, apagando o popup mais recente, como mostrados abaixo.

showHtmlPopup(image, title, htmlContent, btnHolder)
Entrada	Explicação
image	Imagem do popup
title	Título do popup (h3)
htmlContent	Elemento DOM com o conteúdo do popup (preferencialmente p)
btnHolder	Elemento holder contendo os botões encadeados a serem usados no popup para mostrar as opções. Pode ser gerado com createBtnsHolder

showPopup(image, title, text, btnHolder)
Entrada	Explicação
image	Imagem do popup
title	Título do popup (h3)
text	Texto do popup (p)
btnHolder	Elemento holder contendo os botões encadeados a serem usados no popup para mostrar as opções. Pode ser gerado com createBtnsHolder

hidePopup()
Entrada	Explicação
Esta função não recebe nenhum argumento

Loaders

Loaders indicam o progresso de alguma ação contínua. Loaders podem indicar o percentual da ação ou apenas se estão ocorrendo (indeterminados). Quando uma ação é concluída, o loader pode ser removido da interface para indicar o resultado da ação. Um loader é um PROGRESS e pode (ou não) conter um atributo value. Esse atributo define o valor atual, normalmente de 0 a 100, de conclusão (os valores 0 e 100 precisam ser colocados nos atributos min e max, respectivamente).

<progress [value="0"] min="0" max="100"></progress>

Porcentagem determinada

Porcentagem indeterminada

Para criá-los, a DOMLib fornece a função createLoader. Esta função recebe nenhum ou até 3 argumentos, representado a porcentagem como número inteiro ou texto.

createLoader(value, min, max)
Entrada	Explicação
value	Valor atual do loader (opcional). Se não especificado, será um loader indeterminado
min	Valor mínimo do loader (opcional). Se não especificado, será considerado 0.
max	Valor máximo do loader (opcional). Se não especificado, será considerado 100.

Mais exemplos de uso

É possível encontrar exemplos de uso e trechos de código usando a DOMLib no template.

Links

© 2025 Família STEM