Podstawa - szybki przewodnik

Co to jest Fundacja?

Foundation to jedna z zaawansowanych platform front-endowych do projektowania pięknych, responsywnych stron internetowych. Działa na wszystkich typach urządzeń i zapewnia wtyczki HTML, CSS i JavaScript.

Fundacja rozpoczęła się jako wewnętrzny przewodnik po stylu, zbudowany przez ZURB w 2008 roku. ZURB to firma zajmująca się projektowaniem produktów z Campbell w Kalifornii. Wydała Foundation 2.0 jako open source w październiku 2011. Najnowsza wersja Foundation to 6.1.1, wydana w grudniu 2015.

Dlaczego warto skorzystać z podkładu?

Zapewnia szybszy rozwój przy użyciu kompilatora Sass, który działa znacznie szybciej niż domyślny kompilator.
Wzbogaca Twoją stronę internetową o tabele cenowe, przełączniki, joyride, suwaki zasięgu, lightbox i wiele innych.
Jest dostarczany z pakietem programistycznym, takim jak Grunt i Libsass, aby przyspieszyć kodowanie i kontrolę.
Foundation for sites udostępnia HTML, CSS i JS do szybkiego tworzenia witryn internetowych.
Platforma poczty e-mail zapewnia responsywne wiadomości e-mail w formacie HTML, które można odczytać na dowolnym urządzeniu.
Foundation for Apps umożliwia tworzenie w pełni responsywnych aplikacji internetowych.

funkcje

Ma potężny system siatki i kilka przydatnych komponentów interfejsu użytkownika i fajne wtyczki JavaScript.
Zapewnia responsywny projekt, który obsługuje wszystkie typy urządzeń.
Jest zoptymalizowany pod kątem urządzeń mobilnych i naprawdę obsługuje pierwsze podejście do urządzeń mobilnych.
Udostępnia szablony HTML, które można dostosowywać i rozszerzać.

Zalety

Łatwo się go nauczyć, gdy opanujesz podstawy HTML i CSS.
Możesz swobodnie korzystać z Foundation, ponieważ jest to oprogramowanie typu open source.
Udostępnia szereg szablonów, które pomogą Ci od razu rozpocząć tworzenie witryny.
Foundation obsługuje preprocesory, takie jak SASS i Compass, co przyspiesza rozwój.

Niedogodności

Ze względu na popularność Twitter Bootstrap wsparcie społeczności dla Twitter Bootstrap jest lepsze niż Foundation.
Nauczenie się i korzystanie z obsługi preprocesora może zająć trochę czasu początkującym.
Brak szerszego wsparcia, takiego jak strony kontroli jakości i fora służące do rozwiązywania problemów.
Fundacja ma mniej tematów w porównaniu do innych.

W tym rozdziale omówimy, jak zainstalować i używać Foundation na stronie internetowej.

Pobierz Fundację

Po otwarciu linku Foundation.zurb.com zobaczysz ekran, jak pokazano poniżej -

Kliknij Download Foundation 6 przycisk, zostaniesz przekierowany na inną stronę.

Tutaj możesz zobaczyć cztery przyciski -

Download Everything - Możesz pobrać tę wersję Foundation, jeśli chcesz mieć wszystko we frameworku, tj. Waniliowe CSS i JS.
Download Essentials - Pobierze prostą wersję, która zawiera siatkę, przyciski, typografię itp.
Custom Download - Spowoduje to pobranie niestandardowej biblioteki dla Foundation, zawiera elementy i zdefiniuje rozmiar kolumn, rozmiar czcionki, kolor itp.
Install via SCSS - Spowoduje to przekierowanie do strony z dokumentacją w celu zainstalowania programu Foundation dla witryn.

Możesz kliknąć Download Everythingprzycisk, aby uzyskać wszystko we frameworku, czyli CSS i JS. Ponieważ pliki składają się ze wszystkich elementów we frameworku, za każdym razem nie ma potrzeby dołączania oddzielnych plików dla poszczególnych funkcji. W momencie pisania tego samouczka została pobrana najnowsza wersja (Foundation 6).

Struktura plików

Po pobraniu programu Foundation rozpakuj plik ZIP, a zobaczysz następującą strukturę plików / katalogów -

Jak widać, są skompilowane CSS i JS (Foundation. *), A także skompilowane i zminimalizowane CSS i JS (Foundation.min. *).

W tym samouczku używamy wersji biblioteki CDN.

Szablon HTML

Podstawowy szablon HTML wykorzystujący Foundation jest pokazany poniżej -

<!DOCTYPE html>
<html>
   <head>
      <title>Foundation Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">

      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>

   </head>

   <body>
      <h1>Hello, world!</h1>
   </body>
</html>

Poniższe sekcje szczegółowo opisują powyższy kod.

Typ dokumentu HTML5

Foundation składa się z pewnych elementów HTML i właściwości CSS, które wymagają użycia typu dokumentu HTML5. Dlatego poniższy kod dla doctype HTML5 powinien być dołączony na początku wszystkich projektów wykorzystujących Foundation.

<!DOCTYPE html>
<html>
   ....
</html>

Mobile First

Pomaga reagować na urządzenia mobilne. Musisz dołączyć rozszerzenieviewport meta tag do elementu <head>, aby zapewnić prawidłowe renderowanie i powiększanie dotykiem na urządzeniach mobilnych.

<meta name = "viewport" content = "width = device-width, initial-scale = 1">

Właściwość width steruje szerokością urządzenia. Ustawienie jej na szerokość urządzenia zapewni, że będzie renderowany na różnych urządzeniach (telefonach komórkowych, komputerach stacjonarnych, tabletach ...).
initial-scale = 1.0 zapewnia, że po załadowaniu strona internetowa zostanie wyrenderowana w skali 1: 1 i żadne powiększanie nie zostanie zastosowane po wyjęciu z pudełka.

Inicjalizacja komponentów

Skrypt jQuery jest wymagany w Foundation dla składników takich jak modały i lista rozwijana.

<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>

Wynik

Wykonajmy następujące kroki, aby zobaczyć, jak działa powyższy kod -

Zapisz powyższy kod html firstexample.html plik.
Otwórz ten plik HTML w przeglądarce, wyjście zostanie wyświetlone, jak pokazano poniżej.

Możesz rozpocząć tworzenie projektu z kilkoma dostępnymi szablonami, które można zainstalować za pomocą Yeti Launch lubFoundation CLI. Możesz zacząć od nowego projektu, korzystając z tych szablonów, używając systemu kompilacji Gulp do przetwarzania Sass, JavaScript, kopiowania plików itp.

Podstawowy szablon

Podstawowy szablon to coś w rodzaju szablonu SASS, który zawiera płaską strukturę katalogów i kompiluje tylko pliki SASS i dobrze jest mieć ten prosty szablon, używając tylko SASS. Możesz użyć podstawowego szablonu, używając Yeti Launch lub używając Foundation CLI, używając następującego polecenia -

$ foundation new --framework sites --template basic

Aby to skonfigurować, najpierw uruchom instalację npm , bower install i użyj polecenia npm start, aby ją uruchomić. Możesz również pobrać pliki szablonów z Github .

Szablon ZURB

Jest to połączenie CSS / SCSS, JavaScript, szablonu Handlebars, struktury znaczników, kompresji obrazu i wykorzystuje przetwarzanie SASS. Możesz użyć szablonu ZURB, używając Yeti Launch lub używając Foundation CLI za pomocą poniższego polecenia -

$ foundation new --framework sites --template zurb

Aby uruchomić ten szablon, wykonaj te same kroki określone w podstawowym szablonie. Możesz również pobrać pliki szablonów z Github .

Kopiowanie zasobów

Możesz skopiować zawartość z folderu src / asset za pomocą Gulp, w którym zasoby będą folderem twojego projektu. Ważną rzeczą jest to, że pliki SASS, pliki JavaScript i obrazy nie będą objęte tym procesem kopiowania zasobów, ponieważ będą miały własny proces kopiowania zawartości.

Kompilacja stron

Możesz tworzyć strony HTML w trzech folderach, a mianowicie stronach , układach i podrzędnych, które znajdują się w katalogu src / . Możesz użyć kompilatora plików płaskich Panini , który tworzy układy stron przy użyciu szablonów, stron, częściowych HTML. Ten proces można wykonać za pomocą języka szablonów Handlebars .

Kompilacja SASS

Możesz skompilować SASS do CSS za pomocą Libsass, a główny plik SASS będzie przechowywany w src / asset / scss / app.scss, a także nowo utworzone części SASS będą przechowywane w tym folderze. Wynik CSS będzie podobny do zwykłego CSS, który jest w stylu zagnieżdżonym. Możesz skompresować CSS za pomocą clean-css i usunąć nieużywany CSS z arkusza stylów za pomocą UnCSS .

Kompilacja JavaScript

Pliki JavaScript będą przechowywane w folderze src / asset / js wraz z Foundation, a wszystkie zależności są powiązane razem w pliku app.js. Pliki zostaną powiązane, jak określono w poniższej kolejności -

Zależności Fundacji.
Pliki będą przechowywane w folderze src / asset / js .
Pliki te są powiązane w jeden plik o nazwie app.js .

Kompresja obrazu

Domyślnie wszystkie obrazy będą przechowywane w folderze asset / img w folderze dist . Możesz kompresować obrazy podczas budowania do produkcji za pomocą gulp-imagemin, który obsługuje pliki JPEG, PNG, SVG i GIF.

BrowserSync

Możesz utworzyć serwer BrowserSync , który jest zsynchronizowanym testowaniem przeglądarki dostępnym pod adresemhttp://localhost:8000i zobaczyć skompilowane szablony przy użyciu tego adresu URL. Gdy serwer jest uruchomiony, strona odświeża się automatycznie po zapisaniu pliku, a zmiany wprowadzone na stronie można zobaczyć w czasie rzeczywistym podczas pracy.

Opis

Zawiera elementy Foundation do płynnej pracy z aplikacjami internetowymi. W poniższej tabeli wymieniono niektóre komponenty fundamentu -

Sr.No.	Opis podzespołu
1	Akordeon Harmonijki zawierają pionowe zakładki, które są używane na stronach internetowych do rozwijania i zwijania dużej ilości danych.
2	Menu akordeonowe Wyświetla rozwijane menu z efektami akordeonu.
3	Odznaka Plakietki są podobne do etykiet, które służą do wyróżniania informacji, takich jak ważne uwagi i wiadomości.
4	Bułka tarta Określa bieżącą lokalizację witryny w hierarchii nawigacyjnej.
5	guziki Fundacja obsługuje standardowe przyciski o różnych stylach.
6	Zawołać Callout to element, za pomocą którego można umieścić zawartość wewnątrz.
7	Przycisk Zamknij Służy do odrzucania pola alertu.
8	Drilldown Menu Menu rozwijania zmienia zagnieżdżone listy w menu rozwijania pionowego.
9	Menu rozwijane Menu rozwijane służy do wyświetlania linków w formacie listy.
10	Okienko rozwijane Okienko rozwijane wyświetla zawartość po kliknięciu przycisku.
11	Flex Video Służy do tworzenia obiektów wideo na stronach internetowych.
12	Klasy pływające Służy do dodawania klas narzędzi do elementów HTML.
13	Formularze Służy do tworzenia układu formularza do zbierania danych wejściowych użytkownika.
14	Etykieta Etykiety to style wbudowane, które definiują etykietę elementu wejściowego.
15	Obiekt multimedialny Służy do dodawania obiektów multimedialnych, takich jak obrazy, wideo, komentarze na blogu itp., Które można umieścić po lewej lub prawej stronie bloku treści.
16	Menu Zapewnia dostęp do różnych trybów w serwisie.
17	Paginacja Jest to rodzaj nawigacji, który dzieli zawartość na szereg powiązanych stron.
18	Suwak Określa zakres wartości, przeciągając uchwyt.
19	Przełącznik Służy do przełączania między stanem włączenia i wyłączenia.
20	Stół Przedstawia dane w formacie wierszy i kolumn.
21	Tabs Jest to karta oparta na nawigacji, która wyświetla zawartość w różnych panelach bez opuszczania strony.
22	Miniaturka Stylizuje obrazy w kształcie miniatury.
23	Pasek tytułu Służy do wyświetlania bieżącego ekranu używanego przez użytkownika z innymi elementami menu.
24	Etykietka Jest to małe wyskakujące okienko, które opisuje informacje po najechaniu myszą na łącze.
25	Górny pasek Służy do tworzenia nagłówka nawigacji w serwisie.
26	Orbita Jest to łatwy i potężny suwak, który przesuwa elementy za pomocą klasy orbit .

W tym rozdziale zajmiemy się stylami globalnymi . Globalna struktura CSS Foundation zawiera przydatne resetowania, które zapewniają spójność stylów we wszystkich przeglądarkach.

Rozmiar czcionki

Rozmiar czcionki arkusza stylów przeglądarki jest domyślnie ustawiony na 100%. Domyślny rozmiar czcionki to 16 pikseli. W zależności od rozmiaru czcionki obliczany jest rozmiar siatki. Aby mieć inny podstawowy rozmiar czcionki i niezmienione punkty przerwania siatki, ustaw $ rem-base na $ global-font-size , który musi być wyrażony w pikselach.

Zabarwienie

Elementy interaktywne, takie jak linki i przyciski, używają domyślnego odcienia niebieskiego, który pochodzi ze zmiennej SASS $ primary-color . Komponenty mogą również mieć kolory, takie jak: drugorzędny, alert, sukces i ostrzeżenie . Więcej informacji znajdziesz tutaj .

SASS Reference

Zmienne

W poniższej tabeli wymieniono zmienne SASS, które są używane do dostosowywania domyślnych stylów komponentów w projekcie _settings.scss .

Sr.No.	Nazwa i opis	Rodzaj	Domyślna wartość
1	$global-width Reprezentuje globalną szerokość witryny. Służy do określania szerokości wierszy siatki.	Numer	rem-calc (1200)
2	$global-font-size Reprezentuje rozmiar czcionki zastosowany do <html> i <body> . Domyślnie jest ustawiony na 100%, a wartość ustawień przeglądarki użytkownika zostanie odziedziczona.	Numer	100%
3	$global-lineheight Reprezentuje wszystkie typy domyślnej wysokości linii. $ global-lineheight to 24px, a $ global-font-size ustawione na 16px.	Numer	1.5
4	$primary-color Nadaje kolor interaktywnym komponentom, takim jak łącza i przyciski.	Kolor	# 2199e8
5	$secondary-color Jest używany z komponentami obsługującymi klasę .secondary .	Kolor	# 777
6	$success-color Reprezentuje pozytywny status lub akcję, gdy jest używany z klasą .success .	Kolor	# 3adb76
7	$warning-color W przypadku użycia z klasą .warning reprezentuje ostrzeżenie lub działanie .	Kolor	# ffae00
8	$alert-color Reprezentuje negatywny status lub akcję, gdy jest używany z klasą .alert .	Kolor	# ec5840
9	$light-gray Jest używany do jasnoszarych elementów interfejsu użytkownika.	Kolor	# e6e6e6
10	$medium-gray Jest używany do elementów interfejsu użytkownika w kolorze szarym.	Kolor	#cacaca
11	$dark-gray Jest używany do ciemnoszarych elementów interfejsu użytkownika.	Kolor	# 8a8a8a
12	$black Jest używany do czarnych elementów interfejsu użytkownika.	Kolor	# 0a0a0a
13	$white Jest używany do białych elementów interfejsu użytkownika.	Kolor	#fefefe
14	$body-background Reprezentuje kolor tła ciała.	Kolor	$ biały
15	$body-font-color Reprezentuje kolor tekstu w treści.	Kolor	$ czarny
16	$body-font-family Reprezentuje listę czcionek ciała.	Lista	„Helvetica Neue”, Helvetica, Roboto, Arial, sans-serif
17	$body-antialiased Typ antyaliasingu jest włączany przez ustawienie tego atrybutu na wartość true przy użyciu właściwości CSS -webkit-font-smoothing i -moz-osx-font-smoothing .	Boolean	prawdziwe
18	$global-margin Reprezentuje globalną wartość marży na składnikach.	Numer	1rem
19	$global-padding Reprezentuje globalną wartość wypełnienia komponentów.	Numer	1rem
20	$global-margin Reprezentuje globalną wartość marży między składnikami.	Numer	1rem
21	$global-weight-normal Reprezentuje globalną grubość czcionki dla normalnego typu.	Słowo kluczowe lub liczba	normalna
22	$global-weight-bold Reprezentuje globalną grubość czcionki dla czcionki pogrubionej.	Słowo kluczowe lub liczba	pogrubienie
23	$global-radius Reprezentuje globalną wartość wszystkich elementów, które mają promień granicy.	Numer	0
24	$global-text-direction Ustawia kierunek tekstu CSS na ltr lub rtl		ltr

SASS pomaga uczynić kod bardziej elastycznym i konfigurowalnym w Foundation.

Zgodność

Aby zainstalować wersję opartą na SASS dla Foundation, Ruby powinien być zainstalowany w systemie Windows. Fundację można skompilować za pomocą Ruby SASS i libsass. Polecamynode-sass 3.4.2+ wersja do kompilacji SASS.

Wymagany Autoprefixer

Autoprefixer obsługuje pliki SASS. gulp-autoprefixer służy do budowania procesu. Poniższe ustawienie autoprefiksera służy do uzyskania właściwej obsługi przeglądarki.

autoprefixer ({
   browsers: ['last 2 versions', 'ie >= 9', 'and_chr >= 2.3']
});

Ładowanie Framework

Możemy zainstalować pliki frameworka za pomocą NPM. Korzystając z interfejsu wiersza poleceń (CLI), możemy skompilować pliki Sass. Poniżej znajduje się polecenie załadowania struktury -

npm install foundation-sites --save

Po uruchomieniu powyższego kodu wiersza poleceń otrzymasz następujące wiersze -

Kompilacja ręczna

Pliki Framework można dodać jako ścieżkę importu w zależności od procesu budowania, ale ścieżka będzie taka sama, jak folder_pakietów / witryny-fundacji / scss . Instrukcja @import znajduje się na początku pliku Foundation-sites.scss . Następny wiersz w podanym kodzie jest wyjaśniony wAdjusting CSS Output Sekcja.

@import 'foundation';
@include foundation-everything;

Korzystanie ze skompilowanego CSS

Możesz dołączyć wstępnie skompilowane pliki CSS. Istnieją dwa typy plików CSS, tj. Zminimalizowane i niezminifikowane. Wersja zminimalizowana jest używana do produkcji, a wersja niezminifikowana służy do bezpośredniej edycji CSS frameworka.

<link rel = "stylesheet" href = "node_modules/foundation-sites/dist/foundation-sites.css">
<link rel = "stylesheet" href = "node_modules/foundation-sites/dist/foundation-sites.min.css">

Dostosowywanie wyjścia CSS

W przypadku różnych komponentów dane wyjściowe Foundation składają się z wielu klas. Służy do kontrolowania wyników CSS frameworka. Dodaj następujący pojedynczy wiersz kodu, aby jednocześnie uwzględnić wszystkie składniki.

@include foundation-everything;

Poniżej znajduje się lista komponentów zaimportowanych po zapisaniu powyższego kodu w pliku scss. Komponenty, które nie są konieczne, można skomentować. Możesz wyświetlić poniższe linie kodu w pliku Your_folder_name / node_modules / Foundation-sites / scss / Foundation.scss .

@import 'foundation';

@import 'grid/grid';
@import 'typography/typography';
@import 'forms/forms';
@import 'components/visibility';
@import 'components/float';
@import 'components/button';
@import 'components/button-group';
@import 'components/accordion-menu';
@import 'components/accordion';
@import 'components/badge';
@import 'components/breadcrumbs';
@import 'components/callout';
@import 'components/close-button';
@import 'components/drilldown';
...
...
...
//so on....

Plik ustawień

Plik ustawień jest zawarty w całym projekcie fundamentu, tj . _Settings.scss . Jeśli używasz Yeti Launch lub CLI do tworzenia projektu Foundation for Sites, możesz znaleźć plik ustawień w src / asset / scss /.

Zainstalowaliśmy Foundation przy użyciu npm, dlatego możesz znaleźć plik ustawień zawarty w twoim_folderze / node_modules / Foundation-sites / scss / settings / _settings.scss . Możesz przenieść to do własnych plików Sass do pracy.

Możesz napisać własny CSS, jeśli nie jesteś w stanie dostosować za pomocą zmiennych. Poniżej znajduje się zestaw zmiennych, które zmieniają domyślny styl przycisków.

$button-padding: 0.85em 1em;
$button-margin: 0 $global-margin $global-margin 0;
$button-fill: solid;
$button-background: $primary-color;
$button-background-hover: scale-color($button-background, $lightness: -15%);
$button-color: #fff;
$button-color-alt: #000;
$button-radius: $global-radius;

$button-sizes: (
   tiny: 0.6rem,
   small: 0.75rem,
   default: 0.9rem,
   large: 1.25rem,
);
$button-opacity-disabled: 0.25;

W tym rozdziale zajmiemy się JavaScriptem . Konfiguracja JavaScript w Foundation jest łatwa; Jedyne czego potrzebujesz to jQuery.

Instalacja JavaScript

Możesz użyć pobierania ZIP, menedżera pakietów lub CDN, aby pobrać plik JavaScript Foundation. W swoim kodzie możesz podać linki do jQuery i Foundation jako tagi <script>, umieszczone przed zamykającym tagiem <body> i sprawdzić, czy Foundation jest ładowana po jQuery. Aby uzyskać więcej informacji, kliknij tutaj .

Struktura plików

Podczas instalowania Foundation za pomocą wiersza poleceń wtyczki Foundation są pobierane jako osobne pliki, takie jak Foundation.tabs.js , Foundation.dropdownMenu.js , Foundation.slider.js i tak dalej. Wszystkie te pliki są łączone w plik Foundation.js , który udostępnia wszystkie wtyczki jednocześnie. Jeśli chcesz użyć jakiejś wtyczki, najpierw załaduj plik Foundation.core.js .

Na przykład -

<script src = "js/jquery.min.js"></script>
<script src = "js/foundation.core.js"></script>
<script src = "js/foundation.tabs.js"></script>

Niektóre wtyczki mogą wymagać określonych bibliotek narzędziowych, które są dostarczane z instalacją Foundation. Możesz szczegółowo przestudiować określone wymagania dotyczące wtyczek w następnym rozdziale Narzędzia JavaScript .

Ładowanie pojedynczych plików powoduje obciążenie sieci, szczególnie dla użytkowników mobilnych. Aby przyspieszyć ładowanie strony, zaleca się użycie pomruku lub łyka .

Inicjowanie

Funkcja Foundation () służy do jednoczesnej inicjalizacji całej wtyczki Foundation.

Na przykład -

(document).foundation();

Korzystanie z wtyczek

Używając atrybutów danych, wtyczki są łączone z elementami HTML, ponieważ pasują do nazwy wtyczki. Pojedynczy element HTML może mieć tylko jedną wtyczkę naraz, chociaż większość wtyczek może być zagnieżdżona w innych. Na przykład łącze do podpowiedzi jest tworzone przez dodanie podpowiedzi danych . Aby uzyskać więcej informacji, kliknij tutaj .

Konfigurowanie wtyczek

Wtyczki można dostosować za pomocą ustawień konfiguracyjnych. Na przykład, możesz ustawić prędkość ślizgów akordeonu w górę iw dół. Ustawienia wtyczki można zmieniać globalnie za pomocą wtyczkiDEFAULTSwłasność. Aby uzyskać więcej informacji, kliknij tutaj .

Dodawanie wtyczek po wczytaniu strony

Kiedy nowy HTML zostanie dodany do DOM, żadna z wtyczek w tych elementach nie zostanie domyślnie zainicjowana. Możesz sprawdzić dostępność nowych wtyczek, ponownie wywołując funkcję .foundation () .

Na przykład -

$.ajax('assets/partials/kitten-carousel.html', function(data) {
   $('#kitten-carousel'</span>).html(data).foundation();
});

Wykorzystanie programowe

W JavaScript wtyczki można tworzyć programowo, a każda wtyczka jest globalną klasą obiektu Foundation , z konstruktorem, który przyjmuje dwa parametry, takie jak element i obiekt.

var $accordion = new Foundation.Accordion($('#accordion'), {
   slideSpeed: 600, multiExpand: true
});

Większość wtyczek jest wyposażona w publiczny interfejs API, który umożliwia manipulowanie nim za pomocą JavaScript. Możesz przejrzeć dokumentację wtyczki, aby zapoznać się z dostępnymi funkcjami i metodami, które można łatwo wywołać.

Na przykład -

$('.tooltip').foundation('destroy');
// this will destroy all Tooltips on the page.

$('#reveal').foundation('open');
// this will open a Reveal modal with id `reveal`.

$('[data-tabs]').eq(0).foundation('selectTab', $('#example'));
// this will change the first Tabs on the page to whatever panel you choose.

Możesz wybrać dowolny selektor jQuery, a jeśli selektor zawiera wiele wtyczek, wszystkie będą miały identyczną wybraną metodę.
Argumenty można przekazywać tak samo, jak przekazywanie argumentów do JavaScript.
Metody poprzedzone podkreśleniem (_) są traktowane jako część wewnętrznego API, co oznacza, że bez ostrzeżenia mogą się zepsuć, zmienić, a nawet zniknąć.

Wydarzenia

Za każdym razem, gdy kończy się określona funkcja, DOM wyzwala zdarzenie. Na przykład za każdym razem, gdy zmienia się zakładka, można go odsłuchać i utworzyć odpowiedź zwrotną. Każda wtyczka może wywołać listę zdarzeń, które zostaną udokumentowane w dokumentacji wtyczki. W Foundation 6 wtyczki wywołań zwrotnych są usuwane i muszą być traktowane jako nasłuchiwanie zdarzeń.

Na przykład -

$('[data-tabs]').on('change.zf.tabs', function() {
   console.log('Tabs are changed!');
});

Foundation zawiera narzędzia JavaScript używane do dodawania typowych funkcji. Jest bardzo pomocny i łatwy w użyciu. Tę bibliotekę narzędzi JavaScript można znaleźć w folderze Your_folder_name / node_modules / Foundation-sites / js

Pudełko

Biblioteka Foundation.Box składa się z kilku metod.
Plik js/foundation.util.box.js to nazwa pliku skryptu, którą można dołączyć podczas pisania kodu.
Obie metody mogą być przekazywane zarówno do obiektów jQuery, jak i zwykłych elementów JavaScript.

var dims = Foundation.Box.GetDimensions(element);

Zwrócony obiekt określa wymiar elementu jako -

{
   height: 54,
   width: 521,
   offset: {
      left: 198,
      top: 1047
   },

   parentDims: {
      height: ...    //The same format is share for parentDims and windowDims as the element dimensions.
   },

   windowDims: {
      height: ...
   }
}

Funkcja ImNotTouchingYou jest dołączona.
Na podstawie przekazanego elementu zwracana jest wartość logiczna, która jest albo konfliktem z krawędzią okna, albo elementem opcjonalnym lub nadrzędnym.
Dwie opcje określone w linii podanej poniżej, tj. LeftAndRightOnly, topAndBottomOnly służą do identyfikacji kolizji tylko na jednej osi.

var clear = Foundation.Box.ImNotTouchingYou (
   element [, parent, leftAndRightOnly, topAndBottomOnly]);

Klawiatura

W Foundation.Keyboard istnieje wiele metod , które ułatwiają interakcję z klawiaturą.
Plik js/foundation.util.keyboard.js to nazwa pliku skryptu, którą można dołączyć podczas pisania kodu.
Obiekt Foundation.Keyboard.keys zawiera pary klucz / wartość, które klucze są częściej używane we frameworku.
Za każdym razem, gdy klawisz jest naciśnięty, wywoływana jest funkcja Foundation.Keyboard.parseKey w celu pobrania łańcucha. Pomaga to w zarządzaniu własnymi wejściami z klawiatury.

Poniższy kod służy do znalezienia wszystkich elementów, które można ustawić w danym elemencie $ . Dlatego nie musisz samodzielnie pisać żadnej funkcji i selektora.

var focusable = Foundation.Keyboard.findFocusable($('#content'));

Funkcja handleKey jest główną funkcją tej biblioteki.
Ta metoda jest używana do obsługi zdarzenia klawiatury; można go wywołać za każdym razem, gdy jakakolwiek wtyczka zostanie zarejestrowana w narzędziu.

Foundation.Keyboard.register('pluginName', {
   'TAB': 'next'
});

...//in event callback
Foundation.Keyboard.handleKey(event, 'pluginName', {
   next: function(){
      //do stuff
   }
});

Funkcję Foundation.Keyboard.register można wywołać, gdy chcesz użyć własnych powiązań klawiszy.

MediaQuery

Biblioteka MediaQuery jest podstawą wszystkich responsywnych technik CSS.
Plik js/foundation.util.mediaQuery.js to nazwa pliku skryptu, którą można dołączyć podczas pisania kodu.
Foundation.MediaQuery.atLeast ( „duże”) służy do sprawdzenia, czy ekran jest co najmniej tak szeroka jak przerwania.
Foundation.MediaQuery.get ( „Medium”) dostaje zapytania medialnego punktu przerwania.
W Foundation.MediaQuery.queries są tablicą z zapytaniami mediów, Fundacja używa do pułapki.
Foundation.MediaQuery.current jest ciągiem bieżącego rozmiaru punktu przerwania.

Foundation.MediaQuery.get('medium');
Foundation.MediaQuery.atLeast('large');
Foundation.MediaQuery.queries;
Foundation.MediaQuery.current;

Poniższy kod rozgłasza zmianę zapytania o media w oknie.

$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize){});

Ruch i ruch

JavaScript Foundation.Motion jest podobna do biblioteki Motion UI, która jest zawarta w Foundation 6. Służy do tworzenia niestandardowych przejść i animacji CSS.
Plik js/foundation.util.motion.js to nazwa pliku skryptu, którą można dołączyć podczas pisania kodu.
Foundation.Move służy do tworzenia prostych i eleganckich animacji wspieranych przez CSS3.
requestAnimationFrame();nakazuje przeglądarce wykonanie animacji; żąda wywołania funkcji animacji przed wykonaniem przez przeglądarkę kolejnego malowania.

Foundation.Move(durationInMS, $element, function() {
   //animation logic
});

Gdy animacja jest zakończona, finished.zf.animate jest zwolniony.

Timer i załadowano obrazy

Orbit używa zarówno licznika funkcji, jak i załadowanego obrazu. Plikjs/foundation.util.timerAndImageLoader.js to nazwa pliku skryptu, którą można dołączyć podczas pisania kodu.

var timer = new Foundation.Timer($element, {duration: ms, infinite: bool}, callback);

Metoda z załadowanym obrazem uruchamia funkcję zwrotną w kolekcji jQuery, gdy obrazy są całkowicie załadowane.

Foundation.onImagesLoaded($images, callback);

Dotknąć

Metody służą do dodawania zdarzeń pseudo-przeciągania i przesuwania do elementów.
Plik js/foundation.util.touch.js to nazwa pliku skryptu, którą można dołączyć podczas pisania kodu.
Metoda addTouch służy do wiązania elementów ze zdarzeniami dotykowymi we wtyczce Slider na urządzenia mobilne.
Metoda spotSwipe wiąże elementy, aby przesuwać zdarzenia we wtyczce Orbit dla urządzeń mobilnych.

$('selector').addTouch().on('mousemove', handleDrag);

$('selector').spotSwipe().on('swipeleft', handleLeftSwipe);

Wyzwalacze

Wyzwala określone zdarzenie dla wybranych elementów.
Plik js/foundation.util.triggers.js to nazwa pliku skryptu, którą można dołączyć podczas pisania kodu.
Wyzwalacze są używane w wielu wtyczkach Foundation.

$('selector').on('open.zf.trigger', handleOpen);
$('selector').on('close.zf.trigger', handleClose);
$('selector').on('toggle.zf.trigger', handleToggle);

Poniższe dwie metody są używane w tej bibliotece, tj. Zmiana rozmiaru i przewijanie.

Metoda resize () wyzwala zdarzenie resize, gdy wystąpi zdarzenie resize.
Metoda scroll () wyzwala zdarzenie scroll, gdy wystąpi zdarzenie scroll.

$('#someId').on('scrollme.zf.trigger', handleScroll);
$('#someId').on('resizeme.zf.trigger', handleResize);

Różne

Foundation zawiera kilka funkcji z podstawowej biblioteki, które są używane w wielu miejscach.
Plik js/foundation.core.js to nazwa pliku skryptu, którą można dołączyć podczas pisania kodu.
Foundation.GetYoDigits ([liczba, przestrzeń nazw]) zwraca losowy identyfikator UID o podstawie 36 z przestrzenią nazw. Domyślnie zwraca ciąg o długości 6 znaków.
Foundation.getFnName (fn) zwraca nazwę funkcji JavaScript.
Foundation.transitionend występuje po zakończeniu przejścia CSS.

Zapytania o media to moduł CSS3, który zawiera funkcje multimedialne, takie jak szerokość, wysokość, kolor i wyświetla zawartość zgodnie z określoną rozdzielczością ekranu.

Foundation używa następujących zapytań o media do tworzenia zakresów podziału -

Small - Używany na dowolnym ekranie.
Medium - Jest używany do ekranów o rozdzielczości 640 pikseli i szerszych.
Large - Jest używany do ekranów o rozdzielczości 1024 pikseli i szerszych.

Możesz zmienić rozmiar ekranu za pomocą klas punktów przerwania . Na przykład, możesz użyć .small-6 class dla małych ekranów i .medium-4 class dla średnich ekranów, jak pokazano w poniższym fragmencie kodu -

<div class = "row">
   <div class = "small-6 medium-4 columns"></div>
   <div class = "small-6 medium-8 columns"></div>
</div>

Zmiana punktów przerwania

Możesz zmienić punkty przerwania, jeśli Twoja aplikacja korzysta z wersji Foundation SASS. Możesz umieścić nazwę punktów przerwania pod zmienną $ breakpoints w pliku ustawień, jak pokazano poniżej -

$breakpoints: (
   small: 0px,
   medium: 640px,
   large: 1024px,
   xlarge: 1200px,
   xxlarge: 1440px,
);

Możesz zmienić klasy punktów przerwania w pliku ustawień, modyfikując zmienną $ breakpoint-classes . Jeśli chcesz użyć klasy .large w CSS, dodaj ją na końcu listy, jak pokazano poniżej -

$breakpoints-classes: (small medium large);

Załóżmy, że chcesz użyć klasy .xlarge w CSS, a następnie dodaj tę klasę na końcu listy, jak pokazano poniżej -

$breakpoints-classes: (small medium large xlarge);

SASS

Mixin punktów przerwania

Zapytania o media można pisać, używając mixin breakpoint () wraz z @include .
Użyj nieaktywnych lub tylko słów kluczowych wraz z wartością punktu przerwania, aby zmienić zachowanie zapytania o media, jak pokazano w następującym formacie kodu -

.class_name {
   // code for medium screens and smaller
   @include breakpoint(medium down) { }

   // code for medium screens only
   @include breakpoint(medium only) { }
}

Możesz użyć trzech zapytań o media: pionowej , poziomej i siatkówkowej, aby określić orientację urządzenia lub gęstość pikseli. Nie są to zapytania o media oparte na szerokości.

Funkcja punktu przerwania

Możesz użyć funkcji breakpoint () mixin, używając funkcji wewnętrznej.
Przerwania () funkcjonalność może być stosowany bezpośrednio do pisania własnych zapytań o media -

@media screen and #{breakpoint(medium)} {
   // code for medium screens and up styles
}

JavaScript

Praca z zapytaniami o media

JavaScript Foundation zapewnia funkcję MediaQuery.current w celu uzyskania dostępu do bieżącej nazwy punktu przerwania w obiekcie Foundation.MediaQuery, jak określono poniżej -

Foundation.MediaQuery.current

Funkcja MediaQuery.current wyświetla małe , średnie i duże jako bieżące nazwy punktów przerwania.
Możesz uzyskać zapytanie o media dotyczące punktu przerwania za pomocą funkcji MediaQuery.get, jak pokazano poniżej -

Foundation.MediaQuery.get('small')

Sass Reference

Zmienne

W poniższej tabeli wymieniono zmienne SASS, których można użyć do dostosowania domyślnych stylów komponentu -

Sr.No.	Nazwa i opis	Rodzaj	Domyślna wartość
1	$breakpoints Jest to nazwa punktu przerwania, której można używać do pisania zapytań o media za pomocą mixin breakpoint () .	Mapa	mały: 0px średni: 640px duży: 1024px xlarge: 1200px xxlarge: 1440px
2	$breakpoint-classes Możesz zmienić dane wyjściowe klasy CSS, modyfikując zmienną $ breakpoint-classes .	Lista	mały średni duży

Mieszanki

Mixins tworzy grupę stylów, aby zbudować strukturę klas CSS dla składników Foundation.

BREAKPOINT

Wykorzystuje mixin breakpoint () do tworzenia zapytań o media i obejmuje następujące działania -

Jeśli przekazano ciąg, to mixin przeszukuje ciąg w mapie $ przerwania i tworzy zapytanie o media.
Jeśli używasz wartości pikseli, przekonwertuj ją na wartość em za pomocą $ rem-base .
Jeśli przekazana jest wartość rem, zmienia swoją jednostkę na em.
Jeśli używasz wartości em, możesz jej użyć tak, jak jest.

W poniższej tabeli określono parametr używany przez punkt przerwania -

Sr.No.	Nazwa i opis	Rodzaj	Domyślna wartość
1	$value Przetwarza wartości przy użyciu nazwy punktu przerwania, wartości px, rem lub em.	słowo kluczowe lub liczba	Żaden

Funkcje

BREAKPOINT

Wykorzystuje mixin breakpoint () do tworzenia zapytań o media z dopasowaną wartością wejściową.

W poniższej tabeli określono możliwą wartość wejściową używaną przez punkt przerwania -

Sr.No.	Nazwa i opis	Rodzaj	Domyślna wartość
1	$val Przetwarza wartości przy użyciu nazwy punktu przerwania, wartości px, rem lub em.	słowo kluczowe lub liczba	mały

Dokumentacja JavaScript

Funkcje

Istnieją dwa rodzaje funkcji -

.atLeast- Sprawdza ekran. Musi być szeroki co najmniej jako punkt przerwania.
.get - Służy do pobierania zapytania o media punktu przerwania.

Poniższa tabela określa parametr używany przez powyższe funkcje -

Sr.No.	Nazwa i opis	Rodzaj
1	size Sprawdza i pobiera nazwę punktu przerwania odpowiednio dla określonych funkcji.	Strunowy

Opis

System siatki fundamentowej skaluje do 12 kolumn na stronie. Systemy siatki służą do tworzenia układów stron za pomocą szeregu wierszy i kolumn, w których znajdują się treści.

Opcje siatki

Poniższa tabela zawiera krótkie omówienie sposobu działania systemu siatki Foundation na wielu urządzeniach.

	Małe urządzenia Telefony (<640 pikseli)	Średnie urządzenia Tablety (> = 640 pikseli)	Duże urządzenia Laptopy i komputery stacjonarne (> = 1200 pikseli)
Zachowanie siatki	Poziomy przez cały czas	Początek zwinięty, poziomo nad punktami przerwania	Początek zwinięty, poziomo nad punktami przerwania
Prefiks klasy	.mały-*	.średni-*	.duży-*
Liczba kolumn	12	12	12
Gniazdo	tak	tak	tak
Przesunięcia	tak	tak	tak
Kolejność kolumn	tak	tak	tak

Podstawowa struktura siatki fundamentowej

Poniżej przedstawiono podstawową strukturę siatki fundamentowej -

<div class = "row">
   <div class = "small-*"></div>
   <div class = "medium-*"></div>
   <div class = "large-*"></div>
</div>

<div class = "row">
   ...
</div>

Najpierw utwórz klasę wierszy, aby utworzyć poziome grupy kolumn.
Treść powinna być umieszczona w kolumnach, a tylko kolumny mogą być bezpośrednimi elementami podrzędnymi wierszy.
Kolumny siatki tworzy się, określając liczbę dwunastu dostępnych kolumn, które chcesz rozciągnąć. Na przykład dla czterech równych kolumn użylibyśmy .large-3

Poniżej przedstawiono trzy klasy używane w systemie siatki Fundacji -

Sr.No.	Podstawowe klasy i opis siatki
1	Duży W wielkokwiatowych * Klasy służy do dużych urządzeń.
2	Średni Średnio- * klasa służy do urządzeń średnich.
3	Mały klasa small- * jest używana dla małych urządzeń.

Advanced Grid

Poniżej przedstawiono zaawansowane formaty siatki używane w programie Foundation.

Sr.No.	Zaawansowane siatki i opis
1	Połączona kolumna / wiersz Do kolumn i wierszy klasy są używane na tym samym elemencie, aby uzyskać pełną szerokość kolumny do użycia jako pojemnik.
2	Zagnieżdżanie Możemy zagnieżdżać kolumny siatki wewnątrz innych kolumn.
3	Przesunięcia Używając klasy large-offset- * lub small-offset- * , możesz przesuwać kolumny w prawo.
4	Niekompletne wiersze Fundament automatycznie przesuwa ostatni element w prawo, gdy wiersze nie zawierają kolumn do 12.
5	Zwiń / Rozwiń wiersze Przy użyciu rozmiaru zapytania o media klasy collapse i uncollapse są dołączane do elementu row, aby pokazać dopełnienia.
6	Wyśrodkowane kolumny Włączając klasę do małej wyśrodkowanej kolumny, możesz ustawić kolumnę pośrodku.
7	Zamawianie źródła Klasa porządkowania źródła służy do przesuwania kolumn między punktem przerwania.
8	Siatki blokowe Siatka bloków służy do podziału zawartości.

Budowanie semantycznie

Używając zestawu mikserów SASS, generowany jest CSS siatki, który jest używany do budowania własnej siatki semantycznej. Aby uzyskać więcej informacji, kliknij tutaj

SASS Reference

Poniżej przedstawiono odniesienie SASS dla siatki używanej w programie Foundation.

Sr.No.	Podstawowe siatki i opis
1	Zmienne Używając zmiennych sass możemy modyfikować domyślne style tego komponentu.
2	Mieszanki Końcowe wyjście CSS jest budowane przy użyciu miksera.

Siatka zależy od właściwości wyświetlania flex . Składa się z wielu funkcji dostępnych w module flexbox, takich jak automatyczne układanie w stos, porządkowanie źródeł, wyrównanie w pionie i wyrównanie w poziomie.

Wsparcie przeglądarki

Siatka elastyczna jest obsługiwana w przeglądarkach Chrome, Firefox, Internet Explorer 10+, Safari 6+, Android 4+ i iOS 7+.

W poniższej tabeli opisano funkcje Flex Grid wraz z opisem.

Sr.No.	Funkcje i opis
1	Importowanie Zawiera mikser eksportu dla siatki elastycznej, aby użyć domyślnego CSS.
2	Podstawy Struktura siatki Flex jest podobna do struktury siatki pływającej.
3	Zaawansowane rozmiary Jeśli klasa rozmiaru nie jest zawarta w kolumnie, rozwija się i wypełnia pozostałe miejsce w kolumnie.
4	Responsive Adjustments Jeśli nie podano jawnego rozmiaru kolumny w siatce elastycznej, rozmiar kolumn zostanie automatycznie dopasowany
5	Wyrównanie kolumn Kolumny siatki elastycznej można wyrównać do osi poziomej lub pionowej w wierszu nadrzędnym.
6	Zamawianie źródła Porządkowanie źródeł pomaga zmienić układ kolumny w różnych rozmiarach ekranów.
7	Sass Reference SASS (Syntactically Awesome Stylesheet) to preprocesor CSS, który pomaga zmniejszyć liczbę powtórzeń w CSS i oszczędza czas.

W tym rozdziale będziemy się uczyć Forms. Foundation zapewnia potężny, łatwy i wszechstronny system układu dla Formularzy , który łączy style formularzy i obsługę siatki.

W poniższej tabeli wymieniono elementy formularza używane w programie Foundation.

Sr.No.	Element formularza i opis
1	Podstawy formularzy Tworzenie formularzy jest łatwe i bardzo elastyczne, które są zbudowane z połączenia standardowych elementów formy i wydajnego systemu rastrowego.
2	Tekst pomocy Służy do powiadamiania użytkownika o przeznaczeniu elementu i zwykle znajduje się pod polem.
3	Pozycjonowanie etykiet Możesz umieścić etykiety po lewej lub prawej stronie danych wejściowych.
4	Etykiety i przyciski wbudowane Dodatkowy tekst lub elementy sterujące można dołączyć po lewej / prawej stronie pola wprowadzania.
5	Kontrole niestandardowe Niestandardowe elementy sterujące, takie jak selektory dat, przełączniki lub suwaki, wymagają pewnej uwagi, aby uzyskać do nich dostęp.
6	SASS Reference Możesz zmienić style komponentów za pomocą SASS Reference.

Opis

Foundation używa klas widoczności do pokazywania lub ukrywania elementów na podstawie orientacji urządzenia (pionowa i pozioma) lub rozmiaru ekranu (mały, średni, duży lub duży ekran).
Pozwala użytkownikowi na korzystanie z elementów opartych na środowisku przeglądania.

W poniższej tabeli wymieniono klasy widoczności Foundation, które kontrolują elementy na podstawie ich środowiska przeglądania -

Sr.No.	Klasa widoczności i opis
1	Pokaż według rozmiaru ekranu Pokazuje elementy oparte na urządzeniu za pomocą klasy .show .
2	Ukryj według rozmiaru ekranu Ukrywa elementy oparte na urządzeniu za pomocą klasy .hide .

Foundation obsługuje niektóre klasy, w których można ukryć zawartość za pomocą klas .hide i .invisible i nic nie wyświetla na stronie.

Wykrywanie orientacji

Urządzenia mogą określać różne orientacje za pomocą funkcji poziomej i pionowej . Urządzenia ręczne, takie jak telefony komórkowe, określają różne orientacje podczas ich obracania. W przypadku komputerów stacjonarnych orientacja będzie zawsze pozioma.

Dostępność

W poniższej tabeli wymieniono techniki ułatwień dostępu dla czytników ekranu, które ukrywają zawartość, jednocześnie udostępniając ją czytnikom ekranu -

Sr.No.	Klasa dostępności i opis
1	Pokaż dla czytników ekranu Używa klasy show-for-sr, aby ukryć zawartość, jednocześnie uniemożliwiając czytnikom ekranu jej odczyt.
2	Ukryj dla czytników ekranu Używa atrybutu aria-hidden, który sprawia, że tekst jest widoczny, ale nie może być odczytany przez czytnik ekranu.
3	Tworzenie linków pomijanych Czytnik ekranu utworzy link pomijania, aby uzyskać nawigację do treści Twojej witryny.

Sass Reference

Foundation używa następujących mikserów do wyświetlania danych wyjściowych CSS, co pozwala budować własną strukturę klas dla twoich komponentów -

Sr.No.	Mieszanie i opis	Parametr	Rodzaj
1	show-for Domyślnie ukrywa element i wyświetla go powyżej określonego rozmiaru ekranu.	Rozmiar $	Słowo kluczowe
2	show-for-only Domyślnie ukrywa element i wyświetla go w punkcie przerwania.	Rozmiar $	Słowo kluczowe
3	hide-for Domyślnie pokazuje element i ukrywa go powyżej określonego rozmiaru ekranu.	Rozmiar $	Słowo kluczowe
4	hide-for-only Domyślnie pokazuje element i ukrywa go powyżej określonego rozmiaru ekranu.	Rozmiar $	Słowo kluczowe

Domyślna wartość wszystkich tych mikserów będzie ustawiona na none .

Opis

Typografia w Foundation definiuje nagłówki, akapity, listy i inne elementy wbudowane, które tworzą atrakcyjne i proste domyślne style elementów.

W poniższej tabeli wymieniono różne typy typografii używane w programie Foundation -

Sr.No.	Typografia i opis
1	Akapity Akapit to grupa zdań o różnym rozmiarze czcionki, wyróżnionych słowach, wysokości wiersza itp.
2	nagłówek Definiuje nagłówki HTML od h1 do h6.
3	Spinki do mankietów Tworzy hiperłącze, które otwiera inny dokument po kliknięciu tekstu lub obrazu.
4	Dzielniki Służy do przerwania sekcji za pomocą tagu <hr>.
5	Listy uporządkowane i nieuporządkowane Fundacja obsługuje listy uporządkowane, listy nieuporządkowane, aby wyszczególnić rzeczy.
6	Listy definicji Listy definicji służą do wyświetlania par nazwa-wartość.
7	Cytaty blokowe Reprezentuje blok tekstu, który definiuje znacznie większy niż normalnie.
8	Skróty i kod Skrót definiuje skrócony termin słowa lub frazy, a kod reprezentuje fragment kodu.
9	Klawisze Służy do wykonywania określonej funkcji.
10	Dostępność Fundacja zapewnia pewne wytyczne dotyczące dostępu do zawartości strony.

Sass Reference

Możesz zmienić style komponentów, używając następujących zmiennych SASS wymienionych w tabeli.

Poniżej podano style komponentów przy użyciu następujących zmiennych SASS.

Sr.No.	Nazwa i opis	Rodzaj	Domyślna wartość
1	$header-font-family Określa rodzinę czcionek dla elementów nagłówka.	Ciąg lub lista	$ body-font-family
2	$header-font-weight Określa grubość czcionki w nagłówkach.	Strunowy	$ global-weight-normal
3	$header-font-style Zapewnia styl czcionki nagłówków.	Strunowy	normalna
4	$font-family-monospace Stos czcionek używany dla elementów, które używają czcionek o stałej szerokości, takich jak przykłady kodu.	Ciąg lub lista	Consolas, „Liberation Mono”, Courier, monospace
5	$header-sizes Definiuje rozmiary ekranów nagłówków, a każdy klawisz jest punktem przerwania, a każda wartość jest mapą rozmiarów nagłówków.	Mapa	`small: ( 'h1': 24 'h2': 20 'h3': 19 'h4': 18 'h5': 17 'h6': 16 ) medium: ( 'h1': 48 'h2': 40 'h3': 31 'h4': 25 'h5': 20 'h6': 16 )`
6	$header-color Zapewnia kolor nagłówków.	Kolor	dziedziczyć
7	$header-lineheight Określa wysokość wiersza nagłówków.	Numer	1.4
8	$header-margin-bottom Zapewnia dolny margines nagłówków.	Numer	0.5rem
9	$header-text-rendering Definiuje metodę renderowania tekstu.	Strunowy	OptimizeLegibility
10	$small-font-size Określa rozmiar czcionki dla <small> elementów.	Numer	80%
11	$paragraph-margin-bottom Określa dolny margines akapitów.	Numer	1rem
12	$paragraph-text-rendering Metody renderowania tekstu w akapicie.	Strunowy	OptimizeLegibility
13	$code-color Zapewnia kolor tekstu w próbkach kodu.	Kolor	$ czarny
14	$code-font-family Dostarcza rodzinę czcionek do przykładów kodu.	Ciąg lub lista	$ font-family-monospace
15	$code-border Określa obramowanie wokół kodu.	Lista	1px jednolity $ średnioszary
16	$code-padding Określa dopełnienie tekstu.	Numer lub lista	rem-calc (2 5 1)
17	$anchor-color Domyślny kolor linków.	Kolor	$ kolor podstawowy
18	$anchor-color-hover Określa domyślny kolor łączy po najechaniu myszą.	Kolor	scale-color ($ anchor-color, $ lightness: -14%)
19	$anchor-text-decoration Domyślna dekoracja tekstu dla linków.	Strunowy	Żaden
20	$anchor-text-decoration-hover Domyślna dekoracja tekstu dla linków po najechaniu myszą.	Strunowy	Żaden
21	$hr-width Określa maksymalną szerokość separatora.	Numer	$ global-width
22	$hr-border Określa domyślne obramowanie separatora.	Lista	1px jednolity $ średnioszary
23	$hr-margin Margines domyślny na separator.	Numer lub lista	rem-calc (20) autom
24	$list-lineheight Definiuje wysokość wiersza dla pozycji na liście.	Numer	$ paragraph-lineheight
25	$list-style-type Zapewnia typ punktora dla nieuporządkowanych list.	Strunowy	dysk
26	$list-style-position Definiuje pozycjonowanie punktorów na nieuporządkowanych listach.	Strunowy	na zewnątrz
27	$list-side-margin Definiuje lewy (lub prawy) margines.	Numer	1.25rem
28	$defnlist-term-weight Zapewnia grubość czcionki dla elementów <dt>.	Strunowy	$ global-weight-bold
29	$defnlist-term-margin-bottom Zapewnia odstępy między elementami <dt> i <dd>.	Numer	0.3rem
30	$blockquote-color Stosuje kolor tekstu elementów <blockquote>.	Kolor	$ ciemnoszary
31	$blockquote-padding Zapewnia dopełnienie wewnątrz elementów <blockquote>.	Numer lub lista	rem-calc (9 20 0 19)
32	$blockquote-border Daje boczne obramowanie dla elementów <blockquote>.	Lista	1px jednolity $ średnioszary
33	$cite-font-size Definiuje rozmiar czcionki dla elementów <cite>.	Numer	rem-calc (13)
34	$cite-color Zapewnia kolor tekstu dla `<cite>`elementów.	Kolor	$ ciemnoszary
35	$keystroke-font Definiuje rodzinę czcionek dla elementów <kbd>.	Ciąg lub lista	$ font-family-monospace
36	$keystroke-color Określa kolor tekstu dla elementów <kbd>.	Kolor	$ czarny
37	$keystroke-background Zapewnia kolor tła dla elementów <kbd>.	Kolor	$ jasnoszary
38	$keystroke-padding Określa dopełnienie dla elementów <kbd>.	Numer lub lista	rem-calc (2 4 0)
39	$keystroke-radius Wyświetla promień obramowania dla elementów <kbd>.	Numer lub lista	$ global-radius
40	$abbr-underline Zapewnia styl dolnej krawędzi dla elementów <abbr>.	Lista	1 piksel kropkowany $ czarny

W tym rozdziale będziemy się uczyć Typography Helpers. Pomocnicy typografii służą do formatowania tekstu w semantycznie odpowiedni sposób. Klasy pomocnicze w Foundation umożliwiają szybsze tworzenie szkieletów niektórych stylów typograficznych.

W poniższej tabeli wymieniono pomocników typografii , które są używane w programie Foundation.

Sr.No.	Pomocnik i opis typografii
1	Wyrównanie tekstu Pomaga w zmianie wyrównania tekstu elementu, takiego jak lewy , prawy , wyśrodkowany i wyjustowany .
2	Subheader Podtytuł można dodać do dowolnego elementu nagłówka przy użyciu klasy .subheader .
3	Główny akapit Jest to znacznie większy blok tekstu w porównaniu do zwykłego tekstu, który można wykorzystać do reklamy lub innego tekstu opisowego.
4	Lista bez wypunktowania Domyślnie <ul> jest listą wypunktowaną w Foundation. Aby usunąć punktory, możesz użyć klasy .no-bullet .
5	Statystyka Ilekroć masz do czynienia z dashboardem, musisz podkreślić kilka ważnych liczb. Możesz to osiągnąć używając klasy .stat .

Sass Reference

Zmienne

W poniższej tabeli wymieniono zmienne SASS w pliku ustawień projektu, które sprawiają, że domyślne style składnika można dostosować.

Sr.No.	Nazwa i opis	Rodzaj	Domyślna wartość
1	$lead-font-size Domyślny rozmiar czcionki dla akapitów wiodących.	Numer	$ global-font-size * 1.25
2	$lead-lineheight Domyślna wysokość wiersza akapitu wiodącego.	Strunowy	1.6
3	$subheader-lineheight Domyślna wysokość wiersza nagłówka.	Numer	1.4
4	$subheader-color Domyślny kolor czcionki podtytułu.	Kolor	$ ciemnoszary
5	$subheader-font-weight Domyślna grubość czcionki podtytułu.	Strunowy	$ global-weight-normal
6	$subheader-margin-top Domyślny górny margines podtytułu.	Numer	0,2rem
7	$subheader-margin-bottom Domyślny dolny margines nagłówka.	Numer	0.5rem
8	$stat-font-size Domyślny rozmiar czcionki numeru statycznego	Numer	2.5rem

W tym rozdziale będziemy się uczyć basic controls. Foundation zapewnia podstawowe elementy sterujące, takie jak przyciski , suwaki i przełączniki .

W poniższej tabeli wymieniono podstawowe kontrolki używane w programie Foundation.

Sr.No.	Podstawowe sterowanie i opis
1	Przycisk Foundation obsługuje wiele stylów przycisków, które można dostosować do własnych potrzeb.
2	Grupa przycisków Są pojemnikami na odpowiednie elementy akcji. Działa dobrze, gdy grupa działań jest wyświetlana na pasku.
3	Przycisk Zamknij Przycisk Zamknij jest używany, gdy chcesz, aby coś zniknęło, klikając na niego.
4	Suwak Suwaki są bardzo przydatne do ustawiania pewnych wartości w zakresie.
5	Przełącznik Pozwala wyłączyć lub włączyć przełącznik, klikając go.

Opis

Fundacja udostępnia kilka różnych opcji stylizacji elementów nawigacji. Wiele prostych wzorców nawigacji jest dołączonych; można go zintegrować z formularzem w celu uzyskania solidnego, responsywnego rozwiązania nawigacyjnego.

W poniższej tabeli opisano różne typy nawigacji wraz z opisem.

Sr.No.	Typ i opis
1	Przegląd nawigacji Nawigacja zawiera łącza do innej sekcji i składa się z wielu wzorców nawigacji.
2	Menu Menu służy do budowania wielu elementów nawigacyjnych.
3	Menu rozwijane Wtyczka menu rozwijanego służy do tworzenia podmenu poniżej menu głównego.
4	Drilldown Menu Wtyczka menu rozwijania służy do tworzenia podmenu w menu głównym w formacie suwaka.
5	Menu akordeonowe Wyświetla zwijane menu z efektami akordeonu i zapewnia obsługę automatycznego zwijania za pomocą wtyczki Accordion Menu.
6	Górny pasek Górny pasek ułatwia wyświetlanie złożonego paska nawigacji na różnych rozmiarach ekranu.
7	Responsive Navigation Responsywna wtyczka menu przydziela menu w różnych rozmiarach ekranu.
8	Magellan Magellan tworzy nawigację, która jest w stałej pozycji; automatycznie śledzi listę nawigacji na stronie na podstawie pozycji przewijania.
9	Paginacja Paginacja, lista nieuporządkowana jest obsługiwana przez Bootstrap jak wiele innych elementów interfejsu.
10	Bułka tarta Menu nawigacyjne określa bieżącą lokalizację witryny w hierarchii nawigacyjnej.

Kontenery Foundation służą do tworzenia pełnej szerokości przeglądarek przez cały czas dla witryny i zawijania zawartości witryny.

Poniższa tabela zawiera listę niektórych kontenerów używanych w programie Foundation -

Sr.No.	Pojemnik i opis
1	Akordeon Harmonijki zawierają pionowe zakładki, które są używane na stronach internetowych do rozwijania i zwijania dużej ilości danych.
2	Zawołać Umieszcza zawartość wewnątrz komponentu.
3	Okienka rozwijane Wyświetla zawartość po kliknięciu przycisku.
4	Obiekt multimedialny Dodaje obiekty multimedialne, takie jak obrazy, filmy, komentarze do blogów itp. Wraz z pewną zawartością.
5	Poza płótnem Odłącza menu nawigacyjne od widocznego obszaru i wyświetla główną zawartość.
6	Reveal-Modal Foundation umożliwia tworzenie modalnych okien dialogowych lub wyskakujących okienek za pomocą klasy odsłonięcia .
7	Tabele Foundation udostępnia układy do wyświetlania danych w formacie tabelarycznym.
8	Tabs Jest to karta oparta na nawigacji, która wyświetla zawartość w różnych panelach bez opuszczania strony.

W tym rozdziale zajmiemy się mediami w Fundacji. Fundacja składa się z kilku typów mediów, takich jak Flex Video , etykieta , orbita , pasek postępu i podpowiedź . W poniższej tabeli wymieniono wszystkie typy nośników.

Sr.No.	Typ i opis nośnika
1	Flex Video Służy do osadzania filmów w elastycznym kontenerze wideo, aby zachować właściwy współczynnik proporcji pomimo rozmiaru ekranu.
2	Etykieta Może być używany do stylizacji wbudowanej, którą można umieścić w treści, aby wywołać określoną sekcję lub dołączyć metadane.
3	Orbita Jest to potężny i responsywny suwak, umożliwiający użytkownikowi przesuwanie palcem po urządzeniach z ekranem dotykowym.
4	Pasek postępu Służy do wyświetlania postępu i można go dodać do układów.
5	Etykietki narzędzi Służy do wyświetlania dodatkowych informacji dotyczących terminu lub czynności na stronie.

Opis

Wtyczka to oprogramowanie zapewniające dodatkowe funkcje, które pierwotnie nie były uzupełnione podstawowymi funkcjami Foundation. Można załadować wtyczki Foundation, aby rozszerzyć funkcjonalność witryny. Wtyczki ułatwiają pracę.

W poniższej tabeli opisano różne typy wtyczek wraz z opisem.

Sr.No.	Typ i opis
1	Przestrzegać Abide jest używany w bibliotece walidacji formularzy HTML5 z natywnym interfejsem API przy użyciu wymaganych atrybutów i wzorców.
2	Wyrównywacz Equalizer to sposób na tworzenie wielu treści o równych wysokościach na stronie.
3	Wymieniać Służy do ładowania responsywnej treści zgodnie z urządzeniem użytkownika.
4	Toggler Przełącznik służy do przełączania się z jednego ustawienia na drugie.
5	Lepki Wtyczka Sticky służy do tworzenia stałej treści lub obrazu w serwisie.

Fundacja zapewnia zestaw Sass funkcji użytkowych, które mogą być używane z util , kolor , selektor , jednostki , wartości i wiele innych.

Możesz zaimportować wszystkie pliki narzędziowe naraz, używając następującego wiersza kodu -

@import 'util/util';

Możesz także importować pojedyncze pliki narzędziowe, jak pokazano poniżej -

@import 'util/color';
@import 'util/selector';
@import 'util/unit';
@import 'util/value';

Sass Reference

Możesz zmienić style komponentów, korzystając z następujących funkcji SASS.

pierwszoplanowy

Zapewnia elementom kolor pierwszego planu na podstawie koloru tła. Używa następującego formatu do przypisywania różnych typów parametrów -

foreground($color, $yes, $no, $threshold)

Powyższe parametry są określone w poniższej tabeli -

Sr.No.	Parametr i opis	Rodzaj	Domyślna wartość
1	$color Sprawdza jasność koloru.	Kolor	Żaden
2	$yes Jeśli kolor jest jasny, zwraca $ yes color.	Kolor	$ czarny
3	$no Jeśli kolor jest ciemny, zwraca $ brak koloru.	Kolor	$ biały
4	$threshold Reprezentuje próg lekkości.	Odsetek	60%

inteligentna skala

Zapewnia odpowiedni kolor elementom w zależności od ich lekkości. Używa następującego formatu do określenia odpowiedniego koloru -

smart-scale($color, $scale, $threshold)

Powyższe parametry określa poniższa tabela -

Sr.No.	Parametr i opis	Rodzaj	Domyślna wartość
1	$color Służy do skalowania koloru.	Kolor	Żaden
2	$scale Określa procent do skalowania w górę lub w dół.	Odsetek	5%
3	$threshold Reprezentuje próg lekkości.	Odsetek	40%

wprowadzanie tekstu

Tworzy selektor podczas używania typu wprowadzania tekstu. Używa następującego formatu do określania typów danych wejściowych -

text-inputs($types)

Używa parametru określonego w poniższej tabeli -

Sr.No.	Parametr i opis	Rodzaj	Domyślna wartość
1	$types Udostępnia szereg typów wprowadzania tekstu do generowania selektora.	Kolor	-

jednostka rozbierania

Usuwa jednostkę z wartości i zwraca tylko liczbę. Używa następującego formatu do usuwania jednostki z wartości -

strip-unit($num)

Używa parametru określonego w poniższej tabeli -

Sr.No.	Parametr i opis	Rodzaj	Domyślna wartość
1	$num Określa liczbę, gdy usuwasz jednostkę z wartości.	Kolor	Żaden

rem-calc

Zmienia wartość piksela, aby dopasować wartości rem. Używa następującego formatu do konwersji wartości pikseli na wartości rem -

rem-calc($values, $base)

Używa następujących parametrów określonych w tabeli -

Sr.No.	Parametr i opis	Rodzaj	Domyślna wartość
1	$values Konwertuje wartości pikseli na wartości rem i rozdziela je spacjami. Jeśli konwertujesz listę oddzieloną przecinkami, zawiń listę w nawiasy.	Numer lub lista	Żaden
2	$base Zapewnia wartość bazową podczas konwersji piksela na wartość rem. Jeśli podstawa ma wartość null, funkcja używa zmiennej $ base-font-size jako podstawy.	Numer	zero

ma wartość

Określa wartość, jeśli nie jest fałszywa. Wartości fałszywe obejmują null, none, 0 lub pustą listę. Używa następującego formatu do określania wartości -

has-value($val)

Używa parametru określonego w poniższej tabeli -

Sr.No.	Parametr i opis	Rodzaj	Domyślna wartość
1	$val Sprawdza określoną wartość.	Mieszany	Żaden

get-side

Określa stronę wartości i definiuje górne / prawe / dolne / lewe wartości na wypełnieniu, marginesie itp. Używa następującego formatu do określania boku wartości -

has-value($val)

Używa następujących parametrów określonych w tabeli -

Sr.No.	Parametr i opis	Rodzaj	Domyślna wartość
1	$val Określa stronę wartości.	Lista lub numer	Żaden
2	$side Określa, po której stronie powinna powrócić wartość (góra / prawa / dół / lewa).	Słowo kluczowe	Żaden

get-border-value

Określa wartość graniczną elementu. Używa następującego formatu do określania wartości obramowania -

get-border-value($val, $elem)

Używa następujących parametrów określonych w tabeli -

Sr.No.	Parametr i opis	Rodzaj	Domyślna wartość
1	$val Znajduje określoną wartość granicy.	Lista	Żaden
2	$elem Służy do wyodrębniania komponentu obramowania.	Słowo kluczowe	Żaden

Importowanie

Importuje zawartość mikserów SASS umieszczonych w pliku scss / util / _mixins.scss . Możesz zaimportować miksery SASS, używając następującego wiersza kodu -

@import 'util/mixins';

Sass Reference

Możesz zmienić style komponentów za pomocą funkcji SASS.

Mieszanki

Możesz użyć poniższych mikserów, aby zbudować strukturę klas CSS dla swoich komponentów.

CSS-TRIANGLE

Służy do tworzenia rozwijanych strzałek, rozwijanych pipsów i wielu innych. Używa selektora <i> & :: before </i> lub <i> & :: after </i> do dołączenia trójkąta do istniejącego elementu. Używa następującego formatu -

@include css-triangle($triangle-size, $triangle-color, $triangle-direction);

Używa następujących parametrów określonych w tabeli -

Sr.No.	Parametr i opis	Rodzaj	Domyślna wartość
1	$triangle-size Określa szerokość trójkąta.	Numer	Żaden
2	$triangle-color Określa kolor trójkąta.	Kolor	Żaden
3	$triangle-direction Określa kierunek trójkąta, na przykład w górę, w prawo, w dół lub w lewo.	Słowo kluczowe	Żaden

HAMBURGER

Służy do tworzenia ikon menu wraz z szerokością, wysokością, liczbą pasków i kolorami. Używa następującego formatu -

@include hamburger($color, $color-hover, $width, $height, $weight, $bars);

Używa następujących parametrów określonych w tabeli -

Sr.No.	Parametr i opis	Rodzaj	Domyślna wartość
1	$color Określa kolor ikony.	Kolor	Żaden
2	$color-hover Określa kolor po najechaniu na ikonę.	Kolor	Żaden
3	$width Określa szerokość ikony.	Numer	Żaden
4	$height Określa wysokość ikony.	Numer	Żaden
5	$weight Określa wagę poszczególnych słupków w ikonie.	Numer	Żaden
6	$bars Określa liczbę słupków w ikonie.	Numer	Żaden

BACKGROUND-TRIANGLE

Służy do określania obrazu tła elementu. Używa następującego formatu -

@include background-triangle($color);

Używa parametru określonego w tabeli -

Sr.No.	Parametr i opis	Rodzaj	Domyślna wartość
1	$color Określa kolor trójkąta.	Kolor	$ czarny

CLEARFIX

Ten mixin automatycznie czyści elementy potomne, więc nie ma potrzeby stosowania dodatkowych znaczników. Używa następującego formatu -

@include clearfix;

AUTO-WIDTH

Automatycznie dopasowuje rozmiary elementów na podstawie liczby elementów znajdujących się w kontenerze. Używa następującego formatu -

@include auto-width($max, $elem);

Używa następujących parametrów określonych w tabeli -

Sr.No.	Parametr i opis	Rodzaj	Domyślna wartość
1	$max Określa maksymalną liczbę towarów w kontenerze.	Numer	Żaden
2	$elem Używa tagu dla selektorów rodzeństwa.	Słowo kluczowe	li

DISABLE-MOUSE-OUTLINE

Służy do wyłączania konturu wokół elementu, gdy identyfikuje akcję wprowadzania myszy. Używa następującego formatu -

@include disable-mouse-outline;

ELEMENT-INVISIBLE

Służy do ukrycia elementów i może być dostępny dla klawiatur i innych urządzeń. Używa następującego formatu -

@include element-invisible;

ELEMENT-INVISIBLE-OFF

Służy do usuwania niewidocznych elementów i odwraca dane wyjściowe CSS przy użyciu mixin element-invisible () . Używa następującego formatu -

@include element-invisible-off;

VERTICAL-CENTER

Służy do umieszczania elementów wyśrodkowanych w pionie wewnątrz niestatycznego elementu nadrzędnego przy użyciu następującego formatu -

@include vertical-center;

HORIZONTAL-CENTER

Służy do umieszczania elementów wyśrodkowanych w poziomie wewnątrz niestatycznego elementu nadrzędnego przy użyciu następującego formatu -

@include horizontal-center;

ABSOLUTE-CENTER

Służy do umieszczania elementów wyśrodkowanych absolutnie wewnątrz niestatycznego elementu nadrzędnego przy użyciu następującego formatu -

@include absolute-center;

Foundation udostępnia bibliotekę Motion UI do tworzenia przejść i animacji interfejsu użytkownika i jest używana przez komponenty Foundation, takie jak Toggler , Reveal i Orbit .

Instalowanie interfejsu użytkownika ruchu

Możesz zainstalować bibliotekę Motion UI w swoim projekcie, używając npm lub bower, jak pokazano w następującym wierszu kodu -

$ npm install motion-ui --save-dev
bower install motion-ui --save-dev

Możesz dodać ścieżkę do biblioteki Motion UI w kompasie za pomocą config.rb, jak pokazano w następującym wierszu kodu -

add_import_path 'node_modules/motion-ui/src'

Możesz dołączyć ścieżkę do gulp-sass, używając następujących linii kodu -

gulp.src('./src/scss/app.scss')
   .pipe(sass( {
      includePaths: ['node_modules/motion-ui/src']
   }));

Zaimportuj bibliotekę Motion UI w pliku SASS, używając następującego kodu -

@import 'motion-ui'

Wbudowane przejścia

Foundation zapewnia efekty przejścia za pomocą klas przejść, które są tworzone przez bibliotekę Motion UI. Stwórzmy jeden prosty przykład wykorzystujący efekty przejścia.

Niestandardowe przejścia

Możesz ustawić własne klasy przejść za pomocą biblioteki Motion UI. Na przykład ustawimy niestandardowe klasy dla przejścia mui-hinge () , które obraca element -

@include mui-hinge(
   $state: in,
   $from: right,
   $turn-origin: from-back,
   $duration: 0.5s,
   $timing: easeInOut
);

Animacja

Możesz użyć efektów przejścia Motion UI do tworzenia animacji CSS. Kliknij to łącze, aby sprawdzić, jak działa animacja na modalu przy użyciu klasy data-animation .