Coolrow Grid 2.0 - Фреймворк для быстрой адаптивной верстки
Наверное многие из Вас пробовали или использовали различные гриды для ускорения верстки но всегда чего-то не хватало или что-то было не так. Фреймворк Coolrow разработан с целью добиться максимальной совместимости браузеров и удобства использования фреймворка верстальщиком с любым уровнем опыта и знаний в веб разработке.
Основой Coolrow 2.0 является flex и inline-flex, с помощью которого можно расположить блоки в одну линию либо по направлению осей X и Y.
В первой версии фреймворка, чтобы убрать отступы между блоками, нужно было обнулять размер шрифта, в Coolrow 2.0 этого делать уже не нужно! Flexbox состоит из родительского контейнера и дочерних блоков. Дочерние блоки выстраиваются в строку или столбик, а оставшееся свободное пространство распределяется между ними различными способами.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="row">
<section class="box-10">
основной контент страницы
</section>
<aside class="box-2">
контент сайдбара
</aside>
</div>
</body>
</html>
Как и было в Coolrow 1.0 блок с классом "row" остается основным родительским контейнером.
Обертка содержит стили для определения максимальной ширины контейнера для экранов начиная с 4К (2560px) и меньше (1920px, 1680px и т.д.) вплоть до мобильных экранов.
Вся сетка делится на 12 колонок (box-*, где * это количество занимаемых колонок), которые можно так же поделить.