Nós possuímos um artigo que apresenta os Os 41 Melhores Frameworks CSS, mas naquela lista não há o Pico.CSS que trata-se de um framework CSS simples e muito fácil de usar e implementar.
Esqueça aqueles diversos nomes de classes que você precisa lembrar! Com Pico.CSS é praticamente, na maioria dos casos, só usar o elemento HTML e ele trata de fazer automaticamente toda a estilização para você usando apenas 10kB em um arquivo você consegue ter uma página elegante e alterar para dark ou light sem muito esforço.
Como instalar ?
Há 3 formas de você implementar o Pico.CSS. A primeira seria você usar ele localmente, para isso basta fazer o download, descompactar e linkar no arquivo HTML:
wget -q https://github.com/picocss/pico/archive/refs/heads/master.zip
unzip master.zip
cd pico-masterE depois linkar no seu documento HTML:
<link href="./css/pico.css" rel="stylesheet">
A outra forma é usar o CDN:
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">Ou até mesmo utilizando o NPM:
npm install @picocss/picoUtilização
O uso é bem simples, mas por exemplo, se você está acostumado a usar o Bootstrap, aqui vai uma página bem básica para início do desenvolvimento:
<!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://unpkg.com/@picocss/pico@latest/css/pico.min.css">
<title>Olá, Pico.CSS!</title>
</head>
<body>
<main class="container">
<h1>Olá, Pico.CSS!</h1>
</main>
</body>
</html>É possível alterar para modo dark somente adicionando a classe data-theme="dark" à tag html, exemplo:
<!DOCTYPE html>
<html lang="en" data-theme="dark">Para mais exemplos, veja esse mini vídeo:
Bem fácil, né?!
Para mais informações consulte os links abaixo:
- Página oficial: https://picocss.com/
- Documentação: https://picocss.com/docs/
- Exemplos: https://picocss.com/#examples
- Repositório no GitHub: https://github.com/picocss/pico
