CSS-фреймворк
CSS-фреймворк — фреймворк, созданный для упрощения работы верстальщика, быстроты разработки и исключения максимально возможного числа ошибок вёрстки (проблемы совместимости различных версий браузеров и т. д.). Как и библиотеки скриптовых языков программирования, CSS-библиотеки, обычно имеющие вид внешнего css-файла, «подключаются» к проекту (добавляются в заголовок веб-страницы). Более функциональные фреймворки также имеют больше функций и дополнительных функций на основе JavaScript, но в основном ориентированы на дизайн и ориентированы на интерактивные шаблоны пользовательского интерфейса. Эта деталь отличает фреймворки CSS от других фреймворков JavaScript.
Преимущества
[править | править код]- Позволяет неискушенному в тонкостях вёрстки программисту или дизайнеру правильно создать HTML-макет.
- Вёрстка на базе слоёв, а не таблиц.
- Более быстрая разработка.
- Кроссбраузерность.
- Возможность использования генераторов кода[1] и визуальных редакторов.
- Единообразие кода при работе в команде позволяет снизить число разногласий при разработке.
Недостатки
[править | править код]- Библиотеки бывают сильно «раздуты» — может быть много лишнего кода, который не будет использоваться в проекте.
- Дизайн будет зависеть от css-библиотеки.
- Из-за необходимости добавления множества классов к одному элементу нарушается принцип, ради которого и был создан CSS: разделение описаний структуры и внешнего вида.
Отличия
[править | править код]- Некоторые библиотеки[2] используют сброс стилей (reset.css) для приведения в соответствие стилей по умолчанию для разных браузеров, в то время как другие[3] используют нормализацию (Normalize.css), что уменьшает количество изначального кода библиотеки.
Типы CSS-библиотек
[править | править код]Из-за упомянутых недостатков использование CSS-библиотек вызывает споры в профессиональном сообществе. Также это привело к появлению различных типов CSS-библиотек. Условно можно выделить два типа: Всеобъемлющие и Ограниченные. Третьим вариантом может быть разработка собственной библиотеки[4]. Этот вариант предпочитает большинство разработчиков, так как это дает выгоды персонального решения и уменьшает негативные моменты зависимости от использования сторонних библиотек.
Всеобъемлющие CSS-библиотеки
[править | править код]Этот тип библиотеки пытается охватить большинство вещей, которые могут понадобиться разработчику. К этому типу относятся библиотеки, которые включают CSS для вёрстки и сброса (или какую-то основу).
Ограниченные CSS-библиотеки
[править | править код]Как следует из названия, библиотеки этого типа охватывают лишь ограниченный объём потребностей или имеют конкретную цель.
Примеры CSS-библиотек
[править | править код]Всеобъемлющие
[править | править код]- Bootstrap — библиотека, созданная разработчиками Twitter.
- W3.css — CSS-фреймворк от w3schools.
- Twitter Flight
- Blueprint
- UIKit
- Materialize - CSS-фреймворк в стиле Material Design.
- 960 Grid System — библиотека для быстрой разработки макетов.
- Yet Another Multicolumn Layout (YAML) — имеет инструмент генерации кода, возможность создания адаптивных интерфейсов.
- css-framework — российская библиотека для разработки веб-интерфейсов.
- Foundation — продвинутая библиотека для разработки адаптивных интерфейсов.
- Golden Grid System — библиотека для разработки адаптивных интерфейсов на основе золотого сечения.
- Gumby Framework
- Topcoat — небольшая библиотека от Adobe распространяется по лицензии Apache 2.0
- Compass — CSS-фреймворк независимый от Rails
- Rest Css Framework
- Tailwind CSS - с открытым исходным кодом.
Ограниченные
[править | править код]- jQuery UI CSS Framework
- CSS-based Slideshow System — библиотека для создания презентаций.
Примечания
[править | править код]- ↑ YAML Builder . Дата обращения: 20 августа 2012. Архивировано 23 августа 2012 года.
- ↑ The original «meyerweb reset» found it’s way into Blueprint . Дата обращения: 20 августа 2012. Архивировано 22 августа 2012 года.
- ↑ Normalize.css используется в Twitter Bootstrap, HTML5 Boilerplate, NASA и др. Дата обращения: 28 сентября 2017. Архивировано 3 апреля 2013 года.
- ↑ Guidelines for Developing Your Own CSS Framework Архивировано 15 августа 2012 года.
Ссылки
[править | править код]- Сравнение CSS-фреймворков (англ.)
- Frameworks for Designers (англ.)
- Definitive List of CSS Frameworks — Pick Your Style (англ.)
- CSS-библиотека 960 Grid System (англ.)
- CSS-библиотека Bootstrap на Github (англ.)
- Все о 960gs — почти исчерпывающее описание (рус.)
В статье не хватает ссылок на источники (см. рекомендации по поиску). |