Este marco delgado es una excelente manera de obtener páginas web atractivas sin muchas molestias.

CSS es una tecnología de diseño omnipresente y poderosa, pero puede ser difícil trabajar con ella. Esta es la razón por la que están disponibles marcos CSS como TailwindCSS y preprocesadores como Less CSS y Sass.

Pero a veces, estos marcos o "sabores" de CSS pueden ser excesivos para el proyecto en el que está trabajando. A veces, desea un marco que ofrezca características esenciales para diseñar su sitio web. Aquí es donde entra Pico CSS. Pico es un marco CSS mínimo que facilita el diseño de elementos HTML nativos.

Instalación de Pico CSS en su proyecto

La forma más común de hacer que Pico CSS funcione en su proyecto es usar un Red de entrega de contenido (CDN). Pico CSS está disponible en jsDelivr CDN, por lo que todo lo que necesita hacer es señalar el pico.min.css archivo alojado allí:

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

Alternativamente, puede instalar Pico CSS con el

instagram viewer
Administrador de paquetes de nodos. Para que este método funcione, asegúrese de haber instalado Node.js en su máquina. Puede confirmar la disponibilidad de Node.js en su máquina ejecutando:

node -v

Si Node.js está disponible, el terminal mostrará su versión. Si no lo tienes instalado, puede obtener información sobre cómo poner en funcionamiento Node.js en su computadora. Instale Pico CSS ejecutando:

npm install @picocss/pico

Creación de un sitio web con Pico CSS

Al configurar el diseño de su sitio web, Pico CSS le proporciona dos clases, envase y red. Cree una nueva carpeta y en esa carpeta, cree un índice.htm archivo y un estilo.css archivo. En el índice.htm archivo, agregue el siguiente código repetitivo:

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 cuadrícula Pico CSS

El sistema Grid en Pico CSS es bastante básico. Puede definir una cuadrícula con el red clase. En Pico CSS, las columnas de la cuadrícula colapsan en dispositivos con un ancho inferior a 992 px.

Justo debajo de la h1 etiqueta en el cuerpo del índice.htm archivo, cree una cuadrícula con cuatro columnas.

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

Cada división en la cuadrícula debe tener dos clases: envase y tarjeta. El envase class es una clase CSS nativa de Pico que habilita una ventana gráfica centrada. A continuación, complete la cuadrícula con contenido de muestra 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 manejar el estilo, abra el estilo.css archivo y agregue lo siguiente:

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: " -";
}

Cuando abra la página en el navegador, debería ver lo siguiente:

Cómo usar botones en Pico CSS

Pico CSS ofrece una amplia variedad de elementos y componentes HTML prediseñados. Uno de los elementos más comunes en cualquier sitio web es el botón.

Tradicionalmente, los diferentes navegadores representan los botones de forma ligeramente diferente. El botón elemento en Pico CSS crea un botón con un estilo consistente en todos los navegadores. Para usarlo, simplemente agregue el botón elemento como de costumbre:

<button>This is a buttonbutton>

De forma predeterminada, en Pico CSS, los botones ocupan todo el ancho de su contenedor. Si no le gusta este comportamiento, asegúrese de configurar el role atributo en un elemento HTML en línea a "botón":

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

En Pico CSS, si establece aria-ocupada a "verdadero" en cualquier elemento, agregará automáticamente un indicador de carga. Puede encontrar esta función útil si desea comunicar al usuario que algún elemento no está listo para que interactúe con él, o que el navegador está obteniendo algún recurso.

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

El código anterior dará como resultado lo siguiente:

La información sobre herramientas puede ser complicada de implementar, pero Pico CSS se encarga de eso. Facilita la creación de información sobre herramientas en cualquier elemento sin necesidad de JavaScript sofisticado. Al crear una información sobre herramientas en Pico CSS, hay dos atributos que debe usar:

  • información sobre herramientas de datos: Esto define el contenido de la información sobre herramientas.
  • colocación de datos: Esto define la posición de la información sobre herramientas. Puede establecer este atributo en uno de cuatro valores: "arriba", "derecha", "abajo" e "izquierda".

El siguiente código le muestra cómo usar esta utilidad:

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

Cuando lo ejecute en el navegador, debería ver lo siguiente:

Acordeones en Pico CSS

Accordions permite a los usuarios alternar la visibilidad de las secciones de contenido expandiéndolas o contrayéndolas, de forma similar a como se expande y contrae un instrumento musical de acordeón. Para implementar esta funcionalidad en Pico CSS, utilice el detalles 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>

Cuando un navegador muestra este marcado, debe ofrecer un medio para mostrar u ocultar el contenido, en este caso, una flecha desplegable:

¿Cuándo debería usar un marco CSS?

Los marcos CSS pueden ayudarlo a optimizar el proceso de creación y diseño de una aplicación web. Debería considerar usar un marco CSS si desea ahorrar tiempo en tareas repetitivas y aprovechar los componentes prediseñados.

Los marcos proporcionan un conjunto de estilos CSS, cuadrículas de diseño y componentes prediseñados, lo que le permite concentrarse en la lógica y la funcionalidad de la aplicación. Muchos marcos CSS vienen con una extensa documentación y soporte de la comunidad que será útil en caso de que alguna vez te quedes atascado.