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, які покликані полегшити та пришвидшити створення макетів, відповідають стандартам та допомагають краще художньо оформляти вебсторінки:
- Animate.css MIT ліцензія
- awsm.css
- Base MIT Open Source ліцензія
- Baseguide MIT ліцензія
- Blaze UI Framework-free open source UI toolkit
- BluCSS
- Bulma (альтернатива 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
Скелето́н (англ. skeleton, букв. — «скелет, каркас») — простий CSS-Framework, «шаблонний» інструмент веб-дизайнера, який полегшує етап візуального проектування сайтів, вебсторінок і т.і. Розмір ~9 Кб (2018).
Ліцензія на використання: MIT (англ. MIT License), GPL-сумісна, безкоштовно. Створено Dave Gamache. Розробник загалом вказує, що це не є UI framework.
Перша версія: V1.0.0 (5/15/2011). Також проект є на Github. Останній «коміт» 2014 року. Актуальна версія на XII.2014 — v.2.04
Базові параметри
На 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
Назва | Остання версія/Дата | Ліцензія | фіксована, резинова, еластична | Одиниці (px, em,%) | Особливості | Кількість стовбчиків |
---|---|---|---|---|---|---|
960 grid system | 21 жовтня 2011 | GPL, MIT License | fixed | px | source ordering | 12, 16, 24 |
1140 CSS Grid | 2.0 | fluid | max width 1140px, columns in % | media queries, support for pre-css3 browsers with css3-mediaqueries, responsive images | 12 | |
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 | Any |
Columnal 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 | 12 |
Floatz | 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. | Any |
Fluidable | April 09, 2012 | CC0 1.0 | fluid | responsive, mobile layout, fixed gutters, any number of columns | Any | |
Foundation 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, 16 |
Semantic | 1.2 (January 11, 2012) | Apache License v2.0 | px, % | responsive | ||
Skeleton | 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. | 12 | |
Twitter 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 | 12 |
YAML 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) | any |
YUI CSS grids | 3.5.1 | BSD-3 | fixed and fluid | Part of Yui libs, on 2018 is not officially supported | ||
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 | Any | |
Jaidee 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-фреймворков/библиотек на живом примере. Часть 1, 2015 (рос.)
- (англ.)Coming from Bootstrap
- Skeleton: A Dead Simple, Responsive Boilerplate for Mobile-Friendly Development http
- Trending. See what the GitHub community is most excited about today., процитовано 2018-03-20, (англ.)
- YAML Builder(англ.)
- Variable Grid System [ 17 січня 2014 у Wayback Machine.](англ.)
Посилання
- 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
Вікіпедія, Українська, Україна, книга, книги, бібліотека, стаття, читати, завантажити, безкоштовно, безкоштовно завантажити, mp3, відео, mp4, 3gp, jpg, jpeg, gif, png, малюнок, музика, пісня, фільм, книга, гра, ігри, мобільний, телефон, android, ios, apple, мобільний телефон, samsung, iphone, xiomi, xiaomi, redmi, honor, oppo, nokia, sonya, mi, ПК, web, Інтернет
CSS Framework akronim angl CSS FW frejmvork stvorenij dlya polegshennya roboti vebrozrobnika ta vebdizajnera prishvidshennya rozrobki ta poperedzhennya maksimalnoyi kilkosti pomilok Bilshist suchasnih frejmorkiv za standartom de fakto mistyat tak zvani CSS fajli normalizatori priznachennya yakih onulennya skidannya CSS do standartnogo znachennya Ce dozvolyaye otrimuvati majzhe odnakovij viglyad dizajn vebstorinki sajtu v riznih brauzerah ta OS VidiPrincipove pitannya yake vinikaye pri sprobi klasifikuvati danu grupu frejmvorkiv ce riznicya mizh frejmvorkom ta bibliotekoyu Nadijnimi oznakami frejmvorka vvazhayut vin viznachaye pravila pobudovi arhitekturi programnogo kodu vin zumovlyuye principi strukturuvannya fajliv vseredini sebe maye dekilka bibliotek fajliv Cej podil ye oriyentovnim oskilki rozvitok CSS FW zumovlyuye rozshirennya mozhlivostej Napriklad yui Rozrobniki na oficijnij storinci pozicionuyut ce yak CSS JavaScript biblioteki hoch ce spravzhnisinkij frejmvork zgidno z navedenimi vishe oznakami Ale cikavist u tomu sho mozhna okremo vikoristati YUI CSS Components normalizator bazovij CSS fajl fajl CSS sitki tosho bez inshih elementiv nezalezhno odin vid odnogo Takim chinom cej frejmvork odnochasno potraplyaye u vsi vidi CSS FW s Chistij CSS frejmvork abo CSS biblioteka CSS biblioteka u viglyadi zovnishnogo css fajlu sho pidklyuchayut u zagolovku vebstorinki Mistit lishe dani CSS Modulnij CSS frejmvork CSS biblioteki grupa fajliv u viglyadi zovnishnih css fajliv sho pidklyuchayut u zagolovku vebstorinki CSS dani rozbivayutsya na grupi napriklad za priznachennyam viglyadom menyu knopki i t d Kozhna CSS grupa pomishayetsya v okremij fajl Rozrobnik chi dizajner pidklyuchaye lishe ti moduli fajli CSS yaki neobhidni dlya vidobrazhennya konkretnoyi vebstorinki pri comu vidbuvayetsya korektna inkapsulyaciya vlastivostej Ce dozvolyaye zmenshiti trafik navantazhennya na server prishvidshiti zavantazhennya storinki dlya kliyenta Ce vkraj aktualno dlya visokonavantazhenih vebsajtiv Sistemi CSS sitki sistema CSS rozmitki rozmitka prostoru storinki vidpovidno do koncepciyi sitki de parametrami sitki ye pikselist 4 8 pikselna i t d chi stovpchikovoyu 2 3 4 9 12 i t in UI CSS frejmvork UI CSS FW grupa fajliv yaki okrim CSS bibliotek mistyat fajli movi programuvannya dlya VEB najchastishe js dzhavaskript Taka rozrobka ye bilshoyu v rozmiri j dozvolyaye rozroblyati ne lishe viglyad ale j reakciyu dizajnu na zmini vzayemodiya z koristuvachem User Interaction or User Interface UI Taki frejmvorki zavzhdi vazhki velika kilkist danih ta vinikayut konflikti pri pidklyuchenni storonnih bibliotek chi frejmvorkiv sho vikoristovuyut analogichni pidhodi chi movi programuvannya Spisok frejmvorkiv kaskadnih tablic stilivNizhche navedeno spisok frejmvorkiv kaskadnih tablic stiliv zazdalegid napisanih bibliotek CCS yaki poklikani polegshiti ta prishvidshiti stvorennya maketiv vidpovidayut standartam ta dopomagayut krashe hudozhno oformlyati vebstorinki Animate css MIT licenziya awsm css Base MIT Open Source licenziya Baseguide MIT licenziya Blaze UI Framework free open source UI toolkit BluCSS Bulma alternativa Bootstrap Cardinal MIT Open Source Cascade Framework chota Columnal Concise CSS Dead Simple Grid MIT licenziya Emastic MIT licenziya 2008 Floatz Apache License 2 0 Fluidable Fractionless Boilerplate GroundworkCSS Gumby Framework HiQ A high IQ CSS MIT licenziya HTML5 Boilerplate H5BP Jaidee Framework Kube Kule CSS Lazy 2 3 Levus css Malo Materializecss Metro 4 Metro UI CSS Milligram MIT licenziya mini MIT licenziya Modest Grid Responsive MIT licenziya Responsive Grid System CC A 3 0 licenziya RichStyle sakura Schema Semantic UI siimple Simple Grid MIT licenziya SpaceBase Spectre MIT licenziya StackLayout Susy TailWindCSS MIT License Timber Tacit dlya chajnikiv MIT licenziya turretcss Sass i jQuery MIT licenziya UiKit Unsemantic YAML CSS Framework YUI CSS grids Wing designed for minimalists Zass m CSS FrameworkChisti CSS frejmvorkiChisti CSS frejmvorki bilshe pidhodyat yak instrument dlya rozrobki proektiv z visokim navantazhennyam ta vrahovuyut vikoristannya mobilnih pristroyiv pereglyadu Vazhlivim nedolikom deyakih nih ye problema pidtrimki starih versij brauzeriv dlya Internetu ta vidsutnist funkcij reaguvannya dizajnu na zmini Perevagoyu ye nevelikij rozmir 960 Grid System JQuery GPL ta MIT licenziya Foundation 6 c CSS Smart Grid Pure Skeleton Twitter Bootstrap Skeleton Skeleto n angl skeleton bukv skelet karkas prostij CSS Framework shablonnij instrument veb dizajnera yakij polegshuye etap vizualnogo proektuvannya sajtiv vebstorinok i t i Rozmir 9 Kb 2018 Licenziya na vikoristannya MIT angl MIT License GPL sumisna bezkoshtovno Stvoreno Dave Gamache Rozrobnik zagalom vkazuye sho ce ne ye UI framework Persha versiya V1 0 0 5 15 2011 Takozh proekt ye na Github Ostannij komit 2014 roku Aktualna versiya na XII 2014 v 2 04Bazovi parametriNa Github sered CSS proektiv v berezni 2018 najbilsh vidviduvanimi buli Bootstrap Bulma Sceleton Najmenshi za rozmirom kodu chota Sceleton Responsive Grid System Pure Sistemi CSS sitki angl 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 Perevagi Retelno pidibrani stili pokrashuyut chitabelnist kontentu Krosbrauzernist Prishvidshennya rozrobki Odnomanitnist kodu dozvolyaye zniziti kilkist konfliktiv pri komandnij rozrobci Dopomagaye nedosvidchenomu rozrobniku pravilno stvoryuvati HTML maket Daye mozhlivist vikoristovuvati generatori kodu Nedoliki Zalezhnist vid storonnoyi biblioteki Deyaki biblioteki vikoristovuyut prefiksi sho uskladnyuye rozuminnya kodu Velikij rozmir bibliotek Bilshist frejmvorkiv ne pidtrimuyut stari versiyi brauzeriv Bilshist frejmvorkiv ne pidtrimuyut vlasni starishi versiyi abo pidtrimuyut nepovnistyu OsoblivostiGrid Systems Nazva Ostannya versiya Data Licenziya fiksovana rezinova elastichna Odinici px em Osoblivosti Kilkist stovbchikiv 960 grid system 21 zhovtnya 2011 GPL MIT License fixed px source ordering 12 16 24 1140 CSS Grid 2 0 fluid max width 1140px columns in media queries support for pre css3 browsers with css3 mediaqueries responsive images 12 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 Any Columnal 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 12 Floatz 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 Any Fluidable April 09 2012 CC0 1 0 fluid responsive mobile layout fixed gutters any number of columns Any Foundation 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 16 Semantic 1 2 January 11 2012 Apache License v2 0 px responsive Skeleton 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 12 Twitter 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 12 YAML 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 any YUI CSS grids 3 5 1 BSD 3 fixed and fluid Part of Yui libs on 2018 is not officially supported 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 Any Jaidee 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 12PrimitkiSravnenie css frejmvorkov bibliotek na zhivom primere Chast 1 2015 ros angl Coming from Bootstrap Skeleton A Dead Simple Responsive Boilerplate for Mobile Friendly Development http Trending See what the GitHub community is most excited about today procitovano 2018 03 20 angl YAML Builder angl Variable Grid System 17 sichnya 2014 u Wayback Machine angl PosilannyaCSS Frameworks comparing Bootstrap alternatives 2014 angl List of awesome CSS frameworks angl A collection of best front end frameworks for faster and easier web development angl CSS Front end Frameworks with comparison angl Popular CSS Libraries CSS Sass LESS and Stylus libraries 2017