Как я искал CSS Framework

Свой первый пост в этом году не хочется посвящать серьезным вещам, поэтому поговорим о верстке. Ну что, поехали?

Я давно присматривался к CSS фреймворкам (blueprint, yahoo и т.д.), но как-то попробовать их на деле не получалось. Но вот недавно потребовалось заверстать новый layout и я решил заодно просвятиться и опробовать фреймворки в условиях, приближенных к боевым.

Я и раньше читал и в общем-то согласен с тем, что фреймворк позволяет быстро сваять “что-то”, но при каждодневном использовании начинает показывать зубы и ограничения (web-фреймворк обладает теми же недостатками впрочем). Тем не менее начинать работать с ним можно не будучи профи по кроссбраузерной верстке, что в общем-то тоже неплохо.

Итак, поскольку сайты посещают самые разные люди с самыми различными конфигурациями ПК, то приходится учитывать потребности наиболее отсталых (но не малочисленных – 25% и более) по ТТХ мониторов , пользователей (про версии браузеров тактично умолчим). А у этих самых пользователей разрешение экрана 1024х768 (старые ноутбуки и ЖК мониторы судя по всему).

Итак, мы хотим чтобы ~25% юзеров с разрешением экрана 1024х768 видели страничку без скроллера по горизонтали (майнгот, тоже самое я писал в требованиях на сайты лет 5 назад, а то и больше!!!). Но мы также хотим быть немного более продвинутыми чуваками и хотим также чтобы у людей с разрешением 1280х1024 (ну или похожим) сайт тоже занимал весь экран и чтобы без скроллера. А вот если растягивать больше, то центрировался бы. Т.е. min-width будет 950px а max-width будет 1280px. А при разрешении выше 1280 по ширине будет уже фиксированная верстка.

Основную фишечку нашей верстки определили. Теперь нам нужно определиться с css каркасом.

Прежде всего я глянул на blueprint. Да, каркас хорош. Сетка для дизайнера, удобные блоки, НО, фиксированная ширина. Его собрат bluetrip (“обезжиренный” blueprint судя по всему) соответственно страдал тем же недостатком. Против разработки yahoo у меня какое-то предубеждение, на разработку яндекса смотреть не хотелось. Начал искать каркас для резиновой верстки и становил свой взор на elastic.

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

хорошо

• Резиновая верстка (насколько я понял – таких фреймворков немного).
• Не навязывает свои стили оформления (одним из часто упоминаемых недостатков популярных фреймворков, является своеобразный их стиль, которому надо или следовать или потратить кучу времени чтобы придать сайту индивидуальность).
• Достаточно прост (хотя новичку может быть и сложновато).
• Проблем с кроссбраузерностью не отмечено.

плохо (или же то что не могу однозначно определить как “хорошо”)

• Тесно связан с jQuery. Да, да. Резиновость достигается при помощи javascript. Хорошо если ваш проект уже работает с jQuery (или планировалось что будет), а если нет? Плодить JS библиотеки не самый хороший способ обеспечить сохранность нервных клеток (тем не менее для основной разметки JS код писать не обязательно).
• Не очень хорошо документирован, хотя есть достаточно число образцов простых layouts и более сложных примеров.
• После некоторого времени я решил отказаться от модификаторов on-XX которые определяют число ячеек в строке, т.к. в моем случае при изменении размера окна иногда блоки осуществляли странные прыжки.

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

So, жизнь покажет в чем сила и правда )) Кого заинтересовал фреймворк, но не хватает русской документации – пишите, переведу базовый howto.