Conheça o Pico CSS o Framework mais direto ao assunto

Elegante e fácil de usar!


Conheça o Pico CSS o Framework mais direto ao assunto


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

E 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/pico

Utilizaçã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:


css desenvolvimentoweb


Compartilhe


Nosso canal no Youtube

Inscreva-se


Marcos Oliveira

Marcos Oliveira

Desenvolvedor de software
https://github.com/terroo

Artigos Relacionados




Crie Aplicativos Gráficos para Linux e Windows com C++

Aprenda C++ Moderno e crie Games, Programas CLI, GUI e TUI de forma fácil.

Saiba Mais

Receba as novidades no seu e-mail!

Após cadastro e confirmação do e-mail, enviaremos semanalmente resumos e também sempre que houver novidades por aqui para que você mantenha-se atualizado!


caso queira entrar em contato conosco, envie-nos um e-mail.