Свой первый пост в этом году не хочется посвящать серьезным вещам, поэтому поговорим о верстке. Ну что, поехали?
Я давно присматривался к 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.
Спасибо, отличная статья. Очень заинтересовал данный фреймворк…Если не сложно переведите документацию, думаю многим будет интересно.. Заранее спасибо!
Окей, попробую ) Но ваш комментарий первый за пол года. Наверное не так он и востребован…
присоединяюсь к Sergey и к автору тоже; Только сегодня заинтересовался фреймворкамси css; как-то нужды не было; сам я программист. не совсем давно перешел на CI; Верстать никогда не верстал вообще ничего; а тут взялся – надо резиновую вёрстку; и думаю дай-ка я и на css какой-ниб фреймворк найду; сколько искал – пока только у Вас нашел нужное для “резины”;
буду следить за Вашим блогом. и если выложите перевод, буду очень признателен;
elastic нехило подгружает браузер (ие) во время ресайза, меня лично это бесит.
Можно взглянуть на “Yet Another Multicolumn Layout” – (X)HTML/CSS Framework – http://www.yaml.de/en/ Минимум js (и то подгружается только для ие) куча вариантов и пресетов, обширные примеры и доки, есть на хомяке генератор кода. Из недостатков – много файлов стилей подгружается по цепочке. Но в финале перед продакшином это конечно можно оптимизировать.
Да, перевод необходим. Сам начал с blueprint, но там постоянная ширина 960.
Честно говоря моя версия с Elastic’ом в продакшн не пошла. Он конечно работает но не все так как хотелось. Как минимум избыточной разметки дофига в которой черт ногу сломит (спустя месяц-два к примеру). Да и рендерится весело ) пока не загрузится страница и не отработает onload блоки расползаются кто куда.
Здравствуйте!
Я только начинаю разрабатывать сайты и долгое время искал подходящий фреймворк для резинового макета. Наткнулся на вашу статью и заинтересовался.
Не могли бы вы помочь мне разобраться во всем этом ? =)
Я был бы очень признателен, если бы вы выслали мне русский мануал и пример кода.
Мой e-mail: paperback.lucy@gmail.com
Заранее спасибо!
Два года спустя после этого поста, я бы порекомендовал Bootstrap от Twitter. http://twitter.github.com/bootstrap/