Vytváření webových stránek Superfast s nadací 5 [Průvodce]
Použití frontendového rámce může zlepšit váš webový pracovní postup v mnoha ohledech. Může vám pomohou dodržovat moderní principy designu jako je mobilní přístup, sémantické značení a citlivý design. Můžeš využijte mnoho prvků CSS a JavaScriptu připravených k použití a významně urychlit proces vývoje, uvolnění více času zaměřit se na vizuální a uživatelský design.
Zurb Foundation 5 je jedním z nejvýkonnějších rámců na trhu. Je logicky postavený, snadno použitelný a zcela zdarma. To vám umožní využít flexibilní CSS mřížka že usnadňuje vytváření čistého, uživatelsky příjemného uspořádání. Rámec Foundation je také silně testován, takže se stará o kompatibilitu mezi prohlížeči a cross-device.
V tomto tutoriálu vám ukážu jak můžete vybudovat webové stránky superrychlé s Nadací Zurb 5. Konečný výsledek si můžete prohlédnout na demo stránce.
Budu vytvářet rozvržení webových stránek, úkol přidávání jemných designových prvků na vás čeká. Webové stránky, které vytvoříme společně v tomto tutoriálu, splní sen moderního návrháře UX: bude citlivý, mobilní, první, uživatelsky příjemný a sémantický.
Vzhledem k délce tohoto průvodce se zde můžete rychle dostat do sekce, kterou chcete rychle:
- Stahování nadace 5
- Pochopení mřížky
- Při použití tříd velkých, středních a malých n
- Přidání horního menu
- Naplnění hlavní části
- Přidání panelu pro populární příspěvky
- Přidání 3 dalších příspěvků do populárního panelu
- Prettying Up The CSS
- Přidání dalšího obsahu
- Přidání stránkování
- Naplnění postranního panelu
- Formulář Newsletteru
- Flex Video
- Nabídka postranního panelu
- Závěr
1. Stahování nadace 5
Nadaci 5 můžete stáhnout ve 4 různých formách:
- celý kód
- lehčí verze s pouze základním kódem
- vlastní verzi, kde si můžete přizpůsobit, co potřebujete a co ne
- verze Sass, pokud chcete nastavit proměnné a mixiny v SCSS.
V tomto tutoriálu si vyberu kompletní kód s vanilkovou CSS, ale samozřejmě si můžete vybrat jakoukoliv jinou verzi, pokud chcete zefektivnit své stránky a používat pouze to, co opravdu potřebujete.
Po stažení a rozbalení souboru zip otevřete soubor index.html ve svém prohlížeči a uvidíte něco takového:
Jo, devs zahrnoval užitečné odkazy v indexovém souboru. Můžete to nechat tímto způsobem a vytvořit nový soubor pro váš prototyp s názvem home.html nebo něco podobného, ale nemusíte ho ve skutečnosti uchovávat, protože můžete snadno dosáhnout dokumentace nadace, kdykoli budete chtít.
Otevřete soubor index.html ve vašem oblíbeném editoru kódu a smažte vše uvnitř sekce, ale před uzavřením Pravidla stylu, která přidáváme do app.css soubor do našeho prototypu: Jak Foundation 5 používá relativní jednotky, musíme použít “em”-s nebo “rem”-s namísto pixelů držet krok s pravidly. (Můžete si přečíst o CSS jednotkách: Pixely vs ems vs% zde.) Použil jsem Firefox Firebug rozšíření, abych určil, kde musím přepsat pravidla nadace CSS nadace 5, můžete použít jakékoli další rozšíření prohlížeče webového vývoje, pokud chcete. Zde v tomto krátkém úryvku CSS jsme museli pouze přepsat výchozí CSS nadace pouze jednou, v posledním pravidle (.row .row.popular-main). Jak vypadá demo stránka nyní: Pomocí stejných pravidel jako dříve přidáme další obsah do hlavní části stránky. Obsah, který nyní přidáme, bude Nejnovější příspěvky s malými miniaturami. Foundation 5 má opravdu cool předpřipravené miniatury, které využijeme v tomto kroku. Miniatury nadace používají předdefinovaná třída CSS “th” které musíme přidat k obrázkům, které chceme zobrazit jako miniatury způsobem, který vidíte v úryvku kódu níže. Pro každý Poslední příspěvek přidáme nový řádek pod panel Populární s naším volána vlastní třída CSS “poslední příspěvěk”. Na tabletu a ploše budeme zobrazovat malou miniaturu s použitím třídy miniatur nadace na levé straně a nadpis a krátký popis vpravo. V mobilu se titulek a popis zobrazí pod miniaturou. Teď jsem použil “střední-3 sloupce” a “střední-9 sloupce” třídy, aby se obrazovka rozdělila na 1: 3, 25% pro obraz a 75% pro text od střední velikosti. Vložte následující úryvek kódu pod panel Populární třikrát (pro tři Poslední příspěvky). Zde jsem jen zahrnout kód jedné řádky Poslední příspěvek, protože všechny používají stejný HTML kód, pouze obsah se liší. Obsah posledního příspěvku… Náš vlastní soubor CSS vytvořený v kroku 4.3, app.css také dostane nová pravidla stylu, aby vzhled demo uklizený. Poznámka: Pokud chcete přidat vlastní CSS do nadace, nezapomeňte zkontrolovat pomocí nástroje web dev, kde musíte přepsat výchozí pravidla. V úryvku CSS níže je musíme přepsat v prvním pravidle (.row .row.latest-post). Ve druhém pravidle stačí použít náš vlastní volič (.latest-post h4). Náš prototyp nyní vypadá takto: V tomto kroku přidáme chladnou stránku pod Poslední příspěvky. Nadace 5 nám poskytuje pomocnou ruku díky svým praktickým třídám připraveným k použití. V tomto kroku používáme stejný kód, který najdete v “Pokročilý” sekce uvnitř Paginačních dokumentů. Zde jsou Poslední příspěvky s nově přidanou stránkou: Teď, když jsme připraveni s hlavním obsahem naší demo stránky, je na čase naplnit pravý postranní panel. Pravý postranní panel sklouzne pod hlavní obsah mobilních a tabletových velikostí. Musíte vložit všechny úryvky kódu do této sekce uvnitř Levý postranní panel bude obsahovat formulář pro přihlášení k odběru newsletteru (1), nejnovější video (2) a postranní panel ve stylu akordeonového stylu pod přezdívkou “Naše kuchařka” (3). Na konci tohoto kroku budeme připraveni s naším demo, které bude vypadat takto: Chcete-li vytvořit formulář v nadaci 5, nemusíte dělat nic jiného, jen umístěte mřížku dovnitř HTML tag. Pokud se podíváte na níže uvedený kód, uvidíte, že jsme vložili formulář do řádku, ve kterém nastavujeme různé CSS selektory pro všechny 3 mřížky: “malý-12”, “střední-9”, a “velký-12”. Toto řešení jsme zvolili proto, že 100% široký formulář Newsletteru vypadá skvěle na mobilních velikostech, ale je to opravdu nepříjemné na velikosti tabletu, jak se stává. velmi široký. Nadace 5 nám naštěstí umožňuje používat “Neúplné řádky”: prostě musíme přidat “konec” třídy do definice třídy CSS neúplného sloupce. Tak se to stane tady: na mobilní velikosti se postranní panel zobrazí pod hlavním obsahem s formulářem pro registraci bulletinu, který pokrývá celou obrazovku. Na střední velikosti zůstane postranní panel pod hlavním obsahem, ale formulář Newsletter bude pokrývat pouze 75% obrazovky a zbývajících 25% zůstane prázdných. Na ploše bude postranní panel přímo vedle hlavního obsahu a formulář Newsletteru bude opět pokrývat celou šířku postranního panelu. Další informace o neúplných řádcích naleznete v dokumentech mřížky. Podívej se dovnitř header margin-bottom: 2em; .popular-dodatečné h4 font-size: 1.125em; margin-top: 0.4em; .row .row.popular-main margin-bottom: 1,5em;
4.4 Přidání dalšího obsahu
Název nejnovějšího příspěvku
.řádek .row.latest-post margin-bottom: 1,5em; .latest-post h4 margin-top: 0; velikost písma: 1.125em;
4.5 Přidání stránkování
5. Naplnění postranního panelu
5.1 Formulář Newsletteru
Zaregistrujte se k našemu zpravodaji
Formuláře nadace mají mnoho dalších možností rozvržení, například štítku předpony, štítku předpony, tlačítka postfixu a štítku Postfixu. Zvolili jsme zde možnost Postfix Button, protože je uživatelsky přívětivější: uživatelé na něj mohou kliknout a odeslat formulář najednou.
Uvnitř formuláře přidáme novou vnořenou řadu, která rozdělí obrazovku na 2: 1. Zadání textu bude mít 8 sloupců a tlačítko postfix bude mít 4. Protože chceme mít toto rozvržení i na mobilní obrazovce, nastavíme “malé-8 sloupce” a “malé-4 sloupce” CSS-selektory zde, malá mřížka je nejmenší velikost, kde chceme tento značkovač implementovat.
Můžete vidět další novou věc v HTML kódu výše, který je “řádek kolaps” třída. To je ve stylu Foundation 5. Ve výchozím nastavení je mezi dvěma sousedními sloupy žlab, ale pokud přidáme “kolaps” třídy do naší řady, okap zmizí. Děláme to proto, že chceme, aby bylo tlačítko hned vedle vstupu textu bez mezery mezi nimi.
Nyní je čas vložit tento fragment kódu do
5.2 Flex Video
Pod sekci Newsletter přidáme do našeho postranního panelu denní video recept. Nadace 5 nám pomáhá vnořená videa reagují a nutí je automaticky měnit měřítko s funkcí Flex Video.
Flex videa používají vestavěný “flex-video” Třída CSS. Vytvoříme nový řádek pro sidebar sekce Daily Video Recipe a vložíme do něj jeden široký sloupec “malý-12 střední-9 velké-12 sloupců končí” CSS selektory ze stejného důvodu jsme v předchozím kroku použili neúplný řádek ve střední mřížce.
Zde je kód, který potřebujete vložit pod sekci Newsletter. Můžete použít jakékoli video z Youtube, Vimeo atd.
Denní video recept
5.3 Nabídka postranního panelu
Pro nabídku postranního panelu použijeme funkci Akordeon Foundation 5. Akordeony jsou webové prvky, které rozšiřují a sbírají obsah do logických sekcí.
Na našich demo stránkách jsou tyto logické sekce 3 různé skupiny potravin (Hlavní jídla, Přílohy, Dezerty) a každá skupina obsahuje více menších skupin, jako jsou “Drůbež”, “Vepřové”, “Hovězí”, “Vegetariánský”.
Umístíme celý sidebar Accordion do jednoho širokého sloupce se stejnou logikou jako v 5.1 a 5.2 Kroky dříve. Akordeon do něj vkládáme jako neuspořádaný seznam s vhodnými vestavěnými CSS třídami jako je “akordeon” a “navigační navigace”.
Jak Foundation Accordions pracují s JavaScriptem, můžete si přizpůsobit jeho chování pomocí předem připravených JavaScriptových proměnných, pokud chcete. K tomu, podívejte se na “Volitelná konfigurace JavaScriptu” sekce v akordeonových dokumentech. Následující úryvek kódu je umístěn pod oddílem Flex Video uvnitř souboru index.html.
Závěr
Nyní, když jsme připraveni s naším demo serverem, podívejme se, co jiného můžete s Foundation 5. dosáhnout. Prvky, které jsme použili v tomto demu, jsou jen malou sadou vlastností Foundation framework. Existuje mnoho dalších věcí, které můžete využít ve svém návrhu, jako jsou přizpůsobitelné ikony pruhy, Drobečková navigace, Lightbox, Range Sliders, Form Validation a mnoho dalších. Dokumenty jsou velmi dobře napsané a pomáhají vývojářům s mnoha příklady kódu.
Pokud znáte Sass, máte ještě více možností, protože každá část Dokumentů vysvětluje, jak si můžete vytvořit vlastní mixiny a které proměnné Sass můžete použít k přizpůsobení svých stránek. Než začnete navrhovat svou webovou stránku, nezapomeňte zkontrolovat kompatibilitu rámce Foundation, abyste se ujistili, že funguje na všech prohlížečích, které potřebujete vytvořit..
- Zobrazit ukázku
- Stáhněte si zdroj
