CSS-фреймворк Phonon предназначен для создания веб-сайтов с чистым, современным внешним видом. Благодаря прямолинейному, упрощенному дизайну, приятному для глаз, он сделан портативным и простым в использовании. Одной из ключевых характеристик Phonon является отзывчивый дизайн, который гарантирует, что он будет отлично выглядеть на любой платформе, включая настольные компьютеры, планшеты и смартфоны. Кроме того, он включает несколько предварительно разработанных элементов и вариантов компоновки, которые можно легко изменить в соответствии с требованиями вашего сайта, например, кнопки, навигационные панели и макеты сетки. Если вы хотите использовать Phonon, включите файл CSS в текст HTML и присвойте компонентам HTML соответствующие классы. Затем внешний вид вашего сайта можно изменить, изменяя значения различных свойств CSS.
В целом, Phonon - это отличное решение для тех, кто ищет базовый, современный дизайн, который легко использовать и изменять для своего сайта.
Почему это важно?
Phonon может стать важным инструментом для разработчиков, который необходимо учитывать при создании веб-сайта или веб-приложения по нескольким причинам.
Во-первых, Phonon - это компактный и адаптируемый CSS-фреймворк, который упрощает процесс разработки надежных, отзывчивых макетов. Он предлагает множество компонентов пользовательского интерфейса и дизайнов, которые могут помочь разработчикам создавать свои приложения быстрее и эффективнее.
Кроме того, Phonon ориентирован на пользователя, что облегчает разработчикам создание веб-сайтов и приложений, удобных в использовании и навигации. Это может улучшить общий пользовательский опыт и повысить вероятность того, что пользователи будут взаимодействовать с сайтом и посещать его снова.
Чем он отличается от других CSS-фреймворков?
Phonon отличается от других CSS-фреймворков по нескольким параметрам. Среди наиболее существенных отличий можно выделить следующие:
Размер и производительность: С минифицированным и gzipped размером около 791 кБ, Phonon является небольшим CSS фреймворком. В результате он загружается быстрее и более прост в использовании, чем некоторые альтернативные CSS-фреймворки, которые могут быть более сложными и громоздкими.
Отзывчивый дизайн: Phonon был создан с учетом отзывчивости и совместимости с устройствами и размерами экрана. Разработчики могут создавать макеты, которые будут прекрасно выглядеть на любом устройстве, благодаря гибкой структуре сетки и набору отзывчивых элементов пользовательского интерфейса.
Функции и элементы пользовательского интерфейса: Кнопки, формы, таблицы, навигационные панели и другие элементы пользовательского интерфейса и возможности - вот многие из тех, которые предлагает Phonon. Кроме того, он обеспечивает совместимость с различными медиаформатами, включая фото, видео и аудио.
Преимущества Phonon.css
При создании веб-сайта или онлайн-приложения Phonon предлагает ряд преимуществ. К основным преимуществам относятся:
Легкий и быстрый: Минифицированная и gzipped версия CSS-фреймворка Phonon весит всего 791 кБ. Она быстро загружается и более проста в использовании по сравнению с другими CSS-фреймворками, которые могут быть более сложными и большими.
Отзывчивый дизайн: Phonon был создан с учетом отзывчивости и совместимости с устройствами и размерами экрана. Разработчики могут создавать макеты, которые будут прекрасно выглядеть на любом устройстве, благодаря гибкой структуре сетки и набору отзывчивых элементов пользовательского интерфейса.
Удобство для пользователя: Благодаря удобству Phonon разработчики могут упростить создание веб-сайтов и приложений, которые просты в использовании и навигации для пользователей. Это может улучшить общий пользовательский опыт и повысить вероятность того, что пользователи будут взаимодействовать с сайтом и посещать его снова.
Недостатки Phonon.css
Принимая решение о том, является ли Phonon лучшим инструментом для их проекта, разработчики должны учитывать его потенциальные недостатки, как и любого другого инструмента. Ниже перечислены некоторые возможные недостатки Phonon:
Ограниченные возможности настройки: Phonon предлагает различные возможности настройки и расширения. Однако он может быть не таким гибким, как другие CSS-фреймворки, и это может стать проблемой для разработчиков, которые хотят иметь больше контроля над тем, как выглядит и ощущается их сайт или приложение.
Ограниченная документация: Документация по Phonon, хотя и дает солидный обзор фреймворка и его возможностей, может быть не такой подробной, как по другим CSS-фреймворкам. Это может затруднить разработчикам изучение более сложных функций или поиск точных решений вопросов.
Поддержка Phonon.css браузерами
С Phonon совместимы последние версии следующих современных браузеров:
Chrome
Firefox
Safari
Opera
Edge.
Он также может работать с некоторыми старыми версиями этих браузеров, хотя совместимость с предыдущими версиями не гарантируется. Современные браузеры, включая Phonon, поддерживают современные веб-стандарты, такие как CSS3 и HTML5. Поскольку некоторые устаревшие браузеры не поддерживают определенные стандарты, он может работать с ними не идеально.
Начало работы
Npm должен быть установлен в вашей системе, прежде чем вы сможете использовать его для установки Phonon. Если npm еще не установлен на вашем компьютере, вы можете установить его, следуя инструкциям на сайте npm.
Набрав в терминале следующую команду после установки npm, вы сможете установить Phonon:
npm install phononПосле этого в вашем проекте будет установлена самая последняя версия Phonon.
Для использования Phonon в проекте необходимо включить файл Phonon CSS в шапку HTML-документа. Это можно сделать, включив в HTML-документ следующую строку:
<link rel="stylesheet" href="node_modules/phonon/dist/css/phonon.min.css" />Вы также можете включить Phonon CSS CDN в голову вашего HTML-документа; если вы хотите использовать его через CDN, включите следующую строку в ваш HTML, и вы сможете этого добиться:
<link
rel="stylesheet"
href="https://unpkg.com/phonon@2.0.0-alpha.1/dist/css/phonon.min.css"
integrity="sha384-YvRRhxrEwrswiEGUXRvWsOw0trb5T3Mg0OupNZ48rCk6Ri3+q6DSWlYpEyr24vSK"
crossorigin="anonymous"
/>Он будет содержать последний релиз Phonon через CDN unpkg. Подставив номер версии, который вы хотите использовать, вместо ”@2.0.0”, вы можете указать конкретную версию Phonon.
Компоненты
Мы обсуждали введение Phonon ранее в этой статье, и теперь мы знаем, что это такое и насколько это важно. В этой части мы будем использовать фундаментальные элементы Phonon CSS. В этом разделе мы будем использовать самоочевидные стили и имена классов, которые приведут к созданию потрясающего дизайна для нашего проекта.
Давайте сразу приступим к использованию фундаментальных компонентов Phonon CSS.
Оповещение
Оповещение — это элемент пользовательского интерфейса, используемый для отображения сообщения пользователю, обычно для передачи важной информации или предупреждения пользователя о проблеме.
Вот пример того, как можно создать оповещение с помощью Phonon:
<div class="alert-primary">...</div>Используя один из следующих классов, вы можете изменить внешний вид оповещения:
.alert-primary: синий фон
.alert-secondary: серый фон
.alert-success: зеленый фон
.alert-warning: желтый фон
.alert-danger: красный фон
Чтобы создать предупреждение с желтым фоном, можно использовать следующий код:
<div class="alert alert-warning">
This is a warning alert message.
</div>Вывод:
Класс .alert-dismissible можно использовать для добавления к оповещению кнопки закрытия. Пользователь сможет отключить предупреждение, нажав на кнопку закрытия.
Код:
<div
class="alert alert-warning alert-dismissible"
id="exampleAlert"
role="alert"
>
<strong>Invalid information!</strong> Click the close button to dismiss this
warning..
<button
type="button"
class="icon-close"
data-dismiss="alert"
aria-label="Close"
>
<span class="icon" aria-hidden="true"></span>
</button>
</div>Выход:
Для получения дополнительной информации о том, как использовать оповещения с Phonon, вы можете обратиться к документации на сайте Phonon.
Кнопка
Кнопки на сайте являются важным компонентом и обеспечивают вовлечение пользователей. Используя один из приведенных ниже классов, вы можете изменить внешний вид кнопки:
.btn-primary: синий фон
.btn-secondary: серый фон
.btn-success: зеленый фон
.btn-warning: желтый фон
.btn-danger: красный фон
Чтобы создать кнопку с синим фоном, можно использовать следующий код:
<button class="btn btn-primary">Primary Button</button>Вывод:
Вы можете настроить размер кнопки с помощью классов .btn-sm (маленькая) или .btn-lg (большая).
<button class="btn btn-primary btn-lg">Large button</button>
<button class="btn btn-primary btn-sm">Small button</button>Вывод:
Для получения дополнительной информации о том, как использовать кнопки в Phonon, вы можете обратиться к документации на сайте Phonon.
Группа кнопок
Вы можете использовать класс .btn-group для создания группы кнопок в Phonon.
Ниже приведен пример создания базовой группы кнопок с помощью Phonon:
<div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Home</button>
<button type="button" class="btn btn-primary">About</button>
<button type="button" class="btn btn-primary">Contact</button>
</div>Вывод:
По умолчанию кнопки в группе будут иметь сплошной синий цвет фона и белый текст. Вы можете настроить внешний вид кнопок, используя один из следующих классов:
.btn-primary: синий фон
.btn-secondary: серый фон
.btn-success: зеленый фон
.btn-warning: желтый фон
.btn-danger: красный фон
Чтобы создать группу кнопок с серыми кнопками, можно использовать следующий код:
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>Вывод:
Чтобы узнать больше о группах кнопок, нажмите здесь.
Коллекция
Коллекции позволяют группировать элементы списка. К дочерним элементам списка будут применены стили Phonon, если к родительскому контейнеру применено имя класса коллекции. Элементом может быть все, что вы хотите сгруппировать в виде коллекции.
Пример кода:
<div class="collection">
<div class="collection-header">
<h3 class="collection-title">Title</h3>
</div>
<div class="collection-body collection-emphasis">Look at me!</div>
<div class="collection-body">Body</div>
<div class="collection-footer">Footer</div>
</div>Вывод:
Это позволит создать простую коллекцию из четырех штук. Коллекция может вырасти настолько, насколько вам нужно.
Класс collection-header можно использовать для включения заголовка в коллекцию:
<ul class="collection">
<li class="collection-header">Best Students</li>
<li class="collection-item">John</li>
<li class="collection-item">Jane</li>
<li class="collection-item">Jack</li>
</ul>Вывод:
В документации Phonon есть дополнительные подробности и примеры использования класса коллекции.
Нижний колонтитул состоит из элемента-контейнера с классом footer и ряда дочерних элементов для содержимого колонтитула.
Вот пример структуры HTML для нижнего колонтитула:
<footer class="footer bg-primary">
<div class="container">
<div class="row align-items-end">
<div class="col-sm-6">
<div class="d-flex align-items-end mb-3 mb-sm-0">
<img
class="rounded-circle"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHe9oaoqfZGtjciURX7A5d-ZyHKJo5qZTWXALSog96ywzns4wDGfmmQkNdkRVyfRGmqjw&usqp=CAU"
width="100"
alt=""
/>
<span class="text-white ml-3">© 2022 • OpenReplay</span>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">
<ul class="mb-0">
<li><a class="text-white" href="#">Home</a></li>
<li><a class="text-white" href="#">FAQ</a></li>
<li><a class="text-white" href="#">About</a></li>
<li><a class="text-white" href="#">Contact</a></li>
</ul>
</div>
<div class="col-sm-6">
<ul class="mb-0">
<li><a class="text-white" href="#">Terms</a></li>
<li><a class="text-white" href="#">Privacy</a></li>
<li><a class="text-white" href="#">Help</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>Вывод:
Мобильный просмотр:
Вот и все! Теперь у вас должен быть рабочий колонтитул, использующий Phonon.css.
Форма
Чтобы добавить элемент формы в ваш HTML-документ, вы можете использовать тег form для создания формы:
<form>
<!-- form fields go here -->
</form>Внутри элемента формы добавьте поля формы, которые вы хотите включить в свою форму. Например, вы можете добавить текстовые входы, textarea и кнопки, используя элементы input и button соответственно:
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<br />
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
<br />
<button type="submit">Send</button>
</form>Пожалуйста, обратите внимание, что это только фиктивная форма без добавления стилей.
Вывод:
Вы можете настроить внешний вид вашей формы с помощью CSS-классов Phonon. Например, вы можете использовать класс .form-control для стилизации элементов формы и класс .form-group для объединения элементов формы в группы:
<form>
<div class="form-group">
<label for="name" class="form-control">Name:</label>
<input type="text" id="name" name="name" class="form-control" />
</div>
<div class="form-group">
<label for="email" class="form-control">Email:</label>
<input type="email" id="email" name="email" class="form-control" />
</div>
<div class="form-group">
<label for="message" class="form-control">Message:</label>
<textarea id="message" name="message" class="form-control"></textarea>
</div>
<button type="submit" class="btn btn-primary">Send</button>
</form>
Как вы можете убедиться, форма стала еще красивее. Чтобы узнать больше о форме и получить несколько удивительных предложений и советов, достаточно зайти на официальный сайт Phonon. Чтобы узнать больше о формах, нажмите здесь.
Сетка
Чтобы создать макет сетки с помощью Phonon, вы можете использовать элемент div с классом .container для создания контейнера:
<div class="container">
<!-- grid rows and columns go here -->
</div>Внутри контейнера добавьте строки с помощью элемента div с классом .row. Каждая строка может содержать несколько столбцов:
<div class="container">
<div class="row">
<!-- columns go here -->
</div>
</div>Внутри каждой строки добавьте колонки с помощью элемента div с классом .col. Вы можете указать ширину колонки с помощью классов .col-_, где _ - число от 1 до 12, представляющее ширину колонки в долях строки. Например, .col-6 создает колонку, занимающую половину строки:
<div class="container">
<div class="row">
<div class="col-6">Column 1</div>
<div class="col-6">Column 2</div>
</div>
</div>Вывод:
Вы также можете вложить строки и столбцы для создания более сложных макетов сетки. Чтобы узнать больше, перейдите сюда.
Линия
Чтобы создать линию с помощью Phonon, можно использовать элемент hr с атрибутом align:
<hr align="left"/>Это создаст горизонтальную линию, которая охватывает ширину родительского контейнера.
Если вы хотите настроить внешний вид линии, вы можете использовать следующие классы CSS:
.border-danger: Создает линию с цветом опасности.
.border-success: Создает линию с цветом успеха.
.border-warning: Создает линию с цветом предупреждения.
.border-muted: Создает линию с приглушенным цветом.
Например:
<hr align="left" class="emphasis w-lg h-lg border-danger" />
<hr align="left" class="emphasis w-lg h-lg border-warning" />
<hr align="left" class="emphasis w-lg h-lg border-success" />
<hr align="left" class="emphasis w-lg h-lg border-muted" />Вывод:
На веб-сайте работа с линиями необходима, и лучше всего, когда вы применяете дизайн без использования стандартного серого цвета. Посетите сайт phonon, чтобы получить доступ к официальной документации и узнать больше о линии.
Загрузчик
Чтобы создать контейнер загрузчика с помощью Phonon, вы можете использовать элемент div с классом .loader:
<div class="loader">
<!-- loader content goes here -->
</div>Это позволит создать контейнер, который инициализирует загрузчик со стандартной анимацией загрузки. Если вы хотите настроить внешний вид загрузчика, вы можете использовать следующие классы CSS:
.loader-primary: Создает загрузчик с основным цветом.
.loader-secondary: Создает загрузчик со вторичным цветом.
.loader-success: Создает загрузчик с цветом успеха.
.loader-warning: Создает загрузчик с цветом предупреждения.
.loader-danger: Создает загрузчик с цветом ошибки.
Например:
<div class="loader">
<div class="loader-spinner loader-primary loader-spinner-animated"></div>
</div>
<div class="loader">
<div class="loader-spinner loader-secondary loader-spinner-animated"></div>
</div>
<div class="loader">
<div class="loader-spinner loader-success loader-spinner-animated"></div>
</div>
<div class="loader">
<div class="loader-spinner loader-warning loader-spinner-animated"></div>
</div>
<div class="loader">
<div class="loader-spinner loader-danger loader-spinner-animated"></div>
</div>
<div class="loader">
<div class="loader-spinner loader-light loader-spinner-animated"></div>
</div>Вывод:
Чтобы прочитать больше о загрузчиках в официальной документации, пожалуйста, нажмите здесь.
Навбар
Чтобы создать панель навигации с помощью Phonon, можно использовать элемент nav с классом .navbar:
<nav class="navbar">
<!-- navbar content goes here -->
</nav>Это создаст контейнер навигационной панели, ширина которого будет равна ширине родительского элемента.
Чтобы добавить навигационные ссылки в навигационную панель, можно использовать элемент ul с классом .navbar-nav:
<nav class="navbar navbar-light navbar-expand-lg">
<div class="navbar-left">
<a class="navbar-title" href="#">
<img
class="d-inline-block"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHe9oaoqfZGtjciURX7A5d-ZyHKJo5qZTWXALSog96ywzns4wDGfmmQkNdkRVyfRGmqjw&usqp=CAU"
width="30"
height="30"
alt=""
/>
Home
</a>
<ul class="navbar-nav">
<li class="nav-item active">
<a href="#" class="nav-link">Blog</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">GitHub</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link disabled">Login</a>
</li>
</ul>
</div>
<div class="navbar-right">
<button
class="navbar-toggle icon-hamburger"
type="button"
data-toggle="offcanvas"
data-target="#exampleOffCanvas"
>
<span
class="icon"
data-toggle="offcanvas"
data-target="#exampleOffCanvas"
></span>
</button>
</div>
</nav>Output:
Tables
You’ll need to include the Phonon CSS file in your HTML to use Phonon’s table styles. You can either download the CSS file and include it locally or link to the file hosted on a CDN like this:
<link
rel="stylesheet"
href="https://unpkg.com/phonon@2.0.0-alpha.1/dist/css/phonon.min.css"
integrity="sha384-YvRRhxrEwrswiEGUXRvWsOw0trb5T3Mg0OupNZ48rCk6Ri3+q6DSWlYpEyr24vSK"
crossorigin="anonymous"
/>После включения файла Phonon CSS вы можете создать таблицу в HTML с помощью элемента table:
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</tbody>
</table>Вывод:
Используя классы таблиц, предоставляемые Phonon, вы можете еще больше изменить внешний вид вашей таблицы. Например, класс “table-striped” можно использовать для добавления полосок зебры на стол:
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Jordan</td>
<td>Sam</td>
<td>99%</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>Mike</td>
<td>89%</td>
</tr>
<tr>
<td>3</td>
<td>Andrew</td>
<td>Jack</td>
<td>100%</td>
</tr>
</tbody>
</table>Вывод:
Потрясающая таблица, которую мы создали с помощью стилей PhononCSS, показана выше. Вы все еще можете внести изменения в таблицу, которую мы создали; посетите здесь, чтобы узнать больше о таблицах и получить некоторые интересные советы и рекомендации.
Заголовок
Заголовок - это элемент, который часто имеет квадратную или прямоугольную форму. Класс Phonon “title” используется для стилизации заголовков для различных частей вашего сайта. От “p-1” до “p-6”, существует шесть различных размеров заголовков.
Элементы HTML ‘h1’ - ‘h6’ позволяют разместить заголовок в соответствии с желаемым размером заголовка; выбор остается за разработчиком.
Пример кода:
<div class="tile p-4 tile-primary" style="width: 25%">
<h1>John</h1>
</div>
<div class="tile p-6 tile-secondary" style="width: 25%">
<h1>Sam</h1>
</div>
<div class="tile p-5 tile-warning" style="width: 25%">
<h1>Jack</h1>
</div>Вывод:
Более подробную информацию и примеры использования титров и субтитров вы можете найти в документации Phonon.
Утилиты
Теперь, когда мы имеем фундаментальное представление о компонентах, в этом разделе мы обсудим стили утилит в Phonon. Эти утилиты имеют огромное значение для веб-сайта, поскольку помогают сделать его отзывчивым. Чтобы не акцентировать на этом внимание, давайте приступим к разработке утилит Phonon.
Границы
В этом разделе мы обсудим границы и то, как их использовать. Обратите внимание, что Phonon поддерживает границы напрямую и имеет разрешение на использование стилей границ Bootstrap.
Чтобы создать границу, вы можете использовать класс .border на элементе, к которому хотите добавить границу:
<div class="border">
<!-- content goes here -->
</div>Это создаст границу вокруг элемента с цветом по умолчанию.
Если вы хотите настроить внешний вид границы, вы можете использовать следующие классы CSS:
.border-primary: Создает границу с основным цветом.
.border-secondary: создает границу со вторичным цветом.
.border-success: Создает границу с цветом успеха.
.border-warning: Создает границу с цветом предупреждения.
.border-error: Создает границу с цветом ошибки.
Например:
<div class="border border-primary">Primary</div>
<br />
<div class="border border-secondary">Secondary</div>
<br />
<div class="border border-success">Success</div>Вывод:
Более подробная информация о границах содержится в официальной документации.
Clearfix
Для создания clearfix в Phonon можно использовать класс .clearfix на элементе, который содержит плавающие элементы:
<div class="bg-info clearfix">
<button type="button" class="btn btn-primary float-left">
Coding is fun
</button>
<button type="button" class="btn btn-success float-right">
Learn how to code
</button>
</div>Вывод:
В качестве альтернативы можно использовать псевдоэлемент .clearfix::after, чтобы очистить плавающие элементы:
.clearfix::after {
content: "";
clear: both;
display: table;
}Иконки
Поскольку Phonon - это CSS-фреймворк, предоставляющий набор основных стилей и компонентов пользовательского интерфейса для создания веб-приложений.
Вот пример того, как использовать иконку в проекте Phonon: добавьте имя класса иконки в элемент HTML, например, в элемент :
<button type="button" class="icon-close" aria-label="Close">
<span class="icon" aria-hidden="true"></span>
</button>
<button type="button" class="icon-hamburger" aria-label="Toggle">
<span class="icon" aria-hidden="true"></span>
</button>
Это отобразит значки закрытия и гамбургера из Phonon. Для отображения соответствующего значка можно использовать любое имя класса значка.
Отображение
В Phonon вы можете использовать имя класса d-_ для управления отображением элемента на странице. Обратите внимание, что _ представляет собой значение display. Свойство display может иметь различные значения, каждое из которых определяет тип макета, который должен использовать элемент.
Вот некоторые общие значения для свойства display в Phonon:
d-block: Это значение заставляет элемент занимать всю ширину родительского контейнера и создавать после него новую строку.
d-inline: Это значение заставляет элемент отображаться на одной строке со своими собратьями и занимать только столько места, сколько необходимо.
Вы можете использовать свойство d (display) в своих таблицах стилей Phonon, указав его следующим образом:
This will display the close and hamburger icons from the Phonon. Any icon class name can be used to display the related icon.
Отображение
В Phonon вы можете использовать имя класса d-_ для управления отображением элемента на странице. Обратите внимание, что символ _ обозначает значение display. Свойство display может иметь различные значения, каждое из которых определяет тип макета, который должен использовать элемент.
Вот некоторые общие значения для свойства display в Phonon:
d-block: Это значение заставляет элемент занимать всю ширину родительского контейнера и создавать после него новую строку.
d-inline: Это значение заставляет элемент отображаться на одной строке со своими собратьями и занимать только столько места, сколько необходимо.
Вы можете использовать свойство d (display) в своих таблицах стилей Phonon, указав его следующим образом:
<div class="d-inline p-2 bg-success text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>
<span class="d-block mt-2 p-2 bg-secondary text-white">d-block</span>
<span class="d-block mt-2 p-2 bg-warning text-white">d-block</span>Вывод:
Embed
Для быстрого и простого применения общих стилей вы можете использовать вспомогательные классы embed в библиотеке Phonon CSS. Класс ’.embed-responsive’ является одним из таких классов, который можно использовать для вставки внешних стилей, таких как видео или карты, на ваш сайт.
Чтобы использовать класс “embed-responsive”, ваш HTML-документ должен включать элемент “iframe”, который указывает на внешнее содержимое, которое вы хотите вставить. Затем элемент “iframe” можно стилизовать с помощью класса ’.embed-responsive’, сделав видео отзывчивым и установив его ширину равной ширине родительского контейнера:
<div class="embed-responsive embed-responsive-16by9">
<iframe
width="988"
height="556"
src="https://www.youtube.com/embed/7ll7vrGHV2s"
title="Adumu HD 720p"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
</div>Вывод:
Обратите внимание, что класс .embed-responsive в Phonon предназначен для использования с элементами iframe и может работать некорректно с другими типами элементов. Кроме того, вам может понадобиться настроить атрибут src элемента iframe, чтобы он указывал на конкретное содержимое, которое вы хотите встроить.
Flex
Библиотека Phonon CSS включает набор вспомогательных классов, которые можно использовать для быстрого и простого применения общих стилей. Одним из таких классов является класс .d-flex, который позволяет создать гибкий макет с использованием модели CSS Flexbox.
Чтобы использовать класс .d-flex, его нужно применить к элементу-контейнеру, содержащему элементы, которые вы хотите расположить с помощью Flexbox. Например:
<div class="d-flex flex-row bg-dark mb-3">
<div class="p-2 bg-white">Flex item 1</div>
<div class="p-2 bg-white">Flex item 2</div>
<div class="p-2 bg-white">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bg-secondary">
<div class="p-2 bg-white">Flex item 1</div>
<div class="p-2 bg-white">Flex item 2</div>
<div class="p-2 bg-white">Flex item 3</div>
</div>
>Вывод:
Есть еще много интересного об использовании flexbox и его свойств, таких как flex-direction, flex-wrap и т.д. Для этого достаточно перейти на официальный сайт. В документации есть более подробная информация о сочетании Flexbox и Phonon.
Float
Вы можете использовать вспомогательные классы в библиотеке Phonon CSS для быстрого и простого применения общих стилей. Класс ”.float-[left or right]”, который можно использовать для размещения элемента слева или справа от его контейнера, является одним из таких классов.
Чтобы использовать класс ”.float-[direction]”, необходимо добавить его к элементу, который вы хотите сделать плавающим. Например:
<div class="float-left">Home</div>
<div class="float-right">Contact</div>Вывод:
В результате второй элемент будет плавать справа от своего контейнера, а первый - слева.
Следует отметить, что класс Phonon ”.float” предназначен для использования с элементами блочного уровня и может плохо работать с инлайн-элементами или элементами, свойство “display” которых установлено в “inline-block”. Кроме того, для правильного позиционирования и расположения элементов, плавающих внутри контейнера, может потребоваться применение дополнительных стилей или методов компоновки, таких как очистка плавающих элементов или использование атрибута “overflow”.
Посетите официальный сайт Phonon для получения дополнительной информации о плавающих элементах.
Шрифты
Для быстрого и простого применения общих стилей вы можете использовать вспомогательные классы в библиотеке Phonon CSS. Класс .font-name - один из таких полезных классов, который можно использовать для изменения семейства шрифтов элемента.
Для использования класса .font-name необходимо применить его к элементу, семейство шрифта которого вы хотите изменить. Например:
<div class="font-helvetica mb-2">helvetica</div>
<div class="font-arial mb-2">arial</div>
<div class="font-verdana mb-2">verdana</div>
<div class="font-times-new-roman mb-2">font-times-new-roman</div>
<div class="font-georgia mb-2">font-georgia</div>
<div class="font-courier mb-2">font-courier</div>Вывод:
Разработчику действительно следует помнить о шрифте во время работы, потому что он способствует красивому внешнему виду сайта. Чтобы прочитать больше о шрифтах, вы можете перейти по этой ссылке.
Заключение
Я искренне надеюсь, что вы получили удовольствие от чтения этой статьи. В этом руководстве мы узнали, как установить Phonon.css и разобрали несколько примеров Phonon.css, чтобы помочь нам понять основные концепции синтаксиса. Вы можете изменить рассмотренные примеры под свои нужды, если хотите легко и красиво оформить сайт для себя или клиента. Кроме того, вы можете применить полученные знания на практике, создавая более потрясающие веб-сайты.