Почему мы перешли с Bootstrap на Grid CSS в 2020 году?
С момента создания первых версий Bootstrap прошло уже четыре года. Более двух лет мы пользовались этим фраемворком, который служил нам верой и правдой упрощая разработку сайта и его адаптивной версии. Однако, время не стоит на месте, именно поэтому в начале 2020 года мы занялись поискам более удобного способа, который упростил бы разработку сайта. Так мы и познакомились с Grid Css Layout. Сегодня пошел третий месяц, как мы отказались от Bootstrap и полностью перешли на CSS Grid, поэтому делимся впечатлениями.
- Сколько скриптов нужно для работы Grid Css Layout или Bootstrap?
- Основные различия разметки между Grid Css Layout и Bootstrap
- Гибкость и отсутствие ограничений при создании шаблона
- Преимущества Grid Css при создании адаптива
- Так что же лучше? Bootstrap или Grid Css.
Сколько скриптов нужно для работы Grid Css Layout или Bootstrap?
Одни из важнейших факторов, который влияет на скорость загрузки сайта это количество подгружаемых стилей и скриптов. Как вам, наверное, уже известно, для полноценной работы Bootstrap требовалось подключение CSS стиля, который отвечал за внешний вид, и позиционирование блоков. А в 60% случаев была необходимость подключения js скрипта, который отвечал за функциональную часть работы фраемворка.
С Grid Css Layout ситуация обстоит значительно лучше. Вам не нужно подключать ничего, так как все современные браузеры поддерживают язык гридов по умолчанию. При этом, нас очень порадовало что практически все версии браузеров включили поддержку, что значительно сократило время на создание кроссбраузерной верстки.
Посмотрите таблицу поддержки Grid Css Layout среди браузеров:
Основные различия разметки между Grid Css Layout и Bootstrap
Нас всегда раздражало огромное количество классов из серии col-md-6, col-4 или col-xs-12, порой они так забивали исходный код, что мы начинали путаться в нем. А использование обязательного класса row казалось глупым и не логичным. Представим, что нам нужно создать простую структуру блоков и у нас есть выбор, написать их на Bootstrap или же на Grid Css Layout. Приступим:
Как это выглядит на Bootstrap:
<body>
<div class="row">
<div class="col-md-12">
<header>Я буду шапкой сайта</header>
</div>
<div class="col-md-12">
<nav>Я буду меню сайта</nav>
</div>
<div class="col-md-6">
<h1>Я заголовок</h1>
<p>Я основной текст статьи</p>
</div>
<div class="col-md-6">
<img src="image.jpg" alt="Я картинка" />
</div>
<div class="col-md-12">
<footer>Я буду футером сайта</footer>
</div>
</div>
</body>
А вот так мы напишем код с использованием Grid Css Layout:
<body>
<header>Я буду шапкой сайта</header>
<nav>Я буду меню сайта</nav>
<section>
<h1>Я заголовок</h1>
<p>Я основной текст статьи</p>
</section>
<img src="image.jpg" alt="Я картинка" />
<footer>Я буду футером сайта</footer>
</body>
<style>
body {
display: grid;
grid-template-columns: 1fr 1fr;
}
header {
grid-column: 1/3;
grid-row: 1/2
}
nav {
grid-column: 1/3;
grid-row: 2/3;
}
section {
grid-column: 1/2;
grid-row: 3/4;
}
img {
grid-column: 2/3;
grid-row: 3/4;
}
footer {
grid-column: 1/3;
grid-row: 4/5;
}
</style>
Как вы уже поняли, все параметры позиционирования сайта задаются через CSS стили. Это позволяет значительно экономить время при создании сайта, а так же добавляет больше возможностей в кастомизации и редактировании исходного кода. С Grid Css вы можете забыть о ровных сетках и банальных ограничений верстки! Если вы хотите поменять блоки местами, то для этого достаточно поменять, буквально пару цифр, который отвечают за позицию определенного элемента. При этом лесть в код больше нет необходимости. Согласитесь — это правда удобно!
Гибкость и отсутствие ограничений при создании шаблона
Каждый раз, когда я вспоминаю эти 12 колонок от Bootstrap непроизвольно начинаю смотреть дизайн макет и думать. Господи, только бы не 5 колонок, иначе опять придется писать «костыль». Создатели Grid Css позаботились о нервах разработчиков, поэтому убрали какие либо ограничение на создание колонок. Хотите пять? — Будет пять! Хотите 25? Будет 25! Все ограничивается лишь вашей фантазией.
Преимущества Grid Css при создании адаптива.
Адаптив — это как вишенка на торте. Хороший сайт обязан открываться корректно на любом экране. Безусловно, писать адаптив на Bootstrap было довольно просто. Для создания условий мы прописывали в коде параметры xs, sm и другие. Но у нас была очень жесткая привязка к разрешению экрана. Часто бывало, что на определенном устройстве не было возможности расставить блоки в нужном порядке, и приходилось пользоваться «костылями».
При использовании Grid Css мы сами определяем. Где, как и на каком устройстве нам показывать блоки. При этом мы можем указать размеры, местоположение и любые другие параметры.
Так что же лучше? Bootstrap или Grid Css.
В этой статье мы не заставляем вас отказываться от Bootstrap, однако на наш взгляд он морально устарел и больше не годится для современной вертки. Bootstrap имеет огромное количество ограничений, которые не позволяют создавать шаблоны с неровной сеткой. В Grid Css мы видим будущее. И только благодаря переходу на Grid Css мы значительно повысили качество наших работ.
Количество прочтений: 118