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.

Leave a Reply for hudson Cancel Reply

Write a Comment

Comment

ERROR: si-captcha.php plugin: GD image support not detected in PHP!

Contact your web host and ask them to enable GD image support for PHP.

ERROR: si-captcha.php plugin: imagepng function not detected in PHP!

Contact your web host and ask them to enable imagepng for PHP.

  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
    Заранее спасибо!