Простой фреймворк для адаптивной верстки

В предыдущих двух статьях, мы рассмотрели принцип адаптивной верстки под мобильные устройства. За полгода было сверстанно несколько проектов с учетом мобильных устройств. И пришли к некому фреймворку, которые значительно сэкономит время при быстрой адаптации сайта под смартфоны. При этом фреймворк получился гениально простым.

Шаг №1. Указываем viewport

<meta name="viewport" content="width=device-width, initial-scale=1">

Об этом можно почитать в статье Адаптация сайта на мобильных устройствах.

Шаг №2. Подключаем фреймворк.

Вставляете код в ваш LESS или SCSS файл:

@media (max-width : 800px) {
  .fluid {
	float              : none !important;
	width              : auto !important;
	margin-left        : 0 !important;
	margin-right       : 0 !important;
	max-width          : 100% !important;
	position           : static !important;
	height             : auto !important;
	-webkit-box-sizing : border-box;
	-moz-box-sizing    : border-box;
	box-sizing         : border-box;
	& + .fluid {
	  margin-top : 1rem !important;
	}
  }
  .fluid__none {
	display : none !important;
  }
}

Шаг №3. Используем фреймворк.

При использовании данного фреймворка Все блоки в адаптивном шаблоне следуют друг за другом на небольших разрешениях, таким образом шаблон выглядит как общий поток, без боковых панелей. Идут один за другим.

В демке есть несколько плавающих блоков (левая и правая колонка, и два текстовых блока в подвале, пункты меню). Наша задача — при просмотре на мобильном устройстве, убрать свойства float и/или position:absolute. Для этого к блокам добавим класс fluid.

Клаcс fluid убирает эти свойства, что видно из кода выше.

Также убирает ограничение по ширине и высоте. Например, шапка сайта имеет ограничение по высоте, а боковые колонки имею ограничение по ширине. При адаптивной верстки, не должно быть жестких ограничений ни по высоте, ни по ширине. В таком случае, браузер мобильного устройства будет автоматически подстраивается под разрешние дисплея, без дополнительного участия CSS.

В случае, когда один за другим следуют плавающие блоки, между ними появляется внешний верхний отступ, что бы не было визуального склеивания.

Если необходимо, скрыть какой-то блок/-и, то просто добавьте класс fluid_none к классу элемента.

Шаг №4. Пример использования

<div class="b__leftside fl fluid">
    <div class="b__leftside-item">
        <div class="b__leftside-item-title">
            Блок левой колонки.
        </div>
        <div class="b__leftside-item-body">
            <p>Проблема адаптивной верстки весьма легко решается. Для любых задач мы придумали гениально-простой  фреймворк, состоящий из 26 строчек кода.</p>
            <p>Достаточно любому плавающему или абсолютному блоку добавить класс <em>fluid</em>, и он станет элемент потока страницы.</p>
        </div>
    </div>
    <div class="b__leftside-item">
        <div class="b__leftside-item-title">
            Блок левой колонки с картиночкой.
        </div>
        <div class="b__leftside-item-body">
            <p>Сюда можно воткнуть все что угодно. Например, резиновая картиночка:</p>
            <img src="temp/cat1.jpg" alt="Котик" class="fi"/>
            <p>Что бы картинка стала резиновой, мы ей добавляем класс <em>fi</em></p>
        </div>
    </div>
</div>

 

Начать проект вместе с нами
Заполните форму и отправьте
нам сообщение!
Если у Вас возникли вопросы, предложения, либо Вы желаете оформить заявку на заказ услуги — Добро пожаловать!
Контакты:
Бронзовые партнеры October CMS:
Chris standing up holding his daughter Elva