Сеточные системы CSS

Сеточные системы/фреймворки CSS — это потенциально спорный предмет разговора. Одни дизайнеры рекомендуют их, а другие ругают. Чтобы минимизировать количество писем с угрозами и оскорблениями в мой адрес, я скажу, что занимаю нейтральную позицию в этом вопросе. Хотя мне понятно, почему некоторые разработчики считают их лишними и неудобными из-за необходимости писать дополнительный код, я все же высоко ценю фреймворки за то, что они позволяют быстро создать прототип макета.

Вот несколько фреймворков CSS, которые предлагают разную степень «адаптивной» поддержки:

Q Semantic (http://semantic. gs);

О Skeleton (http://getskeleton.com);

Q Less Framework (http://lessframework.com);

О 1140 CSS Grid (http://cssgrid. net);

Q Columnal (http://www.columnal.com).

Среди перечисленных я предпочитаю сеточную систему Columnal, поскольку она наряду с медиазапросами включает встроенную «резиновую» сетку, а также задействует те же CSS-классы, что и 960.gs — популярная сеточная система с фиксированной шириной, с которой хорошо знакомо большинство разработчиков и дизайнеров.

ALPHA, OMEGA И ДРУГИЕ ОБЩИЕ СЕТОЧНЫЕ КЛАССЫ

Многие сеточные системы CSS задействуют CSS-классы для решения повседневных задач, связанных с макетами. Классы с именами row и container не требуют пояснений, однако существует и множество других классов, поэтому всегда проверяйте документацию ко всем сеточным системам на предмет любых классов, которые могут облегчить вам жизнь. Например, к числу прочих типичных классов, используемых в сеточных системах CSS, относятся alpha и omega — для первого и последнего элементов в строке соответственно (эти классы убирают отступы и поля), а также. col_x, где x — количество колонок, на которое должен простираться соответствующий элемент (например, .col_6 означает шесть колонок).

Быстрое создание сайта с использованием сеточной системы. Допустим, мы еще не создавали нашу «резиновую» сетку и не писали медиазапросов. Нам предоставили композитный PSD-файл с дизайном домашней страницы сайта And the winner isn’t, и сказали как можно быстрее подготовить базовую макетную структуру с использованием HTML и CSS. Посмотрим, может ли сеточная система Columnal помочь нам решить эту задачу.

Взглянув на исходный PSD-файл, можно легко понять, что макет базировался бы на 16 колонках. Однако сеточная система Columnal поддерживает не более 12 колонок, поэтому наложим на дизайн из PSD-файла 12 колонок вместо первоначальных 16 (рисунок 3.16).

Скачав ZIP-файл Columnal и разархивировав его, мы сделаем дубликат уже имеющейся страницы, а затем укажем в разделе <head> ссылку на columnal. css вместо main. css. Для создания визуальной структуры с использованием Columnal очень важно добавить правильные классы. Вот как выглядит полная разметка нашей страницы на текущий момент:

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional. dtd«>

<head>

<title>And the winner isn’t…</title>

</head>

<body>

<!— верхний колонтитул и навигация —>

<div id=»logo»>And the winner is<span>n’t…</span></div>

<ul>

Наложение сетки

<li><a href=»#»>Synopsis</a></li>

<li><a href=»#»>Stills/Photos</a></li>

<li><a href=»#»>Videos/clips</a></li>

<li><a href=»#»>Quotes</a></li>

</ul>

</div>

<!— содержимое —>

<h1>Every year <span>when I watch the Oscars I’m annoyed…</ span></h1> <p>that films like King Kong, Moulin Rouge and Munich get the statue whilst the real cinematic heroes lose out. Not very Hollywood is it?</p>

<p>We’re here to put things right. </p>

<a href=»#»>these should have won »</a>

</div>

<!— врезка —>

<h4>Unsung heroes…</h4>

<h4>Overhyped nonsense…</h4>

</div>

<!— нижний колонтитул —>

<p>Note: our opinion is absolutely correct. You are wrong, even if you think you are right. That’s a fact. Deal with it.</p>

</div>

</body>

</html>

Первым делом нам необходимо указать, что наш элемент <div> с идентификатором #wrapper является контейнером для всех элементов, поэтому добавим для него класс. container:

Двигаясь далее вниз по разметке страницы, мы видим, что фраза AND THE WINNER ISNT… занимает первую строку. Следовательно, для этого элемента мы добавим класс. row:

Наш логотип, хотя это всего лишь текст, простирается на 12 колонок. Следовательно, для него мы добавим. col_12:

<div id=»logo» class=»col_12″>And the winner is<span>n’t…</span></div>

Следующую строку занимает элемент <div> с идентификатором navigation, так что мы добавим для него класс. row:

Далее снова добавляются классы. row и. col_x там, где это необходимо. Мы пропустим этот этап, поскольку от повторения описанного процесса вас может начать клонить в сон. Вместо этого я приведу разметку уже со всеми внесенными изменениями.

Надо отметить, что пришлось также переместить изображение статуэтки «Оскар» и расположить его в отдельной колонке. Кроме того, нужно было заключить в раздел <div> с class=»row» наши элементы #content и #sidebar.

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional. dtd«>

<head>

<title>And the winner isn’t…</title>

</head>

<body>

<!— верхний колонтитул и навигация —>

<div id=»logo» class=»col_12″>And the winner is<span>n’t…</span></div>

<ul>

<li><a href=»#»>Synopsis</a></li>

<li><a href=»#»>Stills/Photos</a></li>

<li><a href=»#»>Videos/clips</a></li>

<li><a href=»#»>Quotes</a></li>

</ul>

</div>

<!— содержимое —>

<h1>Every year <span>when I watch the Oscars I’m annoyed…</span></h1> <p>that films like King Kong, Moulin Rouge and Munich get the statue whilst the real cinematic heroes lose out. Not very Hollywood is it?</p>

<p>We’re here to put things right. </p>

<a href=»#»>these should have won »</a>

</div>

<!— врезка —>

<h4>Unsung heroes…</h4>

<h4>Overhyped nonsense…</h4>

</div>

<!— нижний колонтитул —>

<p>Note: our opinion is absolutely correct. You are wrong, even if you think you are right. That’s a fact. Deal with it.</p>

</div>

</body>

</html>

Кроме того, необходимо было добавить в файл custom. css дополнительные стили. Содержимое этого файла теперь выглядит следующим образом:

#navigation ul li { display: inline-block;

}

#content { float: right;

}

#sidebar { float: left;

}

.sideBlock { width: 100%;

}

.sideBlock img { max-width: 45%; float:left;

}

.footer { float: left;

}

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

Результат внесения всех изменений.

Нам, конечно же, все еще предстоит проделать массу работы (я знаю, что это еще мягко сказано), однако если требуется быстрый способ создания базовой адаптивной структуры, то сеточные системы CSS вроде Columnal заслуживают внимания.

Резюме..

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

Однако до сих пор мы исследовали особенности адаптивного веб-дизайна, используя для разметки HTML 4.01. В главе 1 было сказано об эффекте экономии от применения HTML5. Это особенно важно и актуально для адаптивных веб-дизайнов, где принцип «сперва проектируем для мобильной платформы» сводится к созданию настолько компактного, быстро работающего и семантически значимого кода, насколько это возможно.

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

К слову, в процессе эволюции как поисковых алгоритмов, так и механизмов сайтостроения – к сайту предъявляются всё более и более жесткие требования. Если у вас нет времени и сил на освоения всех необходимых инструментов для самостоятельного создания сайта – проще всего прибегнуть к услуге создания и продвижения сайта опытными специалистами, которые опираясь на актуальные алгоритмы поисковых систем позволят вывести ваш сайт на топовые позиции в поисковой выдаче!

Сеточные системы CSS

Вам также могут быть интересны следующие статьи:

Добавить комментарий Отменить ответ