Před pár týdny je slavný Základní rámec vydala svou čtvrtou verzi. Pokud jste o Nadaci nikdy neslyšeli, pomůžeme vám pomocí tohoto citlivého rámce.

Vzhledem k tomu, že verze 3 nadace byla postavena od základů pomocí SASS - předprocesoru CSS, který napomáhá při psaní efektivnějších CSS - tato nová verze je také přátelská k mobilu a poskytuje mnoho funkcí ve své síti, t dostat z jiných rámců.

Pojďme se ponořit do Nadace a uvidíme, proč je tak populární ...

Mřížka

Nadace používá 12 stojatých nestálých mříží, které se přizpůsobí obrazovce jakékoli velikosti, pokud jste již použili mřížky, to vše by mělo být velmi známé. Všechny divy v nadaci používají rozměry v rámečku: ohraničovací rámeček tak, aby okraje a polstrování neovlivňovaly šířku a výšku prvku, což nám udělalo trochu jednodušší matematiku. Ale úžasná věc na nadaci sítě spočívá v tom, že ve skutečnosti získáte 2 mřížky, velká mřížka, když je obrazovka větší než šířka 768 pixelů a menší mřížka, kterou můžete ovládat stejně jednoduše. Za tím účelem využívá nadace malá # a velká # třídy, a to takto:

Lorem Ipsum
Lorem Ipsum
Lorem Ipsum

V tomto kódu jsme vytvořili řadu, ve které jsou 3 divy, které mají přesně stejnou šířku, když je prohlížeč širší než 768 pixelů, ale když je menší, jak vidíte v té malé třídě v divs, poslední bude zabírat polovinu obrazovky, zatímco ostatní dva budou zabírat 25%, což vám dává nesmírnou kontrolu nad tím, jak bude vypadat náš web na všech obrazovkách.

Nadace vám také umožňuje kompenzovat sloupec, čímž myslím, že můžete mít řadu se dvěma sloupci, které mají pouze tři sloupce, ale můžete vykompenzovat druhý sloupec, který se vznáší doprava, třída offset nebo třída malého offsetu:

3, offset 6

Blokovat mřížku

Bloková mřížka je jen hezký extra, je to způsob, jak rozdělit obsah seznamu do mřížky, je užitečné, když chcete, aby tato konkrétní část vašeho webu zůstala rovnoměrně rozmístěna bez ohledu na velikost prohlížeč. Tento typ mřížky využívá třídy malých bloků a tříd velkých bloků, pokud nastavíte pouze první, mřížka udrží požadovaný odstup bez ohledu na to, jaký je výřez, ale používáte pouze velké bloky, třída mřížky, když výřez dosáhne bodu zlomu 768 pixelů, budou položky mřížky nad sebou navzájem nad sebou, vždy můžete ovládat pomocí obou těchto tříd, například takto:

Díky tomu budou snímky rovnoměrně rozmístěny bez ohledu na velikost. Pokud je výřez větší než 768 pixelů, zabírají pouze jeden řádek a pokud je menší, budou obsazovat dva řádky se dvěma obrázky.

Hlavní navigace

Nyní, když jsme pokryli mřížku v nadaci a jak vám dává spoustu kontroly ve všech prostředích, promluvíme si o tom, co na našich stránkách téměř vždy použijeme: horní navigační lištu. A samozřejmě tato navigace může být také flexibilní s malou nebo žádnou práci s tímto rámcem. Chcete-li vytvořit jednoduchou navigaci pomocí aplikace Foundation, použijte:

Tento bit HTML vytváří jednoduchý navigační panel, který má název stránky na levé straně a pak vpravo obsahuje čtyři položky nabídky. Mějte také na paměti, že pokud je výřez menší než 768 pixelů, toto menu bude nahrazeno ikonou seznamu, která bude reagovat na toto menu. Pokud chcete, aby tato mřížka měla svou pozici fixní, jakmile posouváte stránku dolů, stačí ji zabalit do třídy div s třídou pevných. Chcete-li do navigace přidat rozbalovací položky, stačí přidat něco podobného do místa, kam chcete rozbalit:

#">  Položka dílčí nabídky 1
Položka dílčí nabídky 1
Položka podřízené nabídky 3

K dispozici je také možnost přidání děliče do položky seznamu přidáním malé šedé svislé čáry. K tomu je třeba umístit položku seznamu s třídou děliče mezi dvě položky seznamu, které chcete rozdělit.

Tlačítka

Žádný rámec by nebyl dokončen bez některých předdefinovaných tlačítek a nadace má ve skutečnosti více než jeden styl tlačítka předem definovaný, má výchozí, který používá modrou barvu a poté přidává úspěšné, výstražné a sekundární styly. Přidáním třídy poloměru udělíte tomuto tlačítku trochu poloměru okrajů a tím, že mu udělíte třídu okruhu , uděláte tlačítko téměř úplně zaoblené. Můžete také přidat třídu zakázáno na tlačítko a existují 4 velikostní třídy, aby bylo tlačítko tak velké, jak to potřebujete.

Výchozí tlačítkoDrobné tlačítkoMalé tlačítkoVelké tlačítkoSekundární tlačítkoTlačítko úspěchuTlačítko upozorněníRadiové tlačítkoKulatý knoflíkTlačítko zakázáno

Chcete-li vytvořit jednoduché rozbalovací tlačítko, musíte přidat pouze rozbalovací třídu po poslední třídě, například:

  h1.subheader 
  h1.  Menší 
  Položka seznamu 
  Položka seznamu 
  Odkaz 1
Odkaz 2

Jak můžete vidět, pokud jde o typografii, Nadace nám poskytuje nějakou základní pomoc a pak další třídy, které uspokojí všechny naše potřeby.

Ostatní komponenty

Pokud tato demonstrace rámce nadace snáší vaši chuť se dozvědět víc a začít se budovat s nadací, měli byste skutečně podívat se na dokumentaci, protože Foundation nabízí také další komponenty CSS, jako například:

• Výstražné boxy
• Panely
• Cenové tabulky
• Progress Bars
• Tabulky
• Miniatury
• Flex Video

A také nějaký pomocný JavaScript, například:

• Vymazání
• Dropdown
• Joyride
• Magellan
• Obíhat
• Odhalit
• Sekce
• Tipy na nástroje

Jak můžete vidět, existuje hodně nadace prozkoumat a důrazně vám doporučuji, abyste se podívali na všechny její vlastnosti CSS a JavaScript.

Závěr

Dostali jsme se v tomto článku dostatečně jasně, abychom zjistili, jak může nadace pomoci při budování rychlejších a citlivějších webových stránek. Díky své síti získáte mnohem větší kontrolu nad strukturou svých webových stránek, než když používáte normální flexibilní síť, a Nadace také poskytuje spoustu pomocníků vytvořit svůj web. Doufám, že tento článek vám dal nátlak, abyste se naučili a využili Nadaci pro svůj další projekt.

Používali jste Nadaci pro projekt? Jaké funkce jste považovali za nejužitečnější? Dejte nám vědět v komentářích.