Amikor körülbelül 8-9 évvel ezelőtt elkezdtem megismerkedni a Bootstrap anyagokat, illetve kipróbáltam a gyakorlatban is, végül hát igen beleszerettem. Most pedig a többi még újabb 9db CSS keretrendszert is átnéztem, végül összefoglalva megírtam őket.
Íme a legjobb nyílt forráskódú CSS-keretrendszerek listája, amiben megismerkedheti a felhasználóbarátságukról, a mobilválaszkészségükről és a hozzáférhetőségükről.
Megjegyzés: 2023-as évek alapján megírom azokat.
Mi az a CSS-keretrendszer
Azt jelenti, hogy egy előre elkészített könyvtárak találhatóak, amiben a célja, hogy a fejlesztők számára egyszerűsítenék a munkafolyamatot, amivel időt és erőfeszítést takaríthatnak meg, azaz a weboldalak vagy webes alkalmazások létrehozásának felgyorsításához használják.
A frontend-szerűen szabványosan előre megírt CSS kódot tartalmaznak benne, sőt előre definiált felhasználói felület-összetevőket, érzékeny rácsrendszereket és olyan elemek stílusát is tartalmazzák, mint például:
űrlapok, gombok, szöveg és egyéb megjelenítések.
A feltalálók az volt elsődleges céljuk, hogy kiindulópontként biztosítsanak a webes tervezők és fejlesztők számára, amivel rövid időn belül tudjon elkészülni a projektek és a feladatok, azaz lehetővé tesznek a weboldalak / webes alkalmazások gyorsabb és hatékonyabb tervezését, illetve elkészítését.
Wikipédia alapfogalma szerint:
A CSS-keretrendszer egy olyan könyvtár, amely a Cascading Style Sheets nyelv használatával egyszerűbb, szabványoknak megfelelőbb webtervezést tesz lehetővé. A legtöbb ilyen keretrendszer tartalmaz legalább egy rácsot. A funkcionálisabb keretrendszerek több szolgáltatást és további JavaScript-alapú funkciókat is tartalmaznak, de többnyire tervezés-orientáltak, és az interaktív felhasználói felület mintáira összpontosítanak. Ez a részlet megkülönbözteti a CSS-keretrendszereket más JavaScript-keretrendszerektől. (forrás, wiki honlapról: https://en.wikipedia.org/wiki/CSS_framework)
A CSS-keretrendszerek használatának előnyei
- Könnyen használhatóak és testreszabhatók
- Nem szükséges nulláról vagy összes CSS kódot megírni
- Továbbfejlesztett hozzáférhetőség, azaz kiegészíthetnek, bővíthetnek és módosíthatnak
- Böngészők közötti kompatibilitásak
- Aktív támogatásokkal és közösségekkel rendelkeznek
- Reszponzivitás (összes, különböző méretű képernyőt támogat és tökéletesen megjelenik)
- Több időt spórol vele
- Következetesség (felhasználói élményeit és bevált gyakorlatok követéseit)
- Karbantarthatóság és frissíthetőség
- Weboldal / webes alkalmazás teljesítményoptimalizálás
- Kisegítő lehetőségek (a fogyatékkal élő felhasználók számára hozzáférhetőek)
Bootstrap
Hivatalos honlapja
Alapfogalma
A Bootstrap a fejlesztők számára az egyik legnépszerűbb és legismertebb CSS-keretrendszer körében az egészen a világon, sőt legjobb eredményt nyújtja is.
Egy előre megtervezett összetevők széles skáláját tartalmazza (jól dokumentált és könnyű megtalálni a forrásokat is), mint például:
tipográfiák, űrlapok, gombok, táblázatok, navigációk és egyéb megjelenítések.
JavaScript bővítményekkel is rendelkezik a szükséges funkciók érdekében.
Adatai
Eredeti szerzők:
Mark Otto, Jacob Thornton
Fejlesztők:
Bootstrap Core Team
Első verzió kiadásának dátuma:
2011. Augusztus 19.
Legfrissebb verziója:
5.3.0. / 2023 Május 30.
Programozási nyelvek:
HTML, CSS, Less (v3), Sass (v4) és JavaScript
Platform:
Web platform
Főbb jellemzők és tulajdonságai
- A legnépszerűbb / leghíresebb frontend keretrendszerek közül
- Teljes funkcionalitású (fejlesztők számára megkönnyítheti egy előre jól strukturált oldalak fejlesztését)
- Könnyen használhatóak és testreszabhatók
- Érett és támogatott (Stabil kiadások és hosszú távú támogatás)
Előnyei
- Aktív támogatásokkal és közösségekkel rendelkeznek
- Kisegítő lehetőségek (a fogyatékkal élő felhasználók számára hozzáférhetőek)
- Támogatja a SASS-t és a LESS-t
- A Bootstrap rácsrendszere nagyon rugalmas és érzékeny (könnyen létrehozhatóak)
- Több időt és erőfeszítést takarít meg a tervezésben és a kódolásban
Hátrányai
- Nagy méretű fájlokat hoz létre, ezért sajnos hosszabb és megnövelt letöltési idővel
- Erősen támaszkodik az osztályokra
- Kompatibilitási problémákat jelentkezhet a böngésző régebbi verzió esetében
- A Bootstrap alapértelmezett stílusai testreszabást igényelhetnek, hogy megfelelően illeszkedjenek egy adott projekt tervezési esztétikájához
Tailwind
Hivatalos honlapja
Alapfogalma
Egy modern, népszerű segédprogram első CSS-keretrendszer, amely előre definiált osztályokat biztosít, amelyekkel HTML-elemeket lehet stílusozni.
Adatai
Eredeti szerzők:
Adam Wathan, Jonathan Reinink, David Hemphill, and Steve Schoger
Fejlesztők:
Tailwind Labs
Első verzió kiadásának dátuma:
2017. November 1.
Legfrissebb verziója:
3.3.3. / 2023 Július 13.
Programozási nyelvek:
HTML, CSS, Less, Sass és JavaScript
Platform:
Web platform
Főbb jellemzők és tulajdonságai
- Nincs design(nem tartalmaz előre készített elemeket / meghatározott tervezési nyelvet)
- Újrafelhasználható összetevők
- Hatékony PostCSS/SASS integráció
Előnyei
- Növeli a fejlesztői termelékenységet
- Könnyen használhatóak és testreszabhatók
- Gyorsabb fejlesztés (időt és erőfeszítést takarít meg)
- Következetes tervezést biztosít
- Továbbfejlesztett hozzáférhetőség
- Skálázhatóak
Hátrányai
- Erősen támaszkodik a közüzemi osztályokra
- Meredek tanulási görbével rendelkezik
- Bonyolultabban és nehezebben karbantartók
- Az osztályok túlzott használata (negatívan befolyásolhatja a weboldal teljesítménye)
- Tervezési korlátok
Bulma
Hivatalos honlapja
Alapfogalma
A Bulma egy ingyenes, nyílt forráskódú CSS-keretrendszer, amely a Flexboxon alapul és a moduláris felépítése biztosítja a rugalmasságot, igen tartalmaz rácsrendszert és megtervezett összetevőket, mint például:
űrlapok, gombok és navigációk.
Csak annyi különbség a többi CSS keretrendszerekhez képest, hogy nem tartalmaz a JavaScript összetevőket / funkciókat.
Adatai
Fejlesztők:
Jeremy Thomas
Első verzió kiadásának dátuma:
2016
Legfrissebb verziója:
0.9.4 / 2022 Május 8.
Programozási nyelvek:
CSS, Sass
Főbb jellemzők és tulajdonságai
- Esztétikus tervezés
- Fejlesztőbarát
- Könnyen használhatóak és testreszabhatók
- Nem rendelkeznek a Javascript-tel (de könnyen integrálható)
Előnyei
- Rendkívül rugalmas és testreszabható
- Könnyű és gyors (CSS-osztályai nagyon könnyen használhatók és érthetők)
- Moduláris felépítésű, és nincsenek osztályai
- A fájlmérete nagyon kicsi, ezért gyorsabb oldalbetöltési idővel rendelkezik
Hátrányai
- Sajnos kisebb támogatásokkal és közösségekkel rendelkeznek
- Nem lesz könnyű megtanulni azok számára, akik még nem ismerik a Flexboxot
- Előfordulhat, hogy még több testreszabást és több kódolási erőfeszítést igényel
Foundation
Hivatalos honlapja
Alapfogalma
A Foundation is szintén egy CSS-keretrendszer, amely egy előre megtervezett összetevők széles skáláját és egy érzékeny rácsrendszert tartalmaz. JavaScript bővítményeket is tartalmaz a további funkciók érdekében.
A többi CSS-keretrendszerhez képest nagyobb szabályozási lehetőséget kínál a fejlesztőknek a testreszabások terén.
Adatai
Eredeti szerzők:
ZURB
Fejlesztők:
ZURB
Első verzió kiadásának dátuma:
2011. Szeptember.
Legfrissebb verziója:
6.7.5. / 2022. Július 12.
Programozási nyelvek:
HTML, CSS, Sass és JavaScript
Főbb jellemzők és tulajdonságai
- Teljes funkcionalitású (benne találhatóak: navigációs sávok, többféle design elemek és egy fejlesztőbarát rácsrendszer)
- E-mail tervezés (érzékeny e-mail sablonokat hozhat létre bármely ügyfélhez)
- Animációkat létrehozhatóak
Előnyei
- Az Foundation rácsrendszere nagyon rugalmas, van lehetőség az elrendezések egyszerű testreszabását intézni is (magasszintűen és könnyen)
- Könnyen használhatóak és testreszabhatók
- Az Foundation-t a mobileszközöket szem előtt tartva tervezték, így remek választás a reszponzív webdesign-hez
Hátrányai
- Kezdők számára bonyolult lehet (Meredek tanulási görbe)
- Sajnos kisebb támogatásokkal és közösségekkel rendelkeznek
- Túlzott támaszkodás a JavaScriptre
- Kompatibilitási korlátozások
Semantic UI
Hivatalos honlapja
Alapfogalma
Ez egy népszerű nyílt forráskódú előtér-fejlesztési keretrendszer, amelynek célja, hogy természetes nyelvi elveket használ az osztályok és összetevők elnevezésére.
Adatai
Eredeti szerzők:
Semantic LLC
Fejlesztők:
Jack Lukic
Első verzió kiadásának dátuma:
2013. Szeptember 25.
Legfrissebb verziója:
2.5.0 / 2022. Október 6.
Programozási nyelvek:
HTML, CSS, Less és JavaScript
Előnyei
- Könnyen használhatóak és testreszabhatók
- Reszponzivitás (különböző méretű képernyőt támogat)
- Átfogó: megkönnyítik az összetett és tetszetős felhasználói felületek létrehozását
- Böngészők közötti kompatibilitás
Hátrányai
- Meredek tanulási görbe
- Nagy fájlmérettel rendelkezhet, ami igen sajnos le fog lassítani a weboldal betöltési idejét
- Korlátozott dokumentáció
- Kompatibilitási problémák
Materialize
Hivatalos honlapja
Alapfogalma
Ez egy olyan CSS-keretrendszer, amely a Google Material Design elvein alapul. Természetesen benne találhatóak, mint például: gombok, táblázatok és űrlapok, illetve egy érzékeny rácsrendszert.
Ezek előre készítve vannak és minimális erőfeszítéssel használatra készek. A keretrendszer támogatja a JavaScript-összetevőket is.
Adatai
Eredeti szerzők:
Google LLC
Fejlesztők:
Google
Első verzió kiadásának dátuma:
2021.03.31. (1.1.0 verzió esetén)
Legfrissebb verziója:
2.0.2 / 2023. Július 13.
Programozási nyelvek:
HTML, CSS, Sass és JavaScript
Főbb jellemzők és tulajdonságai
- Anyagtervezés (könnyen, széles körben használható)
- Teljes funkcionalitásokkal rendelkezik (minden CSS előre elkészített összetevők és JavaScript funkciók)
- Mobilbarát, illetve progresszív webalkalmazásokat létrehozhatnak is
Előnyei
- Előre beépített UI összetevők, alkalmasak a reszponzív mobil- és webtervezésre is
- A Google anyagtervezési elvek betartásának köszönhetően, hogy egységes és modern tervezési esztétikát van lehetőség kialakítani
- A JavaScript-bővítmények széles skáláját tartalmazza a további funkciók érdekében
- Jól dokumentált (részletes dokumentációk és rengeteg kódpéldák találhatóak)
Hátrányai
- Korlátozott testreszabás
- Nagy fájlméret, amivel le fog lassítani a betöltési sebesség idő
- Túlzott függőség a JavaScripttől
- Meredek tanulási görbe, de könnyen használható
Pure
Hivatalos honlapja
Alapfogalma
Ez egy könnyű és minimalista CSS-keretrendszer, amely kizárólag csak egy kis alap stíluskészletet tud biztosítani a HTML-elemekhez, mint például űrlapokhoz, gombokhoz, táblázatokhoz és az egyéb elemekhez.
Segít csökkenteni a weboldalak stílusához szükséges CSS-kód mennyiségét, és a fejlesztők számára könnyen érthető és gyorsan módosítható, sőt gyorsabban be fog tölteni az oldal sebessége is.
Adatai
Eredeti szerzők:
Yahoo
Első verzió kiadásának dátuma:
2013. Július 2.
Legfrissebb verziója:
3.0.0 / 2022 Október. 26.
Programozási nyelvek:
HTML, CSS
Főbb jellemzők és tulajdonságai
- Minden sorát tudatosan átgondolták és jól megírták, hogy ez a CSS keretrendszer könnyű és hatékony legyen
- A Pure-t modulárisan importálhatja, és csak azt valósíthatja meg, amire szüksége van
- Az előre elkészített összetevőket tartalmaznak, amelyek érzékenyek és a modern webhez készültek
Előnyei
- Könnyen használhatóak és testreszabhatók
- Könnyű, vékony fájlmérettel rendelkezik, aminek köszönhetően gyorsabban be fog tölteni az oldal sebessége
Hátrányai
- Korlátozottan JavaScript és CSS támogatással rendelkezik
- Kevesebb erőforrással rendelkezik
UIKit
Hivatalos honlapja
Alapfogalma
Ez egy speciális frontend keretrendszer a iOS fejlesztéshez használják. Az UI-összetevőket tud biztosítani a gyönyörű és a felhasználóbarát iOS alkalmazások készítéséhez.
Tartalmaznak az előre készített elemeket, mint például gombok, címkék, szövegmezők, táblázatok és az egyéb elemek. Sőt a fejlett funkciókat, azaz animációkat és érintés kezelést is találhatóak.
Adatai
Eredeti szerzők:
YOOtheme
Fejlesztők:
YOOtheme team
Első verzió kiadásának dátuma:
2013. Július 19.
Legfrissebb verziója:
3.16.22. / 2023. Június 22.
Programozási nyelvek:
HTML, CSS, JavaScript, Less, Sass
Főbb jellemzők és tulajdonságai
- Egyszerűen testreszabható és bővíthető a LESS vagy SASS előfeldolgozókkal együtt
- UI-alapú testreszabó
Előnyei
- Az Apple támogatásával rendelkezik
- Rengeteg UI összetevő közül válogathat
- Az egyik legkönnyebb CSS-keretrendszer, amelyet a weboldalak és a webes alkalmazások fájlméretének csökkentésére terveztek, aminek köszönhetően gyorsabbsn tud eredményezni a betöltési időt
Hátrányai
- Sajnos kevésbé testreszabható
- A speciális funkciók befolyásolhatják a teljesítményt
- Meredek tanulási görbe
Material UI Components
Hivatalos honlapja
Alapfogalma
A Material UI egy nyílt forráskódú a React komponens alapú UI könyvtár, amely megvalósítja a Google Material Design rendszerét. Az előre elkészített alkatrészek átfogó gyűjteményét tartalmazza, amelyek a boxokból azonnal gyártásra készek.
Adatai
Eredeti szerzők:
Google LLC
Fejlesztők:
Google
Első verzió kiadásának dátuma:
2014. Június 25,
Legfrissebb verziója:
1.0.0. (Web esetén) / 2023.07.10.
Programozási nyelvek:
HTML, CSS Sass (v4), JavaScript, Angular JS, Angular, Java, Objective-C, Swift, Dart
Platform:
Android, iOS, Web
Előnyei
- Egyszerű és letisztult felhasználói barát felületet biztosít számos könnyen használható összetevővel
- Nagyon könnyű, ami gyorsabbá teszi a betöltést és megkönnyíti a munkát.
Hátrányai
- Nincs aktív fejlesztés
- Korlátozott testreszabhatóság
Primer
Hivatalos honlapja
https://primer.style/css/storybook/
Alapfogalma
Ez egy egyszerű tervezési rendszer, amelyet a GitHub létrehozta ezt. Az is szintén nyílt forráskódú CSS keretrendszer, amely minden szükséges összetevőt tartalmaz egy gyönyörű weboldalak projekt felépítéséhez szükséges szerint használják.Adatai
Eredeti szerzők:
GitHub
Első verzió kiadásának dátuma:
2015. Március 25. (2.0.2. verzió esetén a GitHub-on szerint)
Legfrissebb verziója:
21.0.7. / 2023. Június 28.
Programozási nyelvek:
HTML, CSS, SASS
Előnyei
- A színváltozások és segédprogramok tematikus stílusbeállításokat biztosítanak
- Könnyű és gyorsan betöltésűek
- Reszponzív támogatás
- Kisegítő lehetőségek (a fogyatékkal élő felhasználók számára hozzáférhetőek)
- Átfogó dokumentációval rendelkezik, amely mindent lefed a keretrendszerrel való kezdetektől
Hátrányai
- Meredek tanulási görbe
- Korlátozott testreszabhatóság
- Korlátozott böngészőtámogatás
- Korlátozott komponensek és segédprogramok
Összefoglalás
A statisztikai adatok szerint ezek a leghatékonyabb / legjobb a CSS keretrendszerek közül. Amikor sikeresen el lettek sajátítva, biztosan megtalálhatja bárhol munkahelyét, mert nagyon sok cégen keresnek, akik értenek hozzá.
Legnépszerűbb és legjobb CSS keretrendszerek a GitHub statisztikai alapján
| Név | Mi az? | GitHub adatok | Licenc |
|---|---|---|---|
| Bootstrap | A legnépszerűbb CSS keretrendszer | 160,000 | MIT |
| Tailwind | Nyílt forráskódú keretrendszer | 62,000 | MIT |
| Semantic UI | Tervezett UI keretrendszer | 50,000 | MIT |
| Bulma | Minimalista moduláris CSS keretrendszer | 43,000 | MIT |
| Materialize | Material Design alapú CSS keretrendszer | 38,700 | MIT |
| Foundation | Frontend keretrendszer | 30,000 | MIT |
| Pure | Minimális nyílt forráskódú keretrendszer | 23,000 | BSD |
| UIKit | Könnyű, nyílt forráskódú keretrendszer a modern webhez | 17,700 | MIT |
| Material UI Components | Nyílt forráskódú keretrendszer | 16,500 | MIT |
| Primer | CSS tervezési összetevők | 11,400 | MIT |
| Pico.CSS | Minimális CSS-keretrendszer a szemantikus HTML-hez | 5,800 | MIT |
0 Megjegyzések