Um guia para iniciantes sobre o uso do Pico CSS
Cascading Style Sheets (CSS) é uma linguagem visual onipresente e robusta que permite a personalização da aparência dos elementos HTML, porém sua implementação pode apresentar desafios. Para aliviar essas dificuldades, os desenvolvedores desenvolveram estruturas CSS como TailwindCSS e tecnologias de pré-processamento, incluindo Less CSS e Sass.
O Pico CSS é uma abordagem simplificada para estilizar páginas da Web que fornece apenas as ferramentas e recursos necessários para aprimoramento estético sem impor complexidade excessiva aos projetos. Ele permite que os usuários trabalhem com componentes HTML fundamentais e apliquem estilos personalizados sem esforço.
Instalando Pico CSS em seu projeto
Uma das abordagens padrão para integrar o Pico CSS em um projeto envolve a utilização de uma rede de distribuição de conteúdo (CDN). Essa abordagem envolve o aproveitamento de um provedor de serviços CDN que hospeda arquivos Pico CSS, como jsDelivr. Para implementar esta solução, basta direcionar o código do seu aplicativo da web para fazer referência ao arquivo pré-compilado pico.min.css hospedado pelo CDN, facilitando assim a integração perfeita com o mínimo de esforço exigido por parte dos desenvolvedores.
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
/>
Uma abordagem alternativa envolve a utilização do Node Package Manager (NPM) para instalar o PicoCSS. No entanto, é essencial garantir que o Node.js tenha sido instalado com sucesso em seu sistema antes de prosseguir. Para verificar se Node.js está presente em seu dispositivo, execute o seguinte comando em um terminal ou prompt de comando:
node -v
Se uma instalação do Node.js estiver presente no sistema, a interface de linha de comando exibirá suas informações de versão. Em caso de ausência deste software, pode-se obter orientação para obter e configurar o Node.js em um dispositivo de computação. Para instalar o Pico CSS, execute os seguintes passos:
npm install @picocss/pico
Criando um site com Pico CSS
Ao estabelecer o design da sua página da web, o Pico CSS oferece duas classificações distintas, a saber, “container” e “grid”. Para iniciar este processo, por favor crie um novo diretório e dentro dele, gere um documento chamado “index.htm” e outro chamado “style.css”. No arquivo “index.htm”, incorpore o seguinte código de modelo fundamental:
<!DOCTYPE html>
<html lang="en">
<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="style.css" />
<title>Pico Website</title>
</head>
<body>
<div class="container">
<h1>Articles Worth Reading...</h1>
</div>
</body>
</html>
Pico CSS Grid System
A implementação do sistema Grid dentro do Pico CSS exibe um caráter minimalista. A designação de grades pode ser efetuada empregando a denominação de classe “grade”. Notavelmente, no Pico CSS, as colunas da grade sofrem consolidação na presença de dispositivos com uma largura de tela abaixo do limite de 992 pixels.
Abaixo do elemento # dentro da seção do arquivo index.htm, construa uma grade compreendendo quatro colunas.
<div class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Para obter a formatação adequada para cada elemento div dentro da grade, é essencial atribuir as classes “container” e “card” a cada div respectivo. O primeiro, denominado “container”, possui propriedades inerentes de centralização do conteúdo visualizado por meio de sua associação com o framework Pico CSS. Posteriormente, incorpore dados ou informações relevantes dentro da estrutura em grade, utilizando sintaxe e metodologias apropriadas, resultando em um layout organizado semelhante ao exemplo fornecido abaixo:
<div class="grid">
<div class="container card">
<img
src="https://images.pexels.com/photos/70069/pexels-photo-70069.jpeg"
/>
<h4 class="title">Why do birds sing in the morning?</h4>
<div class="metadata">
<span>David Uzondu</span>
<span>13 Minutes ago</span>
</div>
</div>
<div class="container card">
<img
src="https://images.pexels.com/photos/1024510/pexels-photo-1024510.jpeg"
/>
<h4 class="title">The Secret Life of Ducklings</h4>
<div class="metadata">
<span>Sam Holland</span>
<span>53 Minutes ago</span>
</div>
</div>
<div class="container card">
<img
src="https://images.pexels.com/photos/2152/sky-earth-space-working.jpg"
/>
<h4 class="title">NASA's New Mission: Sending Flat-Earthers to
Edge of Earth to Prove Them Wrong</h4>
<div class="metadata">
<span>Simon Peterson</span>
<span>1 hour ago</span>
</div>
</div>
<div class="container card">
<img
src="https://images.pexels.com/photos/12086689/pexels-photo-12086689.jpeg"
/>
<h4 class="title">Local Grandma Wins International Hip-Hop Dance Battle,
Proves Age is Just a Number</h4>
<div class="metadata">
<span>Anonymous</span>
<span>2 days ago</span>
</div>
</div>
</div>
Para modificar a aparência do nosso site, devemos acessar o arquivo style.css e incorporar o trecho de código fornecido. Isso nos permitirá personalizar vários aspectos da apresentação visual de nossa página da Web, como estilos de fonte, cores e layout.
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 carregar a página na interface do seu navegador, espera-se que o usuário perceba os seguintes elementos exibidos em destaque na tela:
Como usar botões no Pico CSS
O Pico CSS fornece uma ampla variedade de elementos HTML e blocos de construção pré-projetados, sendo um dos mais utilizados o botão onipresente no design da web.
Utilizando Pico CSS, o elemento de botão é criado para exibir design e aparência uniformes em diversos navegadores da web. Incorporar esse elemento envolve inseri-lo no código HTML de alguém, semelhante a outras práticas padrão:
<button>This is a button</button>
Para substituir a propriedade padrão do Pico CSS em que os botões se expandem para ocupar toda a largura de seu contêiner pai, é essencial atribuir o atributo “role” a qualquer elemento HTML embutido e definir seu valor como “button”.
<a href="https.//www.google.com" role="button">Go To Google</a>
Como usar o utilitário de carregamento no Pico CSS
Ao utilizar o Pico CSS, definir o atributo aria-busy como “true” em um elemento serve para introduzir um indicador de carregamento por padrão. Isso pode ser útil nos casos em que se deseja informar ao usuário sobre a indisponibilidade de interação com um determinado elemento, ou quando o navegador está recuperando um recurso específico.
<a href="#" aria-busy="true">Generating One-Time Password, please wait…</a>
Espera-se que o código mencionado acima produza o seguinte resultado:
Como usar dicas de ferramentas no Pico CSS
O Pico CSS simplifica o processo de implementação de tooltips, fornecendo uma solução eficiente e amigável. Com essa estrutura, os usuários podem gerar dicas de ferramentas sobre vários elementos sem esforço, sem exigir conhecimento avançado de JavaScript ou outras linguagens de programação. Para estabelecer uma dica de ferramenta usando o Pico CSS, apenas duas especificações devem ser aplicadas:
A definição fornecida descreve um elemento tooltip em HTML, especificando que ele contém um atributo chamado “data-tooltip” que determina seu conteúdo.
O atributo data-placement no Bootstrap é usado para especificar o posicionamento de uma dica de ferramenta em uma página da web. Existem quatro valores possíveis que podem ser atribuídos a esse atributo, incluindo “superior”, “direita”, “inferior” e “esquerda”. Esses valores determinam onde a dica de ferramenta aparecerá em relação ao seu elemento acionador ou elemento de destino.
O exemplo fornecido demonstra o procedimento de emprego desta ferramenta de forma concisa, elucidando sua aplicação prática.
<button data-tooltip="Top" data-placement="top">Top</button>
<button data-tooltip="Right" data-placement="right">Right</button>
<button data-tooltip="Bottom" data-placement="bottom">Bottom</button>
<button data-tooltip="Left" data-placement="left">Left</button>
Ao executar o programa em um navegador da Web, deve-se observar a seguinte saída:
Acordeões no Pico CSS
A utilização do elemento dentro de uma estrutura Pico CSS permite a implementação de funcionalidade que permite aos usuários manipular a visibilidade das seções de conteúdo por meio de expansão e contração, muito parecido com a ação executada em um instrumento musical acordeão onde seus segmentos são expandidos ou compactados.
<details>
<summary>This is an accordion</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 renderizar este código HTML, o navegador deve fornecer uma interface para alternar a visibilidade de seu conteúdo, que neste caso é representado por uma seta descendente simbolizada por um triângulo:
Quando você deve usar um framework CSS
A utilização de estruturas CSS pode acelerar o ciclo de desenvolvimento, eliminando a necessidade de elementos de design redundantes, permitindo que os desenvolvedores concentrem seus esforços em aspectos mais complexos de um aplicativo. Se alguém deseja economizar recursos e capitalizar os benefícios oferecidos por esses frameworks, é aconselhável incorporá-los ao projeto.
A utilização de estruturas fornece uma coleção de padrões de estilo CSS predeterminados, sistemas de grade e blocos de construção que permitem que os desenvolvedores se concentrem na lógica subjacente e na funcionalidade de seus aplicativos. Uma infinidade de estruturas CSS são acompanhadas por materiais de referência abrangentes e ampla assistência da comunidade, provando ser um recurso indispensável quando confrontado com quaisquer obstáculos ou desafios ao longo do caminho.