Essa estrutura slimline é uma ótima maneira de obter páginas da Web atraentes sem muitos problemas.

CSS é uma tecnologia de estilo onipresente e poderosa, mas pode ser difícil de trabalhar. É por isso que estruturas CSS como TailwindCSS e pré-processadores como Less CSS e Sass estão disponíveis.

Mas, às vezes, essas estruturas ou "sabores" CSS podem ser um exagero para o projeto em que você está trabalhando. Às vezes, você deseja uma estrutura que ofereça recursos essenciais para você estilizar seu site. É aqui que entra o Pico CSS. Pico é uma estrutura CSS mínima que facilita o estilo de elementos HTML nativos.

Instalando Pico CSS em seu projeto

A maneira mais comum de colocar o Pico CSS em funcionamento em seu projeto é usar um Rede de entrega de conteúdo (CDN). Pico CSS está disponível no jsDelivr CDN, então tudo que você precisa fazer é apontar para o pico.min.css arquivo hospedado lá:

<link
 rel="stylesheet"
 href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
/>

Como alternativa, você pode instalar o Pico CSS com o

Gerenciador de pacotes de nós. Para que este método funcione, certifique-se de ter instalado o Node.js em sua máquina. Você pode confirmar a disponibilidade do Node.js em sua máquina executando:

node -v

Se o Node.js estiver disponível, o terminal exibirá sua versão. Caso não o tenha instalado, você pode aprender como colocar o Node.js em funcionamento no seu computador. Instale o Pico CSS executando:

npm install @picocss/pico

Criando um site com Pico CSS

Ao configurar o layout do seu site, o Pico CSS fornece duas classes, recipiente e grade. Crie uma nova pasta e nessa pasta, crie um index.htm arquivo e um estilo.css arquivo. No index.htm arquivo, adicione o seguinte código clichê:

html>
<htmllang="en">
<head>
<metacharset="utf-8" />
<metaname="viewport"content="width=device-width, initial-scale=1" />
<link
 rel="stylesheet"
 href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
 />
<linkrel="stylesheet"href="style.css" />
<title>Pico Websitetitle>
head>
<body>
<divclass="container">
<h1>Articles Worth Reading...h1>
div>
body>
html>

Sistema de Grade Pico CSS

O sistema de grade no Pico CSS é bastante básico. Você pode definir uma grade com o grade aula. No Pico CSS, as colunas da grade colapsam em dispositivos com largura abaixo de 992px.

Logo abaixo do h1 marca no corpo do index.htm arquivo, crie uma grade com quatro colunas.

<divclass="grid">
<div>div>
<div>div>
<div>div>
<div>div>
div>

Cada div na grade deve ter duas classes: recipiente e cartão. O recipiente class é uma classe CSS do Pico nativa que permite uma viewport centralizada. Em seguida, preencha a grade com algum conteúdo de amostra como este:

<divclass="grid">
<divclass="container card">
<img
 src="https://images.pexels.com/photos/70069/pexels-photo-70069.jpeg"
 />
<h4class="title">Why do birds sing in the morning?h4>
<divclass="metadata">
<span>David Uzonduspan>
<span>13 Minutes agospan>
div>
div>
<divclass="container card">
<img
 src="https://images.pexels.com/photos/1024510/pexels-photo-1024510.jpeg"
 />
<h4class="title">The Secret Life of Ducklingsh4>
<divclass="metadata">
<span>Sam Hollandspan>
<span>53 Minutes agospan>
div>
div>


<divclass="container card">
<img
 src="https://images.pexels.com/photos/2152/sky-earth-space-working.jpg"
 />
<h4class="title">NASA's New Mission: Sending Flat-Earthers to 
 Edge of Earth to Prove Them Wrongh4>
<divclass="metadata">
<span>Simon Petersonspan>
<span>1 hour agospan>
div>
div>
<divclass="container card">
<img
 src="https://images.pexels.com/photos/12086689/pexels-photo-12086689.jpeg"
 />
<h4class="title">Local Grandma Wins International Hip-Hop Dance Battle, 
 Proves Age is Just a Numberh4>
<divclass="metadata">
<span>Anonymousspan>
<span>2 days agospan>
div>
div>
div>

Para lidar com o estilo, abra o estilo.css arquivo 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ê deverá ver o seguinte:

Como usar botões no Pico CSS

O Pico CSS oferece uma ampla variedade de elementos e componentes HTML pré-estilizados. Um dos elementos mais comuns em qualquer site é o botão.

Tradicionalmente, navegadores diferentes renderizam botões de maneira ligeiramente diferente. O botão elemento no Pico CSS cria um botão com estilo consistente em todos os navegadores. Para usá-lo, basta adicionar o botão elemento como de costume:

<button>This is a buttonbutton>

Por padrão, no Pico CSS, os botões ocupam toda a largura do contêiner. Se você não gosta desse comportamento, certifique-se de definir o papel atributo em um elemento HTML embutido para "botão":

<ahref="https.//www.google.com"role="button">Go To Googlea>

No Pico CSS, se você definir ária ocupada para "true" em qualquer elemento, ele adicionará automaticamente um indicador de carregamento. Você pode achar esse recurso útil se quiser comunicar ao usuário que algum elemento não está pronto para interagir com ele ou que o navegador está buscando algum recurso.

<ahref="#"aria-busy="true">Generating One-Time Password, please wait…a>

O código acima resultará no seguinte:

As dicas de ferramentas podem ser complicadas de implementar, mas o Pico CSS cuida disso. Isso facilita a criação de uma dica de ferramenta em qualquer elemento sem a necessidade de nenhum JavaScript sofisticado. Ao criar uma dica de ferramenta no Pico CSS, há dois atributos que você precisa usar:

  • dica de ferramenta de dados: Isso define o conteúdo da dica de ferramenta.
  • colocação de dados: Isso define a posição da dica de ferramenta. Você pode definir esse atributo para um dos quatro valores: "top", "right", "bottom" e "left".

O código a seguir mostra como usar esse utilitário:

<buttondata-tooltip="Top"data-placement="top">Topbutton>
<buttondata-tooltip="Right"data-placement="right">Rightbutton>
<buttondata-tooltip="Bottom"data-placement="bottom">Bottombutton>
<buttondata-tooltip="Left"data-placement="left">Leftbutton>

Ao executá-lo no navegador, você deve ver o seguinte:

Acordeões em Pico CSS

Os acordeões permitem que os usuários alternem a visibilidade das seções de conteúdo, expandindo-as ou recolhendo-as, semelhante à forma como um instrumento musical acordeão se expande e contrai. Para implementar esta funcionalidade no Pico CSS, use o detalhes elemento:

<details>
<summary>This is an accordionsummary>
<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>

Quando um navegador exibe essa marcação, ele deve oferecer um meio de mostrar ou ocultar o conteúdo, neste caso, uma seta suspensa:

Quando você deve usar um framework CSS

As estruturas CSS podem ajudá-lo a simplificar o processo de criação e estilo de um aplicativo da web. Você deve considerar o uso de uma estrutura CSS se quiser economizar tempo em tarefas repetitivas e aproveitar componentes pré-construídos.

As estruturas fornecem um conjunto de estilos CSS, grades de layout e componentes pré-projetados, permitindo que você se concentre na lógica e na funcionalidade do aplicativo. Muitas estruturas CSS vêm com extensa documentação e suporte da comunidade que serão úteis caso você fique preso.