CSS-фреймворк

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

Преимущества

• Позволяет не искушенному в тонкостях вёрстки программисту или дизайнеру правильно создать HTML-макет.
• Вёрстка на базе слоёв, а не таблиц
• Более быстрая разработка
• Кроссбраузерность
• Возможность использования генераторов кода^[1][2] и визуальных редакторов
• Единообразие кода при работе в команде позволяет снизить число разногласий при разработке

Недостатки

• В основном библиотеки имеют неудобные для человека имена селекторов, например, span-1, g-3, grid_12.
• Для изучения css-библиотеки требуется некоторое время и усилия.
• Вместе с библиотекой вы можете получить ошибки, сделанные ранее её разработчиком.
• Библиотеки бывают сильно "раздуты" - может быть много лишнего кода, который вы не будете использовать в своем проекте.
• Ваш дизайн будет зависеть от css-библиотеки.

Отличия

• Некоторые библиотеки^[3] используют сброс стилей (reset.css) для приведения в соответствие стилей по умолчанию для разных браузеров, в то время как другие^[4] используют нормализацию (Normalize.css), что уменьшает количество изначального кода библиотеки.

Типы CSS-библиотек

Из-за упомянутых недостатков — использование CSS-библиотек вызывает споры в профессиональном сообществе. Также это привело к появлению различных типов CSS-библиотек. Условно можно выделить два типа: Всеобъемлющие и Ограниченные. Третьим вариантом может быть разработка собственной библиотеки^[5]. Этот вариант предпочитает большинство разработчиков, так как это дает выгоды персонального решения и уменьшает негативные моменты зависимости от использования сторонних библиотек.

Всеобъемлющие CSS-библиотеки

Этот тип библиотеки пытается охватить большинство вещей, которые могут понадобиться разработчику. К этому типу отнесем библиотеки, которые включают CSS для верстки и сброса (или какую-то основу).

Ограниченные CSS-библиотеки

Как следует из названия, библиотеки этого типа охватывают лишь ограниченный объем потребностей или имеют конкретную цель.

Примеры CSS-библиотек

Всеобъемлющие

• Blueprint - наиболее популярная библиотека
• 960 Grid System - библиотека для быстрой разработки макетов
• Yet Another Multicolumn Layout (YAML) - имеет инструмент генерации кода, возможно создавать адаптивные интерфейсы
• Bluetrip
• Bootstrap - библиотека созданная разработчиками Twitter.
• css-framework - российская библиотека для разработки веб-интерфейсов
• Foundation 3 - продвинутая библиотека для разработки адаптивных интерфейсов.
• Fluid Baseline Grid System
• Golden Grid System - библиотека для разработки адаптивных интерфейсов на основе золотого сечения.
• Gumby Framework
• The 1140px CSS Grid System

Ограниченные

• jQuery UI CSS Framework
• CSS-based Slideshow System - библиотека для создания презентаций

Примечания

1. ↑ Variable Grid System
2. ↑ YAML Builder
3. ↑ The original "meyerweb reset" found it's way into Blueprint
4. ↑ Normalize.css используется в Twitter Bootstrap, HTML5 Boilerplate, NASA и др.
5. ↑ Guidelines for Developing Your Own CSS Framework

Ссылки

• Создание прототипа с помощью CSS-библиотеки Grid 960
• Все о 960gs - почти исчерпывающее описание
• Frameworks for Designers
• Definitive List of CSS Frameworks — Pick Your Style
• CSS-библиотека 960 Grid System (англ.)
• CSS-библиотека Twitter Bootstrap на Github
• Описание работы с библиотекой CSSS
• Definitive List of CSS Frameworks – Pick Your Style

Для улучшения этой статьи желательно?: Дополнить статью (статья слишком короткая либо содержит лишь словарное определение). Найти и оформить в виде сносок ссылки на авторитетные источники, подтверждающие написанное. Добавить иллюстрации.