Адаптивная резиновая разметка

+56
3.16K
12 — ячеечная адаптивная резиновая разметка
Иллюстрация

Перепробовал больше десятка адаптивных разметок. К сожалению, все имели для меня какие-то недостатки.
В конце концов сделал свою (со своими недостатками laugh).
Итак, что собой представляет:
Разметка — резиновая + адаптив. Максимальное количество ячеек: 12 с правым отступом в 2%. Сочетание ширин ячеек — любое в пределах 12.
Пример вёрстки:
  1. <div class="container">
  2. <div class="row">
  3. <div class="col-1">
  4.  
  5. </div>
  6. <div class="col-11 last">
  7.  
  8. </div>
  9. </div>
  10. </div>
Объяснение:
.container – служебный блок (задание фона, максимальной ширины, рамка…)
.row — строка ячеек; имеет ширину в 96% от максимальной ширины container с боковыми отступами в 2%
.col-1 — ячейка минимальной ширины (6.5% от ширины родительского блока с правым отступом в 2% от той же ширины)
.last — убирает боковой отступ у последней ячейки (можно не указывать для первого уровня вложенности, если не собираетесь поддерживать ИЕ до 9; является обязательным для 2-го и более уровней вложенности). При разрешении 767рх и меньше, любая ячейка занимает всю ширину row.

Вкладывать строки в ячейки можно, при этом ихняя ширина и их отступы вычитаются уже от ширины родительской ячейки. Если нужно вкладывать строки без отступов в ячейку, можно использовать класс row-in вместо row (строка в 100% ширины родительского блока, без боковых отступов)
Пример использования для вёрстки «под Instant» – шаблон Light
Иллюстрация
Демо-страничка – здесь.
Группе, к которой вы принадлежите, запрещено просматривать этот скрытый текст

Надеюсь, упростит кому-то жизнь.
Очень надеюсь на подсказки и отзывы.
Выслушаю подсказки, подправлю, открою ссылку для всех.
Спасибо!
+1
Trang Trang 9 лет назад #
спасибо за очередной вклад в сообщество
0
Олег с клещами Олег с клещами 9 лет назад #
Неплохо. Будем тестить.
0
Олег с клещами Олег с клещами 9 лет назад #
Вкладывать строки в ячейки можно, при этом ихняя ширина и их отступы вычитаются уже от ширины родительской ячейки. Если нужно вкладывать строки без отступов в ячейку, можно использовать класс row-in вместо row
Вот это ценно! Спасибо.
0
СергейП СергейП 9 лет назад #
Благодарю smile Не даёшь уснуть... laugh Бум дерзать joke
0
Джехутимери Джехутимери 9 лет назад #
Полезная вещь, спасибо :)

Недавно тоже делал свою разметку, но на 16 колонок. Может, пригодиться Вам этот кусочек css, чтобы не пересчитывать в калькуляторе случае надобности
0
SE7EN SE7EN 9 лет назад #
Чувствую вещь нужная, кинте ссылок где почитать про верстку колонами, только чтоб написано было попроще
0
nikitka nikitka 9 лет назад #
Спасибо большое! Хорошая разметка!
+2
rookee rookee 9 лет назад #
а бутстрап то чем не устроил.. велосипеды изобретают всё ))
0
Raiden Raiden 9 лет назад #
Олег Васильевич я:
"Перепробовал больше десятка адаптивных разметок. К сожалению, все имели для меня какие-то недостатки."
Вероятно пробовал и были недостатки)
Олег Васильевич я Олег Васильевич я 9 лет назад #
Комментарий удален
Олег Васильевич я Олег Васильевич я 9 лет назад #
Комментарий удален
Олег Васильевич я Олег Васильевич я 9 лет назад #
Комментарий удален
+1
Loadырь Loadырь 9 лет назад #
Надеюсь, упростит кому-то жизнь.
Спасибо! Уже упрощаете.
Для себя ещё добавил
Спойлер
чтоб сделать блок с "col-3" и за-pull-ьнуть его вправо или разместить по центру, да за одно и текст в блоке выровнять, как захочу
Код PHP:
  1. <div class="col-3 pull-right"></div> или <div class="col-3 center-block text-right"></div>
Олег Васильевич я Олег Васильевич я 9 лет назад #
Комментарий удален
Олег Васильевич я Олег Васильевич я 9 лет назад #
Комментарий удален
0
scanread scanread 9 лет назад #
Только недавно присмотрелся, полпроцента или процент гуляет где-то. Расстояние между левым и центром меньше чем между правым и центром...


Так и не понял, откуда что убрать и куда добавить, дабы было одинаковое расстояние....
0
Петрмаг Петрмаг 8 лет назад #
Это адаптация вообще на какую ветку? 1 или 2?
Олег Васильевич я Олег Васильевич я 8 лет назад #
Комментарий удален

Еще от автора

Pioneer - скин для шаблона modern
Бред сумасшедшего на тему "Как бы выглядела InstantCMS 1-х сегодня".
Одна ёлка, немного снега и два Деда, играющихся в прятки
Ещё один вариант новогоднего украшения. Пока не замылено в сети (на эту минуту стоит только на 2-х сайтах)
Новогодние скидки
Всё платное за 50%
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.