Kurš man ir piemērots? Izskaidroti 22 atsaucīgi CSS ietvari un katlu plāksnes
CSS ietvari pastāv jau vairākus gadus, taču atsaucīgas projektēšanas prakses ieviešana ir padarījusi daudzus no mūsu vecajiem favorītiem nelietderīgus. Par laimi, daudzi patiešām talantīgi izstrādātāji ir izvēlējušies aizpildīt nepilnības ar nākamās paaudzes CSS ietvariem un katliem.
Apkārt jau peld daudz tonnu šo lietu. Ikvienam ir saraksts, bet neviens īsti neaptver jūs, kā katrs karkass un katlu plate atšķiras no nākamās, lai jūs varētu pieņemt apzinātu lēmumu. Tas ir mūsu šodienas mērķis. Sekojiet līdzi, apskatot, kas padara katru no šiem 22 atsaucīgajiem CSS ietvariem un katlu plāksnēm unikālu.
Gumijs
Gumby ietvars aizņem 960 režģi, kuram mēs visi pirms gadiem gadiem nogriezām zobus, un ar atsaucīgu pieskārienu to ieved mūsdienu tīmekļa dizaina laikmetā. Tam ir arī iepriekš izveidoti stili tādām lietām kā veidlapas, pogas, pārslēgi, nolaižamie saraksti, cilnes un daudz kas cits.
Semantiskā režģa sistēma
Ja jūs ienīdat režģa sistēmas un to uzpūsto, neemantisko marķējumu, tas ir paredzēts jums. Semantiskā režģa sistēma izmanto CSS priekšapstrādātāju (LESS, Sass un Stylus) jaudu, lai izveidotu pielāgojamus mainīgos tādām lietām kā notekas un kolonnas platums. Viss, kas jums jādara, CSS ir jāizmanto daži iepriekš izveidoti maisījumi, nav nepieciešami papildu iezīmējumi!
Bez režģa
Gridless ir jaudīga katla plāksne, kurā tiek izmantots mobilais pirmais reaģējošais tīmekļa dizains, lai pielāgotos ierīces platumam. Tas ir arī papildināts ar lieliskām funkcijām, piemēram, CSS normalizēšanu, IE kļūdu labojumiem un tipogrāfijas stiliem.
Bez rāmja
Bezrāmjus ir grūti klasificēt, jo tas tehniski ir vairāk ieteicams veids, kā tuvināties atsaucīgam dizainam, nekā reāls lejupielādējamo failu komplekts. Ir trīs soļi: vispirms izveidojiet regulāru fiksēta platuma režģi, pēc tam liekiet tam atkārtoties bezgalīgi un pabeidziet, centrējot to skata logā.
Vietnē ir īpaši norādīts, ka bezrāmju sistēma nav ietvars un ka nav failu lejupielādes, taču, neskatoties uz šo apgalvojumu, patiesībā ir dažas pamata veidnes, kas palīdzēs jums sākt.
Proporcionāli režģi
Proporcionālie režģi risina dažas lielas problēmas, kas rodas, mēģinot reaģēt uz CSS izkārtojumu, proti, režģu ligzdošana un cīkstēšanās ar procentos balstītām vērtībām ļoti atšķirīgajos skatu logos.
Proporcionālie režģi izmanto CSS izmēru samazināšanu, lai izveidotu risinājumu, kas ļauj fiksētus notekcaurules (ems / rems) sajaukt ar šķidruma kolonnām. Attālums starp kolonnām katrā pārtraukuma brīdī paliks vienāds attiecībā pret pamata fonta lielumu. Kolonnas tiek noteiktas pēc proporcijas, piemēram, viena puse, viena trešdaļa, divas trešdaļas, un tās var viegli izmantot atkārtoti tik reižu, cik vēlaties, pat ja tās ir ligzdotas.
Goldilocks pieeja
Goldilocks pieeja ir vērsta uz atsaucīgu dizainu tendences samazināšanu, lai tie atbalstītu noteiktas ierīces. Tā vietā tas iegūst universālu dizainu, kas nav atkarīgs no jebkuras ierīces.
Goldilocks pieeja izmanto ems, maksimālā platuma, multivides vaicājumu un modeļa tulkojumu kombināciju, lai apsvērtu trīs stāvokļus, kas ļauj jūsu dizainparaugiem būt neatkarīgiem no izšķirtspējas.
Twitter sāknēšanas programma
Twitter Bootstrap nav nepieciešams. Tas ir viens no lielākajiem un sliktākajiem CSS tīklājiem tīmeklī un ir sākumpunkts neskaitāmām izstrādātāju profesionālām un personīgām vietnēm visā pasaulē.
Twitter Bootstrap iekļauj reaģējošu režģu sistēmu papildus tonnām iepriekš izveidotu zvaigžņu elementu, piemēram, formas, pogas, navigācijas izvēlnes un daudz ko citu. Iepazīstieties ar mūsu pilnu ievadu šeit.
Fonds no ZURB
Fonds ir visnozīmīgākais Twitter Bootstrap konkurents, jo abi projekti ir ļoti līdzīgi. Tāpat kā Bootstrap, fonds sniedz jums atsaucīgu režģi, kā arī dažādus veidotus UI elementus.
Fonds 3 tika dibināts nesen, tāpēc, ja kādu laiku neesat apskatījis projektu, ir pienācis laiks apstāties un to pārbaudīt. Tas ir viens no visnoderīgākajiem un vispusīgākajiem ietvariem, ko jūs atradīsit jebkur.
Skelets
Skelets bija viens no ātrāk reaģējošajiem katliem, lai radītu izskatu, un tas joprojām ir viens no labākajiem. Pēc koncepcijas tas ir nedaudz līdzīgs fondam, un tas jūtas vieglāks (tips, pogas un formas ir vienīgie iekļautie lietotāja interfeisa elementi).
Iepazīstieties ar mūsu Skeleton apmācību, lai redzētu, cik neticami viegli šis rīks padara to par reaģējoša dizaina izveidošanu un darbību dažu minūšu laikā.
Amazijs
Amazium ir līdzīgs Gumby, jo tas ir atsaucīgs režģis, kas veidots uz vecās 960 režģu tehnikas bāzes. Neskatoties uz to, nesen tika atjaunināts ietvars līdz 1200 pikseļiem, lai jūs varētu izmantot lielos displejus. Tas pat ietver atbalstu tīklenes displejiem!
Zelta režģa sistēma
Golden Grid sistēma sevi dēvē par "folding režģis", kas ir patiešām tikai iedomātā veids, kā pateikt, ka vides vaicājumi tiek izmantoti, lai sakļautu sākotnējo sešpadsmit kolonnu izkārtojumu astoņās un pēc tam četras kolonnas kā skatvietā sašaurina.
Tāpat kā daži citi režģi, ko mēs līdz šim esam redzējuši, arī Golden Grid System izmanto notekcaurules, kuru pamatā ir ems, lai notekcaurules vienmēr paliktu proporcionālas saturam.
CSS režģa sistēma 1140 pikseļi
Šī ir diezgan standarta režģa sistēma bez kaut kā iedomātā. Tas sākas ar 12 kolonnu šķidruma režģi, kurā tiek izmantotas notekcaurules, kas balstītas uz procentiem, un lieliski darbojas ar 1280 un 1140 pikseļu monitoriem. Tā kā skatu logs kļūst mazāks, satura atjaunošanai tiek izmantoti pāris vienkārši multivides vaicājumi.
StackLayout
StackLayout ir paredzēts nemierniekiem, tas ļoti atšķirsies no citiem jūsu izmēģinātajiem ietvariem. Faktiski, tas radās no nepatiku pret tipisku CSS izkārtojuma struktūrām.
Darbības pamatprincips ir tāds, ka StackLayout izmanto inline-block kā unikālas izkārtojuma sistēmas stūrakmeni. Sistēma ir nedaudz sarežģīta, taču tā tomēr ir diezgan iespaidīga. Iepazīstieties ar pārskatu šeit.
SimpleGrid
SimpleGrid ir vēl viena unikāla izkārtojumu sistēma, kas jums patiks, ja jums patīk spēlēties ar šīm lietām tikpat daudz kā es. Režģis šeit balstās uz četriem dažādiem ekrānu diapazoniem: ekrāni, kuru platums ir mazāks par 720 pikseļiem, ekrāni ir platāki par 720 pikseļiem, ekrāni ir lielāki par 985 pikseļiem un ekrāni ir platāki par 1235 pikseļiem.
Lai īstenotu šo sistēmu, jūs izmantot "spēļu" nodarbības gan no četru un sešu kolonnu izkārtojumu. Tas izklausās sarežģīti, taču patiesībā ir patiess tā nosaukumam un diezgan vienkārši īstenojams.
Šķidruma bāzes līnijas režģis
Fluid Baseline Grid ir veidots ar lielu uzsvaru uz spēcīgu tipogrāfiju, kas ievēro bāzes līnijas režģi. Tajā ir arī trīs kolonnu saliekamais režģis, kas paredzēts kā noderīgs sākumpunkts, nevis kā standarts, kas jāievēro.
Kolonna
Kolonna ir sava veida hibrīda režģa sistēma, kas labākos elementus aizņemas no dažādiem citiem ietvariem. Tam ir 1140 pikseļu CSS režģa sistēmas elastīgā DNS, kurā ir iemesti arī aptuveni 960.gs. Tas ir diezgan standarta priekšmets, bet, ja pārējie nešķiet pietiekami labi, varat to izmēģināt.
Inuit.css
Inuit.css ir lielisks ietvars, kas faktiski ir izveidots, paturot prātā paplašināšanu. Izmantojiet pielāgoto režģu veidotāju, lai izveidotu savu atsaucīgo režģi, pēc tam lejupielādējiet dažas iglu (spraudņus), lai paplašinātu ietvaru noderīgos veidos.
320 un uz augšu
320 un Up ir kā tīmekļa dizaina buzz vārdu kolekcija (labā veidā). Tā satur atsaucīgu izkārtojumu sistēma, kas izmanto "mobilo pirmo" mentalitāti, kopā ar Sākumpalaišanas vizuālo stilu, fontu iedvesmojošām ikonas, Modernizr, Selectivizr, mazāk un Sass. Tas ir iespaidīgs neliels labumu komplekts, kas, manuprāt, jums patiks.
Susy: reaģējoši režģi Compass
Šis ir paredzēts tādiem super nerds kā es, kas mīl izkārtojuma sistēmas, kā arī Sass un Compass. Veidojiet savus izkārtojumus dažu minūšu laikā ar maisījumu un mainīgo burvību.
Ņemot vērā to, ka Kompass nesen ir pilnībā atteicies no vietējā atbalsta režģiem, Sjūzijai vajadzētu būt noderīgai tiem, kam tās pietrūkst.
Initializr - atsaucīga HTML5 veidne
Initializr ir rīks, kas palīdz ātri un ērti sākt HTML5 projektus, izmantojot HTML5 katlu plāksni, sāknēšanas programmu vai jaunu atsaucīgu katlu plāksni.
Atbilstošās veidnes izvēle ir tikai sākums, no kuras jūs pēc pasūtījuma veidojat lejupielādi, izvēloties no visiem jums parasti nepieciešamajiem resursiem, piemēram, Modernizr un MAZĀK.
Vēl viens mobilais Boilerplate
YAMB ir lielisks sākums jūsu adaptīvajiem tīmekļa projektiem, kuru pamatā ir dažas galvenās funkcijas: reaģējošs šķidruma režģis, nolaižamās navigācijas izvēlnes, kas automātiski pārvēršas izvēles rūtiņās mazos ekrānos, un adaptīvi attēli / slaidrādes.
Es domāju, ka vietne ir diezgan neglīta, bet pats rīku komplekts ir diezgan ērts!
Stiepts
Wirefy ir īpaši izveidots, ņemot vērā ātru reaģēšanu uz stiepļu kadru veidošanu. Tas izmanto pārveidoto sešpadsmit kolonnu 960 režģa versiju kopā ar dažiem Bootstrap līdzīgiem UI elementiem (izvēlnes, formas, slaidrādes, pogas, attēli utt.).
Kura ir tava mīļākā?
Neizbēgami, šie ziņojumi veidi piesaistīs komentētājiem, kuri uzskata, ka, lai mēģinātu diskreditēt visu jēdzienu, izmantojot jebkāda veida šablonu vai režģa sistēmas web dizains. Tie vienkārši nav visiem, un es cienu jūsu viedokli, ja nevarat tos izturēt.
Ja jūs tomēr izmantojat tīkla sistēmas, es labprāt dzirdētu jūsu atsauksmes par iepriekš minētajām iespējām. Kurus esat mēģinājis un ko jūs par viņiem domājāt? Kura ir tava mīļākā?
