WikiDer > 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-фреймворков, упорядоченных по популярности.