Сравнительный анализ адаптивных css фреймворков Текст научной статьи по специальности «Компьютерные и информационные науки»

Секция «Программные средства и информационные технологии»

УДК 004.43

СРАВНИТЕЛЬНЫЙ АНАЛИЗ АДАПТИВНЫХ CSS ФРЕЙМВОРКОВ

В. В. Бастрикина Научный руководитель - А. Г. Зотин

Сибирский государственный аэрокосмический университет имени академика М. Ф. Решетнева

Российская Федерация, 660037, г. Красноярск, просп. им. газ. «Красноярский рабочий», 31

Е-mail: [email protected]

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

Ключевые слова: фреймворк, css, bootstrap, foundation, skeleton.

COMPARATIVE ANALYSIS OF ADAPTIVE CSS-FRAMEWORKS

V. V. Bastrikina Scientific Supervisor - A. G. Zotin

Reshetnev Siberian State Aerospace University 31, Krasnoyarsky Rabochy Av., Krasnoyarsk, 660037, Russian Federation E-mail: [email protected]

The well-known adaptive css frameworks are examined. The criteria of css frameworks are shown. The comparison results are presented. The most suitable adaptive framework for problem solving is chosen.

Keywords: framework, css, bootstrap, foundation, skeleton.

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

Впервые понятие адаптивного веб-дизайна появилось в 2010 году и оно означает такой дизайн веб-страниц, который обеспечивает корректное отображение сайта на различных устройствах, подключенных Интернету и динамически подстраивающийся под заданные размеры окна браузера. Целью адаптивного веб-дизайна является универсальность отображения содержимого веб-сайта для различных устройств. Для того чтобы веб-сайт был удобно просматриваемым с устройств различных разрешений и форматов, по технологии адаптивного веб-дизайна не нужно создавать отдельные версии веб-сайта для отдельных видов устройств. Один сайт может работать на смартфоне, планшете, ноутбуке и телевизоре с выходом в Интернет, то есть на всем спектре устройств [1]. В свою очередь, адаптивные фреймворки могут значительно ускорить процесс создания адаптивного веб-дизайна, а также добавить много других опций на сайт, например, модальные окна, off-canvas меню и многое другое [2]. В связи с тем, что любой веб-сайт требует гибкости дизайна, так и перед нами стоит задача выбрать такой адаптивный фреймворк, который упростит и ускорит нам верстку сайта для информационно-справочного сервиса книжной продукции.

Рассмотрим основные адаптивные фреймворки, такие как bootstrap, foundation и skeleton.

Bootstrap - это популярный фреймворк, который позволяет быстро и качественно создавать статичные веб-сайты и веб-приложения. Это бесплатный набор инструментов, позволяющий использовать Html, CSS и JavaScript, разработанный компанией Twitter. К главным достоинствам этого фреймворка стоит выделить его JavaScript составляющую. А также единообразные кнопки, поля форм, вид таблиц обеспечивают совместимость сторонних расширений с шаблоном. Верстка с использованием bootstrap является хорошим решением для back-end разработчиков и тех, кто хочет иметь аккуратный интерфейс, не прилагая к этому излишних усилий. К недостаткам данного фреймворка стоит отнести отсутствие уникальности сайтов и появления избыточного кода на стадии разработки.

Актуальные проблемы авиации и космонавтики - 2016. Том 1

Foundation - второй по популярности фреймворк. Компания ZURB, выпускающая Foundation оказывает фреймворку большую поддержку. Foundation профессиональный фреймворк с поддержкой бизнеса, тренингов и консалтинга. Он также имеет доступ к большому количеству ресурсов, которые помогут научиться работать с фреймворком быстрее и проще. Развернуть фреймворк можно с поддержкой Saas, также доступна разнообразная библиотека самых разных опций, например, off-canvas меню, модальные окна, расширенная навигация canvas, ускорение графического процессора, fastclick.js и многие другие опции для разработчиков. Его главное достоинство это гибкость и неограниченные возможности. К минусам стоит отнести его упор в сторону мобильных приложений, а также несовместимость версий. В конце концов, стоит отметить, что этот фреймворк используют такие большие сайты как Facebook, Mozilla, Ebay, Yahoo! и National Geographic.

Skeleton - это простой, легкий в использовании адаптивный CSS-фреймворк. Он не привязан к конкретному стилю и дизайну. С этим фреймворком можно быстро начать разработку адаптивного сайта без дополнительных функций. Из положительных моментов стоит отметить, что фреймворк прост в использовании, за счет адаптивной сетки, которая сама подстраивается под браузер, а также с самого начала встроены все необходимые компоненты, такие как кнопки, формы, табы и т. п. Данный фреймворк задумывался как основа, некий каркас, который можно адаптировать по свой дизайн. Из отрицательных моментов стоит выделить минималистичность во всем [3-4].

В таблице представлены критерии, с помощью которых будет проводиться сравнение фрейм-ворков.

Сравнение фреймворков по основным критериям

Фреймворк/ критерий Bootstrap Foundation Skeleton

Высокая скорость разработки Платформа Twitter Bootstrap позволяет более быстро и качественно создать front-end составляющие сайтов по сравнению с их созданием на «чистом» CSS и JavaScript Foundation, гибкий и практически неограничен в возможностях, что тем самым может усложнять разработку Фреймворк быстр в разработке, так как не отягощен дополнительными функциями. С этим могут возникнуть проблемы

Простота в использовании Для работы с платформой достаточно иметь минимальные знания по технологиям HTML и CSS Для работы с платформой необходимо иметь знания по технологиям HTML, JS, CSS и Saas Для работы с платформой необходимо иметь знания по технологиям JS и CSS

Фреймворк/ критерий Bootstrap Foundation Skeleton

Поддержка браузерами Mozilla Firefox, Google Chrome, Safari, Internet Explorer 7+ и Opera Mozilla Firefox, Google Chrome, Safari, Internet Explorer 8+ Mozilla Firefox, Google Chrome, Internet Explorer 7+, Safari

Открытость и бесплатность программного обеспечения Платформа Twitter Bootstrap является бесплатной как для личного так и для коммерческого использования Бесплатен как для личного так и для коммерческого использования Бесплатен как для личного так и для коммерческого использования

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

Библиографические ссылки

1. Rebill.me [Электронный ресурс]. URL: http://rebill.me/showthread.php?t=3560 (дата обращения: 31.03.2016).

2. KtoNaNovenkogo [Электронный ресурс]. URL: http://ktonanovenkogo.ru/ (дата обращения: 30.03.2016).

3. Joomlaportal [Электронный ресурс]. URL: http://joomlaportal.ru (дата обращения: 30.03.2016).

4. Книга веб-программиста: секреты профессиональной разработки веб-сайтов / Б. Хоган, К. Уоррен, М. Узбер, К. Джонсон, А. Годин. М. : Питер, 2013. 288 с.

© Бастрикина В. В., 2016