Guidelines
Guidelines para usar a folha de estilos responsiva da Família STEM.
Essa folha de estilos define estilos para a maioria dos elementos padrão HTML, além de criar por meio de classes elementos customizados:
- Cores
- Elementos da interface
- Aplicativo web
- Página estática
- Botões e botões encadeados
- Texto e links
- Inputs e seletores
- Tabelas
- Containers
- Notificações
- Boxes descritivos
- Popups
- Loaders
- Usar a DOMLib em JS com funções prontas.
Cores
Para definir a cor, utiliza-se uma folha de estilo no próprio HTML (definida antes do link com a folha de estilo em si) com a propriedade themeColor no pseudo-elemento :root (ouhtml).
Além disso, a folha de estilo V2 já inclui algumas propriedades úteis, como:
| Propriedade CSS | Significado. | Valor. | Exemplo de uso. |
|---|---|---|---|
| --textColor | Cor do texto | #000000 ou #ffffff (modo escuro) | Mostrar um ícone ou outro elemento na cor do texto |
| --backgroundColor | Cor de fundo da página | #ffffff ou #000000 (modo escuro) | Criar um elemento customizado com a mesma cor de fundo |
| --inputColor | Cor da borda de inputs e cor ao passar o mouse sobre um botão | #9090906f | Criar um elemento customizado parecido com um botão ou input |
Observação: Ao usar essa folha de estilo, é interessante usar essas definições de cores pré-definidas ao criar elementos personalizados, pois elas já suportam modo escuro automático ou manual (ver abaixo), além de deixar a interface padronizada.
A folha de estilos já fornece um modo escuro automático (usando uma regra @media), mas é possível definir manualmente modo claro ou escuro usando as classes pré-definidas light e dark no elemento html.
Para definir manualmente um modo claro ou escuro, você pode usar o seguinte JS:
Elementos da interface
Esta folha de estilos foca majoritariamente em dois casos de uso, para os quais deve ser usada de forma diferente:
- Aplicativo web: um aplicativo completo, com várias telas e um menu lateral colapsável. Ele também pode ocupar toda a tela caso esteja em um dispositivo móvel
- Página estática: o caso mais comum na Internet, onde não há normalmente muita interatividade. Possui uma seção de conteúdo e um menu superior, que é colapsável em um dispositivo móvel.
Aplicativo web
Um aplicativo completo, com várias telas e um menu lateral colapsável. Ele também pode ocupar toda a tela caso esteja em um dispositivo móvel.
Para facilitar o desenvolvimento, você pode usar a StylesLib, uma biblioteca JS pensada para desenvolver aplicativos web e que já lida com toda a complexidade do HTML e mudança de páginas que um app normalmente precisa.
De qualquer forma, este é um template básico de HTML a ser usado, para desenvolvimento sem a StylesLib:
Vamos quebrar isso em três partes: Navegação, Painel lateral e Conteúdo principal:
Navegação
A parte de navegação é onde ficam os botões que levam às várias telas do seu aplicativo. Ele fica no lado esquerdo em computadores e telas grandes, passando para a parte inferior em dispositivos menores.
Os botões necessariamente tem um ícone e uma legenda com o nome da tela. Para indicar qual tela o usuário está, o botão correspondente fica disabled.
Painel lateral
Um painel de conteúdos. Normalmente, apresenta botões que selecionam o que vai aparecer no conteúdo principal (por exemplo, uma lista de conversas, que ao selecionar, mostra a conversa no conteúdo principal), ou então conteúdos úteis, mas que são periféricos frente ao conteúdo principal (por exemplo, placar de classificação enquanto o jogo está no conteúdo principal).
Ele aparece ao lado da navegação ou, em telas menores, ocupa a tela inteira. Sendo assim, como decidir se ele ou o conteúdo principal aparece? Simples, definindo um comportamento do app.
| Comportamento 1 | Comportamento 2 |
|---|---|
Um dos seletores de navegação é main e abre o conteúdo principal. Os demais abrem o painel lateral. | Qualquer seletor abre o painel lateral e limpa o conteúdo principal. Quando o usuário seleciona algo no painel lateral (uma conversa, por exemplo), alterna para o conteúdo principal e exibe o que foi selecionado. |
Para o Comportamento 2, temos o elemento menu, que permite abrir o painel lateral e, em computadores, fechar o painel lateral.
Note que este elemento não faz sentido caso você tenha o Comportamento 1, pois o botão main faz esse papel.
Exemplos de uso do Comportamento 1: cube Timer e Connect 4
Exemplos de uso do Comportamento 2: Loquere e CipherChat
Conteúdo principal
Aqui é onde a parte principal do app acontece.
Esta área pode exibir tanto a parte principal constantemente (por exemplo, um tabuleiro de um jogo) e ser controlada pelas opções no painel lateral ou então exibir nada até que selecione uma opção no painel lateral (por exemplo, uma lista de conversas ou as configurações).
A rigor, a folha de estilos não prende muito as possibilidades aqui, mas o ideal é não ter um segundo painel lateral (você já tem um, lembra?) e também se lembrar de fazer um conteúdo responsivo, que sirva para vários dispositivos.
Página estática
O caso mais comum na Internet, onde não há normalmente muita interatividade. Possui uma seção de conteúdo e um menu superior, que é colapsável em um dispositivo móvel.
A folha de estilos define um cabeçalho, composto por elementosDIV e H1. Esse cabeçalho deve conter uma imagem (o logotipo do site) e um título H1, além de botões para navegar entre páginas (se necessário).
Para isso, este é um template básico de HTML a ser usado:
Aqui, você deve usar botões com texto e imagem para os links. Para indicar a página atual, deve-se usar um botão disabled.
No computador e em telas grandes, esses botões são organizados horizontalmente. Em dispositivos móveis, os botões não serão exibidos. Ao invés disso, o botão menu será exibido. Ao clicar, ele remove (ou adiciona) a classe hide de body, de forma a mostrar (ou ocultar) os botões, que agora são organizados verticalmente.
Botões e botões encadeados
Esta folha de estilo define 3 tipos de botão, sendo eles:
Botões com texto:
Botões com imagens e texto:
Botões com imagens:
Na maioria dos casos, os botões com imagens e texto devem ser usados. Porém, caso não haja imagem ou seja necessário um texto explicativo maior no botão, podem ser usado os botões com texto. Outra exceção são botões cujo ícone deixa clara a sua ação ou que têm pouco espaço na tela. Nesse caso, os botões com imagens são mais recomendados.
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. O primeiro botão recebe a classe first, o último recebe a classe last e os demais, middle.
Texto e links
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
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 themeColor (definida por você) e inputColor (pré-definida), conforme 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
Input de radio
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.
Tabelas
As tabelas usam na borda a cor do tema 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.
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.
Container 1
Este boxe pode ser usado para mostrar opções com texto descritivo, conversas etc.
Container 2
Este boxe pode ser usado para mostrar opções com texto descritivo, conversas etc.
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 melhor forma de usá-las é usando a biblioteca DOMLib. 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.
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 de tema 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.
Recurso 1
Este boxe pode ser usado para mostrar recursos, aplicativos etc.
Recurso 2
Este boxe pode ser usado para mostrar recursos, aplicativos etc.
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. A melhor forma de criar um popup é usando a biblioteca DOMLib. Exemplos de popup podem ser vistos no template.
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 elemento PROGRESS, que pode (ou não) conter os atributos value, min e max. Esses atributos define o valor atual, o valor mínimo e o valor máximo, respectivamente.
Porcentagem determinada
Porcentagem indeterminada
Usar a DOMLib em JS com funções prontas.
Para usar a DOMLib, veja a Documentação da DOMLib.