CSS-фреймворк - CSS framework
 | эта статья нужны дополнительные цитаты для проверка. (Февраль 2017 г.) (Узнайте, как и когда удалить этот шаблон сообщения) |
А CSS-фреймворк это библиотека, позволяющая упростить веб-дизайн, соответствующий стандартам, с помощью Каскадные таблицы стилей язык. Большинство этих фреймворков содержат как минимум сетка. Более функциональные фреймворки также имеют больше функций и дополнительные JavaScript основанные на функциях, но в основном ориентированы на дизайн и ориентированы на интерактивные шаблоны пользовательского интерфейса. Эта деталь отличает CSS-фреймворки от других Фреймворки JavaScript.
Два примечательных и широко используемых примера: Бутстрап и Фонд.
Фреймворки CSS предлагают различные модули и инструменты:
- сбросить таблицу стилей
- сетка особенно для адаптивный веб-дизайн
- веб-типографика
- набор из иконки в спрайты или иконочные шрифты
- стиль для всплывающие подсказки, кнопки, элементы формы
- части графический пользовательский интерфейс подобно аккордеон, вкладки, слайд-шоу или модальные окна (Лайтбокс )
- эквалайзер для создания контента одинаковой высоты
- часто используемые вспомогательные классы CSS (осталось, скрывать)
В более крупных фреймворках используется интерпретатор CSS, например Меньше или Sass.
Список известных фреймворков CSS
Сеточные системы
| имя | Последний выпуск (дата) | Лицензия | Сетка | Единицы | Функции | Нет. колонн |
|---|---|---|---|---|---|---|
| Атомарный CSS / атомайзер | Atomizer 3.7.0 (31 марта 2020 г.)[1] | Лицензия BSD | Любые | Любые | Динамическая библиотека атомарного CSS | Любые |
| Чертеж | 1.0.1 (14 мая 2011 г.)[2] | Лицензия MIT | Типографика, формы, печать, плагины для кнопок, вкладок и спрайтов. | |||
| Бутстрап | 4.5.3 (13 октября 2020 г.)[3] | Лицензия MIT (Лицензия Apache до 3.1.0) | фиксированный, плавный, отзывчивый | px,% | Макет, типографика, формы, кнопки, навигация, медиа-запросы, файлы .sass, библиотеки JavaScript. | Любые, по умолчанию 12[4] |
| Бульма | 0.8.2 (11 апреля 2020 г.)[5] | Лицензия MIT | На основе Flexbox, полностью адаптивный, сетка | px,% | Макет, типографика, формы, кнопки, навигация, файлы .sass, простой в освоении синтаксис, без JavaScript. | Любые, по умолчанию 12[6] |
| Undernet | 7.0.0 (29 декабря 2019 г.)[7] | Лицензия MIT | На основе Flexbox, отзывчивый | px,%, em | Макет, типографика, формы, кнопки, файлы .scss, каскадирование с ограничением (необязательно), библиотеки JavaScript, готовность к CDN. | Любые, по умолчанию 12[8] |
| Каскадная структура | 1.6 (16 декабря 2014 г.) [9] | Массачусетский технологический институт | фиксированный, эластичный, плавный, отзывчивый | px,% | Сетка, макет, типографика, формы, кнопки и медиа-запросы. (больше включено) | Любые |
| Фонд | 6.6.3 (8 апреля 2020 г.) [10] | Лицензия MIT | жидкость | px,% | Адаптивный макет, порядок источников, типографика, формы, кнопки, навигация, медиа-запросы и библиотеки JavaScript. | Любые, по умолчанию 12[11] |
| YAML | 4.1.2 (28 июля 2013 г.)[12] | CC-BY 2.0 | фиксированная, эластичная, жидкая | px, em,% | Макет, сетки, столбцы, формы, кнопки, прогрессивная линеаризация для адаптивных макетов, обработка плавающих элементов, навигация, типографика, специальные возможности и надстройки. (доступные вкладки, RTL-поддержка и микроформаты) | Любые |
| Сетки YUI CSS | 3.18.1 (22 октября 2014 г.)[13] | BSD-3 | фиксированный и жидкий | |||
| Простой CSS | 3.3.1 (30 апреля 2019 г.)[14] | Массачусетский технологический институт | фиксированный, плавный, отзывчивый | px | Типографика (цитата, код, заголовки, ссылки, абзац, мелкий текст), помощники (цвета, отображение, плавающее, размер, интервал, текстовые помощники), элементы (кнопки, правило, счетчик, тег, подсказка), компоненты (предупреждение, навигационная цепочка , карточка, список, меню, таблица, вкладки), макет (поле, панель навигации, содержимое, jumbotron, нижний колонтитул), форма (поля, ввод, переключатель, флажок, радио, выбор, текстовое поле), сетка и эксперименты (модальный, индикатор выполнения и шаги). | Любые, по умолчанию 12 |
| Йогурт | 1.1.2-solidcore (2 ноября 2020 г.)[15] | Массачусетский технологический институт | flexbox, отзывчивый, фиксированный, плавный | Любые | (Документация по йогурту ) Специальные возможности, анимация, фон, границы, жидкости, эффекты, фильтры, шаблоны, Flexbox, интерактивность, макеты, шаблоны, размер, интервал, SVG, таблицы, тема, преобразования, переходы, типографика, (без javascript), (низкоуровневый манипуляции со стилем без написания CSS) | Любые |
Смотрите также
Рекомендации
- ^ «Релизы · acss-io / atomizer · GitHub». GitHub. Получено 23 апреля, 2020.
- ^ «Релизы · joshuaclayton / blueprint-css · GitHub». GitHub. Получено 23 апреля 2020.
Этот репозиторий заархивирован владельцем. Теперь он доступен только для чтения.
- ^ «Релизы · twbs / bootstrap · GitHub». GitHub. Получено 31 октября, 2020.
- ^ Документация Bootstrap - Настройка сетки
- ^ «Релизы · jgthms / bulma · GitHub». GitHub. Получено 22 апреля, 2020.
- ^ Документация Bulma - Плитка
- ^ "Релизы · geotrev / undernet · GitHub". GitHub. Получено 23 апреля 2020.
- ^ Документация Undernet - Flex Grid
- ^ Cascade Framework (16 декабря 2014 г.). «Выпущен Cascade Framework 1.6. --- http://www.cascade-framework.com/ #css #html #frontend # frameworkpic.twitter.com / 9Hmfgbt47X». @cascadecss. Получено 24 апреля 2020.
- ^ "Релизы · Foundation / Foundation-сайты · GitHub". GitHub. Получено 24 апреля 2020.
- ^ Документация по фундаменту - The Grid
- ^ «Релизы · yamlcss / yaml · GitHub». GitHub. Получено 24 апреля 2020.
- ^ «Релизы · yui / yui3 · GitHub». GitHub. Получено 24 апреля 2020.
- ^ "Выпуск v3.3.1 · siimple / siimple · GitHub". GitHub. Получено 24 апреля 2020.
- ^ "Выпуск v1.1.2-solidcore · yogurt-foundation / yogurt-css · GitHub". GitHub. Получено 2 ноября 2020.
внешняя ссылка
- CSS Front-end Frameworks со сравнением
- Отличные CSS-фреймворки, актуальная коллекция CSS-фреймворков, упорядоченных по популярности.