Vytváranie webových stránok Superfast s nadáciou 5 [Sprievodca]
Používanie rámca frontend môže zlepšiť váš pracovný postup webového dizajnu mnohými spôsobmi. Môže vám pomôžu dodržiavať moderné princípy návrhu ako je mobilný prvý prístup, sémantická značka a citlivý dizajn. Môžeš využitie mnohých prvkov CSS a JavaScript pripravených na použitie a významne urýchliť vývojový proces, čím sa uvoľní viac času, aby ste sa sústredili na dizajn vizuálneho a užívateľského zážitku.
Zurb Foundation 5 je jedným z najsilnejších rámov frontend na trhu. Je logicky postavená, ľahko použiteľná a úplne zadarmo. Umožňuje vám použiť flexibilná sieť CSS že uľahčuje vytváranie čistého a užívateľsky prívetivého usporiadania. Rámec nadácie je tiež veľmi testovaný, takže sa stará o kompatibilitu medzi viacerými prehliadačmi a viacerými zariadeniami.
V tejto príručke vám ukážem ako môžete vytvoriť superstránku s nadáciou Zurb 5. Môžete sa pozrieť na konečný výsledok na demo stránke.
Vytvorím rozloženie webových stránok, na vás čaká úloha pridávať jemné prvky dizajnu. Webová stránka, ktorú spolu vytvoríme v tejto príručke, splní sen moderného dizajnéra UX: bude citlivý, mobilný, používateľsky prívetivý a sémantický.
Kvôli dĺžke tejto príručky sú tu skratky, ktoré sa dostanú rýchlo do požadovanej sekcie:
- Sťahovanie nadácie 5
- Pochopenie siete
- Kedy používať veľké-N, stredné-N a malé-N triedy
- Pridanie panela s najvyššou ponukou
- Populácia hlavnej časti
- Pridávanie panelu pre populárne príspevky
- Pridanie ďalších 3 príspevkov do populárneho panelu
- Prettying Up CSS
- Pridanie nejakého obsahu
- Pridanie stránkovania
- Populácia bočného panela
- Formulár Newsletter
- Flex Video
- Ponuka bočného panela
- záver
1. Stiahnutie nadácie 5
Nadáciu 5 môžete prevziať v 4 rôznych formách:
- kompletný kód
- ľahšia verzia so základným kódom
- vlastnú verziu, kde si môžete prispôsobiť to, čo potrebujete a čo nie
- verziu Sass, ak chcete nastaviť premenné a mixiny v SCSS.
V tomto návode si vyberiem Kompletný kód s vanilkovou CSS, ale samozrejme si môžete vybrať akékoľvek iné verzie, ak chcete zefektívniť svoje stránky a používať len to, čo skutočne potrebujete.
Po stiahnutí a rozbalení súboru zip otvorte súbor index.html v prehliadači a uvidíte niečo takéto:
Áno, devs obsahovali užitočné odkazy v indexovom súbore. Môžete to nechať takýmto spôsobom a vytvoriť nový súbor pre váš prototyp s názvom home.html alebo niečím podobným, avšak v skutočnosti ho nemusíte držať, pretože môžete ľahko dosiahnuť dokumentáciu nadácie vždy, keď chcete.
Otvorte súbor index.html vo svojom obľúbenom editore kódov a odstrániť všetko vo vnútri ale pred zatvorením Pravidlá štýlu, ktoré pridávame do app.css súbor docela do nášho prototypu sú tieto: Ako nadácia 5 používa relatívne jednotky, musíme použiť “em”-s alebo “rem”-s namiesto pixelov dodržiavať pravidlá. (Môžete si prečítať o jednotkách CSS: Pixely vs ems vs% tu.) Použil som rozšírenie Firebug Firefox, aby som zistil, kde musím prepísať pravidlá CSS nadácie 5, môžete použiť akékoľvek iné rozšírenia pre vývojárov webových aplikácií, ak chcete. Tu v tomto krátkom útržku CSS sme museli predvolene predviesť predvolený CSS nadácie len raz, pri poslednom pravidle (.row .row.popular-main). Tu je demo stránka: Pri použití rovnakých pravidiel ako predtým pridáme do hlavnej časti stránky ďalší obsah. Obsah, ktorý teraz pridáme, bude Najnovšie príspevky s malými miniatúrami. Nadácia 5 má naozaj v pohode vopred pripravené miniatúry, ktoré budeme v tomto kroku využiť. Funkcia Thumbnails používa a vopred vytvorená trieda CSS “th” že je potrebné pridať obrázky, ktoré chceme zobraziť ako miniatúry, tak, ako ich vidíte v útržku kódu nižšie. Pre každý najnovší príspevok pridáme nový riadok pod Populárny panel s naším vlastná trieda CSS “najnovší príspevok”. Pri veľkosti tabletu a pracovnej plochy sa zobrazí malá miniatúra pomocou triedy miniatúr nadácie vľavo a názov a krátky popis vpravo. V mobilnom telefóne sa nadpis a popis dostanú pod miniatúru. Teraz som použil “stredné až tri stĺpce” a “stredné až 9 stĺpcov” triedy, aby rozdelili obrazovku na 1: 3, 25% pre obrázok a 75% pre text až po strednú veľkosť. Vložte nasledujúci útržok kódu pod Populárny panel trikrát (pre tri najnovšie príspevky). Tu len obsahujem kód jedného riadku posledného príspevku, pretože všetky používajú rovnakú značku HTML, líši sa len obsah. Obsah posledného príspevku ... Náš vlastný súbor CSS bol vytvorený v kroku 4.3, app.css tiež dostane nejaké nové pravidlá štýl, aby vzhľad demo uprataný. Poznámka: Ak chcete pridať svoje vlastné CSS do nadácie, nikdy nezabudnite skontrolovať pomocou nástroja web dev, kde musíte prepísať predvolené pravidlá. V útržku CSS nižšie ich musíme prepísať v prvom pravidle (.row .row.latest-post). V druhom pravidle stačí len použiť náš vlastný výber (.latest-post h4). Náš prototyp teraz vyzerá takto: V tomto kroku pridáme chladnú stránkovanie pod Najnovšie príspevky. Nadácia 5 nám poskytuje pomocnú ruku svojimi pohodlnými, pripravenými na použitie stránkovacími triedami. V tomto kroku používame rovnaký kód, ktorý nájdete v “pokročilý” sekcia v Dokumentáciách stránok. Tu sú najnovšie príspevky s novo pridanou časťou Stránkovanie: Teraz, keď sme pripravení s hlavným obsahom našej demo stránky, je čas naplniť pravú bočnú lištu. Pravá bočná lišta bude klesať pod hlavný obsah na mobilných a tabletových veľkostiach. Musíte vložiť všetky útržky kódu v tejto sekcii vo vnútri Ľavý bočný panel bude obsahovať formulár na prihlásenie do denníka (1), najnovšie video (2) a ponuku bočného panela v akordeónovej podobe pod prezývkou “Naša kuchárka” (3). Na konci tohto kroku budeme pripravení na naše demo, ktoré bude vyzerať takto: Ak chcete vytvoriť formulár v nadácii 5, nemusíte robiť nič iné, stačí umiestniť mriežku do a Značku HTML. Ak sa pozriete na úryvok kódu nižšie, uvidíte, že formulár sme vložili do riadku, v ktorom nastavíme rôzne voliče CSS pre všetky tri gridy: “small-12”, “stredne-9”, a “veľkom 12”. Vybrali sme toto riešenie, pretože 100% široký informačný formulár vyzerá v pohode v mobilnej veľkosti, ale je to naozaj naozaj nepríjemné, pokiaľ ide o veľkosť tabletu. veľmi široký. Našťastie Nadácia 5 nám umožňuje používať “Neúplné riadky”: stačí pridať “koniec” triedy na definíciu triedy CSS neúplného stĺpca. Takže toto sa stane tu: v mobilnej veľkosti sa bočný panel zobrazí pod hlavným obsahom prostredníctvom formulára na prihlasovanie do bulletinu, ktorý pokrýva celú obrazovku. Pri strednej veľkosti zostane bočný panel pod hlavným obsahom, ale formulár Newsletter bude pokrývať len 75% obrazovky a zostávajúcich 25% zostane prázdny. Pri veľkosti pracovnej plochy bude bočný panel hneď vedľa hlavného obsahu a formulár Newsletter bude znova pokrývať celú šírku bočného panela. Viac informácií o neúplných riadkoch nájdete v dokumente Grid Docs. Teraz sa pozrite do vnútra hlavička margin-bottom: 2em; .popular-ďalšie h4 font-size: 1.125em; horný okraj: 0,4m; .row .row.popular-main margin-bottom: 1.5;
4.4 Pridanie nejakého obsahu
Názov poslednej príspevky
.riadok .row.latest-post margin-bottom: 1.5em; .latest-post h4 margin-top: 0; veľkosť písma: 1.125cm;
4.5 Pridávanie stránkovania
5. Populácia bočného panela
5.1 Formulár Newsletter
Prihláste sa do nášho spravodajcu
Formuláre nadácie majú mnoho ďalších možností rozloženia, ako je predpona, predpona radiačný štítok, tlačidlo Postfix a štítok Postfix. Tu sme zvolili možnosť Postfix Button, pretože je užívateľsky príjemnejší: používatelia môžu naň kliknúť a odoslať formulár naraz.
V rámci formulára pridáme nový vnorený riadok, ktorý rozdeľuje obrazovku na 2: 1. Do textového vstupu sa dostanete 8 stĺpcov a tlačidlo postfix dostane 4. Keďže chceme mať toto rozloženie aj na mobilnom displeji, nastavíme “malé-8 stĺpcov” a “malé-4 stĺpce” CSS-selektory tu, malá mriežka je najmenšia veľkosť, kde chceme implementovať túto značku.
Môžete vidieť inú novú vec v HTML kóde, nad ktorou je “zhrnutie riadkov” trieda. Toto je vstavaný štýl nadácie 5. V predvolenom nastavení je medzi dvoma susednými stĺpcami okapový kanál, ale ak pridáme “kolaps” trieda do nášho radu, okapa zmizne. Robíme to preto, lebo chceme, aby bolo tlačidlo vedľa zadávania textu bez akéhokoľvek miesta medzi nimi.
Teraz je čas vložiť tento útržok kódu do priečinka
5.2 Flex Video
Pod sekciou Newsletter pridáme do nášho bočného panela denný video recept. Nadácia 5 nám pomáha aby vstavané videoklipy reagovali a nútili ich automatické rozširovanie s funkciou Flex Video.
Flexové videá používajú vstavaný súbor “flex-video” Triedu CSS. Vytvárame nový riadok pre sekciu postranného panela Daily Video Recipe a do neho umiestnite jeden široký stĺpec “malé 12 stredných až 9 veľkých 12 stĺpcov” CSS voliči z rovnakého dôvodu sme použili neúplný riadok v strednej mriežke v predchádzajúcom kroku.
Tu je kód, ktorý musíte prilepiť pod sekciu Newsletter. Môžete použiť akékoľvek video z YouTube, Vimeo atď.
Denný video recept
5.3 Ponuka bočného panela
V ponuke bočného panela použijeme funkciu Accordion nadácie 5. Akordéry sú webové prvky, ktoré rozširujú a zbalia obsah do logických sekcií.
Na našej demo stránke sú tieto logické sekcie 3 rôzne potravinové skupiny (hlavné jedlá, prílohy, dezerty) a každá skupina obsahuje menšie skupiny ako napr. “Hydina”, “bravčové”, “Hovädzie mäso”, “vegetarián”.
Celú bočnú lištu Accorion umiestnime do jedného širokého stĺpca s rovnakou logikou ako v krokoch 5.1 a 5.2. Do akordeónu sme vložili ako neusporiadaný zoznam s príslušnými vstavanými triedami CSS ako napr “akordeón” a “akordeón-navigation”.
Keďže nadácia Accordions spolupracuje s jazykom JavaScript, môžete prispôsobiť svoje správanie pomocou vopred vytvorených premenných jazyka JavaScript, ak chcete. Ak to chcete urobiť, pozrite sa na “Voliteľná konfigurácia jazyka JavaScript” v sekcii Accordion Docs. Nasledujúci útržok kódu sa nachádza pod sekciou Flex Video vo vnútri súboru index.html.
záver
Teraz, keď sme pripravení na naše demo stránky, uvidíme, čo ešte môžete dosiahnuť s nadáciou 5. Prvky, ktoré sme použili v tomto demo, sú len malou súpravou funkcií rámca nadácie. Existuje veľa ďalších vecí, ktoré môžete využiť vo svojom dizajne, ako sú prispôsobiteľné ikony na lište, palecky, svetelné schránky, posuvníky rozsahu, overovanie formulárov a mnoho ďalších. Dokumenty sú celkom dobre napísané a pomáhajú vývojárom s mnohými príkladmi kódu.
Ak ste s Sassom oboznámení, máte ešte viac možností, pretože každá sekcia v Dokumentoch vysvetľuje, ako si môžete vytvoriť vlastné mixiny a ktoré Sass premenné môžete použiť na prispôsobenie vašej stránky. Skôr než začnete navrhovať svoju webovú stránku, nezabudnite skontrolovať kompatibilitu nadradeného rámca, aby ste sa uistili, že funguje na všetkých prehliadačoch, ktoré musíte vytvoriť pre.
- Zobraziť demo
- Stiahnuť zdroj
