Будущее Joomla - это CSS Grid, а не Bootstrap 4

1. Bootstrap 2 против Bootstrap 4
2. CSS Grid Layout
3. Преимущества использования CSS Grid Layout
4. Получить нашу объясненную книгу CSS Grid
5. Более полезные руководства по CSS Grid

Joomla 4 в данный момент находится в разработке. До выхода Joomla 4 может пройти много месяцев, но мы уже работаем над совместимостью шаблонов Joomlashack.

Одним из наиболее важных изменений в Joomla 4 является обновление Bootstrap 2 до Bootstrap 4. Однако мы обнаружили, что Joomla 4 не будет полагаться исключительно на Bootstrap.

Joomla 4 также будет полагаться на CSS Grid Layout, метод CSS, который произвел революцию в индустрии веб-дизайна.

Bootstrap 4 и CSS Grid Layout будут инструментами, используемыми для дизайна внешнего интерфейса в Joomla 4. Joomla будет полагаться на Bootstrap 4 для пользовательского интерфейса и CSS Grid для макетов внешнего интерфейса. Команда Joomla вносит это изменение, потому что считает, что CSS Grid будет более ориентирован на будущее. В Joomla 3 они были заблокированы в старой версии Bootstrap. Надеюсь, что этот новый подход позволит избежать подобных проблем с Joomla 4.

Bootstrap 2 против Bootstrap 4

Таким образом, Boostrap 2 против Boostrap 4 означает: плавать против flex для создания макетов. Прежде чем говорить о CSS Grid, давайте сравним две версии Bootstrap, которые являются частью Joomla:

• Bootstrap 2 поддерживается в Joomla 3.
• Bootstrap 4 будет поддерживаться в Joomla 4.

Пример ниже - это сетка с двумя столбцами в Bootstrap 2:

<div class = "container"> <div class = "row"> <div class = "span6"> </ div> <div class = "span6"> </ div> </ div> </ div>

Этот код выведет следующую схему:

Теперь это тот же пример, но с использованием Bootstrap 4:

<div class = "container"> <div class = "row"> <div class = "col-md-6"> </ div> <div class = "col-md-6"> </ div> </ div> </ div>

Основное отличие состоит в том, что префиксы размера столбца изменились с span на col-md-. Вы можете заменить col-md на col-sm для нацеливания на маленькие экраны или на col-lg для больших экранов или на col-xl для очень больших экранов.

Вы даже можете использовать более одного класса для определения разного размера столбца в зависимости от ширины экрана. Это позволяет вам больше контролировать отзывчивость!

<div class = "col-md-6 col-lg-12"> </ div>

Приведенный выше пример означает, что ширина колонки будет 50% на средних экранах (768 пикселей и выше) и 100%, когда минимальная ширина экрана составляет 992 пикселя.

CSS Grid Layout

CSS Grid layout - это система макетов сетки, поддерживаемая все основные браузеры это искажает подход, который мы все знаем при создании макетов. CSS Grid не является фреймворком.

Обычный способ создания столбцов и строк при использовании Bootstrap (и в целом с другими популярными CSS-фреймворками) - это вызов CSS-классов в нашей HTML-разметке, чтобы определить, какие элементы являются строками, и, если мы используем столбцы, размер каждого из них.

CSS Grid Layout работает противоположным образом. У вас есть более краткая разметка HTML, и с помощью CSS вы решаете, какие элементы - строки, столбцы и размеры. Там нет плавающих или гибких свойств CSS.

Давайте перенесем макет с двумя столбцами из наших предыдущих примеров Bootstrap, но используя только Grid CSS Layout.

HTML:

<div class = "container"> <div> </ div> <div> </ div> </ div>

CSS:

.container {display: grid; сетка-шаблон-столбцы: 50% 50%; сетка-шаблон-строки: 100px; }

В приведенном выше примере вы можете заметить более краткую разметку HTML. Мы избавились от CSS-столбцов и классов строк, а также от контейнера строк. Эти изменения были определены в CSS:

• grid-template-columns: количество столбцов и ширина каждого из них. Два столбца, ширина 50% для обоих.
• grid-template-row: высота для каждой строки. 100 пикселей в этом случае.

Свойство display, использующее «grid» в качестве значения, определяет дочерние элементы div для .container в качестве элементов макета.

Конечно, этот короткий пример очень прост и пропускает множество других функций, таких как поведение реагирования, которое может обеспечить Bootstrap 4. Мы намерены написать эту статью в качестве введения в тему.

Вы можете увидеть CSS Grid в действии в Cassiopeia, шаблоне внешнего интерфейса по умолчанию для Joomla 4 ,

Престижность за разработку этого шаблона принадлежит Кьярану Уолшу и Чарли Лоддеру. Помогите им с тестированием Cassiopeia во всех браузерах.

Вот что сказал Кьяран об этом улучшении:

Сетка CSS отделяет HTML от макета, позволяя перемещать макет исключительно в CSS. Этот PR перемещает макет шаблона внешнего интерфейса [Cassiopeia] из Bootstrap в CSS Grid. [CSS Grid] используется только в шаблоне внешнего интерфейса [Cassiopeia]. Мы неохотно используем его в шаблоне бэкэнда из-за некоторых проблем совместимости и того факта, что производительность немного меньше. Учитывая широкий спектр элементов в бэкэнде, Bootstrap отлично подходит для нас.

Преимущества использования CSS Grid Layout

Вы можете спросить, почему мы должны использовать CSS Grid Layout.

Я вижу следующие два ключевых преимущества CSS Grid по сравнению с Bootstrap:

• Упрощенный HTML. Вы можете писать меньше HTML и генерировать тот же результат, который вы обычно получаете с помощью Bootstrap 4 или других CSS-фреймворков.
• Больше контроля в дизайне через CSS. Даже когда мы знаем, что CSS отвечает за дизайн, фреймворки требуют, чтобы мы также полагались на HTML-разметку. CSS Grid получает больший контроль над дизайном и намного меньше зависит от классов CSS, которые вы выводите с помощью разметки HTML.

Вот что сказал Николас Дионисопулос из Akeeba Backup о преимуществах использования CSS Grid:

Grid не требует тонны CSS и JS для работы, поскольку он является частью самой веб-платформы. Это означает, что вы можете сэкономить 80% времени загрузки страницы на медленных соединениях (3G или медленнее), что делает Joomla! конкурентный. Сетка не требует JavaScript. Отсутствие JS означает, что сайт будет работать каждый раз. Попробуйте посмотреть, насколько отзывчивым является сайт BS2 / 3/4, если вы отключите JS. Не так много, правда? Более того, когда вы хотите изменить порядок столбцов на экранах меньшего размера.

Получить нашу объясненную книгу CSS Grid

Все участники Joomlashack Pro получают доступ к нашей книге «CSS Grid Explained». Все, что вам нужно сделать, это зарегистрироваться на расширение Joomlashack, шаблон или обучение.

В этой короткой книге вы познакомитесь с ключевыми идеями CSS Grid. Эта книга в лучших традициях OSTraining. Там нет длинных плотных параграфов теории. Вы берете книгу и сразу начинаете писать код.

В первой главе мы начнем с основной терминологии. Вы узнаете разницу между Grid Areas и Grid Cells, между Grid Tracks и Grid Gaps.

Затем, используя практический подход, вы начнете создавать CSS-гриды. В этой книге 9 различных упражнений. Вы создадите все, от самой простой CSS Grid до полного макета сайта.

Более полезные руководства по CSS Grid

Резюме

Если вы создаете шаблон в Joomla 4 или создаете макет внешнего интерфейса для расширения, не спешите использовать Bootstrap 4. Вместо этого вы должны полагаться на CSS Grid.

Это не означает, что все шаблоны Joomla 4 откажутся от Bootstrap. Есть несколько веских причин, по которым дизайнеры будут и впредь полагаться на Bootstrap. Например, мы можем продолжать полагаться на шаблоны Bootstrap для Joomlashack, чтобы нашим пользователям было проще обновлять.

Тем не менее, будущее ясно. В долгосрочной перспективе будущее внешнего интерфейса Joomla - CSS Grid.

Похожие

Комментарии