ZURB Foundation: Brûkersynterface CSS-ramt foar in responsive front-end

Yn 2010 makke it ûntwerpburo ZURB in CSS-ramt mei as doel om in tsjinst te begjinnen foar fasilitearje it meitsjen fan prototypes e ferkoarte ûntwikkeling tiden. Om dit te dwaan binne de bêste snippets, patroanen en sjabloanen útkeazen om se byinoar te bringen yn Stichting, it ramt dat yn 2011 as iepen boarne-projekt publisearre is en dat sûnt dy tiid fergees foar it publyk bliuwt.

Foundation is in responsyf front-end-ramt, besteande út effisjinte HTML- en CSS-komponinten foar UI-konfiguraasje (brûker omjouwing), ferskate snippets en sjabloanen, mar ek tal fan opsjonele JavaScript-tafoegings. It webkader hat in module struktuer en is ûntworpen foar it konfigurearjen fan projekten tagonklik fan ferskate apparaten; wurdt ferdield mei de MIT lisinsje en kin wurde ynladen fan beide offisjele thússide oan wêze GitHub. Fanôf de Stichting ferzje 4.0 jildt it wurkútgongspunt "Mobile earst", dus sûnt dy tiid hawwe wy wurke mei help fan ferskate nije modules om prestaasjes te optimalisearjen en de grutte fan bestannen binnen it ramt lichter te meitsjen. Neist de standertferzje fan Foundation hat ZURB ek oare farianten publisearre foar de ûntwikkeling fan e-nijsbrieven (Stifting foar Emails) en siden fan ien side (Stifting foar Apps).

Stichting, it responsive webkader karakterisearre troch syn modulêre struktuer, profiteart foaral yn fleksibiliteit. Jo hawwe de mooglikheid om foar de download te besluten hokker komponinten jo kieze en hokker net: op dizze manier kinne jo jo eigen oanpaste fariant fan 'e webkoade-kolleksje komponearje sûnder twongen te wurden om modules te downloaden dy't jo net nedich binne. En as it bart dat jo realisearje dat jo in komponint nedich hawwe dy't jo net hawwe selektearre op it momint fan download, kinne jo it letter maklik tafoegje oan it ramt. Op deselde wize is it ek mooglik om modules te ferwiderjen dy't net mear nuttich binne foar jo: sadat jo altyd garandearre binne dat jo allinich de funksjes hawwe dy't jo echt nedich fine foar de realisaasje fan jo webprojekt.

Foar Foundation 6.0 hawwe jo in kar út mear 40 ûnderdielen dy't ta de folgjende sân sektoaren hearre:

• Grid: De beslissende komponint foar responsyf webûntwerp is de fleksibele yndieling fan it Grid, mei in standert-konforme breedte fan 1200 piksels. Jo kinne dizze module ek deselektearje, lykwols it systeem foarmet de basis foar it ûntwerpen fan in webprojekt dat tagonklik is fan ferskate apparaten en kompatibel is op ferskate resolúsjeskalen. Dêrnjonken is d'r fanôf ferzje 6.0 ek de mooglikheid om de module "Flex Grid" te kiezen, dy't in noch fleksibeler posysje fan 'e eleminten mooglik makket troch te wurkjen op basis fan it CSS-flexbox-model (lykas in horizontale of fertikale organisaasje fan objekten).

• Algemien: Under de algemiene modules (dêr't offisjeel ek Grid diel fan útmakket) binne foarearst de lessen driuwe e sichtberens, tank oan dêr't jo kinne defidefiniearje gedrachsregels oangeande de posisjonearring en sichtberens fan inkele eleminten; Dêrnjonken fine jo yn dit gebiet ek in komponint foar it meitsjen fan formulieren, lykas de drukkerijmodule mei de basisformaten foar skriuwen en tekst.

• Kontrolearje: Alle essensjele ynteraktive eleminten fan jo webprojekt binne hjir befette. Dit binne bygelyks knoppen dy't de brûker mei in klik op oare plakken liede of selekteare eleminten slute. Der binne ek modules wêrmei jo kinne yntegrearje sliders en knoppen mei oan / út modus.

• Navigaasje: Yn 'e konfiguraasje fan' e foarkant kinne navigaasje-eleminten grif net ûntbrekke, dus sels foar jo projekt dat wurdt útfierd mei ZURB Foundation hawwe jo in grut ferskaat oan modules wêrmei jo kinne ynstelle menu bars en menu 's (drop-down, drop-down list, drilldown), foegje navigaasjepaden ta (broodkruimels) of foegje it nûmer ta oan de siden.

• Kontener: Containers binne in fantastyske kâns om ferskate eleminten lykas tekst, ôfbyldings of fideo's op te nimmen yn in mienskiplike romte. Hjir sille jo stilen fine foar klassike ynhâldwidgets lykas útklapmenu's, ljeppers, kaskadearjende sektoaren of modale dialoochfinsters.

• Media: Binnen de seksje "Media" fine jo de ramtmodules dy't nuttich sille wêze foar it opnimmen fan multymediale eleminten. De komponint "Flex Video" stipet jo bygelyks ynynfoegje videos en soarget derfoar dat de ynhâld wurdt oanpast oan ferskillende display maten en soarten resolúsje. Derneist binne d'r ek komponinten foar foarbyldôfbyldings en ek nuttige tips foar it brûken fan de ark.

• Ynstekke: Ta beslút kinne jo kieze wat hiel brûkbere tafoegings foar ZURB Foundation dy't meitsje it makliker foar jo in wurk mei it web ramt. Mei de bibleteek "Motion UI" hawwe jo bygelyks de mooglikheid om in heul nuttige bibleteek te downloaden, sels as allinich beskikber foar de Sass-fariant, wat it meitsjen fan UI-passaazjes en animaasjes in wyn makket.

Ek, foardat it ynladen is, kinne jo kieze oft defieinigje guon standert ynstellings foar it ramt. Dizze omfetsje opsjes foar it feroarjen fan it oantal of dikte fan kolommen en de maksimale breedte fan it Grid-systeem, lykas ferskate kleurynstellingen en it bepalen fan 'e rjochting fan' e tekst (lofts nei rjochts of rjochts nei lofts). As jo ​​​​earst it ramt wolle testen sûnder it funksjonearjen fan 'e yndividuele modules te bestudearjen, kinne jo Foundation ek downloade as in folsleine ferzje (Kompleet) of alternatyf as in lichtere basisfariant (essinsjeel).

As jo ​​​​tefreden binne mei de kânsen oanbean troch CSS en dan gewoan de stilen transkrije op it ynladen CSS-bestân, hawwe jo wis it goede beslút makke. It Foundation-ramt hat lykwols noch ien spesjale eigenskip: de basis fan 'e CSS-koade is skreaun yn' e Sass-stylblêdtaal (Syntaktysk Awesome Stylesheets), dat is in saneamde preprocessor foar CSS. Sass makket it mooglik foar jo om te wurkjen oan stylblêden .scss dy't dêrnei gearstald of transkribearre wurde kinne yn populêre .css-bestannen en dy't dan troch browsers lêzen en ynterpretearre wurde.

As jo ​​​​de Sass-fariant fan it ZURB-ramt brûke, sille jo de folgjende foardielen genietsje:

• Simplified syntaksis (Sass of CSS), wat it makliker makket om stylblêden te skriuwen

• De mooglikheid fan defiein dei modellen (Mixins) om weromkommende formaten sintraal op te slaan en se nei wille te yntegrearjen

• Ienfâldige kombinaasje fan ferskate stylblêden om HTTP-oanfragen te minimalisearjen

• Mei help fan fariabelen en funksjes om sintraal kleuren, ôfstannen, lettertypen ensafuorthinne út te wikseljen

• De koade kin wurde gewoan strukturearre tank oan Nêst yn hiërargyske folchoarder, sadat jo skjinner kinne wurkje sûnder te folle koadestrings

De Sass-kompiler is oarspronklik skreaun yn Ruby. As jo ​​​​lykwols dizze programmeartaal net brûke, binne jo net twongen om it foar Sass te ynstallearjen, om't jo mei LibSass in alternatyf hawwe skreaun yn C. LibSass wurket mei alle bestjoeringssystemen yn gebrûk en kin maklik ynstalleare wurde op in Node.js workflow, dat is, te meitsjen feroarings oan de koade yn Sass en automatysk oersette se yn CSS.

Mei de oergong fan ferzje 5 nei Foundation 6.0 hat ZURB de triemgrutte fan it hiele ramt op 'e nij fermindere: mei syn 60 KB fan CSS en 84 KB fan JavaScript hat Foundation de reputaasje fan in ien fan 'e meast streamlined ûntwikkelingsplatfoarms en lês dat der is. Mei tank oan de earder neamde modulêre struktuer en in bepaalde frijheid fan oanpassing, kinne jo sels de grutte fan it ramt fierder ferminderje. Yn kombinaasje mei de fleksibele Grid en de ferskillende attributenARIA (bygelyks foar de transposysje fan in effektive toetseboerdnavigaasje) útfierd troch ZURB, de basisbetingsten, ûnmisber foar it realisearjen fan in webprojekt dat kompatibel is op ferskate platfoarms en apparaten, kinne wurde beskôge as folslein tefreden. ARIA-attributen binne it bêste dokuminteare en binne beskikber wêr't jo fan doel binne de tagonklikens fan jo webside signifikant te optimalisearjen.

As jo ​​wurkje mei de Sass-ferzje fan it ramt, soargje derfoar dat jo jo opsjes útwreidzje foar it konfigurearjen fan de ûntwerpeleminten en yndielingen dy't jo ynfoegje. It brûken fan dizze spesjale stylblêden is lang net maklik foar begjinners en fereasket in bepaalde perioade fan learen, wat oer it algemien ek wier is foar it platfoarm. Ik ek'yntegraasje fan eksterne komponinten, lykas modules en Foundation-projekten yn in oar ramt as yn in CMS is heul yngewikkeld. De lytse swakkens dy't ZURB Foundation toant yn ferliking mei oare CSS-ramten, lykas Twitter Bootstrap, binne it beheinde ferskaat oan sjabloanen en it gebrek oan stipe foar âldere ferzjes fan Internet Explorer.

ZURB Foundation begeliedt ûntwikkelders fan it earste prototype oant de klear te brûken webside en wurdt foaral karakterisearre troch har eigen effisjinsje. As jo ​​​​fine dat guon komponinten oerstallich binne, hawwe jo de opsje om se út te selektearjen sûnder de funksjonaliteit fan oare eleminten te beynfloedzjen. Ta beslút, it CSS-ramt wurdt karakterisearre troch in bysûnder slanke koade dy't markearret it leitmotif keazen troch ZURB "Mobile First". Tegearre mei ekstreem fleksibel Grid systeem, dy't jo opsjoneel kinne oanpasse mei Sass, it ramt is ideaal foar it ûntwikkeljen responsive front ein dy't it foardiel hawwe fan in hege snelheid yn it laden fan gegevens en grutte tagonklikens, en ek oanpasse oan ferskate skermgrutte.

Jo kinne it ZURB-ramt ek brûke foar it meitsjen fan oanpaste en miskien kompleksere webprojekten, dit is lykwols ferbûn mei in flinke oerlêst fan enerzjy en fereasket in goed begryp fan 'e snippets.