Модульная сетка CSS

Сетки - это еще один компонент мира дизайна. Есть что-то гораздо более приятное в перемещении по странице сайта, на котором используется сетка для расположения содержимого, чем по странице, на которой игнорируются все принципы C.R.A.P, а элементы накиданы как попало.

В этом разделе вы узнаете, как использовать CSS для расположения элементов страницы с использованием модульной сетки.

Пункты для размышления

  • Почему сетки эффективны при создании макета сайта?
  • Какие основные типы сеток используются сегодня?
  • Как создать свою собственную сетку (на бумаге)?
  • Как воплотить вашу собственную сетку в CSS?

Задание

  1. Прочитайте про основы сеток от CSS-Tricks
  2. Прочитайте про "резиновые" (Fluid Grids) макеты от A List Apart
  3. Просмотрите урок по адаптивным сеткам с Media Queries от TutsPlus. Нет необходимости действительно создавать это, но почему бы и не попробовать?
  4. Взгляните на систему сеток 960 (The 960 grid system), которая является базовой системой сеток, которая может быть действительно полезной при создании макетов. У них есть примеры и возможность загрузки шаблонов, так что вы можете распечатать их и использовать для создания своего сайта. Просто просмотрите этот сайт, мы изучим Bootstrap и систему сеток Foundation позже.
  5. Прочитайте про модульную сетку на htmlbook на русском

Дополнительные ресурсы

Этот раздел содержит полезные ссылки на дополнительные материалы. Они не обязательны, так что расценивайте их как нечто полезное, если вы хотите поглубже погрузиться в тему.

Поделиться уроком: