Бесплатно

получи Анализ спроса на свой товар/услугу в интернете

Оставить заявку

Обзор популярных CSS-фреймворков

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

Хочу провести небольшой обзор CSS-фреймворков, показать их плюсы и минусы. А чтобы материал был интересен не только посвященным в веб-разработку читателям, начну с некоторых понятий и терминов.

 

Итак, что же такое фреймворк?



Фреймворк (от англ. framework — каркас) — это платформа, определяющая структуру программы. Как правило, он значительно облегчает работу над проектом.

Для наглядности можно предложить такое сравнение: представим, что сайт — это большой панельный дом. Его этажи являются разделами, а квартиры — страницами. Лестничная площадка, к примеру — это меню навигации. Везде проведено электричество — пусть это будут java-скрипты! Так же, по-хорошему, на каждой странице (т.е. в каждой квартире) должна быть форма захвата. Я не смог придумать другого сравнения, поэтому формой захвата у нас будет санузел :)

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

Так вот фреймворки, как раз и являются платформами, содержащими в себе некоторые уже готовые компоненты: меню навигации, слайдеры, формы обратной связи, вкладки, адаптивные элементы и т.д. Не нужно каждый раз писать с нуля тот или иной функционал, можно лишь изменить его внешний вид. Одним из основных преимуществ css-фреймворка является его структурированность, чистый и понятный код, а также готовая сетка. Это, пожалуй, можно сравнить с фундаментом нашего панельного дома.

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

Так же, стоит уточнить, что фреймворк — это не CMS, а лишь визуальная оболочка сайта. Я мог бы продолжить аналогию со строительством дома, сравнить CMS с ТСЖ, следящим за работой лифтов, вывозом мусора, буйством соседей и т.д., но как-нибудь в другой раз :)

Какой CSS-фреймворк выбрать?



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

Bootstrap



bootstrap.jpgУже в течение нескольких лет является самым популярным css-фреймворком среди верстальщиков и веб-мастеров по всему миру. Популярность свою получил благодаря огромному количеству расширений и дополнений, а также своему “благородному” происхождению, т.к. разработчиками данной платформы являются сотрудники Twitter'а. На Bootstrap сейчас создается большое количество шаблонов, форм, панелей навигации и прочих элементов как самими разработчиками платформы, так и её сообществом. Из-за обилия готовых компонентов создатели Bootstrap придумали удобную возможность подготавливать нужную сборку прямо у себя на сайте. Таким образом, если в вашем проекте не предусматривается, скажем, слайдер, то его можно просто отключить и не подгружать в сборку, тем самым уменьшая вес проекта.

Bootstrap поддерживает препроцессоры LESS и SASS, кому что по душе. На данный момент актуальна версия Bootstrap 3, но вот уже более полутора лет разработчики обещают 4-ю версию и всё никак не могут её выпустить. В данный момент есть только Bootstrap 4 Alpha.

Zurb Foundation



logo-foundation_by_zurb.pngНе менее удобный и популярный фреймворк по сравнению с предыдущим. Изначально создавался под web-приложения. Включает в себя большое количество готовых компонентов, на выходе получается вполне чистая и кроссбраузерная верстка. Поддерживает SASS. По умолчанию имеется стандартная 12-колоночная сетка, которую при необходимости легко можно изменить. В целом фреймворк очень похож на Bootstrap, также имеется большое сообщество.

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

Gumby Framework



speckyboy_gumby_cover.jpgСовременный css-фреймворк, поддерживает только SASS препроцессор. Стандартная сетка, такие же как и везде наборы компонентов. Казалось бы обычный ничем не приметный фреймворк, каких сотни. Но Gumby всё же выделяется парой особенностей среди остальных. К примеру, Gumby работает по принципу отношения большего к меньшему. Все размеры в проекте, скажем, размер шрифта зависит от размера блока, в который он помещен.

Также Gumby имеет готовые шаблоны для Photoshop, с помощью которых можно быстро набросать макет и передать его в вёрстку.

Ui Kit



uikit-logo.pngUikit — это продукт компании Yootheme, которая специализируется на разработке шаблонов для популярных движков, таких как Joomla и Wordpress. Данный фреймворк имеет 10-колоночную сетку, кучу различных примочек и компонентов, готовых потягаться с Bootstrap и Foundation. Весьма приятным плюсом этой платформы является её легковесность. Из коробки она весит всего около 70 Кб. Но тут есть один неприятный момент — этот фреймворк не поддерживает старые версии браузеров.

Также к преимуществам UiKit можно отнести названия классов. Благодаря отдельным пространствам имён, вероятность совпадения и конфликта сводится к нулю.

Semantic UI



Semantic-UI.jpgФреймворк для тех, кто считает, что компонентов не бывает много. Действительно, Semantic UI содержит неимоверное количество готовых решений на все случаи жизни. В коробке есть буквально всё: от стандартных элементов навигации до готовых сверстанных карточек товаров, профилей, приправленных красивыми анимациями и эффектами.

Само собой, благодаря такому изобилию, объем сборки достаточно велик, но разработчиков, видимо, это особо не волнует.

Несомненно, плюсом Semantic UI является возможность интеграции с популярными JS-фреймворками такими как React, Ember, Meteor, а также с недавнего времени с Angular.

Подводя итоги



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

По-хорошему, нужно просто изучить несколько разных фреймворков и с умом подбирать нужные платформы под предстоящие проекты.
Александр Александр

27 февраля 2017, 09:29  |  Просмотров: 358

Яндекс Аудитория

На сколько эффективна для вашего бизнеса?

Оставьте заявку и наш менеджер сформирует для Вас
персональный план продвижения

Ваш персональный подарок

Комплексная настройка

Яндекс Метрики

* предложение действует для клиентов,
которые оставили заявку

ТАРИФ «Попробовать»

Оставьте свои контактные данные и наш менеджер свяжется с вами в ближайшее время

Ваш персональный подарок

Комплексная настройка

Яндекс Метрики

* предложение действует для клиентов,
которые оставили заявку

ТАРИФ «Разумный выбор»

Оставьте свои контактные данные и наш менеджер свяжется с вами в ближайшее время

Ваш персональный подарок

Комплексная настройка

Яндекс Метрики

* предложение действует для клиентов,
которые оставили заявку

ТАРИФ «Квантовый скачок»

Оставьте свои контактные данные и наш менеджер свяжется с вами в ближайшее время

Закажите обратный звонок

И мы свяжемся с вами в ближайшее время

Закажите обратный звонок

И мы свяжемся с вами в ближайшее время

Подарок уже ждёт Вас

Оставьте заявку, и мы свяжемся с вами в ближайшее время

Закажите обратный звонок

И мы свяжемся с вами в ближайшее время

Отправьте заявку

Наш менеджер свяжется с Вами в ближайшее время для уточнения данных

Отправьте заявку

Чтобы получить настройку контекстной рекламы со скидкой

Отправьте заявку

Чтобы получить SEO-продвижение в подарок

Отправьте заявку

Чтобы воспользоваться предложением

Отправьте заявку

Чтобы забронировать скидку 50%

Отправьте заявку

Чтобы получать много клиентов
из Яндекс и Google

Отправьте заявку

Чтобы получить 1 месяц SEO за 1 рубль

Отправьте заявку

Чтобы получить прайс-лист 2017
на все услуги

Понравился сайт ?

Сделаем для вас такой же или ещё лучше со скидкой

5000

Зафиксируйте скидку или она сгорит

Ваши деньги в опасности!

Ежедневно к нам приходят 10-ки клиентов, которые неправильно подбирают
инструменты продвижения и теряют деньги!

Интернет-маркетолог от Starta

Мы сформируем для вашего бизнеса индивидуальную воронку лидогенирации. Вы получите готовый набор инструментов, который будет соответствовать форумле min затраты = max эффективность