Milline on minu jaoks õige? Selgitatud on 22 tundlikku CSS-i raamistikku ja katelplaate
CSS-i raamistikud on olemas olnud juba aastaid, kuid reageeriva kujunduspraktika saabumine on muutnud paljud meie vanad lemmikud kasutuks. Õnneks on paljud tõeliselt andekad arendajad hakanud täitma tühimiku järgmise põlvkonna CSS-i raamistike ja katlamajadega.
Neid asju juba hõljub umbes tonn. Kõigil on nimekiri, kuid keegi ei juhenda teid, kuidas iga raamistik ja katteplaat erinevad järgmisest, et saaksite teha teadliku otsuse. See on meie tänane eesmärk. Järgige seda, kui heidame pilgu sellele, mis teeb neist 22 reageerivast CSS-i raamistikust ja katlamajast ainulaadse.
Naljakas
Gumby raamistik võtab 960 ruudustiku, millel me kõik aastaid tagasi hambad lõikasime, ja viib selle tundliku puudutusega veebidisaini tänapäevasse aega. Samuti on sellel eelseatud stiilid näiteks vormide, nuppude, lülituste, rippmenüüde, vahekaartide ja muu jaoks.
Semantiline võrgusüsteem
Kui te vihkate võrgusüsteeme ja nende ülespuhutud mittesemantilist märgistust, on see teie jaoks. Semantiline võrgusüsteem kasutab CSS-i eeltöötlejate (LESS, Sass ja Stylus) võimsust, et luua kohandatavaid muutujaid näiteks vihmaveerennide ja veeru laiuse jaoks. Kõik, mida peate tegema, on oma CSS-is kasutada mõnda eelhäälestatud segu, ilma täiendavate märgistusteta!
Gridless
Gridless on võimas katlaplekk, mis kasutab mobiilset esimest reageerivat veebidisaini, et kohandada ennast seadme laiusega. See on täis ka suurepäraseid funktsioone, näiteks CSS-i normaliseerimine, IE veaparandused ja tüpograafiastiilid.
Raamita
Raamita on raske klassifitseerida, kuna see on tehniliselt rohkem soovitatav viis reageerivale kujundusele lähenemiseks kui tegelik failide komplekt, mida saate alla laadida. Seal on kolm toimingut: kõigepealt tehke tavaline kindla laiusega ruudustik, seejärel pange see korrata lõpmatuseni ja lõpetage, koondades selle vaateaknasse.
Saidil on konkreetselt kirjas, et raamita raam ei ole raamistik ja faile ei laadita alla, kuid vaatamata sellele väitele on tegelikult olemas mõned põhilised mallid, mis aitavad teil alustada.
Proportsionaalsed ruudustikud
Proportsionaalsed ruudud lahendavad mõned suured probleemid, mis tekivad reageerimisel CSS-i paigutusele, nimelt võrede pesitsemine ja protsendipõhiste väärtustega maadlemine tohutult erinevates vaateavades.
Proportsionaalsed võred kasutavad CSS-i suuruse suurendamist lahenduse loomiseks, mis võimaldab fikseeritud vihmaveetorusid (ems / rems) segada vedelikukolonniga. Veergude vaheline kaugus jääb põhimärgi suuruse suhtes igas vahepunktis võrdseks. Veerge määratletakse proportsioonide järgi, näiteks üks pool, üks kolmandik, kaks kolmandikku ja neid saab hõlpsasti uuesti kasutada nii mitu korda kui soovite, isegi pesas.
Kuldlukkude lähenemine
Goldilocksi lähenemisviisi eesmärk on vähendada reageerivate kujunduste kalduvust kalduda konkreetsete seadmete toe poole. Selle asemel loob see universaalse disaini, mis ei sõltu ühestki seadmest.
Goldilocksi lähenemisviis kasutab ems-i, maksimaalse laiuse, meediumipäringute ja mustritõlgete kombinatsiooni, et kaaluda kolme olekut, mis võimaldavad teie kavanditel olla eraldusvõimega.
Twitteri alglaadimine
Twitter Bootstrap ei vaja tutvustamist. See on veebis üks suurimaid, halvimaid CSS-katteplaate ja see on lähtepunkt lugematutele professionaalsetele ja isiklikele saitidele, mida arendajad kogu maailmas pakuvad.
Twitter Bootstrap sisaldab lisaks paljudele täheliste eelsoodustatud elementide (nt vormid, nupud, navigeerimismenüüd ja palju muud) tundlikule ruudustussüsteemile. Tutvuge meie täieliku sissejuhatusega siin.
Sihtasutus ZURBilt
Sihtasutus on Twitter Bootstrapi kõige olulisem konkurent, kuna kaks projekti on väga sarnased. Nagu Bootstrap, pakub sihtasutus teile reageerivaid ruute ja ka erinevaid stiilseid kasutajaliidese elemente.
Sihtasutus 3 käivitati just hiljuti, nii et kui te pole mõnda aega projekti vaadanud, on aeg peatuda ja seda kontrollida. See on käepärast üks kõige kasulikum ja põhjalikum raamistik, mille leiate ükskõik kus.
Luustik
Skeleton oli üks varasemaid reageerivaid katelplaate, et välimust luua ja see on endiselt üks parimatest. Põhimõtteliselt on see natuke nagu sihtasutus, kuid tundub, et see on kergem (tüüp, nupud ja vormid on ainsad kaasasolevad kasutajaliidese elemendid).
Vaadake meie Skeletoni õpetust, et näha, kui uskumatult lihtsaks see tööriist muudab reageerivaid disainilahendusi ja töötab mõne minutiga.
Amazium
Amazium sarnaneb ülaltoodud Gumbyga selles osas, et see on tundlik võrk, mis on üles ehitatud vanade 960 võrgutehnika peale. Hiljuti värskendati raamistikku nii, et see hõlmaks täielikult 1200 pikslit, et saaksite kasutada suuri kuvarid. See sisaldab isegi võrkkesta kuvarite toe!
Kuldse võre süsteem
Kuldne ruudustik nimetab ennast „kokkuklapitavaks ruudustikuks”, mis on tegelikult lihtsalt väljamõeldud viis öelda, et meediumipäringute abil ahendatakse kuueteistkümne veeru algne paigutus kaheksaks ja seejärel neljaks veeruks, kui vaateava kitseneb.
Nagu mõned teised võrgud, mida me seni näinud oleme, kasutab Golden Grid System ems-il põhinevaid vihmaveetorusid, nii et vihmaveerennid püsiksid alati proportsioonis sisuga.
CSS-võrgusüsteem 1140px
See on üsna tavaline võrgusüsteem, millel pole midagi väljamõeldud. See algab 12-kolonnisest vedelikuvõrgust, mis kasutab protsendipõhiseid vihmaveetorusid ja töötab suurepäraselt 1280 ja 1140 pikslise ekraaniga monitoridel. Kuna vaateava väheneb, kasutatakse sisu lihtsustamiseks paar lihtsat meediumipäringut.
StackLayout
StackLayout on mõeldud mässulistele, see erineb teistest proovitud raamistikest väga. Tegelikult tulenes see CSS-i tüüpiliste paigutusraamistike vastumeelsusest.
Tööpõhimõte on see, et StackLayout kasutab unikaalse paigutussüsteemi nurgakivina tekstisisest plokki. Süsteem on pisut pentsik, kuid sellest hoolimata on see üsna muljetavaldav. Vaadake siit läbilõiget.
SimpleGrid
SimpleGrid on veel üks ainulaadne paigutussüsteem, mis teile meeldib, kui teile meeldib nende asjadega sama palju ringi mängida kui mulle. Siinne ruudustik põhineb neljal erineval ekraanide vahemikul: ekraanid, mille laius on alla 720 piksli, ekraanid üle 720 piksli, ekraanid üle 985 piksli ja ekraanid üle 1235 piksli.
Süsteemi juurutamiseks kasutate “pesa” klasse nii nelja kui ka kuue veeru paigutuselt. See kõlab keeruline, kuid on oma nimele tõsi ja seda on üsna lihtne rakendada.
Vedeliku lähtejoone ruudustik
Fluid Baseline Grid on üles ehitatud rõhuasetusega tugevale tüpograafiale, mis järgib baasjoone ruudustikku. See sisaldab ka kolme veeru voltimisvõre, mis on mõeldud abistavaks lähtepunktiks, mitte järgitavaks standardiks.
Veerg
Veerg on omamoodi hübriidsüsteemisüsteem, mis laenab parimate elementide olemasolu mitmest teisest raamistikust. Sellel on 1140px CSS ruudustussüsteemi elastne DNA, millesse on visatud ka umbes 960.gs. See on üsna tavaline kraam, kuid kui teised ei tundu eriti sobivad, võiksite seda proovida.
Inuit.css
Inuit.css on suurepärane raamistik, mis on tegelikult üles ehitatud laiendamist silmas pidades. Kasutage kohandatud ruudustiku loomist, et luua oma reageeriv ruudustik, seejärel laadige alla mõned iglus (pluginad), et raamistikku kasulikul viisil laiendada.
320 ja üleval
320 ja üles on nagu veebikujunduse buzz-sõnade kogumik (heas mõttes). See sisaldab tundlikku paigutussüsteemi, mis kasutab “kõigepealt mobiili” mentaliteeti, koos Bootstrap-i visuaalsete stiilide, Font Awesome-ikoonide, Modernizri, Selectivizri, VÄHEM ja Sassiga. See on muljetavaldav väike maiuspala, mis minu arvates teile meeldib.
Susy: Kompassi tundlikud võrgud
See on mõeldud minusugustele supernurkadele, kes armastavad paigutussüsteeme, aga ka Sassi ja Kompassi. Koostage oma paigutused mõne minuti jooksul segude ja muutujate maagia abil.
Arvestades, et Compass on hiljuti täielikult kaotanud võrkude loomuliku toe, peaks Susy olema abiks neile, kes neist puuduvad.
Initializr - tundlik HTML5-mall
Initializr on tööriist, mis aitab teil HTML5-projekte kiiresti ja hõlpsalt käivitada, kasutades HTML5 Boilerplate, Bootstrap või uut tundlikku boilerit.
Vastuvõtliku malli valimine on alles algus, sealt alates saate oma allalaaditava faili kohandada, valides kõigi soovitud ressursside hulgast, näiteks Modernizr ja VÄHEM.
Järjekordne mobiilne katlaplaat
YAMB on suurepärane lähtepunkt teie tundlikele veebiprojektidele, mis on üles ehitatud mõnele peamisele funktsioonile: reageeriv vedelikuvõrk, rippmenüüst navigeerimise menüüd, mis muutuvad automaatselt väikestes ekraanides valikukastideks, ja tundlikud pildid / slaidiseanssid.
Minu arust on veebisait üsna kole, kuid tööriistakomplekt ise on üsna käepärane!
Traadiga
Wirefy on loodud spetsiaalselt kiire reageerimisega traadiga kaadrite loomise katsetusi silmas pidades. See kasutab kuueteistkümne veeru 960 ruudustiku muudetud versiooni koos mõne Bootstrap-moodi kasutajaliidese elementidega (menüüd, vormid, slaidiseanssid, nupud, pildid jne).
Milline on teie lemmik?
Paratamatult meelitavad seda tüüpi postitused kommentaatoreid, kes tunnevad vajadust proovida diskrediteerida kogu ideed kasutada veebidisaini jaoks ükskõik millist malli või ruudustussüsteemi. Need ei ole lihtsalt kõigi jaoks ja austan teie arvamust, kui te ei suuda neid seista.
Kui olete aga võrgusüsteemides, tahaksin kuulda teie tagasisidet ülaltoodud võimaluste kohta. Milliseid neist olete proovinud ja mida arvasite neist? Milline on teie lemmik?
