Будущее 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

Получить нашу объясненную книгу 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.

Похожие

PlayBuzz - это следующий Buzzfeed?
Это 29-й по популярности веб-сайт в США и седьмой по популярности среди мобильных устройств. Познакомьтесь с Шаулом Ольмертом, человеком, стоящим за PlayBuzz. Возможно, вы не слышали о техническом предпринимателе Шауле Ольмерте, но его двухлетний веб-сайт теперь 29-е место по популярности сайт в Америке. Его небольшая тель-авивская компания работает
Роулинг - не только Гарри Поттер - Город Женщин
Новая книга JK Rowling The Casual Vacancy поступит в британские книжные магазины 27 сентября 2012 года! Это первая книга для взрослых после серии о Гарри Поттере Новая книга JK Rowling The Casual Vacancy
Планы изменений в алгоритме, который определяет содержание в ленте новостей Facebook предал на прошлой неде...
Планы изменений в алгоритме, который определяет содержание в ленте новостей Facebook предал на прошлой неделе Также подтвердил руководитель службы Марк Цукерберг. Цукерберг объявил, что в ближайшие месяцы в новостях на верхних позициях будет в основном контент от друзей или семьи пользователя. Таким образом, материалы, опубликованные компаниями и издателями,
Понимание Bootstrap: как это работает и что нового - SitePoint
... Bootstrap - это значительное изменение по сравнению со всеми предыдущими версиями. Это фреймворк для мобильных устройств, и он может претендовать на звание одной из лучших фреймворков CSS для создания адаптивных дизайнов сайтов. Поскольку Bootstrap является платформой для мобильных устройств, по умолчанию все, что вы разрабатываете или создаете, будет совместимо с мобильными устройствами или адаптивно. Разве это не круто? Начиная Bootstrap
Хотя многие в отрасли считают, что Биткойн превзойдет золото с точки зрения инвестиций и популярно...
Хотя многие в отрасли считают, что Биткойн превзойдет золото с точки зрения инвестиций и популярности, аналитик Morningstar не уверен в этом. Когда в декабре прошлого года Биткойн катался на этой волне за $ 20 000, все хотели поучаствовать. Несмотря на то, что виртуальная валюта сейчас находится далеко от этой цены, она все еще привлекает внимание
REST для разработчиков Java: Часть 4. Будущее за RESTful
С точки зрения ИТ-менеджера, REST может быть просто еще одним способом перемещения информации, но без всех инструментов, связанных с SOAP. В этой заключительной статье из серии REST для разработчиков на Java Брайан Слеттен рассказывает об этом мифе и нескольких других о REST, рассматривая его роль в новых архитектурах, таких как семантическая сеть. По его словам, переход к REST - это не отход от SOAP, а охват всей сети как внутри, так и за пределами предприятия. До сих пор в
Сегодня стартует официальная продажа нового Xperia XZ3. По этому случаю Sony подготовила очередной ...
Сегодня стартует официальная продажа нового Xperia XZ3. По этому случаю Sony подготовила очередной выпуск программы Fantester и подарок для киноманов. Сегодня начались официальные продажи нового смартфона Sony.
Мемориальная доска с посвящением на скамейках в парке Олвишка. Вы можете иметь это, и вы
Семнадцать человек уже стали покровителями парка Олива. Именно их тарелки украшали скамейки в самом красивом саду Гданьска. «Хорошего дня» - одно из посвящений. Ценные пещерные жемчужины
Позиционирование сайта за 500 злотых в месяц? Возможно ли это вообще?
Можно ли разместить сайт, услугу или магазин за 500 злотых или меньше? Я получаю такие запросы много раз. После публикации статьи оживленная дискуссия была на стене ФБ. колько стоит позиционирование? , Ниже я постараюсь максимально упрощенно представить, что можно сделать для этой суммы. С точки зрения владельца сайта, необходимо выполнить действия по позиционированию: Linkbuidling
Как просмотреть исходный код HTML в Microsoft Word
Обновлено: 24.01.2008 от Computer Hope Microsoft Word поддерживает возможность сохранения любого документа в виде веб-страницы. Однако, хотя можно сохранить документ в виде веб-страницы, нет способа просмотреть исходный код в самых последних версиях Microsoft Word. Microsoft Word 2007, 2010 и более поздние версии Как упомянуто выше, нет никакого
Internet Explorer и блочная модель CSS
... CSS, - это блочная модель CSS. Поскольку блочная модель - это то, что браузеры используют для вычисления общей ширины и высоты элемента, вполне понятно, что разные браузеры, выдающие разные результаты, могут быть как запутанными, так и разочаровывающими. Как работает блочная модель CSS, уже много раз объясняли другие. Тем не менее, и часто встречаются сайты, которые ожидают, что браузеры будут использовать нестандартный способ расчета размеров блоков в Internet Explorer. Вот почему я

Комментарии

Если существуют извращенцы, которые тайно фотографируют нижнее белье женщин на улицах - значит ли это, что женщина, которой не нравится, не должна выходить в юбке?
Если существуют извращенцы, которые тайно фотографируют нижнее белье женщин на улицах - значит ли это, что женщина, которой не нравится, не должна выходить в юбке? Голдберг приводит пример с известной спортивной репортером ESPN Эрин Эндрюс (Erin Andrews), которая стала жертвой тайной видеосъемки в номере отеля. Инцидент произошел 2008 года, когда Майкл Баретт сделал несколько видео, на которых она полностью обнажена. Позже видео появились в интернете и стали предметом длительного судебного разбирательства,
Приносим извинения за неудобства, но не могли бы вы отключить блокировку рекламы?
Приносим извинения за неудобства, но не могли бы вы отключить блокировку рекламы? Наши объявления актуальны и ненавязчивы, они появляются только сверху и сбоку, а не в содержании. Они также не включают автоматическое воспроизведение аудио, они действительно не испортят вам удовольствие от сайта. Заранее спасибо! Хотите, чтобы это
Это все еще не решает проблему?
Это все еще не решает проблему? Снова перейдите к драйверу контроллера семейства Realtek PCIe и щелкните на этот раз на вкладке « Дополнительно ». Мы изменим три настройки: Установите для Auto Disable Gigabit значение Disable . Установите Зеленый Ethernet на Отключить . Установите для энергосберегающего Ethernet значение
Разве это не круто?
Разве это не круто? Начиная Bootstrap имеет новый дизайн веб-сайта, который построен с использованием последней версии платформы Bootstrap (версия 4 на момент написания статьи). Вы можете включить предварительно скомпилированную версию Bootstrap с помощью CDN или загрузить файл архива Вот
Разве это не защитит пользователей в Китае?
Разве это не защитит пользователей в Китае? Все зависит от обстоятельств, при которых компания предоставит GCBD - и властям Китая - доступ к дешифруемым данным о пользователях iCloud. Когда пользователи принимают Условия обслуживания для iCloud в Китае они соглашаются разрешить передачу своей информации и контента правоохранительным органам «если это требуется по закону». Примечательно,
Как пользователь, это то, чего вы не ожидаете - какую цель преследовала эта ссылка?
Как пользователь, это то, чего вы не ожидаете - какую цель преследовала эта ссылка? Это приводит к тому, что пользователи запутываются. По этой причине текущая страница никогда не должна быть связана с меню. Вы можете удалить его полностью или даже лучше выделить его (например, окружив его элементом <strong>) - это дает пользователям визуальную подсказку, а также говорит слепым посетителям, что это очень важно - это
Итак, я решил получить ссылки за деньги?
Итак, я решил получить ссылки за деньги? ? Мне осталось 400 злотых. Я думал сделать это сам, но я не знаю. Контент-маркетинг на сайте 99% сестер говорят, что я должен создать блог, сделать описания, позаботиться об уникальных статьях и так далее. Если у меня все хорошо, я сам напишу статьи для блога. Но большинство будет аутсорсинг это? В моем распоряжении 400 злотых, и мне нужно работать с социальными сетями и покупать некоторые инструменты.
Где вы нашли это?
Где вы нашли это?! После того, как вы правильно настроили конфигурацию сборки и перестроили все, вы избежите многих ошибок во время разработки. Хотя не все из них. Visual Studio имеет неприятную привычку загружать сборки, где бы они ни находились, в соответствии с вашими требованиями, независимо от места, из которого вы связались в сборке. Если вы посмотрите в файле проекта для проекта C # Visual Studio (.csproj-файл), вы увидите элемент XML с именем <HintPath>
Насколько, на твой взгляд, распространенная это субкультурных явление в Беларуси?
Насколько, на твой взгляд, распространенная это субкультурных явление в Беларуси? Антон: У меня смешанное мнение о тамблер: то нейтральное отношение, то я их дико ненавижу. Скажу, что тамблер и «печальная» культура развита во всем мире, и большинство - в частности, девушек - затронула эта мода. Мое мнение положительное местами по причине того, что вид так называемых тамблергёрл бывает красивым, местами даже сексуальным. А отрицательное мнение от того, что девушки
Каковы ваши цели на будущее?
Каковы ваши цели на будущее? Моя цель - сделать PlayBuzz одним из мировых лидеров в области публикации контента. В 2014 и 2015 годах мы сфокусируемся на расширении ассортимента наших продуктов, включив в него широкий спектр форматов контента, чтобы наши партнеры могли продолжать и внедрять инновации с их великолепным контентом. Быстрые изменения в отрасли и высокая скорость инноваций заставляют нас никогда не сидеть сложа руки, чтобы наслаждаться нашим текущим успехом, а продолжать
Понравилось это?
Понравилось это? Потратьте секунду, чтобы поддержать Pocketables на Patreon!

Не так много, правда?
Разве это не круто?
Возможно ли это вообще?
Можно ли разместить сайт, услугу или магазин за 500 злотых или меньше?
?колько стоит позиционирование?
Если существуют извращенцы, которые тайно фотографируют нижнее белье женщин на улицах - значит ли это, что женщина, которой не нравится, не должна выходить в юбке?
Приносим извинения за неудобства, но не могли бы вы отключить блокировку рекламы?
Это все еще не решает проблему?
Разве это не круто?
Разве это не защитит пользователей в Китае?