Что-то давно я ничего не писал о CSS, а ведь использовать эту технологию приходится практически постоянно.
Кроме того, последнее время я начинаю замечать, что все чаще использую CSS фреймворки. Поэтому сегодня речь пойдет именно о них. А точнее, об одном из них, под названием 960 Grid System.
Почему именно о нем? Тут все очень просто. Я более-менее плотно работал с двумя фреймворками: Blueprint и 960 grid. При этом, на мой взгляд, разработчикам 960 grid system удалось добиться очень хорошего отношения возможности/размер фреймворка.
Рассмотрим его подробнее.
Начнем с недостатков.
Если вы хоть немного интересовались темой, то, конечно, знаете, что есть много возражений против применении CSS фреймворков как таковых.
Основные возражения такие.
1) Фреймворки увеличивают размер страницы.
2) Загоняют разработчика в определенные рамки. Например, 960 grid предназначен для верстки страниц с шириной 960рх.
3) Многим не нравятся имена классов вроде «grid-16».
4) Кто-то считает, что нужно самому создавать фреймворк «под себя».
Но давайте посмотрим насколько существенны эти недостатки.
1) Объем файлов действительно увеличивается. Но 960 Grid System состоит из трех файлов, суммарный размер которых — 8 кБ (сжатая версия). Если использовать архивацию размер уменьшается до 1,6кБ.
Вы, конечно, сможете обойтись меньшим количеством кода для конкретной страницы, но разница вряд ли будет больше 1 кБ, т.е. если на вашей страничке есть хотя бы парочка картинок, выигрыш в общем объеме окажется менее 1%.
2) По поводу ограничений. Фреймворк, как и любую библиотеку, имеет смысл использовать в случаях, для которых он разрабатывался. Т.е. если нужна «резиновая» верстка, 960 Grid – не подходящее решение (хотя есть проект Fluid 960 Grid System). Но если в тех. задании сказано, что страница должна иметь фиксированную ширину 960px, то ситуация меняется.
3) Имена классов. На мой взгляд – это вопрос привычки. Цифры в имени означают ширину блока и по ним достаточно просто ориентироваться. Кроме того, никто не запрещает использовать одновременно несколько классов, например,
<div class=”grid_4 sidebar”>…</div>
Класс grid_4 будет использовать фреймворк, sidebar – вашими стилями.
4) Свой фреймворк – это хорошо… если у вас есть время на его разработку и вы уверены, что он получится лучше существующих решений.
Теперь о преимуществах.
1) Время разработки. Оно сокращается и значительно, особенно если у вас есть минимальный опыт работы с фреймворком и вы используете его в подходящей ситуации. Т.е. нужно потратить какое-то время на изучение, но окупается оно очень быстро.
2) Фреймворки содержат «хаки» для наиболее распространенных браузеров. Каждый раз решать одни и те же проблемы с позиционированием элементов в IE очень быстро надоедает 😉
3) Упрощается поддержка. Вам будет легче прочитать свой же код, написанный полгода назад, если вы все время используете одинаковые имена классов.
Примечание. Кстати, если вы интересуетесь темой, очень советую почитать статью «Верстка с помощью Grid«.
А теперь небольшой пример.
Допустим, нам нужно сверстать страницу с таким размещением блоков.
Я сразу покажу решение.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test 960 Grid System</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/text.css" />
<link rel="stylesheet" href="css/960.css" />
<style type="text/css">
p {
border: solid 1px #eee;
}
</style>
</head>
<body>
<div class="container_12">
<div class="grid_12"><p>Заголовок</p></div>
<div class="clear"></div>
<div class="grid_4">
<div class="grid_4 alpha"><p>Левый блок №1</p></div>
<div class="grid_4 alpha"><p>Левый блок №2</p></div>
</div>
<div class="grid_4">
<div class="grid_4 alpha"><p>Центральный блок №1</p></div>
<div class="grid_2 alpha"><p>Центральный блок №2</p></div>
<div class="grid_2 omega"><p>Центральный блок №3</p></div>
</div>
<div class="grid_4"><p>Правый блок.<br /><br /> Может быть любой высоты.</p></div>
<div class="clear"></div>
<div class="grid_12"><p>Хвостовик</p></div>
<div class="clear"></div>
</div>
</body>
</html>
Как видите, мы обошлись практически минимальным количество тегов div. Вложенные дивы использовались только для левой и центральной колонок, т.к. они содержат несколько блоков.
Теперь о номерах классов.
Общая ширина макета 960px. Фреймворк позволяет разбить ее на 12, 16 и 24 равных части. В данном случае нам достаточно разбиения на 12 частей. Т.е. класс grid_12 имеет ширину 940px плюс отступы по 10px справа и слева.
Точно также класс grid_4 имеет ширину 960 * 4 / 12 = 320px из которых 20px приходится на отступы.
Если мы поместим подряд три блока с классами grid_1, grid_7 и grid_4, то они займут всю ширину страницы.
Кроме того, есть несколько специальных классов, например, alpha и omega. Они позволяют убрать отступы слева (alpha) и справа (omega) у блока. В данном примере эта возможность используется для того, чтобы убрать отступы у вложенных блоков. Иначе они будут прибавлены к отступам контейнера и, например, расстояние между левой колонкой и центральной будет не 20, а 40px.
Также вы можете использовать класс clear для завершения строки с блоками, а также классы prefix_X, suffix_X, push_X и pull_X для создания различных отступов (вместо X нужно подставить число).
Примечание. Если вы планируете использовать этот (или любой другой CSS фреймворк) я очень советую вам взглянуть на исходные файлы со стилями. Как я уже писал, они совсем небольшие и при наличии минимальных познаний в CSS вы быстро разберетесь что к чему.
Как видите, использовать фреймворк не сложно и его изучение вряд ли отнимет у вас много времени.
В заключение хочу провести небольшой опрос.
Голосование закрыто. Результаты:
Используете ли вы CSS фреймворки?
- Нет, но планирую попробовать — 71%, 898 голосов
- Да — 21%, 265 голосов
- Нет и пробовать не собираюсь — 8%, 108 голосов
Всего проголосовало: 1 271
Удачи!
Постовой
Для малого бизнеса бухгалтерские услуги: Москва и область
