Jeg hørte engang en front-end udvikler-vittighed, “NASA har landet robotter på Mars, og her kæmper vi stadig med at centrere vores divs!” Og det får mig til at føle mig dårlig, at denne joke har en masse sandhed i sig. At gøre noget, der lyder så let og sund fornuft-drevet som at centrere en boks i en kasse er utroligt vanskeligt at træne i CSS. Medmindre du har stødt på det før. Og gemt kodestykket et eller andet sted. Og selv hvis du formår at trække det væk, er der altid den lurer frygt for, at det bare kan bryde forfærdeligt på en eller anden dum browser et eller andet sted! CSS binder til det første sted af “nødvendigt ondskab” sammen med JavaScript. Det er en standard, der udviklede sig tilfældigt, blev fortolket forskelligt af forskellige browserproducenter og er nu så fuld af modsigelser, at ingen tør kalde sig selv en “CSS-ekspert”.
Ikke underligt, at CSS-rammer dukkede op over tid og fjernede det meste af smerten. I dag kan vi ikke forestille os kodning uden vores foretrukne CSS-rammer, da målretning mod flere skærmstørrelser er blevet en nødvendighed.
Men hvordan ved du, at dine rammer er de bedste til det aktuelle job? Hvis du er ny inden for front-end-udvikling, hvilke rammer skal hjælpe dig med at vælge?
Dette indlæg kaster et blik på frontend-udviklingslandskabet og sammenligner frontløberne blandt CSS-rammer. Så hvis du er træt af at håndkode CSS-regler, kan du dykke ind for en vis hurtig lettelse!
Contents
bootstrap
Et initiativ fra Twitter, bootstrap tager æren for at introducere responsivt design i stor skala. Det var den første ramme til at fremme filosofien om “mobile-first.” Ikke længere designede for mindre skærmstørrelser et separat projekt i sig selv; alt hvad du behøver at gøre var at inkludere de relevante Bootstrap klasser, og designet ville automatisk justere til forskellige skærmstørrelser (godt, næsten).
Responsiv design i Bootstrap (4.0 vs. 3.0)
Bootstrap opnåede responsivt design ved at introducere ideen om et gitter. Et gitter er en usynlig partition af skærmen i kolonner (sammen med bredden). For eksempel, hvis du har tre “bokse”, du vil placere side om side på store skærme, men lodret på mindre skærme, er det, hvad du vil gøre:
En af tre kolonner
En af tre kolonner
En af tre kolonner
Den aktuelle populære version af Bootstrap er 4, hvilket var en større revision i 3.3-serien. Ovenstående syntaks er, hvordan du koder i Bootstrap 4, som skylder den rå magt af meget af sin elegance flexbox og andre moderne layoutfunktioner understøttet direkte af browsere. I de lavere versioner af Bootstrap blev gitteret defineret som i alt 12 kolonner, hvilket resulterede i kode som f.eks.
at opdele en tredjedel af skærmbredden på enheder i stor størrelse og halvdelen af bredden i enheder i mellemstørrelse. Syntaxen nu er meget mere behagelig, skønt den kræver fortrolighed med Flexbox.
Bootstrap Pros
Der er meget at lide ved Bootstrap, især for fuldstackudviklere:
- Hurtig prototype: Med Bootstrap er der næsten ingen grund til at tænke på vanskelige CSS-positionering og browserforeneligheder. Alt hvad du behøver at gøre for at udskrive HTML, og derefter anvende de relevante CSS-klasser får responsen til at blive levende.
- Stort økosystem: Fra i dag har Bootstrap det største økosystem blandt front-end rammer. Antallet af webstedslayouts, temaer, adminpaneler, UI-komponenter osv., Der er bygget ved hjælp af Bootstrap, er forbløffende, og det bliver ved med at blive bedre. For både konsulenter og produktvirksomheder betyder det, at forbygede genstande og samfundsstøtte altid vil være masser.
- Støttet af Twitter: En voksende tendens inden for open source er stigningen i projekter sponsoreret af en kommerciel enhed. Oftere bygger disse enheder rentable virksomheder omkring deres tilbud. Kotlin (JetBrains), WordPress (Automattic, Inc.), Angular (Google), React (Facebook) osv. Er nogle eksempler. Når et projekt er støttet af en etableret enhed og ikke er en enkeltpersonsvisning, giver det lokalsamfundet (især virksomhedskunderne) tro på, at projektet har en klar køreplan og en langsigtet fremtid.
- Stor samling af komponenter: Bootstrap tilbyder ude af boksen næsten alle de UI-komponenter, du nogensinde har brug for. Navigation, formularer, kort, modaler, knapper, badges, statuslinjer, alarmer. . . Du navngiver det, og Bootstrap har det. For mange virksomheder reducerer dette praktisk taget behovet for at have et dedikeret front-end team.
- Mindre og SASS support: Blandt de massivt populære CSS-rammer er Bootstrap den eneste, der understøtter både LESS og SASS. Ja, jeg ved, du bruger ikke MINDRE (som ingen selv respekterende udvikler burde, ikke?), Men hej, der er masser af projekter derude, der er afhængige af MINDRE. Du kan selvfølgelig ikke vælge nogen af dem og skrive dine almindelige CSS-filer.
Bootstrap Cons
Intet er uden en pris, ikke? Nå, Bootstrap er ingen undtagelse. Med tiden har Bootstrap været under kraftig ild af designere og UI-eksperter. Her er hvorfor:
- UX monotoni: Selve det faktum, at Bootstrap har en så stor samling af indbyggede resultater, resulterer i websteder, der ser alt for velkendte ud og helt ærlige, kedelige. Du behøver kun at gå over til officielle eksempler for at se, hvor meget af en øjnene defaults er. Bare søg efter “alle bootstrap-websteder ser ens ud”, og du ved hvad jeg mener. ��
- Styling onde: Bootstrap er, hvad der kan betragtes som en meningsfuld ramme. Med andre ord, det har ideer om layout, og det får dig til at arbejde ekstra hårdt, hvis du vil have det til at se / opføre sig anderledes. Overvej standard CSS-breakpoints for skærmbredder: en mellemstor skærm til Bootstrap er en, der starter med en enhedsbredde på 768px. Og hvad, hvis du vil målrette, siger, grænsen på 600 px? Nå, held og lykke med det! Det er det samme med næsten alle andre komponenter i bootstrap: rækker og containere har deres standardpolstring, knapper har farver og rammer, som er meget vanskelige at tilsidesætte uden meget arbejde, og så videre.
Vil mestre Bootstrap? Tjek dette online kursus af Brad Traversy.
Fundament
Hvis teknologier var religioner, ville Foundation og Bootstrap fyrene være ude efter hinandens blod. Ingen diskussion af moderne CSS-rammer er komplet uden at nævne Foundation, så her går vi.
Leder over instituttet internet side, og du kan ikke undgå at bemærke byline: “Den mest avancerede responsive front-end-ramme i verden.” Ved første øjekast ser det ud som en høj påstand om at gå med en marketingkampagne.
Tilhængere af fondens rammer ved imidlertid, at der i det mindste er noget sandhed. Foundation blev udviklet til at gå naturligt med Rails-rammen, og flere af Rails ‘“zen-lignende” vejledende principper kan ses på arbejdet.
Hvis du f.eks. Ville have en række, der indeholdt to elementer på små skærme, tre på mellemstore og fire på store, vil den tilsvarende kode i Foundation se sådan ud:
Sammenlignet med tidligere Bootstrap-versioner synes jeg dette er meget intuitivt og let at huske. Ikke mere tolv kolonnegitter og finde ud af, hvad 4/12 skal være!
Mens Foundation er meget mindre populært end Bootstrap, er det en handelshemmelighed for mange ekspert front-end-udviklere.
Fordele ved stiftelsesrammen
Foundation har nogle usædvanlige karakteristika ud af alle de CSS-rammer, vi overvejer i denne artikel:
- Fuld værktøj: Det er teknisk forkert at sige, at Foundation er en CSS-ramme. Jeg mener, det er det, men det er bygget som en stor og modulær samling af værktøjer, der sigter mod at løse næsten alle former for frontend-problemer. Der er separate rammetilbud for websteder og e-mails, der er stærkt optimeret til deres respektive domæner. Foundation leveres også med en kommandolinjegrænseflade (CLI), der vil lyde som musik for ørerne på udviklere, der plejede at arbejde med Webpack eller andre modulbundtere.
- Ekstrem fleksibilitet: I modsætning til Bootstrap blev Foundation bygget for at give front-end-udvikleren fuld kontrol over deres UI’er. Som et resultat vil Foundation føle sig intetsigende og enormt kompleks for den nye. Årsagen er imidlertid, at Foundation ikke tvinger noget stilsprog på dig, men sigter mod at være lige hvad det er: en fremragende CSS-ramme.
- Mere end bare UI-komponenter: Mens Foundation har den sædvanlige samling af UI-elementer, går det meget ud over call of duty. Udviklerne har inkluderet et avanceret responsivt billedsystem, en prissætningstabelkomponent (ja, den, der blev brugt til at vise forskellige prisplaner), form-validering, support fra højre til venstre, responsive indlejringer og mere. Jeg vil gerne understrege igen, at dette er en overdækning for de fleste enkle websteder, men for store, er det en velsignelse, de erfarne udviklere vil genkende.
- Uddannelse og rådgivning: Mens Bootstrap er oprettet af Twitter nu, er det et sideprojekt og en meget lille del af det samlede billede. Virksomheden bag Foundation (ZURB) er dog forpligtet til at bruge, udvikle og promovere det. Uddannelseskurser og professionel rådgivning tilbydes store kunder, hvilket er godt for virksomheder, der er målrettet mod massive projekter og er villige til at betale.
Ulemper ved Foundation Framework
Styrkerne ved en ramme bliver dens svagheder, når de ses fra det modsatte synspunkt. Derfor er Foundation muligvis ikke det bedste valg til dit projekt:
- Lille (er) samfund: Foundation-samfundet er meget mindre end Bootstrap, og hvis du prøver noget eksotisk og sidder fast, er chancerne for at finde relevant hjælp lavere. Jeg vil dog tilføje det til alle praktiske formål; der er nok af et samfund derude. Det er bare, at det er flere størrelsesordrer, der er mindre end Bootstraps, så du muligvis ikke finder løsninger med det samme.
- kompleksitet: Hvis du er vant til Bootstrap eller noget simpelt eller værre med vanilje CSS, vil Foundation føles som en uendelig eksplosion af kompleksitet. Lag inden for lag, komponenter med komponenter, utallige tilpasningsmuligheder. . . Snart vil du begynde at stille spørgsmålstegn ved nytten af selve livet! Men igen har Foundation et meget andet mål og kan ikke bebrejdes for det.
- For mange muligheder: Nogle gange vil du bare få lort gjort og bekymre dig om perfektion senere. I sådanne tider er det frustrerende at blive præsenteret for mange muligheder med mindre variationer. Tænk for eksempel på at skulle bestille en Subway-sandwich, når du er så sulten omhyggeligt, at du kunne spise mudder. Foundation er naturligvis ikke i sådanne tider.
- Talenttilgængelighed: Da Foundation er (meget) mindre populært end Bootstrap, er det tilgængelige talent meget mindre. Som en generel regel kender enhver nyudlejning næsten sandsynligt Bootstrap, men har ikke en anelse om Foundation. Læring tager tid, og det er en luksus, som ikke alle hold kan have.
Bulma
Bulma er en relativt ny deltager i slagmarken i CSS-rammer og har givet sig et navn på kort tid. Dens tiltrækningskraft ligger i en streng, kun CSS-tilgang (der er ingen JavaScript-komponenter) og elegante standardindstillinger, hvilket er noget, mange udviklere med et godt øje til design har et problem med, når de arbejder med Bootstrap.
Meget af Bulmas momentum kommer fra høje antallet af vedtagelse med Laravel (en PHP-webramme, i tilfælde af at du ikke vidste) -fællesskabet, hvilket jeg er sikker på, er stort set, hvad der hjalp Vue.js med at stige til højden af popularitet blandt JavaScript-rammer.
Hvorfor vælge Bulma CSS Framework
Der er mange grunde til at kunne lide Bulma og bruge den til dit næste projekt:
- Ganske populært: Okay, det er ikke mere populært end Bootstrap, men det er mere populært end Foundation. Fra skrivning har Bulma 30k + stjerner på Github, omkring 3k + mere end Foundations. Naturligvis er et antal Github-stjerner ingen værdi af værdien, men det siger, at samfundet godkender Bulma.
- Ekstremt læsbare klasser: Bulma har for mig de mest læsbare CSS-klasser af alle de rammer, jeg har prøvet. Der er også et latterligt kraftfuldt og simpelt system til oprettelse af metro-stil gitter, kaldet fliser (se bare koden i anden halvdel af skærmbilledet, og fortæl mig, at du ikke er imponeret!).
- Flad indlæringskurve: Bulma er meget modulopbygget og blev skabt til at løse de praktiske, dagligdags problemer, som mindre teams og individuelle udviklere støder på. Du finder ud af, at Bulma er meget let at lære, selvom jeg synes, at en anstændig baggrund i CSS altid er god at have en idé om, hvad der kan ske under hætten. Dette hjælper dig, når du vil tilsidesætte standardadfærden.
- Elegant: Nå, kig på standardheltafsnittet for Bulma nedenfor. Nok sagt!
Bulma har et lille, men et ekstremt lidenskabeligt samfund, så hvis du vil fjerne alt fnuget og alligevel ønsker at komme med elegante UI’er på rekordtid, er Bulma vejen at gå. For Bootstrap-udviklere har Bulma et separat afsnit til at overbevise og hjælpe dem med at migrere.
UIKit
Det, der kommer i tankerne, når man tænker på UIKit er minimalisme. Minimalisme ikke i funktioner (faktisk tilbyder den måske de fleste funktioner i alle rammer), men i design. Hvis superren, elegant, ikke-hvid-genert design er din ting, har UIkit dig dækket.
Se for eksempel et punkt på statuslinjen:
Eller billedmarkørkomponenten (en JS-drevet interaktiv markør til billeder):
Eller endda den ydmyge HTML-form:
Hvis dette ikke skriker elegance øverst i lungerne, ved jeg ikke hvad der gør. Bare gå over til UIkit-webstedet og tjek alle de utrolige komponenter, det har at tilbyde. Medmindre din projektleder eller kunde tvinger et bestemt stilsprog på dig, tror jeg, Uikit tager kronen for UI-design og er flere miles foran Googles materialdesign.
Men er der en fangst, undrer du dig. Ja der er. Som Bootstrap fungerer UIkit med sin JavaScript, og selvom du kan bruge jQuery til DOM-manipulation, er det umuligt at bruge en virtuel DOM-ramme som React.
Uikit er også et selvstændigt system, og du vil ikke være i stand til at ændre eller udvide det uden at lægge en betydelig indsats.
Semantisk UI
En anden konkurrence i løbet er Semantisk UI, som forsøger at skelne sig sammen med en masse temaer og tilpasning. Der er mere end 3000 temavariabler, hvilket resulterer i en massiv bredde. Eller sådan siger dokumenterne.
Bootstrap 4 slags dækker alt dette og kan også tilpasses fuldt ud, men en fordel med Semantisk brugergrænseflade er, at det resulterer i flot layout som standard. Alligevel er det ikke det bedst kiggede ud af boksen, og derfor lægger jeg det senere ned på min liste.
Det har også en af de stejleste læringskurver, og kodningskonventioner er meget mere strenge. Prøv det; Jeg sagde og se, om det ser ud som noget, du måske foretrækker.
Susy
Susy er en lidt kendt ramme på dette tidspunkt, men det er en fascinerende og forfriskende idé. En anden ren-layout ramme, Susy fjerner alle foruddefinerede ideer om float, gitter, Flexbox, borde eller noget andet, og lader dig komponere den slags layout, du ønsker. “Komponere” er nøgleordet her, da Susy er beregnet til at skabe meget modulære, svimlende layouts med ultrakompleks, usædvanlige og præcise behov.
I ekspertudviklerens hænder er Susy som en flammekaster end blæser alt andet væk. Mindre dødelige vil naturligvis klare at brænde deres hænder.
For at få en idé om kraften i Susy skal du prøve denne standardindstilling (SASS):
// 4 symmetriske, flydende søjler
// tagrender er 1/4 på størrelse med en søjle
// elementer spænder over 1 mindre tagrender end kolonner
// containere spænder også over 1 mindre tagrender
$ susy: (
‘kolonner’: susy-gentagelse (4),
‘tagrender’: 0,25,
‘spredning’: ‘smal’,
‘container-spredt’: ‘smal’,
);
Jeg synes, at koden er temmelig selvforklarende, selvom den ikke er for dem, der har travlt. �� Susy giver perfekt mening, hvis du er træt af al den oppustethed, som moderne rammer pålægger dig, og du har layoutbehov, som du ved, at ingen almindelig ramme kan tjene.
Materialise
Hvis du er forelsket i Googles materialedesign, er Materialize en rammer du vil nyde det. Det bedste er, at det kun har en håndfuld komponenter og klasser at lære, og er fokuseret på at få dig produktiv så hurtigt som muligt. Der er få tilpasningsmuligheder, og Materialize følger det populære 12-kolonne gitterformat oprettet af Bootstrap.
Hvis du spørger mig dog a Materielt design bliver så almindeligt, og er sådan. . . Som standard er det næsten snart, at vi klager over det, som vi gør om Bootstraps alt-websites-look-the-same problem. Stadig er det en dejlig ramme til at begynde med.
Ren
Er Yahoo død?
Nej, dette spørgsmål er ikke en afledning, men fremhæver en vigtig observation: Yahoo byggede Ren ramme og frigivet under BSD-licensen.
Et hurtigt blik imponerer mig, og jeg spekulerer på, hvorfor dette tilbud ikke er kendt af flere mennesker. Uanset hvad, der gør ren, vel, ren, er, at det er en ren CSS-ramme. �� Faktisk er udviklerne gået den ekstra mil og opdelt den i forskellige CSS-moduler, som du kan importere efter behov. Så hvis du kun har brug for netsystemet, er der ikke behov for at importere hele CSS og tilføje webstedets indlæsningstid.
Det rene gitter kommer i flere varianter: 5-punkts, 2-punkts, 24-punkts osv., Så når det kommer til at oprette kolonner, har du meget mere fleksibilitet. Ren er ikke den bedst udseende CSS-ramme som standard, men jeg kan se, hvordan den tilføjer værdi til dem, der ønsker at løse et lille CSS-problem i deres UI og krybe ved de “nyttige” standarder, andre rammer kommer med.
Skelet
Som du kan se på skærmbillede, Skelet er så minimal, at det ikke engang kalder sig selv en CSS-ramme, bibliotek eller endda modul. Det er kedelpladen og indeholder kun 400 linjer kildekode! Utrolig? Jeg tror det, men for at sætte tingene i perspektiv var skelettet designet til små eller små projekter, der har brug for lidt mere end layout og placering.
Værd at se; når alt kommer til alt, hvem ved, kan skelet være det, du ledte efter sammen!
milligram
Den sidste på listen er milligram, en CSS-ramme designet til hastighed og produktivitet. Udviklerne har holdt det under 2 KB i størrelse, hvilket efter dagens standarder betyder meget.
Et milligram er et sjovt lille tag på CSS-rammer, som du vil sætte pris på at arbejde med. Det er let at udvide det, og med et par linjer tilpasset CSS kan du ændre dets udseende til den måde, du ønsker.
Så hvilke CSS-rammer er bedst?
Indrøm det, du har stillet lignende spørgsmål før og modtaget følgende skuffende svar: ingen. �� Valg af en ramme (eller et værktøj eller endda en person i dit liv, for den sags skyld) afhænger af mange faktorer. Hvis du vil have mit råd, er det her: Klip støjen ud. Bare fordi folk bliver gale over noget nyt og skinnende betyder det ikke, at du er nødt til at lære det, eller at du bliver efterladt. At prøve nye ting er fantastisk, men at løbe rundt i cirkler på jagt efter det perfekte værktøj er, godt, spild.
Så hvilke af disse rammer har du prøvet? Eller måske er der noget forbløffende derude, som jeg lige har savnet? Fortæl mig det i kommentarerne. Kærlighed, had, tilfældige hej, alle er velkomne!
