Основная разметка страницы и брекпоинты

Основная разметка страницы и брекпоинты
15 Сентября 2017
      
23


Наверное многие из Вас пробовали или использовали различные гриды для ускорения верстки но всегда чего-то не хватало или что-то было не так. Фреймворк 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-*, где * это количество занимаемых колонок), которые можно так же поделить.

В данной статье рассмотривается основное устройство деления и поведения блоков, адаптация блоков под разные разрешения экранов (2560px - 320px):
<!DOCTYPE html>     <html>         <head>             <meta charset="utf-8">         </head>         <body>             <div class="row">                 <div class="box">box</div>                 <div class="box-11">box-11</div><div class="box-1">box-1</div>                 <div class="box-10">box-10</div><div class="box-2">box-2</div>                 <div class="box-9">box-9</div><div class="box-3">box-3</div>                 <div class="box-8">box-8</div><div class="box-4">box-4</div>                 <div class="box-7">box-7</div><div class="box-5">box-5</div>                 <div class="box-6">box-6</div><div class="box-6">box-6</div>             </div>         </body>     </html>
Основная разметка деления колонок
box-12
box-11
box-1
box-10
box-2
box-9
box-3
box-8
box-4
box-7
box-5
box-6
box-6
<!DOCTYPE html>     <html>         <head>             <meta charset="utf-8">         </head>         <body>             <div class="row">                 <div class="box-4">box-4</div><div class="box-8">box-8</div>             </div>             <div class="row rowr">                 <div class="box-4">box-4</div><div class="box-8">box-8</div>             </div>             <div class="row">                 <div class="box-4">box-4</div><div class="box-8">box-8</div>             </div>             <div class="row rowr">                 <div class="box-4">box-4</div><div class="box-8">box-8</div>             </div>         </body>     </html>
Повернем порядок отображения блоков используя класс "rowr" "box-4" и "box-8"
box-4
box-8
box-4
box-8
box-4
box-8
box-4
box-8
<!DOCTYPE html>     <html>         <head>             <meta charset="utf-8">         </head>         <body>             <div class="row col">                 <div class="box">первый блок</div>                 <div class="box">второй блок</div>                 <div class="box">третий блок</div>                 <div class="box">четвертый блок</div>                 <div class="box">пятый блок</div>             </div>         </body>     </html>
Выстроим 5 блоков в колонку добавив к классу "row" класс "col"
первый блок
второй блок
третий блок
четвертый блок
пятый блок
<!DOCTYPE html>     <html>         <head>             <meta charset="utf-8">         </head>         <body>             <div class="row colr">                 <div class="box">первый блок</div>                 <div class="box">второй блок</div>                 <div class="box">третий блок</div>                 <div class="box">четвертый блок</div>                 <div class="box">пятый блок</div>             </div>         </body>     </html>
Повернем порядок отображения добавив класс "colr"
первый блок
второй блок
третий блок
четвертый блок
пятый блок
Пример верстки нескольких колонок. Стандартный отступ у блоков box-* 15px справа и слева
<!DOCTYPE html>     <html>         <head>             <meta charset="utf-8">         </head>         <body>             <div class="row">                 <div class="box-3">                     <div>первый блок</div>                 </div>                 <div class="box-3">                     <div>второй блок</div>                 </div>                 <div class="box-3">                     <div>третий блок</div>                 </div>                 <div class="box-3">                     <div>четвертый блок</div>                 </div>             </div>         </body>     </html>
первый блок
второй блок
третий блок
четвертый блок