in Профессиональное

Как я искал 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.

Write a Comment

Comment

*

  1. Спасибо, отличная статья. Очень заинтересовал данный фреймворк…Если не сложно переведите документацию, думаю многим будет интересно.. Заранее спасибо!

    • Окей, попробую ) Но ваш комментарий первый за пол года. Наверное не так он и востребован…

  2. присоединяюсь к Sergey и к автору тоже; Только сегодня заинтересовался фреймворкамси css; как-то нужды не было; сам я программист. не совсем давно перешел на CI; Верстать никогда не верстал вообще ничего; а тут взялся – надо резиновую вёрстку; и думаю дай-ка я и на css какой-ниб фреймворк найду; сколько искал – пока только у Вас нашел нужное для “резины”;

    буду следить за Вашим блогом. и если выложите перевод, буду очень признателен;

  3. elastic нехило подгружает браузер (ие) во время ресайза, меня лично это бесит.
    Можно взглянуть на “Yet Another Multicolumn Layout” – (X)HTML/CSS Framework – http://www.yaml.de/en/ Минимум js (и то подгружается только для ие) куча вариантов и пресетов, обширные примеры и доки, есть на хомяке генератор кода. Из недостатков – много файлов стилей подгружается по цепочке. Но в финале перед продакшином это конечно можно оптимизировать.

  4. Да, перевод необходим. Сам начал с blueprint, но там постоянная ширина 960.

    • Честно говоря моя версия с Elastic’ом в продакшн не пошла. Он конечно работает но не все так как хотелось. Как минимум избыточной разметки дофига в которой черт ногу сломит (спустя месяц-два к примеру). Да и рендерится весело ) пока не загрузится страница и не отработает onload блоки расползаются кто куда.

  5. Здравствуйте!
    Я только начинаю разрабатывать сайты и долгое время искал подходящий фреймворк для резинового макета. Наткнулся на вашу статью и заинтересовался.
    Не могли бы вы помочь мне разобраться во всем этом ? =)
    Я был бы очень признателен, если бы вы выслали мне русский мануал и пример кода.
    Мой e-mail: paperback.lucy@gmail.com
    Заранее спасибо!