O CSS, uma tecnologia de estilização ubíqua e robusta, pode apresentar desafios. Por isso, existem frameworks CSS como o TailwindCSS e pré-processadores como Less CSS e Sass.
MUITO VÍDEO DO DIA
ROLE PARA CONTINUAR COM O CONTEÚDO
Contudo, essas estruturas ou “sabores” de CSS podem ser excessivos para certos projetos. Em algumas situações, buscamos uma ferramenta que ofereça funcionalidades essenciais para estilizar um site. É nesse contexto que o Pico CSS se destaca. O Pico é um framework CSS minimalista que simplifica a estilização de elementos HTML nativos.
Instalando o Pico CSS no seu Projeto
A maneira mais comum de integrar o Pico CSS a um projeto é através de uma Content Delivery Network (CDN). O Pico CSS está disponível na CDN jsDelivr. Basta direcionar seu código para o arquivo `pico.min.css` hospedado lá:
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
/>
Alternativamente, você pode instalar o Pico CSS com o Node Package Manager. Para usar este método, certifique-se de ter o Node.js instalado em sua máquina. A disponibilidade do Node.js pode ser confirmada através do comando:
node -v
Se o Node.js estiver instalado, o terminal exibirá a versão. Caso contrário, será necessário instalar o Node.js no seu computador. A instalação do Pico CSS é feita com o seguinte comando:
npm install @picocss/pico
Criando um Site com Pico CSS
Para definir o layout de um site, o Pico CSS oferece as classes `container` e `grid`. Crie uma pasta, e dentro dela, os arquivos `index.htm` e `style.css`. No arquivo `index.htm`, inclua o código base abaixo:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
/>
<link rel="stylesheet" href="https://wilku.top/a-beginners-guide-to-using-pico-css/style.css" />
<title>Pico Website</title>
</head>
<body>
<div class="container">
<h1>Artigos que Vale a Pena Ler...</h1>
</div>
</body>
</html>
Sistema de Grid do Pico CSS
O sistema de grid no Pico CSS é simples. A classe `grid` é usada para definir a grade. No Pico CSS, as colunas da grid se adaptam a dispositivos com largura inferior a 992px.
Logo abaixo da tag `h1` no corpo do arquivo `index.htm`, crie uma grade com quatro colunas.
<div class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Cada `div` na grade deve ter as classes `container` e `card`. A classe `container` é nativa do Pico CSS e permite uma área de visualização centralizada. Preencha a grade com conteúdo de exemplo como abaixo:
<div class="grid">
<div class="container card">
<img
src="https://images.pexels.com/photos/70069/pexels-photo-70069.jpeg"
/>
<h4 class="title">Por que os pássaros cantam de manhã?</h4>
<div class="metadata">
<span>David Uzondu</span>
<span>Há 13 minutos</span>
</div>
</div>
<div class="container card">
<img
src="https://images.pexels.com/photos/1024510/pexels-photo-1024510.jpeg"
/>
<h4 class="title">A Vida Secreta dos Patinhos</h4>
<div class="metadata">
<span>Sam Holland</span>
<span>Há 53 minutos</span>
</div>
</div>
<div class="container card">
<img
src="https://images.pexels.com/photos/2152/sky-earth-space-working.jpg"
/>
<h4 class="title">Nova Missão da NASA: Enviar Terraplanistas para a Borda da Terra para Prová-los Errados</h4>
<div class="metadata">
<span>Simon Peterson</span>
<span>Há 1 hora</span>
</div>
</div>
<div class="container card">
<img
src="https://images.pexels.com/photos/12086689/pexels-photo-12086689.jpeg"
/>
<h4 class="title">Vovó Local Ganha Batalha Internacional de Hip-Hop, Provando que Idade é Apenas um Número</h4>
<div class="metadata">
<span>Anônimo</span>
<span>Há 2 dias</span>
</div>
</div>
</div>
Para estilizar, abra o arquivo `style.css` e adicione o seguinte:
img {
width: 100%;
background-size: cover;
border-radius: 10px;
height: 200px;
}
.card {
background-color: rgb(244, 244, 244);
border-radius: 10px;
padding: 10px;
cursor: pointer;
margin-top: 10px;
}
.card:hover {
transform: scale(1.03);
}
.metadata {
margin-top: -30px;
margin-bottom: 10px;
}
.title {
margin-top: 10px;
font-size: 15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.metadata {
font-size: 14px;
}
span:nth-child(1)::after {
content: " -";
}
Ao abrir a página no navegador, você verá o resultado.
Como Usar Botões no Pico CSS
O Pico CSS oferece uma variedade de elementos e componentes HTML pré-estilizados. Botões são elementos comuns em qualquer site.
Geralmente, diferentes navegadores renderizam botões de formas ligeiramente distintas. O elemento de botão no Pico CSS cria um botão com estilo consistente em todos os navegadores. Para usá-lo, basta adicionar o elemento de botão como de costume:
<button>Este é um botão</button>
Por padrão, no Pico CSS, os botões ocupam toda a largura do contêiner. Caso não deseje este comportamento, defina o atributo `role` em um elemento HTML embutido como “button”:
<a href="https.//www.google.com" role="button">Ir para o Google</a>
Como Utilizar o Utilitário de Carregamento no Pico CSS
No Pico CSS, se você definir `aria-busy` como “true” em qualquer elemento, ele exibirá automaticamente um indicador de carregamento. Esse recurso é útil para informar ao usuário que um elemento não está pronto para interação ou que o navegador está buscando algum recurso.
<a href="#" aria-busy="true">Gerando Senha Única, por favor aguarde…</a>
O código acima resultará no seguinte:
Tooltips podem ser complexos de implementar, mas o Pico CSS simplifica isso. É fácil criar um tooltip em qualquer elemento sem JavaScript avançado. Ao criar um tooltip no Pico CSS, dois atributos são necessários:
- `data-tooltip`: define o conteúdo do tooltip.
- `data-placement`: define a posição do tooltip. Os valores possíveis são: “top”, “right”, “bottom” e “left”.
O código abaixo demonstra o uso desse utilitário:
<button data-tooltip="Topo" data-placement="top">Topo</button>
<button data-tooltip="Direita" data-placement="right">Direita</button>
<button data-tooltip="Abaixo" data-placement="bottom">Abaixo</button>
<button data-tooltip="Esquerda" data-placement="left">Esquerda</button>
Executando no navegador, você verá o seguinte:
Acordeões no Pico CSS
Acordeões permitem que usuários alternem a visibilidade de seções de conteúdo, expandindo ou recolhendo-as. Para implementar esta funcionalidade no Pico CSS, use o elemento `details`:
<details>
<summary>Isto é um acordeão</summary>
<p>
Taciti ac condimentum dapibus luctus volutpat ligula nec et mattis
arcu ridiculus? Non posuere bibendum libero diam tempus nec odio non
mauris elit! Euismod suspendisse pellentesque donec vestibulum dapibus
iaculis. Cursus mollis quis praesent purus pulvinar pellentesque
vulputate integer elit sodales? Egetnunc pellentesque eu eget
consequat condimentum praesent nec auctor sapien luctus at, donec ac
ex sit magna amet in.
</p>
</details>
Ao exibir esta marcação, o navegador deve permitir mostrar ou ocultar o conteúdo, nesse caso, com uma seta suspensa:
Quando Usar um Framework CSS
Frameworks CSS podem simplificar o processo de criação e estilização de aplicativos web. Considere usar um framework CSS para economizar tempo em tarefas repetitivas e aproveitar componentes pré-construídos.
Frameworks fornecem um conjunto de estilos CSS, grids de layout e componentes pré-projetados, permitindo que você se concentre na lógica e funcionalidade do aplicativo. Muitos frameworks CSS incluem documentação extensa e suporte da comunidade, úteis caso você precise de ajuda.