Фреймворки каскадних таблиць стилів

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

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

Види

Принципове питання, яке виникає при спробі класифікувати дану групу фреймворків — це різниця між фреймворком та бібліотекою.

Надійними ознаками фреймворка вважають:

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

Цей поділ є орієнтовним, оскільки розвиток 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, які покликані полегшити та пришвидшити створення макетів, відповідають стандартам та допомагають краще художньо оформляти вебсторінки:

• 960 Grid System JQuery, GPL та MIT ліцензія
• Animate.css MIT ліцензія
• awsm.css
• Base MIT Open Source ліцензія
• Baseguide MIT ліцензія
• Blaze UI Framework-free open source UI toolkit
• BluCSS
• Blueprint
• Bulma (альтернатива Bootstrap)
• Cardinal MIT Open Source
• Cascade Framework
• chota
• Columnal
• Concise CSS
• CSS Smart Grid
• Dead Simple Grid MIT ліцензія
• Emastic MIT ліцензія, 2008
• Floatz Apache License 2.0
• Fluidable
• Foundation 6 ©
• 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
• Pure, чистий модульний CSS
• Responsive MIT ліцензія
• Responsive Grid System CC A 3.0 ліцензія
• RichStyle
• sakura
• Скелетон (Sceleton), чистий CSS
• Schema
• Semantic UI
• siimple
• Simple Grid MIT ліцензія
• SpaceBase
• Spectre MIT ліцензія
• StackLayout
• Susy
• TailWindCSS MIT License
• Timber
• Tacit (для чайників) MIT ліцензія
• turretcss Sass і jQuery, MIT ліцензія
• Twitter Bootstrap
• UiKit
• Unsemantic
• YAML CSS Framework
• YUI CSS grids
• Wing (designed for minimalists)
• Zass
• μ CSS Framework

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

На Github серед CSS проектів(в березні 2018) найбільш відвідуваними були Bootstrap, Bulma, Sceleton.

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

Системи CSS-сітки (англ. CSS Grid):

• 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-макет
• Дає можливість використовувати генератори коду

Недоліки

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

Особливості

Grid Systems

Посилання

• 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