Адаптивная вёрстка HTML+CSS двух столбцов в шаблоне Protostar Joomla 3

При публикации статьи с примерами моих работ создания сайтов столкнутся с тем, что рука уже не поднимается верстать в таблицу то, что можно сверстать с помощью div'ов. Однако, почитав статьи и посмотрев примеры, как верстать адаптивную вёрстку так, чтобы на мобильных телефонах блоки вставали один под другой при маленькой ширине экрана, наткнулся на то, что ничего из предлагаемого не работает. А всё, что может быть работает, сложно для публикации статей в Joomla. Однако, меня это не остановило. Вспомнив, что в шаблоне шаблоне Protostar для Joomla 3 такая вёрстка предусмотрена при публикации статей в виде блога, а значит будет работать и в статьях, так как требуемые стили уже подключены! Так и сделал и всё получилось! =)

В этой статье полностью опишу, как реализовать адаптивную вёрстку HTML+CSS двух столбцов в шаблоне Protostar для Joomla 3. Для тех, кто использует другие шаблоны, имеет смысл посмотреть, как реализована адаптивная вёрстка столбцов в их шаблонах, либо утянуть стили этой статьи к себе в вёрстку.

Итак, в шаблоне Protostar адаптивная вёрстка двух столбцов реализована примерно так, как указано в коде ниже. Хотя я в него внёс, кое-какие модификации, выкинув один атрибут, который не используется и вставив ширину для первого столбца, чтобы сделать его нужной мне ширины, так как в нём у меня располагается картинка с превьюшкой и его ширина не должна быть равна ширине второго столбца. В итоге получился такой вот HTML-код с классами CSS, которые, как я указал выше, присутствуют на странице сайта с шаблоном Protostar:

<div class="items-row cols-2 row-0 row-fluid">
 <div class="item column-1 span6" itemprop="blogPost" style="width: 330px;" itemtype="https://schema.org/BlogPosting">
  левый столбец
 </div>
 <div class="item column-2 span6" itemprop="blogPost" itemtype="https://schema.org/BlogPosting">
  правый столбец
 </div>
</div>

На этом можно было бы закончить, НО (!) текстовый редактор TinyMCE вырезает все атрибуты и получается совсем не то, что нужно.

Как обойти вырезку атрибутов в TinyMCE

Можно конечно залезть в базу данных в таблицу content и там ручками всё поправить, но мы не ищем лёгких путей, поэтому откроем настройки плагина TinyMCE в «Менеджере плагинов» Joomla 3. И вот тут Ахтунг! =)

• Переходим на вкладку «Набор 0». Это вкладка с настройками для админов и супер-юзверей =)
• Находим поле «Дополнительные валидные элементы» и в него вставляем
  • div[*] — это позволит разрешить абсолютно все атрибуты тегу div, или
  • div[атрибут1|атрибут2|атрибут3|атрибутN] — это позволит разрешить только указанные атрибуты (остальные будут беспощадно вырезаться редактором TinyMCE) в теге div.
• Сохраняем изменения в настройках плагина текстового редактора TinyMCE

Вот и всё! Теперь можно в HTML-код материала вставлять нашу разметку с адаптивной вёрсткой HTML+CSS двух столбцов, используя стили шаблона Protostar и текстовый редактор TinyMCE не будет её вырезать. =D

Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! ;)