CSS-Framework (акронім ) — фреймворк, створений для полегшення роботи веброзробника та вебдизайнера, пришвидшення розробки та попередження максимальної кількості помилок.

Більшість сучасних фрейморків за стандартом де-факто, містять так звані CSS файли-нормалізатори, призначення яких — «онулення» (скидання) CSS до стандартного значення. Це дозволяє отримувати майже однаковий вигляд (дизайн) вебсторінки, сайту в різних браузерах та ОС.

Види Принципове питання, яке виникає при спробі класифікувати дану групу фреймворків — це різниця між фреймворком та бібліотекоюСравнение css-фреймворков/библиотек на живом примере. Часть 1, 2015 .

Надійними ознаками фреймворка вважають: він визначає правила побудови архітектури програмного коду; він зумовлює принципи структурування файлів; всередині себе має декілька бібліотек (файлів).

Цей поділ є орієнтовним, оскільки розвиток CSS FW зумовлює розширення можливостей. Наприклад yui. Розробники на офіційній сторінці позиціонують це як CSS+JavaScript-бібліотеки, хоч це справжнісінький фреймворк(згідно з наведеними вище ознаками). Але цікавість у тому, що можна окремо використати YUI CSS Components: нормалізатор, базовий CSS-файл, файл CSS-сітки тощо. без інших елементів (незалежно один від одного). Таким чином цей фреймворк одночасно потрапляє у всі види CSS FW's.

Чистий CSS-фреймворк (або CSS-бібліотека) — CSS-бібліотека у вигляді зовнішнього css-файлу, що підключають у заголовку вебсторінки. Містить лише дані CSS.

Модульний CSS-фреймворк (CSS-бібліотеки) — група файлів у вигляді зовнішніх css-файлів, що підключають у заголовку вебсторінки. CSS дані розбиваються на групи (наприклад за призначенням, виглядом — меню, кнопки і т. д.) Кожна CSS-група поміщається в окремий файл. Розробник чи дизайнер підключає лише ті модулі(файли CSS) які необхідні для відображення конкретної вебсторінки, при цьому відбувається коректна інкапсуляція властивостей. Це дозволяє зменшити трафік, навантаження на сервер, пришвидшити завантаження сторінки для клієнта. Це вкрай актуально для високонавантажених вебсайтів.

Системи CSS-сітки (система CSS-розмітки) — розмітка простору сторінки відповідно до концепції сітки, де параметрами сітки є пікселість (4-, 8- піксельна і т. д.) чи стовпчиковою (2, 3, 4, 9, 12 і т. ін.).

UI CSS-фреймворк (UI CSS FW) — група файлів, які окрім CSS-бібліотек містять файли мови програмування для ВЕБ (найчастіше js (джаваскрипт)). Така розробка є більшою в розмірі й дозволяє розробляти не лише вигляд, але й реакцію дизайну на зміни (взаємодія з користувачем — User Interaction or User Interface (UI)). Такі фреймворки завжди «важкі»(велика кількість даних) та виникають конфлікти при підключенні сторонніх бібліотек чи фреймворків, що використовують аналогічні підходи чи мови програмування.

Список фреймворків каскадних таблиць стилів Нижче наведено список фреймворків каскадних таблиць стилів, заздалегідь написаних бібліотек CCS, які покликані полегшити та пришвидшити створення макетів, відповідають стандартам та допомагають краще художньо оформляти вебсторінки: Animate.css MIT ліцензія awsm.css Base MIT Open Source ліцензія Baseguide MIT ліцензія Blaze UI Framework-free open source UI toolkit BluCSS Blueprint Bulma (альтернатива BootstrapComing from Bootstrap) Cardinal MIT Open Source Cascade Framework chota Columnal Concise CSS Dead Simple Grid MIT ліцензія Emastic MIT ліцензія, 2008 Floatz Apache License 2.0 Fluidable Fractionless Boilerplate GroundworkCSS Gumby Framework HiQ A high-IQ CSS, MIT ліцензія HTML5 Boilerplate (H5BP) Jaidee Framework Kube Kule CSS Lazy 2, 3 Levus-css Malo Materializecss Metro 4(Metro UI CSS) Milligram MIT ліцензія mini MIT ліцензія Modest Grid Responsive MIT ліцензія Responsive Grid System CC A 3.0 ліцензія RichStyle sakura Schema Semantic UI siimple Simple Grid MIT ліцензія SpaceBase Spectre MIT ліцензія StackLayout Susy TailWindCSS MIT License Timber Tacit (для чайників) MIT ліцензія turretcss Sass і jQuery, MIT ліцензія UiKit Unsemantic YAML CSS Framework YUI CSS grids Wing (designed for minimalists) Zass μ CSS Framework

Чисті CSS-фреймворки Чисті CSS-фреймворки більше підходять як інструмент для розробки проектів з високим навантаженням, та враховують використання мобільних пристроїв перегляду. Важливим недоліком деяких них є проблема підтримки старих версій браузерів для Інтернету та відсутність функцій реагування дизайну на зміни. Перевагою є невеликий розмір.

960 Grid System JQuery, GPL та MIT ліцензія Foundation 6 © CSS Smart Grid Pure Skeleton Twitter Bootstrap

Skeleton Скелето́н (, букв. — «скелет, каркас») — простий CSS-Framework, «шаблонний» інструмент веб-дизайнера, який полегшує етап візуального проектування сайтів, вебсторінок і т.і. Розмір ~9 Кб (2018).

Ліцензія на використання: MIT (), GPL-сумісна, безкоштовно. Створено Dave Gamache. Розробник загалом вказує, що це не є UI framework.

Перша версія: V1.0.0 (5/15/2011). Також проект є на Github.Skeleton: A Dead Simple, Responsive Boilerplate for Mobile-Friendly Development http Останній «коміт» 2014 року. Актуальна версія на XII.2014 — v.2.04

Базові параметри

На Github серед CSS проектів(в березні 2018) найбільш відвідуваними були Bootstrap, Bulma, SceletonTrending. See what the GitHub community is most excited about today., процитовано 2018-03-20, .

Найменші за розміром коду chota, Sceleton, Responsive Grid System, Pure.

Системи CSS-сітки (): Responsive Grid System; 960; 1140px CSS Grid Retired ; The Goldilocks Approach; Proportional Grids; InGrid; Yamb; Aeon; Gridiculo; Toast; Girder; Pocketgrid; Fitgrd; Kindling; Flexbox; Cutegrid; Gridle; Gridism; YUI CSS grids.

UI CSS FW: Bootstrap; Semantic-UI; Foundation; UIKit ; 99Lime Html kickstart ; Gumby; Material Design Lite; Materialize.

Переваги Блокове верстання Ретельно підібрані стилі покращують читабельність контенту Кросбраузерність Пришвидшення розробки Одноманітність коду дозволяє знизити кількість конфліктів при командній розробці Допомагає недосвідченому розробнику правильно створювати HTML-макет Дає можливість використовувати генератори кодуYAML BuilderVariable Grid System

Недоліки Залежність від сторонньої бібліотеки Деякі бібліотеки використовують префікси, що ускладнює розуміння коду Великий розмір бібліотек Більшість фреймворків не підтримують старі версії браузерів. Більшість фреймворків не підтримують власні старіші версії, або підтримують неповністю.

Особливості

Grid Systems НазваОстання версія/ДатаЛіцензіяфіксована, резинова, еластичнаОдиниці (px, em,%)Особливості Кількість стовбчиків960 grid system 21 жовтня 2011 GPL, MIT License fixed px source ordering 12, 16, 241140 CSS Grid 2.0 fluid max width 1140px, columns in % media queries, support for pre-css3 browsers with css3-mediaqueries, responsive images 12Blueprint 1.0.1 (May 14, 2011) MIT License typography, forms, print. plugins for buttons, tabs and sprites.Cascade Framework 1.0 (March 18, 2013) MIT hybrid px,% Layout, typography, forms, buttons, navigation, media queries + more AnyColumnal CSS grid system 0.85 CC BY-SA 3.0 fluid max width 1140px, columns in % responsive, sub-columns, pre- and suffix classes, media queries, responsive image sizing 12Floatz 1.1.2 (July 17, 2012) Apache License v2.0 fixed and fluid % Robust. Easy to use. For content based websites as well as web based / rich applications. Complex forms layout. Optional integration with GWT. AnyFluidable April 09, 2012 CC0 1.0 fluid responsive, mobile layout, fixed gutters, any number of columns AnyFoundation Zurb 4.x (2013) MIT License fluid px,% Responsive Layout, source ordering, typography, forms, buttons, navigation, media queries, js libraries 12 Gumby Framework July 2012 MIT License fluid %, px responsive, media queries, hybrid grid PSD templates, UI kit, typography forms, buttons, navigation, js libraries, vertical alignment 12, 16Semantic 1.2 (January 11, 2012) Apache License v2.0 px, % responsiveSkeleton V1.2 (6/20/2012) MIT license responsive Responsive Grid Down To Mobile, Fast to Start, Style Agnostic. Base grid is a variation of the 960 grid system. 12Twitter Bootstrap 2.2.2 (December 8, 2012) Apache License v2.0 fixed, fluid px,% Layout, typography, forms, buttons, navigation, media queries + more, + .less files + js libraries 12YAML CSS Framework 4.0.1 (March 12, 2012) CC-BY 2.0 fixed, elastic, fluid px, em, % Layout, grids, columns, forms, buttons, progressive linearization for responsive layouts, float handling, navigation, typography, accessibility, add-ons (accessible tabs, rtl-support, microformats) anyYUI CSS grids 3.5.1 BSD-3 fixed and fluid Part of Yui libs, on 2018 is not officially supportedZass 1.0 (January 24, 2012) LGPL License fluid % semantic (doesn't pollute HTML with classes), clean (no CSS hacks neither negative margins), any number of columns, infinite nesting of columns AnyJaidee Framework (3.2 SP1) April 7, 2013 CC-BY 2.0, Openpassorn license v1.0 fluid px, % Responsive CSS Layout, typography, forms, buttons, navigation, media queries, js librarie, slideshow, js tab, Responsive modal popup 12

Примітки

Посилання CSS Frameworks- comparing Bootstrap alternatives, 2014 List of awesome CSS frameworks A collection of best front-end frameworks for faster and easier web development CSS Front-end Frameworks with comparison Popular CSS Libraries(CSS, Sass, LESS and Stylus libraries), 2017