Koji je pravi za mene? Objašnjeni 22 odgovarajućeg CSS okvira i ploče s bojlerima
CSS-ovi okviri postoje već godinama, ali dolazak brzih dizajnerskih praksi učinio je mnoge naše stare favorite beskorisnim. Srećom, puno stvarno talentiranih programera uskočilo je da popuni jaz s novom generacijom CSS okvira i kotlovske ploče.
Već tona stvari lebdi uokolo. Svi imaju popis, ali nitko vas ne vodi kroz to kako se svaki okvir i krovna ploča razlikuju od sljedećeg tako da možete donositi informiranu odluku. To nam je danas cilj. Pratite dalje dok smo pogledali što čini svaki od ova 22 responzivna CSS okvira i ploče s bojlerima jedinstvenim.
Gumby
Okvir Gumby preuzima rešetku od 960 na kojoj smo svi godinama rezali zube i unosi je u moderno doba web dizajna odazivnim dodirom. Također ima predodređene stilove za stvari kao što su obrasci, gumbi, preklopnici, padajuće kartice, kartice i još mnogo toga.
Semantički mrežni sustav
Ako mrzite mrežne sustave i njihove nesentikalne oznake, ovaj je za vas. Semantic Grid System koristi snagu CSS-ovih pretprocesora (LESS, Sass i Stylus) za stvaranje prilagodljivih varijabli za stvari poput oluka i širine stupaca. Sve što morate učiniti je koristiti nekoliko unaprijed ugrađenih kombinacija u vašem CSS-u, bez dodatnog markiranja!
bez rešetke
Gridless je snažna kotlovnica koja koristi prvi mobilni web dizajn kako bi se prilagodila širini uređaja. Također je opremljen sjajnim značajkama kao što su normalizacija CSS-a, ispravci programskih pogrešaka i tipografski stilovi.
bez okvira
Okvir bez okvira teško je klasificirati, jer je tehnički više preporučeni način pristupa prilagodljivom dizajnu od stvarnog skupa datoteka koje možete preuzeti. Tri su koraka: prvo napravite redovnu rešetku fiksne širine, a zatim ponovite beskonačno ponavljanje, a završite centriranjem u vidno polje.
Na web mjestu se posebno kaže da Frameless nije okvir i da se datoteke ne preuzimaju, ali uprkos toj tvrdnji zapravo postoje neke osnovne predloške koje vam pomažu da započnete.
Proporcionalne mreže
Proporcionalne mreže rješavaju neke velike probleme koji nastaju prilikom pokušaja prilagodljivog CSS izgleda, a to su gniježđenje mreža i borbe s vrijednostima na temelju postotka u gotovo različitim prikazima.
Proporcionalne mreže koriste CSS dimenzije okvira kako bi stvorili rješenje koje omogućava fiksne oluke (ems / rems) pomiješane s tekućinskim stupcima. Udaljenost između stupaca ostat će jednaka u svakoj točki prekida, u odnosu na veličinu osnovne slova. Stupci su definirani proporcijama, npr. Polovica, trećina, dvije trećine i mogu se lako upotrijebiti onoliko puta koliko želite, čak i ako su ugniježđeni.
Goldikosov pristup
Goldilocks pristup ima za cilj smanjiti tendenciju responzivnih dizajna da se nagnu za potporu određenih uređaja. Umjesto toga, on traži univerzalni dizajn koji nije ovisan ni o jednom uređaju.
Goldilocks pristup koristi kombinaciju ema, maksimalne širine, medijskih upita i prijevoda obrazaca kako bi razmotrio tri stanja koja omogućuju da vaši dizajni budu neovisni o razlučivosti.
Twitter Bootstrap
Twitter Bootstrap ne treba uvoditi. To je jedna od najvećih, najgorih CSS kotlovnica na webu i početna je točka za bezbroj profesionalnih i osobnih web mjesta od strane programera diljem svijeta.
Twitter Bootstrap uključuje brzi mrežni sustav, osim tona zvijezda predodređenih elemenata poput obrazaca, gumba, navigacijskih izbornika i još mnogo toga. Pogledajte naš cjelovit uvod ovdje.
Zaklada od ZURB-a
Fondacija je najznačajniji konkurent Twitter Bootstrapu jer su ova dva projekta vrlo slična. Poput Bootstrapa, Foundation vam daje responzivnu mrežu kao i razne stilizirane UI elemente.
Fondacija 3 nedavno je pokrenuta, tako da ako već neko vrijeme niste pogledali projekt, vrijeme je da svratite i provjerite ga. Spušta ruke jedan od najkorisnijih i temeljitih okvira koji ćete pronaći bilo gdje.
Kostur
Skeleton je bio jedan od prvih reaktivnih kotlovskih ploča za nastup i još uvijek je jedan od najboljih. U konceptu je malo poput Fondacije, samo što se osjeća lakšim (tip, gumbi i oblici jedini su UI elementi uključeni).
Pogledajte naš udžbenik Skeleton da biste vidjeli koliko ovaj alat omogućuje nevjerojatno jednostavan dizajn i funkcionira u nekoliko minuta.
Amazium
Amazium je mnogo sličan Gumby-u gore po tome što je responzivna mreža izgrađena na osnovi 960 grid starih tehnika. Nedavno je okvir ažuriran tako da se proteže sve do 1200 piksela, tako da možete iskoristiti velike zaslone. Čak uključuje podršku za retine zaslone!
Zlatni mrežni sustav
Sustav Golden Grid sebe naziva "sklopivom mrežom", što je zapravo samo maštovit način za reći da se medijski upiti koriste za srušavanje originalnog šesnaestnog rasporeda stupaca u osam, a zatim četiri stupca kako se vidljivi okvir sužava.
Kao i neke druge mreže koje smo do sada vidjeli, Golden Grid System koristi oluke zasnovane na emsu, tako da žlijebovi uvijek ostaju proporcionalni sadržaju.
CSS Grid sustav od 1140px
Ovaj je prilično standardni sistem rešetki bez ičega maštovitog. Započinje s mrežnom tekućinom od 12 stupaca koja koristi oluke zasnovane na postotku i izvrsno radi na 1.280 i 1.140px monitorima. Kako se broj vida smanjuje, za pročišćavanje sadržaja koristi se nekoliko jednostavnih medijskih upita.
StackLayout
StackLayout je za pobunjenike i bit će vrlo različit od ostalih okvira koje ste isprobali. Zapravo je nastao zbog nepodnošenja tipičnih okvira izgleda CSS-a.
Osnovni princip ovdje je da StackLayout koristi inline-block kao kamen temeljac jedinstvenog izgleda sustava. Sustav je pomalo čudan, ali ipak je prilično impresivan. Pogledajte upute za upotrebu ovdje.
SimpleGrid
SimpleGrid je još jedan jedinstveni sustav izgleda u kojem ćete uživati ako se volite igrati s tim stvarima koliko i ja. Rešetka se ovdje temelji na četiri različita raspona zaslona: zasloni manji od 720px, zasloni veći od 720px, zasloni veći od 985px i zasloni veći od 1235px.
Da biste implementirali sustav, koristite klase "slot" iz rasporeda sa četiri i šest stupaca. Zvuči komplicirano, ali zapravo je istinito njegovom nazivu i prilično je jednostavno uvesti.
Rešetka bazne tekućine
Tečna bazna mreža izgrađena je s velikim naglaskom na jakoj tipografiji koja se pridržava osnovne mreže. Sadrži i preklopnu rešetku s tri stupca koja bi trebala biti korisna polazna točka, a ne standard koji se treba slijediti.
Columnal
Columnal je vrsta hibridnog mrežnog sustava koji posuđuje najbolje elemente iz raznih drugih okvira. Ima elastičnu DNA sustava 1140px CSS Grid System s čak 960.gs bacanih. To je prilično standardna stvar, ali ako vam se ostali ne dopadaju, možete ih isprobati.
Inuit.css
Inuit.css je sjajan okvir koji je zapravo izgrađen na umu o proširivosti. Upotrijebite prilagođeni program za izradu rešetki za stvaranje vlastite responzivne mreže, a zatim preuzmite neke iglouse (dodatke) za proširenje okvira na korisne načine.
320 i više
320 i gore su poput zbirke riječi o web dizajnu (na dobar način). Sadrži sustav prilagodljivog izgleda koji upotrebljava mentalitet "mobilni prvi", zajedno s vizualnim stilovima Bootstrap, ikone Font Awesome, Modernizr, Selectivizr, LESS i Sass. Mislim da ćete uživati u malom impresivnom paketu dobrobiti.
Susy: osjetljive mreže za Compass
Ovaj je za super glupače poput mene koji vole sustave izgleda, kao i Sass i Compass. Izgradite svoj izgled u nekoliko minuta uz čaroliju kombinacija i varijabli.
S obzirom da je Compass nedavno u potpunosti odustao od domaće podrške za rešetke, Susy bi trebala dobro doći onima koji im nedostaju.
Initializr - responzivni predložak HTML5
Initializr je alat koji vam pomaže da brzo i jednostavno pokrenete svoje HTML5 projekte koristeći HTML5 bojler, Bootstrap ili novu responzivnu ploču s pločicama.
Odabir odgovarajućeg predloška tek je početak, odakle prilagođavate preuzimanje kako biste odabrali sve resurse koje biste obično željeli, poput Modernizr-a i LESS-a.
Još jedan mobilni bojler
YAMB je izvrsna polazna točka za vaše responzivne web projekte, izgrađene na nekoliko ključnih značajki: odzivnu mrežnu mrežu, padajuće navigacijske menije koji se automatski pretvaraju u odabrane okvire na malim ekranima i responzivne slike / prezentacije.
Mislim da je web stranica prilično ružna, ali sam set alata je prilično zgodan!
Wirefy
Wirefy je izgrađen posebno s brzim odzivnim eksperimentima u vezi s žičanim okvirom. Koristi modificiranu verziju šesnaest mrežne mreže 960 zajedno s nekim korisničkim sučeljima u obliku Bootstrapa (izbornici, obrasci, prezentacije, gumbi, slike itd.).
Koji vam je najdraži?
Neizbježno će ova vrsta postova privući komentatore koji osjećaju potrebu pokušati diskreditirati čitav pojam o korištenju bilo kakvog predloška ili mrežnog sustava za web dizajn. Oni jednostavno nisu za sve i poštujem vaše mišljenje ako ih ne možete podnijeti.
Ako ste ipak u mrežnim sustavima, volio bih čuti vaše povratne informacije o gore navedenim opcijama. Koje ste probali i što ste mislili o njima? Koji ti je najdraži?
