ZURB Foundation: CSS framework používateľského rozhrania pre responzívny frontend

V roku 2010 dizajnérska agentúra ZURB vytvorila CSS framework s cieľom spustiť službu pre uľahčiť vytváranie prototypov e skrátiť časy vývoja. Na tento účel boli vybrané najlepšie úryvky, vzory a šablóny, ktoré ich spojili v Foundation, frameworku, ktorý bol publikovaný ako projekt s otvoreným zdrojovým kódom v roku 2011 a ktorý je odvtedy pre verejnosť bezplatný.

Foundation je responzívny front-end framework, ktorý pozostáva z efektívnych HTML a CSS komponentov pre konfiguráciu používateľského rozhrania (Užívateľské rozhranie), rôzne úryvky a šablóny, ale aj množstvo voliteľných rozšírení JavaScriptu. Webový rámec má a modulová štruktúra a bol navrhnutý na konfiguráciu projektov prístupných z rôznych zariadení; je distribuovaný s licencia MIT a dá sa stiahnuť z oboch oficiálna domovská stránka byť na GitHub. Od verzie Foundation 4.0 platí pracovný predpoklad „Najskôr mobil“, takže odvtedy pracujeme s pomocou niekoľkých nových modulov na optimalizácii výkonu a odľahčení veľkosti súborov v rámci. Okrem štandardnej verzie Foundation ZURB zverejnil aj ďalšie varianty vývoja emailových newsletterov (Nadácia pre e-maily) a jednostránkové lokality (Základ pre aplikácie).

Foundation, responzívny webový rámec charakterizovaný svojou modulárnou štruktúrou, ťaží predovšetkým z flexibility. Máte možnosť sa pred stiahnutím rozhodnúť, ktoré komponenty si vyberiete a ktoré nie: týmto spôsobom si môžete zostaviť vlastný prispôsobený variant kolekcie webových kódov bez toho, aby ste museli sťahovať moduly, ktoré nepotrebujete. Ak sa potom stane, že si uvedomíte, že potrebujete komponent, ktorý ste v čase sťahovania nemali vybratý, môžete ho do frameworku jednoducho pridať neskôr. Rovnakým spôsobom je možné odstrániť aj moduly, ktoré už pre vás nie sú užitočné: takže máte vždy zaručenú možnosť mať len tie funkcie, ktoré považujete za skutočne potrebné pre realizáciu vášho webového projektu.

Pre Foundation 6.0 máte na výber viac 40 komponenty patrí do týchto siedmich sektorov:

• mriežka: Rozhodujúcim komponentom pre responzívny webový dizajn je flexibilné rozloženie mriežky so štandardnou šírkou 1200 pixelov. Tento modul môžete tiež zrušiť, systém však tvorí základ pre návrh webového projektu, ktorý je prístupný z rôznych zariadení a je kompatibilný v rôznych mierkach rozlíšenia. Okrem toho od verzie 6.0 existuje aj možnosť zvoliť si modul „Flex Grid“, ktorý umožňuje ešte flexibilnejšie polohovanie prvkov prevádzkou na základe modelu CSS flexbox (ako je horizontálny alebo vertikálny organizácia objektov).

• všeobecný: Medzi všeobecnými modulmi (ktorých je aj Grid oficiálne súčasťou) sú predovšetkým triedy vznášať sa e viditeľnosť, vďaka čomu môžete defidefinovať pravidlá správania týkajúce sa umiestnenia a viditeľnosti jednotlivých prvkov; Okrem toho v tejto oblasti nájdete aj komponent na vytváranie formulárov, ako aj modul tlačiarne so základnými formátmi pre písanie a text.

• ovládanie: Všetky najdôležitejšie interaktívne prvky vášho webového projektu sú obsiahnuté tu. Ide napríklad o tlačidlá, ktoré používateľa kliknutím navedú inam alebo ktoré zatvoria vybrané prvky. Existujú tiež moduly, s ktorými môžete integrovať posuvníky a tlačidlá s režimom zapnutia / vypnutia.

• Navigácia: V konfigurácii frontendu určite nemôžu chýbať navigačné prvky, takže aj pre váš projekt, ktorý má byť realizovaný so ZURB Foundation, máte k dispozícii veľké množstvo modulov, pomocou ktorých môžete nastaviť ponukové lišty a menu (rozbaľovací zoznam, rozbaľovací zoznam, rozbaľovací zoznam), pridajte navigačné cesty (drobčeky) alebo pridajte číslo na stránky.

• Kontajner: Kontajnery sú fantastickou príležitosťou na začlenenie rôznych prvkov, ako sú text, obrázky alebo videá, do spoločného priestoru. Nájdete tu štýly pre klasické obsahové widgety, ako sú rozbaľovacie ponuky, karty, kaskádové sektory alebo modálne dialógy.

• media: V časti „Médiá“ nájdete rámcové moduly, ktoré budú užitočné na začlenenie multimediálnych prvkov. Komponent "Flex Video" vás napríklad podporujevkladanie videí a zabezpečuje, aby bol obsah prispôsobený rôznym veľkostiam displeja a typom rozlíšenia. Okrem toho sú tu aj komponenty pre náhľad obrázkov, ako aj užitočné tipy na používanie nástrojov.

• Zapojiť: Nakoniec si môžete vybrať niekoľko veľmi užitočných rozšírení pre ZURB Foundation, ktoré vám uľahčia prácu s webovým rámcom. Napríklad s knižnicou „Motion UI“ máte možnosť stiahnuť si veľmi užitočnú knižnicu, aj keď je dostupná len pre variant Sass, vďaka čomu je vytváranie UI pasáží a animácií hračkou.

Pred stiahnutím si tiež môžete vybrať, či defidokončiť nejaké štandardné nastavenia rámca. Patria sem možnosti zmeny počtu alebo hrúbky stĺpcov a maximálnej šírky systému Grid, ako aj rôzne nastavenia farieb a určenie smeru textu (zľava doprava alebo sprava doľava). Ak si chcete framework najskôr otestovať bez toho, aby ste študovali fungovanie jednotlivých modulov, môžete si Foundation stiahnuť aj ako plnú verziu (kompletné) alebo alternatívne ako ľahší základný variant (nevyhnutný).

Ak ste spokojní s možnosťami, ktoré ponúka CSS a potom jednoducho prepíšete štýly do stiahnutého súboru CSS, určite ste sa rozhodli správne. Framework Foundation má však ešte jednu zvláštnosť: základ kódu CSS je napísaný v jazyku šablóny štýlov Sass (Syntakticky úžasné štýly), čo je takzvaný preprocesor pre CSS. Sass vám umožňuje pracovať so štýlmi .scss ktoré je možné následne skompilovať alebo prepísať do populárnych súborov .css a ktoré potom prehliadače čítajú a interpretujú.

Ak použijete Sass variant frameworku ZURB, získate nasledujúce výhody:

• Zjednodušená syntax (Sass alebo CSS), čo uľahčuje písanie štýlov

• Možnosť defiskončiť z Modell (Mixiny) na centrálne ukladanie opakujúcich sa formátov a ich integráciu podľa ľubovôle

• Jednoduchá kombinácia rôznych štýlov minimalizovať požiadavky HTTP

• Použitím premenné a funkcie centrálne vymieňať farby, vzdialenosti, fonty atď

• Kód je možné jednoducho štruktúrovať vďaka hniezdenia v hierarchickom poradí, čo vám umožní pracovať čistejšie bez príliš veľkého počtu reťazcov kódu

Kompilátor Sass je pôvodne napísaný v Ruby. Ak však nepoužívate tento programovací jazyk, nie ste nútení ho inštalovať pre Sass, pretože s LibSass budete mať alternatívu napísanú v C. LibSass funguje so všetkými používanými operačnými systémami a možno ho jednoducho nainštalovať na Node.js workflow, teda vykonať zmeny v kóde v Sass a automaticky ich preložiť do CSS.

S prechodom z verzie 5 na Foundation 6.0 ZURB opäť zmenšil veľkosť súboru celého rámca: so svojimi 60 KB CSS a 84 KB JavaScriptu má Foundation povesť jedna z najefektívnejších vývojových platforiem a prečítajte si, že existuje. Vďaka spomínanej modulárnej štruktúre a určitej voľnosti prispôsobenia ste dokonca schopní ďalej zmenšiť veľkosť rámca. V kombinácii s flexibilnou mriežkou a rôznymi atribútyARIA (napr. pre transpozíciu efektívnej klávesnicovej navigácie) implementovanej ZURB, možno považovať základné podmienky, nevyhnutné pre realizáciu webového projektu, ktorý je kompatibilný na rôznych platformách a zariadeniach, za úplne splnené. Atribúty ARIA sú najlepšie zdokumentované a sú dostupné tam, kde chcete výrazne optimalizovať prístupnosť svojho webu.

Ak pracujete s verziou rámca Sass, uistite sa, že ste rozšírili svoje možnosti konfigurácie prvkov dizajnu a rozloženia, ktoré vkladáte. Používanie týchto špeciálnych štýlov nie je pre nováčikov v žiadnom prípade jednoduché a vyžaduje si určité obdobie učenia, čo vo všeobecnosti platí aj pre platformu. Ja tiež'integrácia externých komponentov, ako aj moduly a projekty Foundation v inom rámci alebo v CMS je veľmi komplikované. Malé slabiny, ktoré ZURB Foundation ukazuje v porovnaní s inými frameworkami CSS, ako je Twitter Bootstrap, sú obmedzené množstvo šablón a nedostatočná podpora pre staršie verzie Internet Explorera.

Nadácia ZURB sprevádza vývojárov od prvého prototypu až po web pripravenú na použitie a vyznačuje sa predovšetkým vlastným efektívnosť. Ak zistíte, že niektoré komponenty sú nadbytočné, máte možnosť zrušiť ich výber bez ovplyvnenia funkčnosti ostatných prvkov. Na záver, CSS framework sa vyznačuje obzvlášť štíhlym kódom, ktorý zdôrazňuje leitmotív zvolený ZURB „Mobile First“. Spolu s extrémne flexibilný Grid systém, ktorý si môžete voliteľne prispôsobiť pomocou Sass, je framework ideálny na vývoj citlivý predný koniec ktoré majú tú výhodu, že majú vysokú rýchlosť načítania dát a skvelú dostupnosť, ako aj prispôsobenie sa rôznym veľkostiam obrazovky.

Rámec ZURB môžete použiť aj na vytváranie prispôsobených a možno aj zložitejších webových projektov, čo je však spojené so značným energetickým preťažením a vyžaduje si dobré pochopenie úryvkov.