Эта тонкая структура — отличный способ получить привлекательные веб-страницы без особых хлопот.

CSS — это вездесущая, мощная технология стилей, но с ней может быть сложно работать. Вот почему доступны CSS-фреймворки, такие как TailwindCSS, и препроцессоры, такие как Less CSS и Sass.

Но иногда эти фреймворки или «ароматы» CSS могут быть излишними для проекта, над которым вы работаете. Иногда вам нужен фреймворк, который предлагает необходимые функции для оформления вашего веб-сайта. Здесь на помощь приходит Pico CSS. Pico — это минималистичный CSS-фреймворк, который позволяет легко стилизовать нативные HTML-элементы.

Установка Pico CSS в ваш проект

Наиболее распространенный способ запустить Pico CSS в вашем проекте — использовать Сеть доставки контента (CDN). Pico CSS доступен на jsDelivr CDN, поэтому все, что вам нужно сделать, это указать на пико.min.css файл, размещенный там:

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

Кроме того, вы можете установить Pico CSS с помощью

instagram viewer
Менеджер пакетов узлов. Чтобы этот метод работал, убедитесь, что на вашем компьютере установлен Node.js. Вы можете подтвердить доступность Node.js на вашем компьютере, запустив:

node -v

Если Node.js доступен, терминал отобразит его версию. Если он у вас не установлен, вы можете узнать, как запустить Node.js на своем компьютере. Установите Pico CSS, запустив:

npm install @picocss/pico

Создание веб-сайта с помощью Pico CSS

При настройке макета для вашего веб-сайта Pico CSS предоставляет вам два класса: контейнер и сетка. Создайте новую папку и в этой папке создайте index.htm файл и стиль.css файл. в index.htm файл, добавьте следующий шаблонный код:

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>

Сеточная система Pico CSS

Система сеток в Pico CSS довольно проста. Вы можете определить сетку с сетка сорт. В Pico CSS столбцы сетки сворачиваются на устройствах с шириной менее 992 пикселей.

Прямо под h1 тег в тело принадлежащий index.htm файл, создайте сетку с четырьмя столбцами.

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

Каждый див в сетке должно быть два класса: контейнер и карта. контейнер class — это собственный CSS-класс Pico, который включает центрированное окно просмотра. Затем заполните сетку примерным содержимым следующим образом:

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

Чтобы настроить стиль, откройте стиль.css файл и добавьте следующее:

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

Когда вы открываете страницу в браузере, вы должны увидеть следующее:

Как использовать кнопки в Pico CSS

Pico CSS предлагает широкий выбор предварительно стилизованных HTML-элементов и компонентов. Одним из самых распространенных элементов любого веб-сайта является кнопка.

Традиционно разные браузеры отображают кнопки немного по-разному. кнопка элемент в Pico CSS создает кнопку с одинаковым стилем в разных браузерах. Чтобы использовать его, просто добавьте кнопка элемент как обычно:

<button>This is a buttonbutton>

По умолчанию в Pico CSS кнопки занимают всю ширину своего контейнера. Если вам не нравится такое поведение, убедитесь, что вы установили роль атрибут встроенного HTML-элемента в «кнопку»:

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

В Pico CSS, если вы установите ария-занят в "true" для любого элемента, он автоматически добавит индикатор загрузки. Эта функция может оказаться удобной, если вы хотите сообщить пользователю, что какой-то элемент не готов для взаимодействия с ним или что браузер извлекает какой-то ресурс.

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

Приведенный выше код приведет к следующему:

Всплывающие подсказки могут быть сложными в реализации, но Pico CSS позаботится об этом. Это упрощает создание всплывающей подсказки для любого элемента без необходимости использования какого-либо причудливого JavaScript. При создании всплывающей подсказки в Pico CSS необходимо использовать два атрибута:

  • всплывающая подсказка данных: определяет содержимое всплывающей подсказки.
  • размещение данных: определяет положение всплывающей подсказки. Вы можете установить для этого атрибута одно из четырех значений: «сверху», «справа», «снизу» и «слева».

Следующий код показывает, как использовать эту утилиту:

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

Когда вы запустите его в браузере, вы должны увидеть следующее:

Аккордеоны в Pico CSS

Аккордеоны позволяют пользователям переключать видимость разделов контента, разворачивая или сворачивая их, подобно тому, как расширяется и сжимается аккордеонный музыкальный инструмент. Чтобы реализовать эту функциональность в Pico CSS, используйте подробности элемент:

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

Когда браузер отображает эту разметку, он должен предлагать средства для отображения или скрытия содержимого, в данном случае стрелку раскрывающегося списка:

Когда следует использовать CSS Framework

Фреймворки CSS могут помочь вам упростить процесс создания и оформления веб-приложения. Вам следует подумать об использовании CSS-фреймворка, если вы хотите сэкономить время на повторяющихся задачах и использовать готовые компоненты.

Фреймворки предоставляют набор предварительно разработанных стилей CSS, сеток макетов и компонентов, позволяя вам сосредоточиться на логике и функциональности приложения. Многие CSS-фреймворки поставляются с обширной документацией и поддержкой сообщества, которые пригодятся, если вы когда-нибудь застрянете.