По новой парадигме «Делай, а не изучай!» я плюнул на поиски подходящего шаблона для сайта и решил все сделать сам. С нуля. Полностью. Но поскольку я не ас во фронтенде, то просто решил взять CSS Framework.
Вот только какой выбрать для работы? Twitter Bootstrap мне понравился, вот только что-то он слишком толстый и заморочный. Что-то поменять в нем приходится перелопатить кучу классов и код от этого не становится меньше. Да и в самом фреймворке для совместимости кучу свойств с префиксами на все случае жизни. Круто, конечно, но в кастомизации тяжело.
Есть его конкурент от фирмы Zurb – Foundation. Штука интересная и как раз вышла 5 версия. Вот для обучения я и решил использовать именно её.
Прототип я нарисовал в триале Axure RP 7. Приятная программка, очень помогает. Изучать почти ничего не пришлось, но даже интуитивно-понятного интерфейса хватила для того, чтобы сваять прототип главной страницы. Как бы прототип я не с нуля делал, а имел в голове задумку из нескольких сайтов, где были разные косяки по «юзабилити».
Вот, можно глянуть прототип здесь. 
Ну а я приступил к верстке при помощи фреймворка.
Надо сказать, что по возможностям Foundation явно уступает компонентам Bootstrap, где прописаны стили для многих казалось бы мелких, но очень важных элементах: определениям терминов, цитирования, адресов и аббревиатур. Все это используется довольно часто, но все забывают эти стили прописывать, а ведь это сильно помогает в семантической верстке такими элементами.
Конечно, без подводных камней не обошлось, и свою главную страницу я делал 3 вечера. Это и из-за чтения документации на английском, и изучения с экспериментами с этим фреймоворком. А вот дальше пошло как по маслу – еще 4 дня я потратил на создания внутренних страниц. Такая продолжительность объясняется тем, что во время верстки я подправлял и улучшал типографику, графику для сайта и так далее – я ведь не отрисовал макет в фотошопе или другом графическом редакторе. Да и тестировал макет на ком только мог и кто попался – друзья, родственники, знакомые и коллеги по работе.
Получилось довольно простенько, но удобно. Сильные косяки юзабилити я вычистил, шрифты поправил для удобного чтения и восприятия текста и графики. Ну а по дизайну получилось не шедевр, но вполне достойно. Конечно, можно еще чуток раскрасить подложку, в шапку напихать графики и так далее. Но по моему скромному мнению, люди на сайт заходят для получения информации, а не для любованием дизайна. Так что пойдет и для рабочего макета, и для обучения. Дизайн, кстати, предложу и владельцу сайта, который я переделывал – авось понравится и он захочет поменять устаревший дизайн, который висит уже 4 года.
Выкладываю здесь в архиве дизайн, вот только тексты и графику я удалю и заменю ссылками на заглушки с сайта плейсхолдер. Все-таки тексты и картинки не моя собственность и выкладывание в интернете дубля может повредить реальному работающему сайту, и даже не одному, ведь я брал для «рыбы» тексты и картинки с нескольких сайтов.
Теперь о моем мнении о Zurb Foundation. Я буду сравнивать его с Bootstrap, поскольку я его ковырял больше. Не стоит думать, что если сравнение не в пользу Bootstrap, то я его ругаю! Вовсе нет! Bootstrap — это просто гениальная штука и не зря у них столько подражателей! Но вот как-то не пришёлся мне этот инструмент по руке, хотя может все дело в моей ограниченности знаний.
Фреймворк очень простой и удобный. Когда хочешь что-то поправить под себя – легко находишь какой стиль перекрыть. Безумных префиксов везде и всюду нет, что меня очень радует. Но и расплата идет: Foundation 5 рассчитан на последние браузеры IE9 как минимум, что не так уж хорошо.
Названия классов легко запоминаются и понятны для верстки. Так что этот фремворк сильно выигрывает у Bootstrap, особенно версии 3. Вполне приятный дизайн элементов по умолчанию, так что править приходится мало.
Сетка сначала казалась какой-то странной и не удобной: писать 2 класса вместо одного. Но сейчас, когда привык, уже странной кажется сетка в Bootstrap. Кажется законченной и логичной по сравнению с Bootstrap, где 2 ветка была мне более близка и понятна, чем ветка 3. Ну тут опять же на вкус и цвет. Думаю, что если бы дал себе время разобраться более глубоко, то и в 3 версии все было бы удобно. Тут для меня паритет, но пока склоняюсь больше к Foundation.
Нет и лишнего в коде – нет спрайтов или шрифта с иконками, встроенного по умолчанию. В Bootstrap шрифт Awesome встроен и встроен совершенно не так, как во 2 версии и мне не очень удобна такая разметка. Обратная сторона — нет кучи «хотелок», реализованные по умолчанию в Bootstrap. Это касается определения терминов, например. Я частенько этим пользуюсь, так что мне это не очень понравилось. С другой стороны, я выдернул часть недостающих стилей из Bootstrap и стал доволен как слон. В Foundation просто скачал и подключил этот шрифт и у меня огромный выбор иконок и той верстки, которой я хочу. Тоже можно добиться и в Bootstrap, но там нужно обрезать, ковырять. Нет, не сложно, но нужно делать, а я чуток ленивый.
Формы сделаны хорошо и понятны. Дизайн тоже приятный и легко подстраивается под собой. В Bootstrap из-за дублирующих стилей всего и вся вариативность выше, но подстроить под себя гораздо сложнее. Формы однозначно понравились больше в Foundation. Но если делать бек-энд для сайта, то очень даже может использовать Bootstrap будет лучшей идеей.
Js-компоненты Foundation почти все проигрывают на мой вкус Bootstrap. Карусель, как говорится в документации, не стоит использовать и советует сторонние скрипты. Лайт-бокс не юзабелен на мой вкус. А вот табы, меню работают хорошо и даже лучше: растягивающееся и прилипающие меню в Foundation очень понравилось. Так же понравилось и адекватная работа выпадающего меню.
В документации понравилось то, что сразу в конце статьи о элементе приведено где и как нужно менять в стилях scss для кастомизации под себя.
В целом и общем, Foundation имеет меньше возможностей. Даже за счет экосистемы, сообщества, bootstrap явно выигрывает и выигрывает с разгромным счетом. Есть даже куча сайтов с кусками кода, которые позволяют сделать нужный интерфейс в шаблоне простым скопировать-вставить и мелкой правкой кода и классов стилей. Но за эту универсальность приходится платить более «толстым» файлом стилей, сложностью в кастомизации стилей.
Но все эти ворчания по сложности кастомизации вытекают из того, что и тот, и тот фреймворки не для новичков. Нет, они могут использовать их в работе, но это не совсем правильный подход использовать готовые стили и накладывать на них свои. Эти фреймворки больше для профессионалов, которые вместо скопмилированного файла стилей «по умолчанию» берут исходные кода в less или scss, и уже в них вносят свои правки и компилируют под себя, удаляя лишнее и добавляя свое. С этой точки зрения, скорее всего, фреймворки равноценные, возможно с креном в удобство в Bootstrap.
Так что каждый выбирает инструмент себе по руке и если вам чем-то не понравился Bootstrap, то приглядитесь пристально к Zurb Foundation.
Ну а у меня в списке «Когда-нибудь» появилась несколько пунктов, которые я постараюсь реализовать:
- Перевести документацию по Zurb Foundation если её не успеют перевести к тому моменту;
- Сделать цикл статей по разработке сайта на этом фреймворке: на русском катастрофически мало информации;
- Разобраться как можно внести изменения в основу фреймворка и как компилировать в готовый файл стилей во время разработки.
А у меня теперь следующая задача – привязать шаблон к php framework Laravel 4.2 для дальнейшего изучения.
