Народ, а давайте пообсуждаем css-фреймворки. Кто что использует и почему выбор сделал на каком-то определённом фреймворке? Почему забраковал другие? Вобщем, welcome в пост на горячее обсуждение.

Для затравочки парочку CSS фреймворков на разогрев:
http://twitter.github.com/bootstrap/
http://www.amazium.co.uk/
http://getskeleton.com/
http://foundation.zurb.com/
http://960.gs/

Tagged with →  

54 Responses to css-фреймворки

  1. Kkebad:

    раньше упорно игнорировал, но попробовал Twitter Bootstrap и проперся.
    параллельно осваиваю Yii, там есть толковое расширение, которое генерит готовые виджеты с бутстраповой разметкой, в общем, мои волосы теперь мягкие и шелковистые

    для неприхотливых к дизайну клиентов и просто админок — интерфейсы строить очень удобно. и сетка у них понятная

  2. Xuagreen:

    Выражение CSS фреймворки придумали наркоманы. Не увлекаюсь.

  3. IkEer:

    Твиттер бутстрап самый пиздодельный из перечисленных, как в плане совместимости, так в плане за 30 минут из воздуха сделать приятную админку.

    А вообще от цели многое зависит. Иногда того же бутстрапа может быть слишком много для решения задачи.

  4. IkEer:

    А, ну вот я еще Компас использую, но его тоже фиг знает как фреймворком назвать.

  5. Ffaef:

    Довольно давно использую всем известный Blueprint — http://blueprintcss.org/
    Не могу сказать, что очень доволен, но как-то так исторически сложилось.

  6. Ylfer:

    css–фреймворки предназначены для тех, кто не умеет и для тех, кто не хочет верстать. В каком контексте будем обсуждать?

  7. Kkebad:

    умею и люблю верстать. был ярым противником CSS-фреймворков. недавно столкнулся с тем, что верстать нечего — пожадничали и не заказали дизайн. вообще никакой. спасение — клеви фреймворк. задачи сайт решает, выглядит аккуратно, ничего не разъезжается, плагинчиков для анимацийтабовкнопочек дохерища. в итоге просто одной проблемой меньше.

    так что я бы не стал так категорично.

    но!

    серьезный сайт с изъебами на бутстрапе делать не стал бы. что-то подсказывает, что придется дохера твиков колбасить.

  8. EnoSpb:

    ниже примерно описал кейс. Допустим надо тебе сверстаь сайт. Верстать лень, а надо чтобы и на десктопе все красиво выглядело и на мобильниках. Вобщем, нет у тебя желания возится со всем этим. Хочется быстро и хорошо сделать проект.

  9. EnoSpb:

    Тоесть для серьезных сайтов не стоит вообще какой-то фреймворк брать? Но буутстрап получается сейчас the best, да? А чем именно буутстрап лучше других? Можно в двух словах?

  10. Kkebad:

    я не знаю, чем он лучше других, мне понравилось то как они оформили примеры в документации — сразу видно что как делается и как работает. когда-то давно смотрел на 960gs и Blueprint, произвели впечатление НЁХ.

  11. EnoSpb:

    Вобщем, ситуация такая. Наклевывается большой проект. Конкуренты в своем предложении расписали что будут использовать CSS фреймворк (какой именно точно не знаю). Поэтому надо в своем предложении тоже упомянуть про CSS фреймворк и объяснить почему же выбран был он а не какой-то другой фреймворк.
    Сайт должен быть с responsive design-ом. Сайт большой. Вобщем как-то так.
    Если использование CSS фреймворков в большом проекте не оправдано, то чем именно? Только тем что придется дохера твиков колбасить?

  12. EnoSpb:

    ага, я гляжу у буутстрапа нехилая такая документация. И плагины у него даже есть.

  13. RatFcuk:

    фреймворки удобны тем (опять же в связке с php фреймворком «да здравствуцет Yii») что можно быстро собрать прототип, т.е. цикл разработки сокращается, так как программеры могут писать код+ тестить еще до того как верстальщик увидит дизайн, а дизайнер выйдет из запоя.

    сами сидим на Yii (php) + bootstrap, а до этого 960.gs юзали
    НО! это не значит, что конечный сайт использует фреймворк.

  14. EnoSpb:

    А можно пару плюсов буутстрапа перед другими фреймворками? )

  15. RatFcuk:

    в нем кроме просто сетки есть уже готовые кнопки, вкладки, слайдер и формы
    если в каком то другом это тоже все есть, то преимущества особого нет.

  16. Xuagreen:

    фреймворки удобны тем (опять же в связке с php фреймворком «да здравствуцет Yii») что можно быстро собрать прототип, т.е. цикл разработки сокращается, так как программеры могут писать код+ тестить еще до того как верстальщик увидит дизайн, а дизайнер выйдет из запоя.

    Это называется процесс у вас через жопу. Верстальщика в рот не ебёт как будет выглядеть работа дизайнеров, программерам по хуй, что нахуячят верстаки.

  17. Ylfer:

    если сайт серьёзный, проще под свои задачи с нуля всё сделать

  18. Ylfer:

    >Верстать лень

    разве я не об этом?

  19. EnoSpb:

    Завтра буду их качать и сравнивать тогда. Спасибо

  20. OkkGood:

    Я тоже долго сидел на блюпринте, но после бутстрапа блюпринт стал вызывать рвотные позывы 🙁

  21. OCRSm:

    Резиновые сетки юзает кто-нибудь?

  22. Yksin:

    Я вот через месяц-два собираюсь на этом вашем бутстрапе релизнуть новую версию сайта с непростым интерфейсом и немалым количеством страниц, а не админку.

    Потому что старый движок не справляется, потому что много новых идей, а денег и времени на дизайнера нет. Что я делаю не так?

  23. Ffaef:

    Все правильно делаешь.

  24. Nigblack:

    960.gs периодически юзаю как каркас и вот собираюсь тотально взяться за Boorstrap, ибо он настолько охуенен, что даже не обсуждается.

  25. EnoSpb:

    960 крут, вот бы ещё дизайнеры рисовали сайты опираясь на него )

  26. Ffaef:

    Если дизайнер рисует по заказу, то можно ведь ему прописать все необходимые условия в ТЗ, нет?

  27. EnoSpb:

    Если по заказу, то безусловно можно. Но ведь иногда бывает и не так 🙂

  28. OCRSm:

    Это вообще как-то не правильно. Это сетка под дизайн должна подстраиваться, а не дизайнер под сетку 🙂

    Я на РИТе буду про это доклад делать, идёт кто-нибудь? 🙂 Потом обязательно создам пост по мотивам 🙂

  29. FfiSpb:

    если надо быстро, хорошо и красиво — то сетка решает. а хороших дизайнеров и верстаков мало.

  30. EnoSpb:

    Я понимаю о чем ты говоришь. Но когда дизайнер рисует свой дизайн кладя хуй на всякие сетки, то в итоге ты открываешь дизайн, делаешь замеры линеечкой и понимаешь, что пиздец.
    Все размеры нечетные. Гайды понатыканы хуй знает зачем.
    После четверти часа потраченного на замеры, ты понимаешь что только full custom grid сделанная своими руками тебе поможет.
    А в идеале я должен открыть страничку http://grids.heroku.com/ ввести пару цифорок и получить свой файл.
    Так что, дизайнер должен учитывать сетку и не делать такой хуйни как ширина сайта 987px.
    Но вообще вы правы, сетка должна подстраиватся под дизайн. Но ведь и дизайнер должен рисовать с мыслями «ага, я рисую по такой вот сетке». Или я чего-то не понимаю? 🙂

  31. OCRSm:

    Вообще я считаю, что без разницы как дизайнер что-то нарисует, главное чтобы он потом не морщился, когда вся его «красота» будет выпрямлена и подогнана под православную сетку. Которая, кстати, может быть довольно-таки точной 🙂 А сервис красивый, кстати, тоже будет, ждите 🙂

  32. KciSnow:

    Я twitter bootstrap использую для прототипов и админок, весьма доволен.

  33. ZinApp:

    Boilerplate + less framework. Вообще действительно, все пишется с нуля. У меня только библиотека общих решений для типовых задач. Если хочется — пишите на БЭМ.

  34. ZinApp:

    Все нормальные верстальщики уже использую Media Queries. Нах эту резину?

  35. ZinApp:

    Все отлично делаешь. бутстрап хорош для проектов, где функционал важнее дизайна. А твой проект именно такой : Спасибо кстати за него.

  36. ZinApp:

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

  37. Ylfer:

    сетки придумали полиграфисты

  38. OCRSm:

    Где связь?

  39. OCRSm:

    У нас, например, дизайнеры не рисуют по сетке, но никому это не мешает верстать по сетке 🙂

  40. Xuagreen:

    это у тебя не дизайнер, а хуй. Сетки придумали дизайнеры и художники, а не программисты. Вывод о профессионализме товарищей не радует.

  41. ZinApp:

    Media Queries гибче, чем сетки выполняя практически одну и ту же работу — подстраиваться под разрешение экрана. Но при это в сетке не поменять расположение блоков, а MQ это делается с легкостью.

  42. Xuagreen:

    вот и я говорю — сетки для ламеров, которые в CSS ни в зуб ногой.

  43. Nigblack:

    Стоп стоп. Минуточку. Грид-системы — охуенно удобный, стандартизированный способ организации верстки, если можно так сказать. С таким же успехом ты мог бы заявить, что jquery для дурачков, которые не шарят в native js. Просто дурачкам и ламерам никакой фреймворк не поможет. А тем, кто шарит — все эти приблуды только в помощь.

  44. Xuagreen:

    вёрстка с гридами = вёрстка таблицами. И то и другое — одинаковый тупак.

  45. RatFcuk:

    верстка прямоугольными блоками = верстка таблицами

  46. OCRSm:

    Сетки — это сетки, MQ — это MQ, не понимаю где вы нашли взаимоисключающую связь между ними. Оба инструмента отлично дополняют друг друга. Наверное не стоит играть в капитана и рассказывать, как это всё может работать вместе. Или стоит?

  47. ZinApp:

    Где ж он стандартизированный?
    И если постреть вверх мы говорим про резиновые гриды, против которых я и против. А фикс гриды пользуйте конечно. У меня в Stylus забиты гриды и я их пользую в CSS, не перенося в HTML.

  48. ZinApp:

    Так — мы сейчас точно говорим про резиновые сетки?
    А расскажите про использование резиновых сеток и MQ одновременно. А то у меня пока есть некоторое не понимание, как например переносить блок из строки сетки при смени MQ в меньшую сторону.

  49. OCRSm:

    Теперь я понял, почему у нас недопонимание 🙂 вариантов адаптации существует много, самый популярный работает так (это легко проверяется глядя на http://mediaqueri.es/) — интерфейс тянется до определённого размера, происходит hardcore адаптация, при дальнейшем изменении интерфейс снова тянется. Тут то на сцену и выходят сетки.

    На самом деле применение сетки для каркаса разметки — всего лишь один из способов её использования. Об этом не все задумываются, как раз таки по причине отсутствия нормальных резиновых сеток 🙂

    Хочу также заметить, что необходимость адаптации (перестройки) интерфейса при изменении экрана (по условию задачи) стоит не всегда.

  50. ZinApp:

    Немного подведу черту, что я имею ввиду под гридом и MQ
    1. Гриды использовать необходимо в CSS, а не в HTML (объяснять почему?).
    2. Для адаптации сайта под разрешения использовать MQ.
    3. Резиновые гриды не всегда корректно работают на небольших разрешениях.
    4. Можно использовать связку фикс-гридов и MQ.
    5. MQ всегда требует нескольких дизайнов и прототипов.

  51. OCRSm:

    1. Личное дело каждого, на самом деле. Но если вы всерьёз увлекаетесь православием, то конечно же да 🙂
    2. На каждый пиксель? 😉
    3. В чём это заключается?
    4. Точно так же как и флюид-гридов, не понимаю опять почему такое исключение
    5. Спасибо, капитан 🙂

  52. Hproff:

    Не умею и не люблю верстать.
    Активно использую bootstrap (в сочетании с Yii, да).

    Бутстрап пиздатый:
    — за его спиной чуваки из твиттера,
    — он приятен для глаза,
    — у него хорошая документация (и забавная),
    — под него уже есть много готовых цветовых решений,
    — можно нагенерить свои, используя less
    — его функционал на 90% покрывает стандартные задачи сайтов.

    Как-то так.

  53. Zeied:

    посмотрел на bootstrap, а потом увидел чуть по проще http://99lime.com/elements/ если по русски то здесь http://jkeks.ru/jkeks.ru/archives/2816
    Как вам?

  54. ZinApp:

    Похож на бутстрап, но зачем использовать его, если есть бутстрап?

Добавить комментарий