Особенности использования CSS-фреймворков | Введение в веб-разработку. Курс
Слово «фреймворк» на русский язык можно перевести как «каркас». В программировании таковым называют заранее подготовленный (разработанный командой, человеком, компанией) код, который ложится в основу программы, которую вы создаете.
Фреймворки призваны облегчать разработку.
Главным в CSS-фреймворке, или каркасе для веб-дизайна, является файл с расширением .css, в котором описано множество классов под разные задачи. Таким образом для заголовка сайта, боковых панелей, различных вариантов списков, ссылок в меню, основного содержимого и многого другого у вас уже имеются готовые стили.
Веб-дизайнеру их не надо разрабатывать самому. Вместо этого он использует готовые как своего рода элементы конструктора.
Кроме того, современные библиотеки созданы с учетом Mobile First подхода и нет нужды самому решать, где будут контрольные точки, и писать под них @media-запросы.
С одной стороны, это позволяет начинающим создавать современные веб-интерфейсы, не вдаваясь в тонкости верстки.
Для их разрешения ничего не мешает дополнительно к использованию css-фреймворка создавать собственные таблицы стилей. Однако в этом случае могут быть конфликты, решение которых делает код менее ясным. Поэтому профессиональные веб-дизайнеры нередко отказываются от использования css-библиотек в пользу собственных наработок.
При использовании css-фреймворка часто не создают макет с нуля, а выбирают из множества уже готовых шаблонов для сайта, разработанных на базе этого фреймворка. В любом случае шаблон можно подкорректировать или оставить как есть, не вдаваясь в особенности не только CSS, но и самой библиотеки.
Наверно одной из самых популярных css-платформ является Bootstrap. Мы же в этом уроке рассмотрим пример создания шаблона с помощью более простой библиотеки – W3.CSS (w3schools.com/w3css/default.asp). Готовые шаблоны можно посмотреть здесь.
Используя W3.CSS, попробуем создать с нуля свой шаблон, аналогичный макету, который мы верстали на двух прошлых уроках.
Для того, чтобы использовать данный css-фреймворк добавим в наш index.html ссылку на основной .css и файл цветовой темы:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-black.css">Файлы можно скачать, положить в каталог с index.html и в тегах ссылаться на них просто по имени.
Не будем удалять подключение к нашей собственной таблице стилей. Ссылку на ее разместим ниже библиотечных файлов, чтобы наши правила имели более высокий приоритет. Содержимое нашего style.css будет таким:
body {
font-size: 1.2em;
margin: 0;
}
main {
margin-left: 250px;
}
footer {
font-size: 14px;
}
@media (min-width: 1480px) {
.text {
margin-left: -250px;
}
}
.w3-sidebar {
z-index: 3;
width: 250px;
top: 43px;
bottom: 0;
height: inherit;
}Здесь правила для main и .
text необходимы, чтобы изменить заданное во фреймворке иное размещение.
В библиотеке w3.css есть класс w3-sidebar (панель, размещаемая сбоку). Однако ее стиль нам тоже не совсем подходит. Поэтому вносим коррективы.
В w3.css есть класс w3-overlay. Скорее всего у него проставлен z-index, равный двум. Поэтому где-бы мы на странице не размещали оверлей, он будет выше сайдбара. Чтобы поднять последний, мы назначаем ему индекс не меньше двух. Достаточно 2, если
В результате код HTML будет выглядеть так:
Архив с файлами шаблона: w3css-template.zip
Вид макета на широких экранах:
На узких:
Для большинства элементов HTML мы вынуждены использовать сразу несколько классов, каждый их которых придает элементу свои свойства, что увеличивает объем исходного html-кода. Разработчику требуется знать не столько язык CSS сколько свойства классов используемого фреймворка.
При этом нам почти не пришлось писать свой css-код.
CSS фреймворки — Бесплатный HTML-курс
По большому счёту все фреймворки по сути предоставляют возможность верстать с помощью своих css-классов. Поэтому любой фреймворк — это не что иное, как обычный набор классов. Существует лишь несколько нюансов, которые отличают фреймворки друг от друга.
Есть два принципиальных подхода. Первый, с которым ты уже знаком — Atomic CSS, где каждый класс описывает как правило только одно css-свойство. Такие фреймворки обладают хорошей семантикой и очень гибкие. Часто такие фреймворки называют utility-first, а их классы утилитарными, что позволяет их использовать совместно с другими фреймворками.
Лично я не встречал ни одного более-менее серьёзного фреймворка без утилитарных классов, поскольку без них очень сложно кастомизировать вёрстку: отступы, цвета — это всё утилитарные классы.
Другой подход — компонентный. В таких фреймворках вёрстка производится также с помощью готовых классов, но в каком-то строго предопределённом html-коде. Вот пример из Bootstrap.
<div>
<h2>Hello, world!</h2>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr>
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a href="#" role="button">Learn more</a>
</div>
Глядя на этот код невозможно понять его назначение. Мы никогда в жизни не догадаемся, какие css-свойства используются в классах jumbotron, lead и display-4.
Для компонентных фреймворков как раз и характерна подобная несемантичность, поэтому работа с ними обычно строится только с помощью документации: скопировал предлагаемый код, после пытаешься его изменить с помощью других классов.
Из-за этой особенности подобные фреймворки часто называют UI-фреймворки, то есть предлагающие готовые для использования дизайн-элементы. Это упрощает работу верстальщика (что может быть проще — скопировать готовый код?), но не позволяет полноценно его подстроить под свой дизайн.
Из наиболее популярных наверное стоит выделить:
- Bootstrap
- UIkit
- Foundation
- Semantic UI
- Metro 4
Возможно ты и не будешь с ними работать, но ознакомиться, хотя бы понять что они из себя представляют, необходимо любому верстальщику.
Как работает CSS-фреймворк
Любой фреймворк — это набор css-классов. В Berry CSS мы верстали одиночными классами. Например:
<div>...
Вместо этого можно заменить все эти классы одним my-block (название произвольно).
<div>...
и определить его так:
<style>
.my-block {
font-weight: bold;
font-size: 1.
4rem;
color: #858585;
max-width: 600px;
padding-top: 40px;
padding-bottom: 40px;
}
</style>
4rem;
color: #858585;
max-width: 600px;
padding-top: 40px;
padding-bottom: 40px;
}
</style>
Когда мы верстали блоки, то почти всегда классы нужно было прописывать у всех его элементов. Если, скажем, у
То есть если тебе нужно будет сделать какой-то «фиксированный» блок, то можно для него сделать свой css-класс. Вместо множества утилитарных классов будет достаточно указать только один.
Сбросы
Фреймворк состоит из классов, которые имеют разное назначение. Технически каждый дизайн-элемент обычно представляет собой отдельный файл стилей. Это позволяет не смешивать все стили в одну кучу. После этого выполняется компиляция этих файлов в один, который уже и подключается к странице.
Делается это с помощью css-препроцессоров. Сейчас в основном используется только Sass.
Но перед тем как подключать свои css-файлы, подключаются reset-файлы — это стили, которые приводят браузеры к одному поведению.
Сейчас браузеры довольно близки друг к другу, но так было не всегда. Несколько лет назад они имели сильные различия и страница в одном могла выглядеть совсем не так же как в другом. Чтобы избежать этих проблем вначале вводится сброс стилей, а уже потом основная вёрстка.
Когда-то давно был популярен сброс resets.css, но сейчас используется normalize.css, который приводит только различия между браузерами к одному отображению.
Поэтому, когда ты будешь использовать свои стили, то вначале следует подключить normalize.css.
Однако есть ещё одна проблема — несколько необычная блочная модель браузеров. Так исторически сложилось, что браузеры по умолчанию считают размеры блоков не так, как мы привыкли.
Например, если задать ширину блока 300px, потом добавить справа 20px и нарисовать справа бордюр 5px, то реальный размер будет 325px, хотя мы жестко указали, что вся ширина 300px. Такое поведение создавало много проблем верстальщикам, особенно при относительных единицах — попробуй определить реальный размер 50% с бордюром 1px?
Для этого был придуман сброс border-box:
*,
*:before,
*:after {
-moz-box-sizing: border-box; // для старых браузеров FireFox
box-sizing: border-box;
}
Он переводит блочную модель в привычное для нас понимание, где ширина — это ширина, а всё остальное уходит как бы «внутрь».
Таким образом normalize.css и сброс border-box по сути являются обязательным для любого фреймворка или своего проекта.
Как сделать свой css-фреймворк
Как ты уже понял, вначале подключаются сбросы, а после размещается свой css-код. Например дизайнер предоставил тебе в работу какой-то макет. Первое, что нужно сделать — это html-разметку. Поскольку классов ещё нет (мы же не используем другие фреймворки!), то лишь намечаем предполагаемое поведение. Понятно, что визуально на странице макет выглядит не так, как нужно.
После этого проставляются классы для блоков, начиная с контейнера. Имя классов может быть произвольным, но желательно сделать это так, чтобы примерно понимать его назначение. Вместо my-block, лучше что-то вроде header-top. Будет понятно, что этот блок имеет отношение к шапке сайта.
После этого открывается css-файл и там прописываются необходимые стили этого класса. Дальше углубляемся — прописываем классы для вложенных блоков и пишем стили для них.
Таким образом делаем до тех пор, пока блок не будет готов.
Плюс такого подхода в том, что итоговый css-код будет содержать лишь те классы, которые реально востребованы на странице. Это отличается от утилитарного подхода, который предполагает наличие большого количества классов «про запас». Из-за этого размер css-файла будет многократно больше.
Не зависимо от твоих желаний, нужно уметь создавать свои css-файлы без сторонних фреймворков. Здесь вопрос лежит в плоскости понимания того, как вообще работает CSS. Одно дело, когда ты используешь готовые разработки в виде «черного ящика» и другое, когда сам создаёшь нужный css-код. Только так у тебя появится профессиональный рост.
CSS-препроцессор Sass
Sass можно рассматривать как расширение синтаксиса CSS. Хотя по сути Sass — это целый язык программирования, которые позволяет автоматизировать очень много операций с CSS.
Наверное будет правильным не публиковать здесь описание и все «плюшки» Sass, поскольку их объём очень уж значителен, а просто предложить тебе ознакомиться с ним самостоятельно.
Этот курс рассчитан на новичков и если ты читаешь эти строки, значит ты его уже прошёл. С полученными знаниями тебе будет проще понять как работать с компонентными фреймворками, а также начать писать css-код с помощью Sass.
Более того, все современные фреймворки используют именно Sass (намного реже Less.js) для того, чтобы иметь возможность настраиваться под конкретную задачу.
В Sass есть переменные, которыми можно управлять размерами, цветами и т.д. Например в Berry CSS можно отключить неиспользуемый файл или целый модуль, после скомпилировать и итоговый css-файл будет меньше. Точно также можно настроить все цвета, их группы, размеры для классов ширины, высоты, flex, точки адаптивного дизайна и т.д.
Всё это благодаря Sass, поэтому следующий твой уровень — изучение этого препроцессора.
Что дальше?
Лучший способ развивать своё мастерство — это практиковаться. Мы рассматривали достаточно простые приёмы вёрстки, хотя они и наиболее часто используемые.
Попробуй взять какой-нибудь простой лендинг и сверстать его вначале с помощью Berry CSS, а потом полностью на собственном css-коде. Чем больше ты будешь практиковаться, тем лучше и быстрей у тебя будет получаться работа.
Не стесняйся обращаться к справочникам HTML, CSS, Berry, потому что объём информации очень большой и не стыдно забыть как пишется то или иное свойство или класс. Главное, чтобы ты мог быстро находить нужную информацию.
Вёрстка — это один из навыков профессии. Следующий уровень — это какой-то язык программирования. Если тебя больше заинтересует дизайн и непосредственно вёрстка, то для этого начни изучать JavaScript. Если ты уже знаком с обычным программированием, то возможно тебе больше понравится PHP — на нём работают почти все сайты. В общем выбор за тобой!
Котик с unsplash.com
Если тебе понравился этот курс, поделить ссылкой на него со своими друзьями. При желании ты можешь оказать любую финансовую помощь автору . 🙂
Front-End Frameworks JS, CSS и HTML для дизайна и разработки
Содержание
- JAVASCRIPT FRAMEWORKS
- ОСНОВНЫЕ СРЕДСТВА CSS
- HTML-фреймворки
В современном мире передовых технологий и безграничных возможностей веб-разработки веб-сайты непрактичны без фреймворков адаптивного дизайна.
Естественно, спрос на эти веб-фреймворки существенно вырос за последние несколько лет. Эти фреймворки позволяют разработчикам сосредоточиться на разработке ориентированных на пользователя приложений, которые, в свою очередь, будут хорошо приняты конечными пользователями.
Фреймворки JS, фреймворки CSS и фреймворки HTML позволяют разработчикам расширять функциональность ряда приложений. Тем не менее, проголосовать за лучший из этих 3 лучших веб-фреймворков — непростая задача.
Этот блог даст вам общее представление о лучших интерфейсных фреймворках по отдельности и поможет вам принять правильное решение для вашего проекта.
JAVASCRIPT FRAMEWORKS
Фреймворки JavaScript покорили мир веб-разработки. Для разработчиков эти фреймворки — не просто еще один язык сценариев, а удивительная инфраструктура, которая позволяет им эффективно применять свои навыки.
1. Angular.js
С технической точки зрения Angular.js — это расширение HTML, помогающее в разработке сложных веб-страниц.
Это одна из самых уважаемых сред JavaScript, которая значительно упрощает веб-разработчикам выполнение сложных задач веб-разработки. Более того, богатые функциональные возможности этой JS-инфраструктуры использовались такими известными именами, как PayPal, Google, iTunes и многими другими, для своих приложений.
2.Meteor.js
Фреймворк Meteor.js позволяет разработчикам работать на чистом JavaScript. Этот JavaScript-фреймворк предназначен для быстрой разработки сквозных мобильных и веб-приложений. Этот фреймворк обладает всеми необходимыми функциональными возможностями, необходимыми для безупречного внешнего рендеринга. Meteor.js также помогает легко справляться с бэкэнд-разработкой и управлением базой данных.
3.Knockout.js
Knockout.js, изначально представленный как платформа 2JavaScript с открытым исходным кодом, также пользовался популярностью несколько лет назад. Сегодня его богатые функциональные возможности заняли первое место сразу после Angular.
js. Фреймворк так же хорош, как и другие подобные фреймворки; однако желательно пересмотреть его функциональность, чтобы повысить популярность Knockout.js среди пользователей.
Почему бы не сделать свои продукты передовыми с помощью супергероической структуры? Загрузите это бесплатное руководство
CSS FRAMEWORKS
CSS-фреймворки предназначены для того, чтобы сделать веб-дизайн проще, стандартнее и привлекательнее благодаря использованию языка каскадных таблиц стилей. Кроме того, специальные сетки в фреймворке помогают в разработке адаптивного веб-дизайна.
1.Bootstrap
Bootstrap, элегантная и интуитивно понятная CSS-инфраструктура, разработанная в первую очередь для мобильных устройств, представляет собой надежную платформу, которая может похвастаться несколькими файлами CSS, JS и другими передними файлами, которые запускают задачу веб-разработки и разработки приложений. В Bootstrap есть различные компоненты, которые помогают создавать выпадающие меню, окна предупреждений и некоторые другие функции.
Таким образом, Bootstrap — это комплексное решение для разработчиков мобильных приложений, которым необходимо комплексное решение.
2.Pure
Pure — это простая структура с одним файлом таблицы стилей. Несмотря на то, что файл легкий, он имеет один из самых необычных дизайнов для разработки веб-сайтов. Pure предоставляет набор небольших, но отзывчивых модулей CSS, которые значительно упрощают включение различных параметров в проекты веб-разработки. Pure — это идеальный фреймворк для пользователей, которые хотят включить в свои проекты определенные функции, а не сосредотачиваться на полнофункциональных фреймворках.
3.Скелет
Skeleton — это популярный фреймворк, который исключительно хорошо работает при использовании для адаптивной мобильной разработки. Эта структура включает в себя небольшой кластер файлов CSS, которые позволяют быстро разрабатывать сайты. Недавнее обновление этой CSS-инфраструктуры также представило набор новых функций для быстрой разработки приложений.
HTML FRAMEWORKS
HTML-фреймворки содержат стандартные коды, облегчающие разработчикам утомительную работу по написанию кода. Эти платформы помогают разработчикам с предопределенным набором кодирования, который они могут легко использовать вместо того, чтобы выполнять задачу с нуля.
1.Sencha Touch
Sencha Touch — известная кроссплатформенная совместимая замечательная веб-интерфейсная структура. Разработчики обычно используют его для разработки мобильных приложений для пользователей. Sencha Touch может использоваться разработчиками для включения ряда пользовательских интерфейсов, которые делают приложения более привлекательными и привлекательными для пользователей.
2.Foundation
Foundation — одна из самых надежных и лучших HTML-платформ, оснащенная рядом исключительных встроенных функций. Этот HTML-фреймворк обеспечивает высококачественные результаты разработки. Кроме того, эту HTML-инфраструктуру легко использовать для веб-разработки, создания шаблонов электронной почты, а также для разработки динамических приложений.
3.Monaca
Monaca позволяет разработчикам разрабатывать приложения в облаке, включая внутренние интерфейсы и функции отладки вместе в одном приложении. Этот удивительный фреймворк также позволяет разработчикам включать функции тестирования и создания приложений в любое приложение. Monaca также очень легко интегрируется в любой существующий рабочий процесс. Фреймворк даже добавляет больше возможностей в любую среду разработки приложений.
Заключение Список таких исключительных интерфейсных фреймворков выходит далеко за рамки перечисленных здесь. Однако в этом блоге мы перечислили некоторые из них, которые действительно являются инновационными по своим функциям. В конечном счете, ваше решение должно зависеть от ваших требований и от того, как вы можете получить максимальную отдачу от своего фреймворка. Если вам нужно несколько дополнительных рук, чтобы помочь вам с вашими проектами разработки, пожалуйста, не стесняйтесь связаться с нами.
7 лучших фреймворков CSS и HTML для веб-разработки в 2022 году
Было время, когда создание красивых веб-сайтов и веб-приложений с использованием CSS и HTML было непосильным трудом для разработчиков. Но благодаря некоторым замечательным фреймворкам CSS и HTML создание адаптивных веб-сайтов и веб-приложений сегодня не такая уж сложная задача.
Фреймворки CSS и HTML похожи на бетонные фреймы. Они помогают веб-разработчикам и дизайнерам создавать структуру веб-сайтов и позволяют им сосредоточиться на создании уникальных функций и возможностей, а не воссоздавать старые путем кодирования.
Молодые разработчики часто сталкиваются с трудностями при поиске лучших фреймворков CSS и HTML для своих проектов по разработке веб-сайтов. Если вы один из них, то этот блог будет вам полезен!
Сегодня Techosquare — ведущая фирма по разработке PHP в Индии — расскажет вам о лучших фреймворках CSS и HTML, которые вы можете использовать в 2022 году для разработки.
Следующие фреймворки HTML и CSS помогут вам разрабатывать веб-сайты и веб-приложения лучше, быстрее и эффективнее:
#1 Bootstrap
Bootstrap делится достижениями по внедрению адаптивного дизайна веб-сайтов в больших масштабах. Фактически, эта структура CSS и HTML была первой, которая поощряла принцип mobile-first в мире веб-разработки. С Bootstrap разработчикам почти не нужно тратить время на позиционирование сложного CSS и решение проблем несовместимости браузеров.
Bootstrap также предлагает важные компоненты пользовательского интерфейса, необходимые для разработки веб-сайтов. Навигация, формы, карточки, модальные окна, кнопки, индикаторы выполнения, оповещения об уведомлениях — вы просто называете это, в этой структуре CSS и HTML есть все!
Особенности Bootstrap
- Легко начать работу
- Несколько шаблонов начальной загрузки
- Простая настройка
- Меньше кросс-браузерных ошибок
Несмотря на то, что он новичок в HTML и CSS framework block, HTML KickStart завоевал большую популярность за очень короткий период времени.
Это эффективный и успешный пакет файлов HTML5 и CSS, который может сэкономить много работы и усилий при работе с пользовательским интерфейсом.
HTML KickStart включает в себя все необходимое для создания приятного для глаз макета веб-сайта, включая стильные кнопки, панели навигации, масштабируемые значки, адаптивную сетку, заполнители изображений, меню с подменю и многое другое. Эта библиотека-фреймворк также легче и быстрее, чем Bootstrap.
Highlights for HTML KickStart
- Гибкая сетка
- Простой код
- Тонны элементов веб-сайта
#3 Foundation
Однажды кто-то сказал: « когда все становится слишком сложным, будь проще». Фонд все об этой цитате. Являясь одним из самых продвинутых и лучших фреймворков CSS для внешнего интерфейса, он дает разработчикам внешнего интерфейса полный контроль над своими пользовательскими интерфейсами. Foundation позволяет быстро создавать прототипы сайтов и приложений, которые работают на таких устройствах, как смартфоны, настольные компьютеры и телевизоры.
Foundation имеет множество инструментов, предназначенных для решения почти всех видов интерфейсных задач. Эта структура CSS также поставляется с интерфейсом командной строки. Foundation может показаться пресным и чрезвычайно запутанным, особенно для новичков, но он не навязывает язык стиля.
Отличительные особенности Foundation
- Полная комплектация
- Чрезвычайно гибкая
- Расширенная система адаптивных изображений
- Доступны курсы для начинающих и профессиональные консультации
Жизненный цикл разработки веб-сайта для запуска современных и масштабируемых веб-сайтов
#4 Skeleton
Точно так же, как скелетная система работает как опорная структура для нашего тела, скелетная структура действует как структура под поверхностью веб-сайтов и веб-приложений. Это простой и чистый адаптивный шаблон CSS для веб-сайтов и приложений HTML5.
Skeleton имеет адаптивную сетку макета и стандартные медиа-запросы для свойств стиля CSS для конкретных устройств.
Он также имеет шаблон PSD для клонирования дизайна веб-сайта и HTML5shiv — код javascript, который позволяет правильно стилизовать элементы HTML5 для старых веб-браузеров.
Особенности Skeleton
- Простая в использовании структура
- Улучшенные основные типы и веб-макеты
- Чистые и красивые коды
- Подходит для устройств с меньшим разрешением
#5 UIKit
Еще одна популярная, легкая и модульная интерфейсная платформа для разработки быстрых и мощных интерфейсов веб-сайтов. UIkit — это минимализм. Нет, не по характеристикам, а по дизайну. В отличие от других фреймворков CSS и HTML, он наиболее известен своей чистотой и элегантностью.
Помимо веб-сайтов, UIKit также можно использовать для создания и управления графическим пользовательским интерфейсом, управляемым событиями, для приложений iOS и tvOS. Более того, даже самый простой стиль веб-сайта можно расширить с помощью тем и легко настроить в соответствии с требованиями клиента с помощью UIKit.
Особенности UIKit
- Полный набор компонентов HTML, CSS и JS
- Расширяемый и функциональный
- Простой в использовании
- Легкий и отзывчивый
#6 LeSS Framework
Мы знаем, о чем вы сейчас думаете. Лесс Фреймворк? Похоже, что эта структура HTML и CSS предлагает меньше возможностей, чем другие. Нет, LeSS Framework ничем не уступает Skeleton по атрибутам.
Это современный интерфейсный фреймворк, используемый для разработки адаптивных веб-сайтов и дизайна веб-приложений. Как и Skeleton, LeSS Framework основывается на простой и простой структуре сетки макетов и имеет 4 готовых макета: рабочий стол (по умолчанию), планшет, мобильный и мобильный ландшафт.
Особенности LeSS Framework
- Больше возможностей LeSS
- Прозрачность
- Поддающийся проверке контроль процесса
- Просто и понятно
иметь в виду при разработке веб-сайта для малого бизнеса.
#7 Susy
Мы уверены, что большинство разработчиков HTML5 и CSS знают об этой структуре. Susy — это фреймворк с чистым макетом, который отказывается от всех предопределенных идей float, grid, flexbox и таблиц и позволяет вам разрабатывать макет в соответствии с потребностями вашего веб-сайта.
Короче говоря, Susy создан для разработки высокомодульных, ошеломляющих макетов с ультрасложными, необычными и точными требованиями клиентов. Новичкам может быть сложно освоить эту структуру CSS и HTML.
Однако в руках опытных разработчиков Susy почувствует себя творческой гранатой, сносящей все остальное.
Особенности Eclipse:
- Действительно гибкий
- Позволяет писать код по-своему
- Позволяет создать любую раскладку
- Лучше всего подходит для опытных разработчиков
Готово!
Мы рассказали вам о лучших фреймворках HTML и CSS для разработки потрясающих веб-сайтов в 2022 году.