Какой CSS-фреймворк выбрать?
Существует множество фреймворков CSS, которые вы можете использовать для своих проектов. Если вы выполните поиск в Google, вы найдете список из 10 лучших фреймворков 2021 года, 5 лучших фреймворков для разработчиков и дизайнеров, но если вы новичок в языке программирования, какой фреймворк выбрать? Если Вы хотите, чтобы Ваш сайт или веб-приложение были не только красивыми, но и современными и стильными.
Я знаю эту проблему, и я работал с такими фреймворками, как Bootstrap, Semantic UI, Foundation, Bulma, Material UI, Materialize, Ant Design, IONIC и Tailwind CSS (мой любимый), и все будет зависеть от ваших знаний CSS и документация.
Не поймите меня неправильно; Я не говорю, что вам нужно быть мастером в CSS, чтобы использовать любой из этих фреймворков, но наличие основы с Flexbox, Grid, Position, media-queries окажет огромное влияние на ваше освоение любого из этих фреймворков.
Как вы выбираете свой фреймворк?
Помните, что основная цель любого из этих фреймворков — быстро и легко внедрить стиль на ваш веб-сайт и сделать разработку интерфейса более продуктивной и приятной.
Ремешок для ботинок
Один из самых популярных интерфейсных фреймворков с готовым динамическим шаблоном и множеством готовых к использованию компонентов. Почти все, от предупреждений до модальных окон и панелей навигации, поддерживается по умолчанию и упрощает разработку хорошо структурированных страниц для любого разработчика, даже без предварительного опыта работы с интерфейсом.
Он поддерживается сообществом из сотен разработчиков, обеспечивая стабильные выпуски и долгосрочную поддержку, а также хорошо документирован.
Пример панели навигации начальной загрузки:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs- toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>Для получения дополнительной информации о Bootstrap посетите:https://getbootstrap.com/docs/5.1/components/navbar/
Семантический интерфейс
Который использует уникальный подход, основанный на написании «человеческого-дружественного HTML». Другими словами, классы названы как можно ближе к тому, как человек говорил бы. Это делает написание HTML интуитивно понятным, особенно для новых разработчиков.
Пример семантического меню/панели навигации:
<div class="ui stackable menu"> <div class="item"> <img src="/images/logo.png" /> </div> <a class="item">Features</a> <a class="item">Testimonials</a> <a class="item">Sign-in</a> </div>
Дополнительные сведения о семантическом пользовательском интерфейсе см. по адресу:https://semantic-ui.com/collections/menu.html#menu
Семантическое меню пользовательского интерфейса по сравнению с навигационной панелью BootsTrap выглядит более привлекательным с меньшим количеством кода и более простым для понимания, давайте посмотрим, как они выглядят в браузере:
Как видите, навигационная панель BootsTrap полностью адаптивна, а для Semantic UI вам потребуются дополнительные настройки, чтобы сделать ее адаптивной. Теперь BootsTrap выглядит немного привлекательнее, если вы не хотите работать над отзывчивостью, верно?
Давайте продолжим сравнивать и посмотрим, как работают другие фреймворки.
Бульма
Это платформа с открытым исходным кодом, которая предоставляет готовые к использованию интерфейсные компоненты, которые можно легко комбинировать для создания адаптивных веб-интерфейсов. Bulma поставляется с соглашениями об именах, которые просты в использовании и запоминании, а также имеет чистый и современный дизайн — даже если вы не измените значения по умолчанию, вы получите великолепно выглядящую веб-страницу.
Пример панели навигации Bulma:
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" width="112"
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria- expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">Home</a>
<a class="navbar-item">Documentation</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">More</a>
<div class="navbar-dropdown">
<a class="navbar-item">About</a>
<a class="navbar-item">Jobs</a>
<a class="navbar-item">Contact</a>
<hr class="navbar-divider">
<a class="navbar-item">Report an issue</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary">
<strong>Sign up</strong>
</a>
<a class="button is-light">Log in</a>
</div>
</div>
</div>
</div>
</nav>
Материализоваться
Materialize CSS — это CSS-фреймворк с открытым исходным кодом, который позволяет легко реализовать внешний вид материального дизайна в ваших собственных проектах.
Он включает в себя множество интерактивных компонентов, которые ускоряют разработку и помогают предоставить пользователям отличный опыт. Анимации используются во всей структуре для обеспечения визуальной обратной связи с пользователями таким образом, чтобы с ними было легко работать разработчикам.
Пример панели навигации Materialize:
<nav>
<div class="nav-wrapper">
<a href="#!" class="brand-logo">Logo</a>
<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">Javascript</a></li>
<li><a href="mobile.html">Mobile</a></li>
</ul>
</div>
</nav>
<ul class="sidenav" id="mobile-demo">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">Javascript</a></li>
<li><a href="mobile.html">Mobile</a></li>
</ul>
Опять же, сравнивая четыре панели навигации и функциональность, Bulma и BootsTrap имеют отзывчивость на месте, но все строки кода могут быть пугающими поначалу, а семантический пользовательский интерфейс короткий; тем не менее, вам нужна дополнительная работа, чтобы добавить отзывчивости. У Materialize отзывчивость, а код выглядит проще для понимания, так какой же фреймворк вам следует выбрать?
Не совсем, Materialise может быть хорошим началом, но это не значит, что вам нужно отказаться от других фреймворков. У каждого фреймворка есть преимущества и недостатки.
Итак, какой CSS Framework выбрать?
На мой взгляд, вам следует начать с BootsTrap или Bulma; эти фреймворки хорошо документированы и объясняют, как все работает, а по пути вы узнаете, как работают некоторые элементы CSS, и у вас будет адаптивный и современный сайт.
После того, как вы почувствуете себя комфортно с одной из этих платформ, вам будет проще перейти на другую платформу и изучить более продвинутые платформы, такие как Foundation, IONIC или Tailwind CSS.
Вывод
Я не говорю, что вам не следует использовать Semantic UI, Materialize или другие фреймворки, если вы чувствуете себя комфортно. Для вас будет полезнее иметь хорошо документированный фреймворк и объяснение стиля и компонента.
