10 najboljših okvirov CSS v letu 2020

Vsebina

• 01. Bootstrap
• 02. Fundacija
• 03. UIkit
• 04. Semantični uporabniški vmesnik
• 05. Bulma
• 06. Zadnji veter
• 07. Piknik CSS
• 08. PaperCSS
• 09. NSZ.css
• 10. Animate.css
• Ali potrebujem ogrodje CSS?

Iščete najboljši okvir CSS? Ta vodnik je tu, da vam pomaga. V tej funkciji vam bomo pomagali, da se seznanite z nekaterimi najzanimivejšimi in najmočnejšimi okviri CSS, ki so na voljo. Nekateri so dobro znani, drugi pa novejša orodja, ki šele začenjajo pobirati paro. Kakorkoli, od spoznavanja teh uporabnih orodij boste imeli veliko koristi.

Bootstrap | Fundacija | Uporabniški vmesnik | Semantični uporabniški vmesnik | Bulma | Tailwind | CSS za piknik | PaperCSS | NES.css | Animate.css

Stvari bomo začeli z nekaterimi znanimi imeni. S katerim koli od teh okvirov CSS boste popolnoma opremljeni za gradnjo čistih, vzdrževalnih projektov z minimalnimi časovnimi vložki (če želite nekaj še manj zamudnega, z naslednjim gradite svoje naslednje spletno mesto). Vendar včasih potrebujete kaj bolj natančnega. Zato boste proti koncu seznama našli nekaj knjižnic in ogrodja, ki imajo zelo specifične primere uporabe.

Za več navdihov v CSS si oglejte našo zbirko vrhunskih CSS animacij in kako jih kodirati. Poleg tega je vedno vredno zagotoviti, da imate najboljšo možnost spletnega gostovanja za potrebe svojega spletnega mesta in tudi popolno shrambo v oblaku.

01. Bootstrap

Začnimo z najbolj priljubljenim okvirom na svetu. Čeprav Bootstrap zagotovo ni izključno okvir CSS, so njegove najbolj priljubljene funkcije tiste, ki temeljijo na CSS. Sem spadajo zmogljiv mrežni sistem, značke, gumbi, sestavni deli kartice, navbari in še veliko več. Obstaja tudi cel kup brezplačnih tem Bootstrap za raziskovanje.

Če niste seznanjeni s tem, kako deluje ogrodje, kot je Bootstrap, vam bo pomagalo nekaj primerov kode, tako da boste lahko videli, kako enostavno je graditi vzdrževane vmesnike, tako da urejate samo HTML.

Mrežni sistem Bootstrapa je odličen kraj za začetek. Mreža Bootstrap je dragocena dobrina že od prve javne objave okvira leta 2011. In ni čudno - za uporabo je smešno enostavna. Ko vključite Bootstrapov CSS, je ustvarjanje odzivne mreže na osnovi flexboxa, ki deluje v vseh brskalnikih, tako preprosto:

div> div> div> stolpec 1 / div> div> stolpec 2 / div> div> stolpec 3 / div> / div> / div>

Kot smo že omenili, se Bootstrap ponaša tudi z obsežno zbirko komponent uporabniškega vmesnika. Nekateri, ki jih je bilo v preteklosti težko oblikovati, so samo plug-and-play z ogrodjem, kot je Bootstrap. Sem spadajo navigacijska komponenta, komponenta kartice in komponenta paginacije. Tu je HTML za izvajanje paginacije:

nav aria-label = "Primer navigacije po strani"> ul> li> a href = "#"> Prejšnji / a> / li> li> a href = "#"> 1 / a> / li> li> a href = "#"> 2 / a> / li> li> a href = "#"> 3 / a> / li> li> a href = "#"> Naprej / a> / li> / ul> / nav>

Vse te komponente je mogoče zgraditi brez pisanja ene vrstice CSS. V mnogih primerih boste komponente verjetno temirali tako, da ustrezajo blagovni znamki projekta. Kakor koli že, mobilna prijazna struktura bo že vzpostavljena, zato je neverjetno enostavno doseči končni izdelek v rekordnem času. Bootstrap vključuje tudi napredne funkcije za odzivne postavitve, pomožne komponente in je zgrajen na Sassu, zato je zelo prilagodljiv in prilagodljiv.

02. Fundacija

Okvir Foundation, tako kot Bootstrap, je postal izjemno priljubljen in je znan kot bolj dovršen okvir z nekaterimi naprednimi, a enostavnimi komponentami CSS. Fundacija temelji na Sass-u, tako da je, tako kot Bootstrap, prilagodljiva. Poleg tega se ponaša tudi z nekaterimi zmogljivimi odzivnimi funkcijami, kar pomeni, da je izdelava mobilno prijaznih modelov izjemno enostavna.

Odzivna komponenta tabele je ena naših najljubših:

tabela>! - koda vrstic tabele gre sem ... -> / tabela>

Tudi navpična časovna premica je funkcija postavitve, ki je ne vidite v mnogih okvirih. Ta komponenta uporablja .časovnica razred za vsebnik, ki ima nato več .časovna postavka elementi z ikono in vsebino za vsak element:

div> div> div> img src = "image.svg" alt = "Icon"> / div> div> p> 2019 / h2> p> Primer besedila za postavko časovne premice. / p> / div> / div>! - - Tukaj je več elementov časovne osi ... -> / div>

To je le majhno vzorčenje številnih komponent, zaradi katerih je Foundation eden najboljših CSS-jevih okvirov, ki so na voljo danes.

03. UIkit

UIkit je še en priljubljen vmesni okvir in je morda malo podcenjen v smislu funkcij CSS. Poleg številnih funkcij, podobnih tistim, ki jih najdemo v drugih priljubljenih okvirih, obstaja še nekaj uporabnih specializiranih komponent.

Najprej, če vam flexbox še vedno ni všeč, lahko z UIkitom z navadnim HTML-jem naredite zapletene postavitve, ki temeljijo na flexboxu. Sprva se morda zdi nenavadno uporabljati sintakso flexbox v svojih razredih HTML, vendar vam to prihrani, da ne bi morali poznati vseh domislic o upogibanju fleksov, stolpcih / vrsticah, fleks rasti in tako naprej. Tu je primer:

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

UIkit vključuje na desetine komponent, ki ponujajo privlačne sloge že takoj. Številne funkcije so specializirani razredi uporabnosti, vključno z naslednjimi:

• .uk-align-left, .uk-align-right in .uk-align-center za poravnavo ali plavajoče elemente
• .uk-stolpec-1-2 do .uk-stolpec-1-6 za postavitve besedila v obliki stolpcev v obliki revije
• .uk-radio, potrditveno polje .uk in podobno za privlačne vnose v obrazce
• Različni razredi uporabnosti robov in oblazinjenja (.uk-margin-top, .uk-padding-small itd.)
• Različni razredi uporabnosti za relativno umestitev elementa v vsebnik (.uk-position-top, .uk-položaj-levo itd.)

UIkit je vredno poskusiti, če želite svež, dobro vzdrževan okvir CSS z množico možnosti komponent. Na voljo je v Less and Sass in vključuje celo tabelo slogi za jezike od desne proti levi.

04. Semantični uporabniški vmesnik

Semantični uporabniški vmesnik ima veliko funkcij, ki se prekrivajo z drugimi priljubljenimi okviri, vendar način njegovega delovanja (nakazano z imenom) temelji na semantični naravi imen razredov, ki se uporabljajo za gradnjo komponent. Z drugimi besedami, imena razredov so človeku prijazna.

Oglejte si na primer, kako bi zgradili mrežo s štirimi stolpci:

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

Opazite, kako imena razredov natančno sporočajo, kaj je zgrajeno. CSS nima nujno edinstvenega nabora slogov za vsakega od naštetih razredov, ampak razredi delujejo skupaj. Tako kot jezik, kjer imajo besede smisel v kontekstu, tudi imena razredov skupaj ustvarjajo kohezivne, mobilnim komponentam prijazne komponente.

Tu je še en primer, ki gradi preprosto podatkovno tabelo:

table>! - ... preostala koda tabele tukaj ... -> / table>

To je odličen prikaz, kako Semantiški uporabniški vmesnik uporablja imena razredov za opis sestavljene komponente. Če ste bolj vajeni tradicionalnih okvirov, kot sta Bootstrap ali Foundation, je učna krivulja na tem morda bolj strma. Ko pa ga enkrat obesite, je precej močan in prijeten za uporabo.

05. Bulma

Bulma je še en priljubljen CSS okvir in njegova glavna značilnost je dejstvo, da so njegove komponente v veliki meri odvisne od flexboxa, zaradi česar je resnično sodoben okvir. Lahko si mislite, da je Bulma nekoliko podoben hibridu Bootstrap in Semantic UI, vendar brez kakršne koli zapletenosti. S svojimi imeni razredov uporablja enaka načela kot Semantični uporabniški vmesnik, vključuje številne priljubljene komponente, kljub temu pa stvari poenostavi - na primer elementi obrazcev imajo malo ali nič slogov, da bi ohranili videz med brskalniki.

Naslednji primer prikazuje, kako je mogoče sestaviti komponento Bulma in jo je enostavno vzdrževati:

section> div> div> h1> Primer naslova / h1> h2> Primer besedila gre tukaj / h2> p> Tukaj je nekaj primera besedila odstavka. / p> / div> / div> / section>

Opazite, da vsebuje razdelek> element dobi junak in je temno razredih. To pomeni, da želite pasico junaka, ki uporablja privzeto temno temo (eno od sedmih barv tem, vključenih v Bulmo, ki jih je mogoče spremeniti s spremenljivkami Sass).

Upoštevajte tudi je - * razredi na vsebniku in primarni naslov. The je tekočina class omogoča, da je posoda tekoča na zaslonu katere koli velikosti, centrirano z robovi in ​​brez št največja širina. Brez te vrednosti bo največja širina vsebnika se spremeni glede na velikost prikaza. The je velikost-2 razred določa velikost naslova, z velikostmi od 1 do 7.

Kot lahko vidite, Bulma neverjetno enostavno gradi mobilno prijazne vmesnike prek berljivih imen razredov.

06. Zadnji veter

Številni sodobni okviri CSS izkoriščajo nedavni trend pri gradnji uporabniških vmesnikov: uporabo enonamenskih razredov pripomočkov, znanih tudi kot Atomic CSS (glejte priloženi okvir). Tailwind je en tak okvir. Ideja, ki stoji za Tailwindom, je ta, da namesto da bi začeli z vnaprej oblikovanimi komponentami za rezanje piškotkov, zgradite vse od začetka s pomočjo uporabnih razredov.

Krivulja učenja je pri tej zagotovo višja, še posebej, če je Atomic CSS za vas nov. Toda pri Tailwindu se izognemo težavam s specifičnostjo in drugim težavam s preglasitvijo, ki so pogoste v velikih slogovnih listih.

Kot primer Tailwind ne vključuje nobene komponente "gumb".Lahko pa zgradite svoj gumb z nekaj podobnega:

gumb> Gumb / gumb>

Če se nato odločite, da je stvar, ki ste jo ustvarili, veljavna komponenta za ponovno uporabo, lahko to storite s funkcijo ekstrakcije komponent Tailwind. Tako lahko komponento, kot je gumb, prikazan v prejšnjem bloku kode, vključimo takole:

button> Button / button> style> .btn {@apply font-bold py-2 px-4 rounded; } .btn-modra {@apply bg-blue-500 text-white; } / style>

Kot lahko vidite, je krivulja učenja za Tailwind precej visoka. Ne samo, da se je treba navaditi na uporabnostne sloge, ampak je priporočljivo uporabiti tudi ekstrakcijo komponent s pomočjo Tailwind's @apply direktiva - kar je le en način za pridobivanje; glejte njegovo dokumentacijo za več.

07. Piknik CSS

Če vam ni všeč ideja, da v oznake vključite predstavitvene razrede, kar je pogosto v večini, če ne celo v vseh priljubljenih okvirih, je morda Picnic CSS okvir za vas. Piknik je v mnogih pogledih nasprotje Tailwind-a, saj ni le manj kompleksen, ampak zelo samozavesten.

Na primer, nekateri elementi HTML so vnaprej oblikovani, zato ni treba dodajati imen razredov. Tej vključujejo gumb>, gumb onemogočen>, tabela>, input type = "checkbox"> in type input = "radio"> (zadnja dva imata tudi prijetna animirana dejanja preverjanja / odstranjevanja).

Picnic ima poleg številnih obstoječih privzetih slogov za številne elemente HTML še nekaj lepo oblikovanih interaktivnih komponent s čistim CSS, ki ne zahtevajo JavaScript. Sem spadajo modalno pogovorno okno, preklopnik zavihkov, datoteka za nalaganje in opis orodja. Nekatere od njih je mogoče izboljšati s skriptiranjem, vendar so vse funkcionalne s samo CSS.

08. PaperCSS

Tu smo na seznamu najboljših možnosti CSS na našem seznamu najboljših okvirov. To ne bo vaše orodje za obisk CSS, je pa eno najzahtevnejših okvirov. PaperCSS se obračunava kot "manj formalni okvir CSS". Sestavni deli imajo risan videz, podoben risbam. Primeri uporabe lahko vključujejo spletno mesto za otroke, spletni dnevnik, igro ali strip.

PaperCSS vključuje mrežo flexbox, značke, gumbe, kartice in nekatere interaktivne čiste komponente CSS. Spremna slika vam okuša, kaj ustvarja ta edinstveni okvir.

09. NSZ.css

Tako kot PaperCSS ima tudi NES.css edinstven nabor stilov, primeren le za ozek nabor projektov. Posnema 8-bitno grafiko Nintendo Entertainment System in ustvarja retro igralni videz.

NES.css poleg običajnih komponent, ki jih najdemo v drugih okoljih, vključuje tudi sloge za oblačke s komentarji, ikone reakcij in edinstvene vsebnike z obrobami. Spodaj je koda za nekaj balonov s komentarji. Spremna slika prikazuje njihov videz skupaj z nekaj številnimi ikonami (zgrajenimi s sencami CSS), ki so priložene ogrodju.

div> p> Primer oblačka s komentarji / p> / div> div> p> Še en primer oblačka s komentarjem z malo več besedila. / p> / div>

Če vam je to všeč, si oglejte PSone.css.

10. Animate.css

Obstaja več knjižnic, ki več ali manj počnejo isto: določenemu elementu dodajte eno ali več animacij. Prva taka knjižnica, ki je v zadnjih letih postala priljubljena, je bila Animate.css Dan Edena. Ta zabavna knjižnica vsebuje na desetine vnaprej izdelanih animacij, ki tresejo, bledijo, drsijo, povečajo in še več.

Obstaja še nekaj podobnih knjižnic, ki uporabnikom ponujajo nadomestne animacije, vključno z Woah.css, ki vsebuje nekaj nedvomno nenavadnih animacij, ki verjetno niso vsem po okusu. Na voljo je tudi Vivify, ki ima veliko več edinstvenih možnosti animacije in se precej razlikuje od Animate.css. Druga odlična možnost za raziskovanje je CSSFX, novi projekt, ki ima še več možnosti za animacije v slogu plug-and-play.

Nazadnje, če se lovite animiranih kazalnikov nalaganja, boste morda želeli preveriti Epic Spinners, ki vsebuje nekaj edinstvenih animiranih grafik samo s CSS.

Ali potrebujem ogrodje CSS?

Nenavadno je slišati, kako ljudje razbijajo CSS. S svojo osredotočenostjo na kaskado, globalni slog in posebnosti njenih postavitev je pritegnil pravi del jeze razočaranih razvijalcev. Za te ljudi so ogrodja CSS in knjižnice, ki spreminjajo vanilijevo kodo, da postane bolj intuitivna, absolutna božja dar. Medtem za nekatere puriste CSS ogrodja preprosto dodajo plast abstrakcije nečemu, kar ne potrebuje okrasja.

Nobena stran ni prava ali napačna. Razumevanje jedrnega jezika (zlasti nekaterih novih funkcij, kot sta flexbox in Grid Layout) je zelo dragoceno, veliko pa je tudi, če lahko hitro zgradimo nekaj, kar je prilagodljivo in vzdržno. Tu lahko pomagajo okviri in knjižnice CSS.

Mogoče je, da radi pišete svoj CSS iz nič. Toda z enostavnimi, prilagodljivimi in prilagodljivimi ogrodji in knjižnicami, kakršne obravnavamo v tej funkciji, lahko za svojo aplikacijo v kratkem času ustvarite interaktivne in vzdrževalne uporabniške vmesnike.

Vedno bi spodbujali razvijalce, naj se še naprej učijo in pišejo vanilijev CSS. Tega ni mogoče nadomestiti. Če pa morate v kratkem roku izdelati ali izdelati prototip nove postavitve ali zasnove, lahko uporaba enega najboljših okvirov CSS močno poveča produktivnost.

Če se želite naučiti najnovejših kreativnih in praktičnih veščin, s katerimi boste svojo kariero dvignili na višjo raven, se nam pridružite pri Generate CSS, naši konferenci za spletne oblikovalce in razvijalce. Izvedite več nawww.generateconf.com. Uporabite kodo posebne ponudbe SPLETNI OBLIKOVALEC2 za 10% popust na vstopnice!

Ta članek je bil prvotno objavljen v mreža, najbolje prodajana revija na svetu za spletne oblikovalce in razvijalce. Nakup številka 321 ali naročite se.