10 bescht CSS Frameworks am Joer 2020

Inhalt

• 01. Bootstrap
• 02. Fondatioun
• 03. UIkit
• 04. Semantesch UI
• 05. Bulma
• 06. Tailwind
• 07. Picknick CSS
• 08. PabeierCSS
• 09. NES.css
• 10. Animéieren.css
• Braucht ech e CSS Framework?

Dir sicht de beschte CSS Framework? Dëse Guide ass hei fir ze hëllefen. An dëser Feature wäerte mir Iech hëllefen Iech mat e puer vun den interessantsten a mächtegsten CSS Frameworks verfügbar ze kréien. E puer dovu si bekannt, anerer sinn méi nei Tools, déi just ufänken Damp opzehuelen. Egal wéi, Dir wäert vill dovu profitéieren, dës nëtzlech Tools kennen ze léieren.

Bootstrap | Fondatioun | UIkit | Semantesch UI | Bulma | Schwanzwind | Picknick CSS | PabeierCSS | NES.css | Animéieren.css

Mir wäerten d'Saache mat e puer bekannten Nimm ufänken. Mat engem vun dësen CSS Frameworks sidd Dir voll ausgestatt fir propper, wartbar Projeten ze bauen mat minimaler Zäit Investitioun (wann Dir eppes wëllt nach manner Zäit opwänneg, bauen Ären nächste Site mat engem Websäit Builder). Wéi och ëmmer, heiansdo braucht Dir eppes e bësse méi spezifesch. Aus deem Grond, Richtung Enn vun der Lëscht fannt Dir e puer Bibliothéiken a Kaderen déi ganz spezifesch Notzungsfäll hunn.

Fir méi CSS Inspiratioun, kuckt eis Roundup vun Top CSS Animatiounen a wéi se se kodéieren. Plus ass et ëmmer derwäert ze suergen datt Dir déi bescht Webhosting Optioun fir d'Besoine vun Ärem Site kritt, an déi perfekt Cloud Späichere, och.

01. Bootstrap

Loosst eis mat dem populärste Kader vun der Welt ufänken. Wärend Bootstrap sécher net exklusiv e CSS Framework ass, sinn déi populärste Featuren déi CSS-baséiert. Dës enthalen e staarkt Gitter System, Badges, Knäpp, Kaartkomponenten, Navbaren a vill méi. Et ginn och eng ganz Laascht vu gratis Bootstrap Themen fir ze entdecken.

Wann Dir net vertraut sidd wéi e Framework wéi Bootstrap funktionnéiert, hëlleft e puer Code Beispiller, sou datt Dir gesitt wéi einfach et ass ze erhalen erhaalbar Interfaces andeems Dir näischt ausser HTML ännert.

Bootstrap säi Gitter System ass eng super Plaz fir unzefänken. De Bootstrap Gitter war eng wäertvoll Wuer zënter dem Kader senger éischter ëffentlecher Verëffentlechung am 2011. An kee Wonner - et ass lächerlech einfach ze benotzen. Wann Dir Bootstrap's CSS abegraff hutt, e reaktiounsfäege Flexbox-baséiert Gitter ze kreéieren deen an alle Browser funktionnéiert ass sou einfach wéi dëst:

div> div> div> Kolonn 1 / div> div> Kolonn 2 / div> div> Kolonn 3 / div> / div> / div>

Wéi erwähnt huet Bootstrap och eng ëmfaassend Sammlung vun UI Komponenten. E puer vun deenen, déi an der Vergaangenheet schwéier ze stiléiere waren, si just Plug-and-Play mat engem Kader wéi Bootstrap. Dozou gehéieren e Bréiderchers Navigatiounskomponent, eng Kaartkomponent an e Paginatiounskomponent. Hei ass den HTML fir Paginatioun ëmzesetzen:

nav aria-label = "Säitenavigatioun Beispill"> ul> li> a href = "#"> Virdrun / a> / li> li> a href = "#"> 1 / a> / li> li> a href = "#"> 2 / a> / li> li> a href = "#"> 3 / a> / li> li> a href = "#"> Next / a> / li> / ul> / nav>

All dës Komponente kënne gebaut ginn ouni eng eenzeg Linn vu CSS ze schreiwen. A ville Fäll wäert Dir wahrscheinlech d'Komponente thematiséieren fir dem Branding vum Projet ze passen. Egal wat de Fall ass, déi mobilfrëndlech Struktur wäert schonn op der Plaz sinn, wat et onheemlech einfach mécht e fäerdegt Produkt a Rekordzäit ze erreechen. Bootstrap enthält och fortgeschratt Feature fir reagéiert Layouten, Utility Komponenten an et ass op Sass gebaut, sou datt et super flexibel a personaliséierbar ass.

02. Fondatioun

De Foundation Framework, wéi Bootstrap, ass immens populär ginn an ass bekannt als e méi sophistikéierte Kader mat e puer fortgeschrattenen awer einfach implementéierbar CSS Komponenten. Foundation ass op Sass gebaut sou, wéi Bootstrap, et ass personaliséierbar. Zousätzlech dozou huet et och e puer mächteg reaktiounsfäeg Features, déi bedeit datt mobilfrëndlech Design super einfach ass.

De reagéierten Dëschkomponent ass ee vun eise Favoritten:

Dësch>! - Tabelle Reie Code geet hei ... -> / Dësch>

Och déi vertikal Timeline ass eng Layoutfeature déi Dir net a ville Kadere gesitt. Dëse Volet benotzt den .Zäit Klass fir de Container, deen dann e puer hält .Timeline-Element Elementer mat enger Ikon an Inhalt fir all Element:

div> div> div> img src = "image.svg" alt = "Icon"> / div> div> p> 2019 / h2> p> Beispilltext fir Timeline-Element. / p> / div> / div>! - - Méi Timeline Artikelen hei ... -> / div>

Dat ass just eng kleng Probe vun de ville Komponenten déi d'Fondatioun zu engem vun de beschten CSS Frameworks verfügbar maachen.

03. UIkit

UIkit ass en anere populäre Frontend Framework a vläicht e bëssen ënner-appréciéiert wat d'CSS Featuren ugeet. Zousätzlech zu villen Features ähnlech wéi déi an anere populäre Frameworks fonnt ginn et e puer nëtzlech spezialiséiert Komponenten.

Als éischt, wann Dir nach ëmmer net ganz bequem mat Flexbox sidd, kënnt Dir komplex Flexbox-baséiert Layouten mat UIkit benotze mat einfachen HTML. Et kéint ufanks komesch schénge Flexbox Syntax an Ären HTML Klassen ze benotzen, awer dëst spuert Iech fir all Quirks iwwer Flex Wrapping, Spalten / Reien, Flex wuessen an esou weider ze wëssen. Hei e Beispill:

div> div> Item 1 / div> div> Item 2 / div> div> Item 3 / div> div> Item 4 / div> div> Item 5 / div> div> Item 6 / div> / div>

UIkit enthält Dutzende vu Komponenten déi attraktiv Stiler off-the-box ubidden. Vill vun de Feature si spezialiséiert Utilitéitsklassen, och déi folgend:

• .uk-align-lénks, .uk-align-richteg an .uk-align-center fir ausriichten oder schwammen Elementer
• .uk-Kolonn-1-2 bis .uk-Kolonn-1-6 fir Multi-Kolonnen, Magazin-Stil Text Layouten
• .uk-Radio, .uk-Checkbox an ähnlech fir attraktiv Form Inputen
• Verschidde Margen- a Padding Utility Klassen (.uk-Margin-Top, .uk-padding-kleng etc.)
• Verschidde Utilitysklassen fir en Element relativ an engem Container ze positionéieren (.uk-Positioun-Top, .uk-Positioun-lénks etc.)

UIkit ass et wäert ze probéieren wann Dir e frëschen, gutt gepflegten CSS Framework mat enger Partie Komponentoptiounen wëllt. Et ass a Manner a Sass verfügbar an enthält och e Styleblatt fir riets-lénks Sproochen ze këmmeren.

04. Semantesch UI

Semantesch UI huet vill Feature Iwwerlappungen mat anere populäre Frameworks awer d'Art a Weis wéi et funktionnéiert (implizéiert mam Numm) baséiert op der semantescher Natur vun de Klassennimm déi benotzt gi fir Komponenten ze bauen. An anere Wierder, d'Klassennimm si mënschefrëndlech.

Kuckt zum Beispill wéi Dir e Vierkolonnen Gitter baut:

div> div> / div> div> / div> div> / div> div> / div> / div>

Notéiert de Wee wéi d'Klassennimm genau kommunizéieren wat gebaut ass. Den CSS huet net onbedéngt en eenzegaartege Set vu Stiler fir jiddereng vun de klasséierte Klassen, mee amplaz schaffen d'Klassen zesummen. Also, sou wéi d'Sprooch wou Wierder am Kontext sënnvoll sinn, schaffen d'Klassennimm zesummen fir zesummenhängend, mobilfrëndlech Komponenten ze bauen.

Hei ass en anert Beispill, wat eng einfach Datetabelle baut:

Dësch>! - ... Rescht vum Tabellcode hei ... -> / Dësch>

Dëst ass eng super Demonstratioun wéi Semantic UI Klassennimm benotzt fir de Komponent ze beschreiwen deen gebaut gëtt. Wann Dir méi gewinnt sidd mat traditionelle Kadere wéi Bootstrap oder Foundation, kann d'Léierkurve op dëser méi géi sinn. Awer eemol Dir den Ënnerdaach dovun hutt, ass et zimmlech staark an erfreelech ze benotzen.

05. Bulma

Bulma ass en anere populäre CSS Framework a seng primär Feature ass de Fakt datt seng Komponenten gréisstendeels ofhängeg vu Flexbox sinn, sou datt et e wierklech modernt Framework gëtt. Dir kënnt u Bulma denken ass e bësse wéi en Hybrid vu Bootstrap a Semantic UI awer ouni Komplexitéit. Et benotzt e puer vun deeselwechte Prinzipien wéi Semantic UI mat senge Klassennimm, enthält vill vun de populäre Komponenten, awer et packt et Saachen einfach ze halen - zum Beispill Formelementer hu wéineg bis keng Stiler fir e Cross-Browser Look ze halen.

Déi folgend Beispill weist wéi e Bulma Komponent ka gebaut ginn an einfach ze pflegen ass:

Sektioun> div> div> h1> Beispill Iwwerschrëft / h1> h2> Beispilltext geet hei / h2> p> E puer Beispiller Paragraftext hei. / p> / div> / div> / Sektioun>

Notiz déi enthalen Sektioun> Element gëtt dem Held an ass-donkel Klassen. Dëst weist datt Dir en Heldenbanner wëllt deen de Standarddonkelthema benotzt (eng vu siwen Theme Faarwe mat Bulma abegraff, all déi kënne via Sass Variablen geännert ginn).

Och bemierkt de ass - * Klassen um Container an der Primärkurs. Den ass flësseg Klass erméiglecht de Container fléissend op all Gréisstbildschierm, zentréiert mat Margen a mat Nee Max-Breet. Ouni dëse Wäert gëtt den Max-Breet vum Container ännert sech ofhängeg vun der Gréisst vum Viewport. Den ass-Gréisst-2 Klass definéiert d'Gréisst vun der Iwwerschrëft, mat Gréisste vun 1 bis 7.

Wéi Dir gesitt, mécht Bulma et onheemlech einfach mobilfrëndlech Interfaces ze bauen iwwer liesbar Klassennimm.

06. Tailwind

Vill modern CSS Frameworks profitéiere vun engem rezenten Trend beim Bau vun User-Interfaces: d'Benotzung vun Eenzelzweck-Utility-Klassen och bekannt Atomic CSS (kuck déi matgemaach Këscht). Tailwind ass sou ee Kader. D'Iddi hannert Tailwind ass datt amplaz mat pre-styléierte Cookie-Cutter Komponenten unzefänken, Dir alles vun Ufank u baut mat Hëllefsklassen.

D'Léierkurve ass definitiv méi héich op dëser, besonnesch wann Atomic CSS fir Iech nei ass. Awer mat Tailwind, Spezifizitéitsthemen an aner Iwwermëttlungsprobleemer déi a grousse Styleblieder üblech sinn, ginn vermeit.

Als Beispill enthält Tailwind keng Aart vu 'Knäpp' Komponent.Awer Dir kënnt Ären eegene Knäppchen bauen mat eppes wéi folgend:

Knäppchen> Knäppchen / Knäppchen>

Vun do aus, wann Dir décidéiert wat Dir erstallt hutt ass e gëltege Bestanddeel fir weiderbenotzung, kënnt Dir dat mat der Tailwind Komponent Extraktioun Feature maachen. Also e Komponent wéi de Knäppchen gewisen am fréiere Code Block kann esou abegraff sinn:

Knäppchen> Knäpp / Knäppchen> Stil> .btn {@apply font-bold py-2 px-4 ofgerënnt; } .btn-blo {@apply bg-blo-500 Text-wäiss; } / Stil>

Wéi Dir kënnt gesinn, ass d'Léierkurve fir Tailwind relativ héich. Dir musst Iech net nëmmen un d'Utilitéit-éischt Stile gewinnt ginn awer et ass och recommandéiert Komponentenextraktioun ze benotzen, gemaach mat Tailwind's @apply Direktiv - wat just ee Wee ass fir Extraktioun ze maachen; kuckt seng Dokumentatioun fir méi.

07. Picknick CSS

Wann Dir d'Iddi net gefält Presentatiounsklassen an Ärem Markup mat anzebannen, wat an de meeschten, wann net allen, vun de populäre Frameworks heefeg ass, da kéint de Picknick CSS de Kader fir Iech sinn. Picknick ass a ville Weeër de Géigendeel vun Tailwind, well et net nëmme manner komplex ass awer ganz opinionéiert.

Zum Beispill, e puer HTML Elementer si virgestyléiert a brauchen net Klassennimm bäizefügen. Dozou gehéieren Knäppchen>, Knäppchen ausgeschalt>, Dësch>, Input Type = "Checkbox"> an Input Type = "Radio"> (déi lescht zwee vun deenen hunn och e flotte klenge animéierten Check / Uncheck Aktiounen).

Zousätzlech zu enger Zuel vu existente Standardstil op ville HTML Elementer, huet Picknick e puer aner flott entwéckelt interaktiv pure-CSS Komponenten déi kee JavaScript erfuerderen. Dës enthalen e Modal Dialog, en Tabschalter, en Dateie Uploader an en Tooltip. E puer vun dësen kënne mat Skripter verbessert ginn awer si sinn all funktionell mat just CSS.

08. PabeierCSS

Mir kommen an déi méi Spezialitéitsoptiounen an eiser Lëscht vun de beschten CSS Frameworks hei. Dëst wäert net Ären go-to CSS-Tool sinn awer et ass ee vun de quirkiest Frameworks. PaperCSS gëtt als de "manner formelle CSS Kader" gezielt. D'Komponente hunn en handgezeechent, cartoonähnlecht Erscheinungsbild. Benotzungsfäll kënnen eng Websäit fir Kanner enthalen, e Blog, e Spill oder eng Bande Dessinée.

PaperCSS enthält e Flexbox Gitter, Badges, Buttons, Kaarten an e puer interaktiv reng CSS Komponenten. Dat matbezuelt Bild gëtt Iech e Goût vu wat dësen eenzegaartege Kader produzéiert.

09. NES.css

Wéi PaperCSS, huet NES.css en eenzegaartege Set vu Stiler passend fir nëmmen e schmuele Set vu Projeten. Et imitéiert d'8-Bit Nintendo Entertainment System Grafiken, a schafft e Retro Gaming Look.

Nieft gemeinsame Komponenten, déi an anere Kadere fonnt ginn, enthält NES.css och Stiler fir Kommentarballonen, Reaktiounsikonen, plus eenzegaarteg Container mat Grenzen. Hei drënner ass de Code fir e puer Kommentarballonen. D'Begleedungsbild weist wéi se mat e puer vun de ville Ikonen ausgesinn (iwwer CSS Schatten gebaut) déi mam Kader gebündelt sinn.

div> p> Kommentar Ballon Beispill / p> / div> div> p> En anert Kommentar Ballon Beispill mat e bësse méi Text. / p> / div>

Wann Dir dëst gär hutt, kuckt op PSone.css.

10. Animéieren.css

Et gi verschidde Bibliothéiken, déi méi oder manner datselwecht maachen: füügt eng oder méi Animatiounen zu engem spezifizéierten Element bäi. Déi éischt sou Bibliothéik déi an de leschte Jore Popularitéit gewonnen huet war den Dan Eden's Animate.css. Dës lëschteg Bibliothéik enthält Dutzende vu virgebaute Animatiounen déi rëselen, verbléien, rutschen, zoomen a méi.

Et ginn e puer aner ähnlech Bibliothéiken, déi Benotzer alternativ Animatiounen ubidden, abegraff Woah.css, déi e puer onbestreitbar offbeat Animatiounen huet, déi wahrscheinlech net jidderengem säi Goût sinn. Et gëtt och Vivify, déi vill méi eenzegaarteg Animatiounsoptiounen huet a ganz anescht ass wéi Animate.css. Eng aner super Optioun ze entdecken ass CSSFX, en neie Projet deen nach méi Méiglechkeete fir Plug-and-Play Stil Animatiounen huet.

Schlussendlech, wann Dir op der Sich no animéierten Luedeindikatoren sidd, wëllt Dir vläicht Epic Spinners kucken, déi e puer eenzegaarteg CSS-eenzeg animéiert Grafiken hunn.

Braucht ech e CSS Framework?

Et ass net selten datt d'Leit héieren CSS bëschen. Mat sengem Fokus op der Kaskade, dem globalen Styling an den Idiosynkrasien vu sengen Layouten, huet et säi fairen Undeel u Irre vu frustréierte Entwéckler ugezunn. Fir dës Leit, CSS Frameworks a Bibliothéiken, déi de Vanillecode änneren, fir et méi intuitiv ze maachen, sinn en absolute Gottheet. Mëttlerweil, fir e puer CSS Puristen, Kaderen füügen einfach eng Schicht vun der Abstraktioun zu eppes derbäi, dat kee Schéinheet brauch.

Weder Säit ass richteg oder falsch. Et ass grousse Wäert fir d'Kärsprooch ze verstoen (besonnesch e puer vun den neie Feature wéi Flexbox a Grid Layout) awer et ass och e grousse Wäert fir séier eppes ze bauen wat skalierbar an erhale kann. Dat ass wou CSS Frameworks a Bibliothéiken hëllefe kënnen.

Et ka sinn datt Dir gär Är CSS vun Ufank un schreift. Awer mat einfach ze benotzen, flexiblen an adaptéierbare Frameworks a Bibliothéiken wéi déi, déi an dëser Feature diskutéiert ginn, kënnt Dir interaktiv an wartbar UIe fir Är App a wéineg Zäit bauen.

Mir géifen d'Entwéckler ëmmer encouragéiere weider Vanill CSS ze léieren a schreiwen. Et gëtt keen Ersatz dofir. Awer wann Dir en neie Layout oder Design op enger enker Deadline bauen oder prototypéiere musst, kann ee vun de beschten CSS Frameworks e grousse Produktivitéitsbooster sinn.

Wann Dir sicht fir déi lescht kreativ a praktesch Fäegkeeten ze léieren fir Är Karriär op den nächsten Niveau ze bréngen, da maacht mat bei Generate CSS eis Konferenz fir Webdesigner an Entwéckler. Fannt méi eraus opwww.generateconf.com. Benotzt speziell Offer Code WEBDESIGNER2 fir 10% Remise op Ticketen!

Dësen Artikel gouf ursprénglech publizéiert am Netz, de beschte verkaafte Magazin vun der Welt fir Webdesigner an Entwéckler. Kaaft Ausgab 321 oder abonnéieren.