Решил тоже не отставать от otherside и перевести сайт на адаптив. Конечно не так профессионально. Использовал фреймвёрк Pure (https://purecss.io), о котором так же писал ранее.
Как и бульма занимает крохи. Сначала хотел перевести сайт на бульма, но не нашёл примера той вариации, которая мне была нужна. А в Pure откопал. Думаю в любом фреймвёрке можно всё - дело в опыте.
Вобщем? чем мне понравился Pure - хорошо адаптирует многоколоночные страницы.
Сетка у него двух вариантов: 5-блочная или 24-блочная. Но можно сгенерировать и свою.
Границы переходов разрешений можно сгенерировать свои, либо оставить по умолчанию. Мне по умолчанию не понравились и я сделал свои.
Принцип работы Pure такой:
Есть класс отвечающий за определённое разрешение экрана и класс отвечающий за поведение блоков.
Комбинируя их можно легко настроить любый варианты.
Пример:
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4 pure-u-xl-1-4">
Здесь
u1 - отвечает за мобильную версию
u-sm - за таблетную
u-md - планшетную
u-xl - десктопную.
А цифры, которые идут далее отвечают за ширину отображения.
1 - весь экран
1-2 - полэкрана
1-3 - треть экрана
1-4 - четверть экрана
И т.д.
Основной подход, что мобильный вариант главный.
Т.е. если два блока подряд идут такие:
<div class="pure-u-1"></div><div class="pure-u-1"></div>
,
то они окажутся друг под другом при любом разрешении экрана.
а если так:
<div class="pure-u-1 pure-xl-1-2"></div> <div class="pure-u-1 pure-xl-1-2"></div>
,
то в десктопной версии они будут одной строкой, а в остальных случаях друг под другом.
Сайт который я делал https://coffeemollka.ru.
Обратите внимание на чёрные прямоугольники ( пока в виде картинок) - как они ведут себя при изменении размеров экрана. Сначала ужимаются, потом перестраиваются в три-два, и потом ещё раз но уже а в два-три.
Вобщем, хороший фреймворк. До этого пробовал темплейтс. Там так я не смог сделать.
