Folha de estilos

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:

• Cabeçalho e cores
• 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.

Cabeçalho e cores

Para definir as cores, utiliza-se uma folha de estilo no próprio HTML (definida antes do link com a folha de estilo em si) com as seguintes propriedades no pseudo-elemento :root (ouhtml):

Propriedade CSS	Significado.	Exemplo de uso.
--primaryColor	Cor primária.	#e59c4b
--secondaryColor	Cor secundária.	#000000
--textColor	Cor do texto	#000000 ou #ffffff (modo escuro)
--backgroundColor	Cor de fundo da página	#ffffff ou #000000 (modo escuro)
--btnHover	Cor de fundo do botão ao passar o mouse	#808080
--btnActive	Cor de fundo do botão ao pressionado	#3d3d3d

Observação: Ao usar essa folha de estilo, é interessante usar essas definições de cores ao criar elementos personalizados, assim, fica mais fácil trocar o estilo da página depois, além de padronizar o código.

Para definir um modo escuro, pode-se usar uma regra @media e/ou usar classes light e dark no elemento html.

/* Definicao de cores */ :root { --primaryColor: #e59c4b; --secondaryColor: #000000; --textColor: #000000; --backgroundColor: #ffffff; --btnHover: #d3d3d3; --btnActive: #808080; } /* Forçar modo escuro quando o usuário utiliza modo claro */ :root.dark { --primaryColor: #e59c4b; --secondaryColor: #000000; --textColor: #ffffff; --backgroundColor: #000000; --btnHover: #808080; --btnActive: #d3d3d3; } /* Modo escuro */ @media (prefers-color-scheme: dark) { :root { --primaryColor: #e59c4b; --secondaryColor: #000000; --textColor: #ffffff; --backgroundColor: #000000; --btnHover: #808080; --btnActive: #d3d3d3; } /* Forçar modo claro quando o usuário utiliza modo escuro */ :root.light { --primaryColor: #e59c4b; --secondaryColor: #000000; --textColor: #000000; --backgroundColor: #ffffff; --btnHover: #d3d3d3; --btnActive: #808080; } }

Na utilização acima, o JS que definiria o tema a ser usado poderia ser assim:

/* esta funcao recebe mode e define o modo a ser usado (light, dark, auto) */ function setMode(mode) { if(mode == 'dark') { document.documentElement.setAttribute("class", "dark"); } else if(mode == 'light') { document.documentElement.setAttribute("class", "light"); } else { document.documentElement.removeAttribute("class"); } }

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 pode conter um título H1 e/ou botões para navegar entre páginas.

Para qualquer um dos casos, se utiliza este HTML:

<div class="title"> <!-- outros elementos entram aqui --> </div>

Para usar apenas uma imagem, coloca-se um DIV com classe logo com um H1 contendo a imagem e um SPAN, após a imagem, com o título. Se quiser mostrar esse título, a classe passa a ser logoText. Todo o DIV deve ser colocado dentro do <div class="title">.

<div class="logo"> <h1> <img alt="Nome do site" src="url"> <span>Nome do site</span> </h1> </div> <div class="logoText"> <h1> <img alt="Nome do site" src="url"> <span>Nome do site</span> </h1> </div>

Observação: É recomendado que se coloque o SPAN com o título mesmo que não seja exibido para fins de SEO e acessibilidade.

Para usar um menu, coloca-se um DIV com classe menu contendo os botões do menu (esses botões usam as mesmas classes dos botões encadeados) e um último botão (fora do DIV) com classe openMenu. Este último irá aparecer em layouts com pouca largura (ex: celulares) para abrir ou fechar o menu de forma a não congestionar a tela.

<div class="menu"> <a href="url1"><button class="first" disabled> <img alt="Link 1" src="img1"><span class="desc">Link 1</span> </button></a> <a href="url2"><button class="middle"> <img alt="Link 2" src="img2"><span class="desc">Link 2</span> </button></a> <a href="url3"><button class="middle"> <img alt="Link 3" src="img3"><span class="desc">Link 3</span> </button></a> <a href="url4"><button class="last"> <img alt="Link 4" src="img4"><span class="desc">Link 4</span> </button></a> </div> <button class="openMenu" onclick="document.querySelector('.title').classList.toggle('open')"> <img alt="Abrir/Fechar menu" src="urlMenu"> </button>

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:

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.

<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>

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

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

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.

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.

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>

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 (em breve). 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 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>

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 indicar um "check" ou pode ser removido da interface para indicar o resultado da ação. Um loader é um DIV com classe loader e pode (ou não) conter um atributo value. Esse atributo define a porcentagem, de 0 a 100, de conclusão. Quando é igual a 100, o loader indica que a ação foi concluída.

<div class="loader" [value="0"]></div>

Porcentagem determinada

Porcentagem indeterminada

Usar a DOMLib em JS com funções prontas.

Para usar a DOMLib, veja a Documentação da DOMLib.

Links

© 2023 Família STEM