Сравнение css-фреймворков-библиотек на живом примере. Часть 1

Пролог

В данном цикле статей я намерен провести объективное сравнение css-фреймворков на основе живых примеров, как в TodoMVC для js решений.

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

Содержание

• Пролог
• Введение
• Различия между понятиями фреймворк и библиотека
• Типы решений по реализации пользовательских веб-интерфейсов
  • Простой css-фреймворк
  • Web-component
  • Css-сетка
  • Комплексный css-фреймворк

• Сравнение
• Заключение

Введение

Ежедневно мир наполняется множеством идей и технологий, особенно в IT-секторе. Люди в нем спешно начинают переходить от одного новшества к другому, применяя его не по назначению.

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

При создании новой версии mr. Gefest'а ^[1] нам не хватало информации о css-фреймворках. Нам нужно было узнать не только, какие там компоненты, но и как устроены они изнутри, получить их наиболее полное и корректное сравнение.

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

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

Работы много, поэтому сравнение я буду описывать на хабре постепенно — в виде цикла статей. Надеюсь, мой труд будет Вам полезен.

Различия в понятиях «фреймворк» и «библиотека».

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

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

Библиотека (от англ. library) в программировании — сборник подпрограмм или объектов, используемых для разработки программного обеспечения (ПО).

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

Про различия между понятиями там написано:

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

Из всего этого можно сделать вывод, что библиотека является фреймворком, если:

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

Несмотря на их четкое разделение, не всегда можно увидеть грань, где начинается css-фреймворк и заканчивается css-библиотека. Ведь в их основе лежит язык разметки и язык определения его внешнего вида. Они значительно отличаются от javascript, c++, pascal и других. Это сбивает с толку, так как их формализация не всегда подходит под определённые выше правила. Но я буду внимательнее и постараюсь сделать все, как можно точнее. Да и Вы, надеюсь, подскажете и поможете при допущении ошибок.

Типы css-фреймворков/библиотек

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

• Простые css-фреймворки;
• Web-components;
• Css-сетки;
• Комплексные css-фреймворки.

Простые css-фреймворки

В них не используется javascript. Все их модули пишутся на css и html. Они легки, быстры и просты. Из-за отсутствия javascript-компонентов у простых css-фреймворков не достаточно некоторых функциональных возможностей.

Они могут включать в себя следующие модули:

• примитивы (типография, изображения и т.д.);
• сетку;
• кнопки;
• таблицы;
• элементы форм;
• меню;
• вспомогательные элементы.

Список решений для анализа:

• Kube ^[2];
• PureCSS ^[3];
• Skeleton ^[4];
• Amazium ^[5];
• Css-framework ^[6];
• Inuit ^[7];
• Yaml4 ^[8];
• Cardinal ^[9];
• Typeplate ^[10];
• Furato ^[11];
• Kraken ^[12];
• CascadeFramework ^[13];
• Simpliste ^[14];
• Apppie ^[15].

Web-components

Они основаны на новом механизме веб-компонентов.

Веб-компоненты — это комплекс стандартов, который добавляет в браузер технологию для удобной реализации ui-решений. Каждый такой элемент будет работать в своем личном DOM-дереве без перекрытия стилями основной страницы. Это одно из главных преимуществ web-components, так как позволяет поддерживать ему свойство инкапсуляции. Более подробно об этом я писал в группе проекта: Веб-компоненты ^[16].

Список фреймворков для анализа:

• Brick ^[17];
• Polymer ^[18].

Css-сетки

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

Список решений для анализа:

• Responsive Grid System ^[19];
• 1140px CSS Grid Retired ^[20];
• The Goldilocks Approach ^[21];
• Proportional Grids ^[22];
• InGrid ^[23];
• Yamb ^[24];
• Aeon ^[25];
• Gridiculo ^[26];
• 960 ^[27];
• Toast ^[28];
• Girder ^[29];
• Pocketgrid ^[30];
• Fitgrd ^[31];
• Kindling ^[32];
• Flexbox ^[33];
• Cutegrid ^[34].

Комплексные css-фреймворки

Самые масштабные фреймворки. Обладают javascript и css+html модулями. Способны решить большинство задач по созданию web-UI.

Обычно в них присутствуют:

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

Список решений для анализа:

• Semantic-UI ^[35];
• Foundation ^[36];
• UIKit ^[37];
• 99Lime Html kickstart ^[38];
• Gumby ^[39];
• Bootstrap3 ^[40];
• Gridism ^[41].

Заключение вводного материала

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

Я наглядно доказал, чем отличается css-фреймворк от css-библиотеки, и выделил 4 типа решений:

• Простые css-фреймворки;
• Web-components;
• Css-сетки;
• Комплексные css-фреймворки.

В каждом типе определил признаки и указал список решений для дальнейшего изучения.

В следующих статья мы начнем с анализа конкретных css-фреймворков и библиотек (список может меняться). До новых встреч.

Автор: mr. Gefest

Источник ^[42]