Головна » Блоги » InstantCMS - переваги та недоліки системи » Адаптивна гумова розмітка

Адаптивна гумова розмітка

+1
Голосів: 1
Опубліковано: 2014 / 11 / 22
Переглядів: 240
Редагувалося: 3 рази — останній 25 листопада 2014
Вітаю!
Цей запис для тих, хто як і я ніяк не може підібрати гарну адаптивну розмітку. Перебрав, препробував більше десятка. На жаль, всі мали для мене якісь недоліки.
Кінець-кінцем зробив свою. Отже, що вона собою уявляє:
Розмітка - гумова + адаптив. Максимальна кількість стовпчиків: 12, з правим відступом в 2%. Поєднання ширин стовпчиків любе в межах 12.

html розмітки:
Код PHP:
  1. <div class="container">
  2. <div class="row">
  3. <div class="col-1">
  4. <p>1</p>
  5. </div>
  6. <div class="col-11 last">
  7. <p>11</p>
  8. </div>
  9. </div>
  10. </div>
  11.  
Пояснення:
.container - слугує тільки для одного: обмеження максимальної ширини (якщо потрібно)
.row - рядок стовпчиків; має ширину в 96% від максимальної ширини container з боковими відстуами в 2%
.col-1 - стовпчик мінімальної ширини (6.5% від ширини батьківського блоку з правим відступом в 2% від тієї ж ширини;)
.last - прибирає боковий відступ у останнього стопчика (можна не вказувати для першого рівня вкладенності. якщо не збираєтеся підтримувати
ІЕ 7-8; є обов'язковим для 2-го і більше рівнів вкладеності)
Пи роздільній здатності 767рх та менше, любий стовпчик займає всю ширину row
Владати стовпчики в стовпчики можна, при цьому ширина вкладанех та їх відступ вираховуються вже від ширини батьківського стовпчика. Якщо потрібно вкладати рядки без відступів в стопчик, можна використувавати клас row-in замість row (100% ширини батьківського блоку, без бокових відступів)
Демо розмітки тут
Приклад використання - шаблон Light для InastantCMS 2.1.2
Потестуйте, відгукніться. Наперед вдячний!

Читайте також:

Коментарі (0)

Немає коментарів. Ваш буде першим!