Foundation - Panduan Cepat

Apa itu Foundation?

Foundation adalah salah satu kerangka kerja front-end canggih untuk merancang situs web responsif yang indah. Ini berfungsi pada semua jenis perangkat dan memberi Anda plugin HTML, CSS, dan JavaScript.

Fondasi dimulai sebagai panduan gaya internal, dibangun oleh ZURB pada tahun 2008. ZURB adalah perusahaan desain produk di Campbell, California. Itu merilis Foundation 2.0 sebagai open source pada Oktober 2011. Versi terbaru dari Foundation adalah 6.1.1, dirilis pada Desember 2015.

Mengapa Menggunakan Foundation?

Ini menyediakan pengembangan yang lebih cepat dengan menggunakan kompiler Sass, yang bekerja lebih cepat daripada kompiler default.
Ini memperkaya situs web Anda dengan tabel harga, sakelar, joyride, slider jangkauan, lightbox, dan banyak lagi.
Muncul dengan paket pengembangan seperti Grunt dan Libsass untuk pengkodean dan kontrol yang lebih cepat.
Foundation for sites memberi Anda HTML, CSS, dan JS untuk membangun situs web dengan cepat.
Kerangka kerja email memberi Anda email HTML responsif, yang dapat dibaca di perangkat apa pun.
Foundation for Apps memungkinkan Anda membangun aplikasi web yang sepenuhnya responsif.

fitur

Ini memiliki sistem grid yang kuat dan beberapa komponen UI yang berguna dan plugin JavaScript yang keren.
Ini memberikan desain responsif, yang melayani semua jenis perangkat.
Ini dioptimalkan untuk perangkat seluler dan benar-benar mendukung pendekatan yang mengutamakan seluler.
Ini menyediakan template HTML, yang dapat disesuaikan dan diperluas.

Keuntungan

Mudah dipelajari, setelah Anda memiliki pemahaman dasar tentang HTML dan CSS.
Anda dapat menggunakan Foundation secara bebas karena ini adalah open source.
Ini memberi Anda banyak templat, yang membantu Anda mulai mengembangkan situs web segera.
Foundation mendukung preprocessor seperti SASS dan Compass, yang membuat pengembangan lebih cepat.

Kekurangan

Karena popularitas Bootstrap Twitter, dukungan komunitas untuk Twitter Bootstrap lebih baik daripada Foundation.
Mungkin perlu beberapa waktu bagi pemula untuk mempelajari dan memanfaatkan dukungan preprocessor.
Kurangnya dukungan yang lebih luas seperti situs QA dan forum untuk memperbaiki masalah.
Foundation memiliki tema yang lebih sedikit dibandingkan dengan yang lain.

Pada bab ini, kita akan membahas tentang cara menginstal dan menggunakan Foundation di website.

Unduh Foundation

Saat Anda membuka link foundation.zurb.com , Anda akan melihat layar seperti di bawah ini -

Klik Download Foundation 6 tombol, Anda akan diarahkan ke halaman lain.

Di sini Anda dapat melihat empat tombol -

Download Everything - Anda dapat mengunduh versi Foundation ini, jika Anda ingin memiliki semuanya dalam kerangka kerja yaitu vanilla CSS dan JS.
Download Essentials - Ini akan mengunduh versi sederhana yang mencakup kisi, tombol, tipografi, dll.
Custom Download - Ini akan mengunduh pustaka khusus untuk Foundation, itu termasuk elemen dan menentukan ukuran kolom, ukuran font, warna dll.
Install via SCSS - Ini akan mengarahkan Anda ke halaman dokumentasi untuk menginstal Foundation untuk situs.

Anda dapat mengklik Download Everythingtombol untuk mendapatkan semuanya dalam kerangka yaitu CSS dan JS. Karena file-file tersebut berisi semua hal dalam kerangka kerja sehingga setiap kali Anda tidak perlu menyertakan file terpisah untuk fungsionalitas individu. Pada saat menulis tutorial ini, versi terbaru (Foundation 6) telah diunduh.

Struktur File

Setelah Foundation diunduh, ekstrak file ZIP, dan Anda akan melihat file / struktur direktori berikut -

Seperti yang Anda lihat, ada CSS dan JS yang dikompilasi (foundation. *), Serta CSS dan JS yang dikompilasi dan dikecilkan (foundation.min. *).

Kami menggunakan versi CDN pustaka sepanjang tutorial ini.

Template HTML

Template HTML dasar menggunakan Foundation seperti yang ditunjukkan di bawah ini -

<!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>

Bagian berikut menjelaskan kode di atas secara rinci.

Doctype HTML5

Fondasi terdiri dari elemen HTML dan properti CSS tertentu yang memerlukan penggunaan doctype HTML5. Oleh karena itu, kode berikut untuk doctype HTML5 harus disertakan di awal semua proyek Anda menggunakan Foundation.

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

Seluler Pertama

Ini membantu untuk responsif terhadap perangkat seluler. Anda perlu menyertakan fileviewport meta tag ke elemen <head>, untuk memastikan rendering yang tepat dan zoom sentuh pada perangkat seluler.

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

properti lebar mengontrol lebar perangkat. Menyetelnya ke lebar perangkat akan memastikan bahwa itu dirender di berbagai perangkat (ponsel, desktop, tablet ...) dengan benar.
initial-scale = 1.0 memastikan bahwa saat dimuat, halaman web Anda akan ditampilkan dengan skala 1: 1, dan pembesaran tidak akan diterapkan di luar kotak.

Inisialisasi komponen

Skrip jQuery diperlukan di Foundation untuk komponen seperti modals dan dropdown.

<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>

Keluaran

Mari kita lakukan langkah-langkah berikut untuk melihat bagaimana kode yang diberikan di atas bekerja -

Simpan kode html yang diberikan di atas firstexample.html mengajukan.
Buka file HTML ini di browser, output ditampilkan seperti yang ditunjukkan di bawah ini.

Anda dapat memulai pengembangan proyek Anda dengan beberapa templat yang tersedia yang dapat diinstal melalui Yeti Launch atauFoundation CLI. Anda dapat memulai dengan proyek baru dengan menggunakan templat ini dengan menggunakan sistem pembuatan Gulp untuk pemrosesan Sass, JavaScript, menyalin file, dll.

Template Dasar

Template dasarnya adalah sesuatu seperti template SASS, yang menyertakan struktur direktori datar dan hanya mengompilasi file SASS dan sebaiknya memiliki template sederhana ini hanya dengan menggunakan SASS. Anda dapat menggunakan template dasar dengan menggunakan Yeti Launch atau menggunakan Foundation CLI menggunakan perintah berikut -

$ foundation new --framework sites --template basic

Untuk mengatur ini, pertama jalankan npm install , bower install dan gunakan perintah npm start untuk menjalankannya. Anda juga dapat mendownload file template dari Github .

Template ZURB

Ini adalah kombinasi dari CSS / SCSS, JavaScript, Template Handlebars, struktur markup, kompresi gambar dan menggunakan pemrosesan SASS. Anda dapat menggunakan template ZURB dengan menggunakan Yeti Launch atau menggunakan Foundation CLI menggunakan perintah di bawah ini -

$ foundation new --framework sites --template zurb

Untuk menjalankan template ini, ikuti langkah-langkah yang sama yang ditentukan di template dasar. Anda juga dapat mendownload file template dari Github .

Menyalin Aset

Anda dapat menyalin konten di folder src / assets menggunakan Gulp di mana aset akan menjadi folder proyek Anda. Yang penting di sini adalah, file SASS, file JavaScript, dan gambar tidak akan berada dalam proses penyalinan aset ini, karena mereka akan memiliki proses sendiri untuk menyalin konten.

Kompilasi Halaman

Anda dapat membuat halaman HTML di bawah tiga folder yaitu halaman , tata letak , dan parsial yang berada di dalam direktori src / . Anda dapat menggunakan kompiler file datar Panini yang membuat tata letak untuk halaman dengan menggunakan templat, halaman, sebagian HTML. Proses ini dapat dilakukan dengan menggunakan bahasa template Handlebars .

Kompilasi SASS

Anda dapat mengkompilasi SASS ke CSS menggunakan Libsass dan file SASS utama akan disimpan di bawah src / assets / scss / app.scss dan juga sebagian SASS yang baru dibuat akan disimpan di bawah folder ini sendiri. Output dari CSS akan seperti CSS biasa, yang berada dalam gaya bertingkat. Anda dapat mengompres CSS dengan clean-css dan menghapus CSS yang tidak digunakan dari stylesheet menggunakan UnCSS .

Kompilasi JavaScript

File JavaScript akan disimpan di folder src / assets / js bersama dengan Foundation dan semua dependensi diikat menjadi satu ke dalam file app.js. File akan diikat bersama seperti yang ditentukan dalam urutan di bawah ini -

Ketergantungan Yayasan.
File akan disimpan di folder src / assets / js .
File-file tersebut dibundel menjadi satu file bernama app.js .

Kompresi Gambar

Secara default, semua gambar akan disimpan di bawah folder assets / img di bawah folder dist . Anda dapat memampatkan gambar saat membuat untuk produksi menggunakan gulp-imagemin yang mendukung file JPEG, PNG, SVG, dan GIF.

BrowserSync

Anda dapat membuat server BrowserSync yang merupakan pengujian browser tersinkronisasi yang tersedia dihttp://localhost:8000dan dapat melihat template yang dikompilasi menggunakan URL ini. Saat server Anda berjalan, halaman disegarkan secara otomatis saat Anda menyimpan file dan Anda dapat melihat perubahan yang dibuat pada halaman secara real time saat Anda bekerja.

Deskripsi

Ini mencakup elemen Foundation untuk bekerja dengan aplikasi web dengan lancar. Tabel berikut mencantumkan beberapa komponen Foundation -

Sr.No.	Deskripsi komponen
1	Akordeon Akordeon berisi tab vertikal yang digunakan di situs web untuk memperluas dan menciutkan data dalam jumlah besar.
2	Menu Akordeon Ini menampilkan menu yang bisa dilipat dengan efek akordeon.
3	Lencana Lencana mirip dengan label, yang digunakan untuk menyorot informasi seperti catatan dan pesan penting.
4	Remah roti Ini menentukan lokasi saat ini untuk situs dalam hierarki navigasi.
5	Tombol Foundation mendukung tombol standar dengan gaya berbeda.
6	Memanggil Callout adalah sebuah elemen yang dapat digunakan untuk menempatkan konten di dalamnya.
7	Tombol Tutup Ini digunakan untuk menutup kotak peringatan.
8	Menu Perincian Menu sibak mengubah daftar bertingkat menjadi menu penelusuran vertikal.
9	Menu drop down Menu dropdown digunakan untuk menampilkan link dalam format daftar.
10	Panel Dropdown Panel dropdown menampilkan konten saat Anda mengklik tombol.
11	Video Flex Ini digunakan untuk membuat objek video di halaman web.
12	Kelas Mengambang Ini digunakan untuk menambahkan kelas utilitas ke elemen HTML.
13	Formulir Ini digunakan untuk membuat tata letak formulir untuk mengumpulkan input pengguna.
14	Label Label adalah gaya sebaris, yang menentukan label untuk elemen masukan.
15	Objek Media Ini digunakan untuk menambahkan objek media seperti gambar, video, komentar blog, dll. Yang dapat ditempatkan di kiri atau kanan blok konten.
16	Tidak bisa Ini menyediakan akses ke berbagai mode di situs web.
17	Penomoran halaman Ini adalah jenis navigasi yang membagi konten menjadi serangkaian halaman terkait.
18	Penggeser Ini menentukan kisaran nilai dengan menyeret pegangan.
19	Beralih Ini digunakan untuk beralih antara keadaan hidup dan mati.
20	Meja Ini mewakili data dalam format baris dan kolom.
21	Tab Ini adalah tab berbasis navigasi yang menampilkan konten ke dalam panel yang berbeda tanpa meninggalkan halaman.
22	Gambar kecil Ini memberi gaya gambar dalam bentuk thumbnail.
23	Bar judul Ini digunakan untuk menampilkan layar saat ini yang digunakan oleh pengguna dengan item menu lainnya.
24	Keterangan alat Ini adalah kotak pop-up kecil yang menjelaskan informasi saat Anda mengarahkan mouse ke tautan.
25	Bar Atas Ini digunakan untuk membuat tajuk navigasi di situs web.
26	Orbit Ini adalah penggeser yang mudah dan kuat yang menggesek elemen menggunakan kelas orbit .

Dalam bab ini, kita akan mempelajari tentang Gaya Global . Kerangka kerja Yayasan CSS global menyertakan penyetelan ulang berguna yang memastikan gaya konsisten di seluruh browser.

Ukuran Font

Ukuran font lembar gaya browser diatur ke 100% secara default. Ukuran font default diatur ke 16 piksel. Bergantung pada ukuran font, ukuran kisi dihitung. Untuk memiliki ukuran font dasar yang berbeda dan titik putus kisi yang tidak terpengaruh, setel $ rem-base ke $ global-font-size value, yang harus dalam piksel.

Warna

Elemen interaktif seperti tautan dan tombol menggunakan warna biru default yang berasal dari variabel SASS $ warna primer . Komponen juga dapat memiliki warna seperti: sekunder, waspada, sukses dan peringatan . Untuk informasi lebih lanjut, periksa di sini .

Referensi SASS

Variabel

Tabel berikut mencantumkan variabel SASS, yang digunakan untuk menyesuaikan gaya default komponen di project _settings.scss Anda .

Sr.No.	Nama & Deskripsi	Tipe	Nilai Default
1	$global-width Ini mewakili lebar global situs. Digunakan untuk menentukan lebar baris grid.	Jumlah	rem-calc (1200)
2	$global-font-size Ini mewakili ukuran font yang diterapkan ke <html> dan <body> . Ini disetel 100% secara default dan nilai pengaturan browser pengguna akan diwarisi.	Jumlah	100%
3	$global-lineheight Ini mewakili semua jenis ketinggian garis default. $ global-lineheight adalah 24px sementara $ global-font-size disetel menjadi 16px.	Jumlah	1.5
4	$primary-color Ini memberi warna pada komponen interaktif seperti tautan dan tombol.	Warna	# 2199e8
5	$secondary-color Ini digunakan dengan komponen, yang mendukung kelas .secondary .	Warna	# 777
6	$success-color Ini mewakili status atau tindakan positif saat digunakan dengan kelas .success .	Warna	# 3adb76
7	$warning-color Ini mewakili status atau tindakan hati-hati saat digunakan dengan kelas .warning .	Warna	# ffae00
8	$alert-color Ini mewakili status atau tindakan negatif saat digunakan dengan kelas .alert .	Warna	# ec5840
9	$light-gray Ini digunakan untuk item UI abu-abu terang.	Warna	# e6e6e6
10	$medium-gray Ini digunakan untuk item UI abu-abu sedang.	Warna	#cacaca
11	$dark-gray Ini digunakan untuk item UI abu-abu gelap.	Warna	# 8a8a8a
12	$black Ini digunakan untuk item UI hitam.	Warna	# 0a0a0a
13	$white Ini digunakan untuk item UI putih.	Warna	#fefefe
14	$body-background Ini mewakili warna latar belakang tubuh.	Warna	$ putih
15	$body-font-color Ini mewakili warna teks tubuh.	Warna	$ hitam
16	$body-font-family Ini mewakili daftar font tubuh.	Daftar	'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif
17	$body-antialiased Jenis antialias diaktifkan dengan menyetel atribut ini ke true menggunakan properti CSS -webkit-font-smoothing dan -moz-osx-font-smoothing .	Boolean	benar
18	$global-margin Ini mewakili nilai margin global pada komponen.	Jumlah	1rem
19	$global-padding Ini mewakili nilai padding global pada komponen.	Jumlah	1rem
20	$global-margin Ini mewakili nilai margin global yang digunakan antar komponen.	Jumlah	1rem
21	$global-weight-normal Ini mewakili bobot font global untuk tipe normal.	Kata Kunci atau Angka	normal
22	$global-weight-bold Ini mewakili bobot font global untuk tipe tebal.	Kata Kunci atau Angka	mencolok
23	$global-radius Ini mewakili nilai global dari semua elemen yang memiliki radius perbatasan.	Jumlah	0
24	$global-text-direction Ini mengatur arah teks dari CSS ke ltr atau rtl		ltr

SASS membantu membuat kode lebih fleksibel dan dapat disesuaikan di Foundation.

Kesesuaian

Untuk menginstal versi berbasis SASS untuk foundation, Ruby harus diinstal di Windows. Foundation dapat dikompilasi dengan Ruby SASS dan libsass. Kami merekomendasikannode-sass 3.4.2+ versi untuk mengkompilasi SASS.

Autoprefixer Diperlukan

Autoprefixer menangani file SASS. gulp-autoprefixer digunakan untuk membangun proses. Pengaturan autoprefixer berikut digunakan untuk mendapatkan dukungan browser yang tepat.

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

Memuat Kerangka

Kami dapat menginstal file kerangka menggunakan NPM. Menggunakan antarmuka baris perintah (CLI), kita dapat mengkompilasi file Sass. Berikut adalah perintah untuk memuat kerangka kerja -

npm install foundation-sites --save

Setelah menjalankan kode baris perintah di atas, Anda akan mendapatkan baris berikut -

Menyusun Secara Manual

File kerangka kerja dapat ditambahkan sebagai jalur impor tergantung pada proses pembuatan Anda, tetapi jalurnya akan menjadi packages_folder / foundation-sites / scss yang sama . The @ impor pernyataan disertakan di bagian atas pondasi-sites.scss berkas. Baris berikutnya dalam kode yang diberikan dijelaskan diAdjusting CSS Output bagian.

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

Menggunakan CSS Terkompilasi

Anda dapat menyertakan file CSS yang telah dikompilasi sebelumnya. Ada dua jenis file CSS, yaitu minified dan unminified. Versi yang diperkecil digunakan untuk produksi dan versi yang tidak diperkecil digunakan untuk langsung mengedit CSS kerangka kerja.

<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">

Menyesuaikan Output CSS

Untuk berbagai komponen, keluaran Foundation terdiri dari banyak kelas. Ini digunakan untuk mengontrol output CSS dari kerangka kerja. Tambahkan satu baris kode berikut untuk menyertakan semua komponen sekaligus.

@include foundation-everything;

Berikut ini adalah daftar komponen yang diimpor ketika Anda menulis kode di atas dalam file scss Anda. Komponen yang tidak perlu bisa dikomentari. Anda dapat melihat baris kode di bawah ini dalam file 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....

File Pengaturan

File pengaturan disertakan dalam seluruh proyek yayasan yaitu _settings.scss . Jika Anda menggunakan Yeti Launch atau CLI untuk membuat proyek Foundation for Sites, Anda dapat menemukan file pengaturan di bawah src / assets / scss /.

Kami telah menginstal Foundation menggunakan npm, maka Anda dapat menemukan file pengaturan yang disertakan di bawah nama_folder / node_modules / foundation-sites / scss / settings / _settings.scss . Anda dapat memindahkan ini ke file Sass Anda sendiri untuk dikerjakan.

Anda dapat menulis CSS Anda sendiri, jika Anda tidak dapat menyesuaikan dengan variabel. Berikut adalah satu set variabel, yang mengubah gaya default tombol.

$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;

Pada bab ini, kita akan mempelajari tentang JavaScript . Mudah mengatur JavaScript di Foundation; satu-satunya hal yang Anda butuhkan adalah jQuery.

Instalasi JavaScript

Anda dapat menggunakan download ZIP, manajer paket, atau CDN untuk mendapatkan file JavaScript Foundation. Dalam kode Anda, Anda dapat memberikan tautan ke jQuery dan Foundation sebagai tag <script>, ditempatkan sebelum penutup <body> dan periksa apakah Foundation dimuat setelah jQuery. Untuk informasi lebih lanjut klik di sini .

Struktur File

Saat Anda menginstal Foundation melalui baris perintah, plugin Foundation akan diunduh sebagai file individual seperti foundation.tabs.js , foundation.dropdownMenu.js , foundation.slider.js , dan seterusnya. Semua file ini digabungkan menjadi foundation.js , yang menyediakan semua plugin dalam satu waktu. Jika Anda ingin menggunakan beberapa plugin, pertama foundation.core.js harus dimuat.

Misalnya -

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

Plugin tertentu mungkin memerlukan pustaka utilitas tertentu, yang disertakan dengan penginstalan Foundation. Anda dapat mempelajari secara detail tentang persyaratan plugin tertentu di bab berikutnya JavaScript Utilities .

Memuat file individual menciptakan overhead jaringan, khususnya untuk pengguna seluler. Untuk memuat halaman lebih cepat, disarankan menggunakan grunt atau gulp .

Memulai

Fungsi foundation () digunakan untuk menginisialisasi semua plugin Foundation pada satu waktu.

Misalnya -

(document).foundation();

Menggunakan Plugin

Menggunakan atribut data, plugin terhubung ke elemen HTML karena cocok dengan nama plugin. Sebuah elemen HTML hanya dapat memiliki satu plugin dalam satu waktu, meskipun sebagian besar plugin dapat ditempatkan di dalam plugin lain. Misalnya, link tooltip dibuat dengan menambahkan data-tooltip . Untuk informasi lebih lanjut klik di sini .

Mengonfigurasi Plugin

Plugin dapat disesuaikan dengan menggunakan pengaturan konfigurasinya. Misalnya, Anda dapat mengatur kecepatan akordeon meluncur ke atas dan ke bawah. Pengaturan plugin dapat diubah secara global menggunakan pluginDEFAULTSProperti. Untuk informasi lebih lanjut klik di sini .

Menambahkan Plugin setelah Pemuatan Halaman

Saat HTML baru ditambahkan ke DOM, salah satu plugin pada elemen tersebut tidak akan diinisialisasi secara default. Anda dapat memeriksa plugin baru dengan memanggil kembali fungsi .foundation () .

Misalnya -

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

Penggunaan Terprogram

Dalam JavaScript, plugin dapat dibuat secara terprogram dan setiap plugin adalah kelas objek Foundation global , dengan konstruktor yang mengambil dua parameter seperti elemen dan objek.

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

Mayoritas plugin disediakan dengan API publik, yang memungkinkan Anda memanipulasinya melalui JavaScript. Anda dapat melihat-lihat dokumentasi plugin untuk mempelajari fungsi yang tersedia dan metode dapat dipanggil dengan mudah.

Misalnya -

$('.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.

Anda diizinkan untuk memilih selektor jQuery dan jika selektor memiliki banyak plugin, maka mereka semua akan memiliki metode yang dipilih identik yang disebut.
Argumen bisa diteruskan seperti halnya meneruskan argumen ke JavaScript.
Metode yang diawali dengan garis bawah (_) dianggap sebagai bagian dari API internal, artinya, tanpa peringatan, metode tersebut dapat rusak, berubah, atau bahkan menghilang.

Acara

Setiap kali fungsi tertentu selesai, DOM memicu suatu peristiwa. Misalnya, setiap kali tab diubah, itu dapat didengarkan dan membuat tanggapan kembali padanya. Setiap plugin dapat memicu daftar kejadian, yang akan didokumentasikan dalam dokumentasi plugin. Di Foundation 6, plugin callback dihapus dan harus diambil sebagai pendengar acara.

Misalnya -

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

Foundation mencakup utilitas JavaScript yang digunakan untuk menambahkan fungsionalitas umum. Ini sangat membantu dan mudah digunakan. Pustaka utilitas JavaScript ini dapat ditemukan di folder Your_folder_name / node_modules / foundation-sites / js

Kotak

Perpustakaan Foundation.Box terdiri dari beberapa metode.
Itu js/foundation.util.box.js adalah nama file skrip, yang dapat disertakan saat menulis kode.
Objek jQuery atau elemen JavaScript biasa dapat diteruskan ke kedua metode.

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

Objek yang dikembalikan menentukan dimensi elemen sebagai -

{
   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: ...
   }
}

Fungsi ImNotTouchingYou disertakan.
Berdasarkan elemen yang diteruskan, nilai Boolean dikembalikan, yang merupakan konflik dengan edge jendela atau opsional atau elemen induk.
Dua opsi yang ditentukan dalam baris yang diberikan di bawah ini yaitu leftAndRightOnly, topAndBottomOnly digunakan untuk mengidentifikasi tabrakan hanya pada satu sumbu.

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

Papan ketik

Ada banyak metode dalam Foundation.Keyboard , yang membantu mempermudah interaksi acara keyboard.
Itu js/foundation.util.keyboard.js adalah nama file skrip, yang dapat disertakan saat menulis kode.
Objek Foundation.Keyboard.keys terdiri dari pasangan kunci / nilai, kunci mana yang lebih sering digunakan dalam kerangka kerja.
Setiap kali tombol ditekan maka Foundation.Keyboard.parseKey dipanggil untuk mendapatkan string. Ini membantu mengelola input keyboard Anda sendiri.

Kode berikut digunakan untuk menemukan semua elemen yang dapat difokuskan dalam elemen $ yang diberikan . Oleh karena itu, Anda tidak perlu menulis fungsi dan pemilih apa pun.

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

Fungsi handleKey adalah fungsi utama dari perpustakaan ini.
Metode ini digunakan untuk menangani acara keyboard; itu dapat dipanggil setiap kali ada plugin yang terdaftar dengan utilitas.

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

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

Fungsi Foundation.Keyboard.register dapat dipanggil saat Anda ingin menggunakan key binding Anda sendiri.

MediaQuery

Pustaka MediaQuery adalah tulang punggung dari semua teknik CSS responsif.
Itu js/foundation.util.mediaQuery.js adalah nama file skrip, yang dapat disertakan saat menulis kode.
The Foundation.MediaQuery.atLeast ( 'besar') digunakan untuk memeriksa apakah layar setidaknya selebar breakpoint.
The Foundation.MediaQuery.get ( 'menengah') mendapat permintaan media breakpoint.
The Foundation.MediaQuery.queries adalah sebuah array dari pertanyaan media, Yayasan menggunakan untuk breakpoints.
The Foundation.MediaQuery.current adalah string ukuran breakpoint saat ini.

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

Kode berikut menyiarkan perubahan kueri media di jendela.

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

Gerak & Pindah

JavaScript Foundation.Motion mirip dengan library Motion UI, yang disertakan dalam Foundation 6. Ini digunakan untuk membuat transisi dan animasi CSS kustom.
Itu js/foundation.util.motion.js adalah nama file skrip, yang dapat disertakan saat menulis kode.
Foundation.Move digunakan untuk membuat animasi yang didukung CSS3 menjadi sederhana dan elegan.
requestAnimationFrame();metode memberitahu browser untuk melakukan animasi; itu meminta agar fungsi animasi Anda dipanggil sebelum browser melakukan pengecatan ulang berikutnya.

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

Saat animasi selesai, finish.zf.animate diaktifkan.

Timer & Gambar Dimuat

Orbit menggunakan keduanya, fungsi pengatur waktu dan gambar yang dimuat. Itujs/foundation.util.timerAndImageLoader.js adalah nama file skrip, yang dapat disertakan saat menulis kode.

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

Metode pemuatan gambar menjalankan fungsi panggilan balik dalam koleksi jQuery Anda saat gambar dimuat sepenuhnya.

Foundation.onImagesLoaded($images, callback);

Menyentuh

Metode ini digunakan untuk menambahkan kejadian seret semu dan menggesek ke elemen.
Itu js/foundation.util.touch.js adalah nama file skrip, yang dapat disertakan saat menulis kode.
The addTouch metode yang digunakan untuk elemen mengikat menyentuh peristiwa di plugin Slider untuk perangkat mobile.
The spotSwipe metode mengikat unsur-unsur peristiwa menggesek di plugin Orbit untuk perangkat mobile.

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

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

Pemicu

Ini memicu acara tertentu untuk elemen yang dipilih.
Itu js/foundation.util.triggers.js adalah nama file skrip, yang dapat disertakan saat menulis kode.
Pemicu digunakan di banyak plugin Foundation.

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

Dua metode berikut digunakan dalam pustaka ini yaitu mengubah ukuran dan menggulir.

Metode resize () memicu peristiwa pengubahan ukuran ketika peristiwa pengubahan ukuran terjadi.
Metode scroll () memicu peristiwa scroll saat peristiwa scroll terjadi.

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

Miscellaneous

Foundation berisi beberapa fitur di pustaka inti, yang digunakan di banyak tempat.
Itu js/foundation.core.js adalah nama file skrip, yang dapat disertakan saat menulis kode.
Foundation.GetYoDigits ([number, namespace]) mengembalikan uid base-36 acak dengan namespacing. Ini mengembalikan panjang string 6 karakter secara default.
Foundation.getFnName (fn) mengembalikan nama fungsi JavaScript.
Foundation.transitionend terjadi ketika transisi CSS selesai.

Kueri media adalah modul CSS3 yang menyertakan fitur media seperti lebar, tinggi, warna, dan menampilkan konten sesuai resolusi layar yang ditentukan.

Foundation menggunakan kueri media berikut ini untuk membuat rentang rincian -

Small - Digunakan untuk layar apa pun.
Medium - Digunakan untuk layar 640 piksel dan lebih lebar.
Large - Digunakan untuk layar 1024 piksel dan lebih lebar.

Anda dapat mengubah ukuran layar dengan menggunakan kelas breakpoint . Misalnya, Anda dapat menggunakan kelas .small-6 untuk layar berukuran kecil dan kelas .medium-4 untuk layar berukuran sedang seperti yang ditunjukkan pada cuplikan kode berikut -

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

Mengubah Breakpoints

Anda dapat mengubah breakpoint, jika aplikasi Anda menggunakan versi SASS Foundation. Anda dapat menempatkan nama breakpoints di bawah variabel $ breakpoints di file pengaturan seperti yang ditunjukkan di bawah ini -

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

Anda dapat mengubah kelas breakpoints di file pengaturan dengan memodifikasi variabel $ breakpoint-class . Jika Anda ingin menggunakan kelas .large di CSS, tambahkan ke akhir daftar seperti yang ditunjukkan di bawah ini -

$breakpoints-classes: (small medium large);

Misalkan, Anda ingin menggunakan kelas .xlarge di CSS, dan kemudian menambahkan kelas ini ke akhir daftar seperti yang ditunjukkan di bawah ini -

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

KELANCANGAN

The Breakpoint Mixin

Anda bisa menulis kueri media dengan menggunakan breakpoint () mixin bersama dengan @include .
Gunakan kata kunci turun atau hanya bersama dengan nilai breakpoint untuk mengubah perilaku kueri media seperti yang ditunjukkan dalam format kode berikut -

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

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

Anda dapat menggunakan tiga kueri media potret , lanskap , dan retina untuk orientasi perangkat atau kerapatan piksel dan bukan kueri media berbasis lebar.

Fungsi Breakpoint

Anda dapat menggunakan fungsionalitas mixin breakpoint () dengan menggunakan fungsi internal.
The breakpoint () fungsi dapat digunakan langsung untuk menulis pertanyaan media yang sendiri -

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

JavaScript

Bekerja dengan Kueri Media

Foundation JavaScript menyediakan fungsi MediaQuery.current untuk mengakses nama breakpoint saat ini pada objek Foundation.MediaQuery seperti yang ditentukan di bawah ini -

Foundation.MediaQuery.current

Fungsi MediaQuery.current menampilkan kecil , sedang , besar sebagai nama breakpoint saat ini.
Anda bisa mendapatkan media query dari breakpoint menggunakan fungsi MediaQuery.get seperti yang ditunjukkan di bawah ini -

Foundation.MediaQuery.get('small')

Referensi Sass

Variabel

Tabel berikut mencantumkan variabel SASS, yang dapat digunakan untuk menyesuaikan gaya default komponen -

Sr.No.	Nama & Deskripsi	Tipe	Nilai Default
1	$breakpoints Ini adalah nama breakpoint yang bisa digunakan untuk menulis kueri media dengan menggunakan mixin breakpoint () .	Peta	kecil: 0px medium: 640px besar: 1024 piksel xlarge: 1200px xxlarge: 1440px
2	$breakpoint-classes Anda dapat mengubah output kelas CSS dengan mengubah variabel $ breakpoint-class .	Daftar	kecil sedang besar

Mixins

Mixins membuat sekelompok gaya untuk membangun struktur kelas CSS Anda untuk komponen Foundation.

BREAKPOINT

Ini menggunakan breakpoint () mixin untuk membuat kueri media dan menyertakan aktivitas berikut -

Jika string dilewatkan, mixin mencari string di peta $ breakpoints dan membuat kueri media.
Jika Anda menggunakan nilai piksel, maka konversikan ke nilai em menggunakan $ rem-base .
Jika nilai rem dilewatkan, maka unitnya berubah menjadi em.
Jika Anda menggunakan nilai em, maka itu dapat digunakan apa adanya.

Tabel berikut menentukan parameter yang digunakan oleh breakpoint -

Sr.No.	Nama & Deskripsi	Tipe	Nilai Default
1	$value Ini memproses nilai dengan menggunakan nilai breakpoint name, px, rem atau em.	kata kunci atau angka	Tidak ada

Fungsi

BREAKPOINT

Ini menggunakan breakpoint () mixin untuk membuat kueri media dengan nilai masukan yang cocok.

Tabel berikut menetapkan nilai input yang mungkin digunakan oleh breakpoint -

Sr.No.	Nama & Deskripsi	Tipe	Nilai Default
1	$val Ini memproses nilai dengan menggunakan nilai breakpoint name, px, rem atau em.	kata kunci atau angka	kecil

Referensi JavaScript

Fungsi

Ada dua jenis fungsi -

.atLeast- Ini memeriksa layar. Harus lebar setidaknya sebagai breakpoint.
.get - Ini digunakan untuk mendapatkan kueri media dari breakpoint.

Tabel berikut menentukan parameter yang digunakan oleh fungsi di atas -

Sr.No.	Nama & Deskripsi	Tipe
1	size Ia memeriksa dan mendapatkan nama breakpoint untuk masing-masing fungsi yang ditentukan.	Tali

Deskripsi

Sistem grid pondasi menskalakan hingga 12 kolom melalui halaman. Sistem kisi digunakan untuk membuat tata letak halaman melalui serangkaian baris dan kolom yang menampung konten Anda.

Opsi Kisi

Tabel berikut menjelaskan secara singkat tentang cara kerja sistem grid Foundation di beberapa perangkat.

	Ponsel perangkat kecil (<640px)	Tablet perangkat menengah (> = 640px)	Perangkat besar Laptop & Desktop (> = 1200px)
Perilaku grid	Horisontal setiap saat	Diciutkan untuk memulai, horizontal di atas breakpoint	Diciutkan untuk memulai, horizontal di atas breakpoint
Awalan kelas	.kecil-*	.medium-*	.besar-*
Jumlah kolom	12	12	12
Nestable	Iya	Iya	Iya
Offset	Iya	Iya	Iya
Urutan kolom	Iya	Iya	Iya

Struktur Dasar Grid Foundation

Berikut ini adalah struktur dasar dari grid Foundation -

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

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

Pertama, buat kelas baris untuk membuat grup kolom horizontal.
Konten harus ditempatkan dalam kolom, dan hanya kolom yang boleh menjadi turunan langsung dari baris.
Kolom kisi dibuat dengan menentukan jumlah dua belas kolom yang tersedia yang ingin Anda bentangkan. Misalnya, untuk empat kolom yang sama kita akan menggunakan .large-3

Berikut ini adalah tiga kelas yang digunakan dalam sistem grid Foundation -

Sr.No.	Kelas & Deskripsi Grid Dasar
1	Besar Kelas besar- * digunakan untuk perangkat besar.
2	Medium Kelas menengah * digunakan untuk perangkat medium.
3	Kecil small- * class digunakan untuk perangkat kecil.

Grid Lanjutan

Berikut ini adalah format kisi tingkat lanjut yang digunakan di Foundation.

Sr.No.	Kisi & Deskripsi Lanjutan
1	Kolom / Baris Gabungan Kelas kolom dan baris digunakan pada elemen yang sama untuk mendapatkan kolom lebar penuh untuk digunakan sebagai wadah.
2	Bersarang Kita bisa menyarangkan kolom grid di dalam kolom lain.
3	Offset Dengan menggunakan kelas large-offset- * atau small-offset- * , Anda dapat memindahkan kolom ke kanan.
4	Baris Tidak Lengkap Fondasi mengapung elemen terakhir secara otomatis ke kanan ketika baris tidak menyertakan kolom hingga 12.
5	Ciutkan / Batalkan Penciutan Baris Menggunakan ukuran kueri media, kelas penciutan dan pembatalan penciutan disertakan ke elemen baris untuk menampilkan paddings.
6	Kolom Tengah Dengan memasukkan kelas kecil-berpusat di kolom, Anda dapat membuat kolom di tengah.
7	Pengurutan Sumber Kelas pengurutan sumber digunakan untuk menggeser kolom antara breakpoint.
8	Blokir Grid Block-grid digunakan untuk membagi konten.

Membangun Semantik

Menggunakan kumpulan mixin SASS, CSS kisi dibuat yang digunakan untuk membangun kisi semantik Anda sendiri. Untuk informasi lebih lanjut klik di sini

Referensi SASS

Berikut ini adalah referensi SASS untuk grid yang digunakan di Foundation.

Sr.No.	Kisi & Deskripsi Dasar
1	Variabel Menggunakan variabel sass kita dapat memodifikasi gaya default dari komponen ini.
2	Mixins Output CSS terakhir dibuat menggunakan mixin.

Kisi bergantung pada properti tampilan fleksibel . Ini terdiri dari sejumlah fitur yang tersedia dengan flexbox, seperti penumpukan otomatis, urutan sumber, perataan vertikal, dan perataan horizontal.

Dukungan Browser

Kisi fleksibel didukung di Chrome, Firefox, Internet Explorer 10+, Safari 6+, Android 4+, dan iOS 7+.

Tabel berikut menjelaskan fitur Flex Grid beserta deskripsinya.

Sr.No.	Fitur & Deskripsi
1	Pengimporan Ini termasuk campuran ekspor untuk jaringan fleksibel untuk menggunakan CSS default.
2	Dasar Struktur grid Flex mirip dengan grid float.
3	Ukuran Lanjutan Jika kelas ukuran tidak disertakan dalam kolom, maka kelas itu mengembang sendiri dan mengisi ruang yang tersisa di kolom.
4	Penyesuaian Responsif Jika ukuran kolom yang eksplisit dalam flex grid tidak diberikan, maka kolom tersebut akan menyesuaikan ukuran secara otomatis
5	Penjajaran Kolom Kolom grid fleksibel dapat disejajarkan dengan sumbu horizontal atau vertikal di baris induk.
6	Pengurutan Sumber Pengurutan sumber membantu mengatur ulang kolom dalam ukuran layar yang berbeda.
7	Referensi Sass SASS (Syntactically Awesome Stylesheet) adalah pra-prosesor CSS yang membantu mengurangi pengulangan dengan CSS dan menghemat waktu.

Dalam bab ini, kita akan mempelajari tentang Forms. Foundation menyediakan sistem tata letak yang kuat, mudah, dan serbaguna untuk Formulir , yang menggabungkan gaya formulir dan dukungan kisi.

Tabel berikut mencantumkan elemen formulir yang digunakan di Foundation.

Sr.No.	Elemen formulir & Deskripsi
1	Bentuk Dasar Pembuatan formulir mudah dan sangat fleksibel, yang dibangun dengan kombinasi elemen formulir standar dan sistem kisi yang kuat.
2	Teks Bantuan Ini digunakan untuk memberi tahu pengguna tentang tujuan elemen dan biasanya ditempatkan di bawah bidang.
3	Penempatan Label Anda dapat memposisikan label Anda di kiri atau kanan input Anda.
4	Label dan Tombol Inline Teks atau kontrol tambahan dapat dipasang di kiri / kanan kolom input.
5	Kontrol Kustom Kontrol khusus seperti pemilih tanggal, sakelar, atau penggeser memerlukan perhatian untuk mengaksesnya.
6	Referensi SASS Anda dapat mengubah gaya komponen dengan menggunakan Referensi SASS.

Deskripsi

Foundation menggunakan kelas visibilitas untuk menampilkan atau menyembunyikan elemen berdasarkan orientasi perangkat (potret dan lanskap) atau ukuran layar (layar kecil, sedang, besar, atau xlarge).
Ini memungkinkan pengguna untuk menggunakan elemen berdasarkan lingkungan penelusuran.

Tabel berikut mencantumkan kelas visibilitas Foundation, yang mengontrol elemen berdasarkan lingkungan penelusuran mereka -

Sr.No.	Kelas & Deskripsi Visibilitas
1	Tunjukkan berdasarkan Ukuran Layar Ini menunjukkan elemen berdasarkan perangkat dengan menggunakan kelas .show .
2	Sembunyikan berdasarkan Ukuran Layar Ini menyembunyikan elemen berdasarkan perangkat dengan menggunakan kelas .hide .

Foundation mendukung beberapa kelas tempat Anda bisa menyembunyikan konten dengan menggunakan kelas .hide dan .invisible dan tidak menampilkan apa pun di halaman.

Deteksi Orientasi

Perangkat dapat menentukan orientasi yang berbeda dengan menggunakan fungsionalitas lanskap dan potret . Perangkat genggam seperti ponsel menentukan orientasi yang berbeda saat Anda memutarnya. Untuk desktop, orientasinya selalu lanskap.

Aksesibilitas

Tabel berikut mencantumkan teknik aksesibilitas untuk pembaca layar yang menyembunyikan konten sekaligus membuatnya dapat dibaca oleh pembaca layar -

Sr.No.	Kelas & Deskripsi Aksesibilitas
1	Tampilkan untuk Pembaca Layar Ini menggunakan kelas show-for-sr untuk menyembunyikan konten sekaligus mencegah pembaca layar membacanya.
2	Sembunyikan untuk Pembaca Layar Ini menggunakan atribut aria-hidden yang membuat teks terlihat tetapi tidak bisa dibaca oleh pembaca layar.
3	Membuat Tautan Lewati Pembaca layar akan membuat tautan lewati untuk mendapatkan navigasi ke konten situs Anda.

Referensi Sass

Foundation menggunakan mixin berikut untuk menampilkan keluaran CSS, yang memungkinkan membangun struktur kelas sendiri untuk komponen Anda -

Sr.No.	Mixin & Deskripsi	Parameter	Tipe
1	show-for Secara default, ini menyembunyikan elemen dan menampilkannya di atas ukuran layar tertentu.	$ size	Kata kunci
2	show-for-only Secara default, ini menyembunyikan elemen dan menampilkannya dalam breakpoint.	$ size	Kata kunci
3	hide-for Secara default, ini menunjukkan elemen dan menyembunyikannya di atas ukuran layar tertentu.	$ size	Kata kunci
4	hide-for-only Secara default, ini menunjukkan elemen dan menyembunyikannya di atas ukuran layar tertentu.	$ size	Kata kunci

Nilai default dari semua mixin ini akan disetel ke none .

Deskripsi

Tipografi di Foundation menentukan judul, paragraf, daftar, dan elemen sebaris lainnya yang membuat gaya default yang menarik dan sederhana untuk elemen.

Tabel berikut mencantumkan berbagai tipe tipografi yang digunakan di Foundation -

Sr.No.	Tipografi & Deskripsi
1	Paragraf Paragraf adalah sekelompok kalimat yang ditentukan dengan ukuran font berbeda, kata-kata yang disorot, tinggi baris, dll.
2	Header Ini mendefinisikan judul HTML dari h1 hingga h6.
3	Tautan Ini membuat hyperlink yang membuka dokumen lain saat Anda mengklik teks atau gambar.
4	Jangka pembagi garis Ini digunakan untuk memberi jeda antar bagian dengan menggunakan tag <hr>.
5	Daftar Berurutan dan Tak Berurutan Foundation mendukung daftar memerintahkan, daftar tidak berurutan untuk daftar hal-hal.
6	Daftar Definisi Daftar Definisi digunakan untuk menampilkan pasangan nilai nama.
7	Blockquotes Ini mewakili blok teks, yang ukurannya jauh lebih besar dari biasanya.
8	Singkatan dan Kode Singkatan mendefinisikan istilah singkat dari kata atau frase dan kode mewakili sepotong kode.
9	Penekanan tombol Ini digunakan untuk melakukan fungsi tertentu.
10	Aksesibilitas Foundation memberikan beberapa pedoman untuk mengakses konten halaman.

Referensi Sass

Anda dapat mengubah gaya komponen dengan menggunakan variabel SASS berikut seperti yang tercantum dalam tabel.

Diberikan di bawah ini adalah gaya komponen dengan menggunakan variabel SASS berikut.

Sr.No.	Nama & Deskripsi	Tipe	Nilai Default
1	$header-font-family Menentukan keluarga font untuk elemen header.	String atau List	$ body-font-family
2	$header-font-weight Menentukan berat font dari header.	Tali	$ global-weight-normal
3	$header-font-style Menyediakan gaya font header.	Tali	normal
4	$font-family-monospace Tumpukan font digunakan untuk elemen yang menggunakan tipe spasi tunggal, seperti contoh kode.	String atau List	Consolas, 'Liberation Mono', Courier, monospace
5	$header-sizes Mendefinisikan ukuran layar dari heading dan setiap kunci adalah breakpoint, dan setiap nilai adalah peta ukuran heading.	Peta	`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 Memberikan warna header.	Warna	mewarisi
7	$header-lineheight Mendefinisikan tinggi baris dari header.	Jumlah	1.4
8	$header-margin-bottom Memberikan margin bawah header.	Jumlah	0,5 rem
9	$header-text-rendering Mendefinisikan metode untuk rendering teks.	Tali	optimalkanLegibilitas
10	$small-font-size Menentukan ukuran font untuk elemen <small>.	Jumlah	80%
11	$paragraph-margin-bottom Menentukan margin bawah paragraf.	Jumlah	1rem
12	$paragraph-text-rendering Metode untuk teks rendering paragraf.	Tali	optimalkanLegibilitas
13	$code-color Memberikan warna teks ke contoh kode.	Warna	$ hitam
14	$code-font-family Menyediakan keluarga font untuk contoh kode.	String atau List	$ font-family-monospace
15	$code-border Menentukan perbatasan di sekitar kode.	Daftar	1px solid $ medium-grey
16	$code-padding Menentukan padding di sekitar teks.	Nomor atau Daftar	rem-calc (2 5 1)
17	$anchor-color Warna default untuk link.	Warna	$ warna primer
18	$anchor-color-hover Menentukan warna default untuk link saat mengarahkan kursor.	Warna	scale-color ($ anchor-color, $ lightness: -14%)
19	$anchor-text-decoration Dekorasi teks default untuk tautan.	Tali	tidak ada
20	$anchor-text-decoration-hover Dekorasi teks default untuk tautan saat mengarahkan kursor.	Tali	tidak ada
21	$hr-width Mendefinisikan lebar maksimum pembatas.	Jumlah	$ global-width
22	$hr-border Menentukan batas default untuk pembatas.	Daftar	1px solid $ medium-grey
23	$hr-margin Margin default untuk pembagi.	Nomor atau Daftar	rem-calc (20) otomatis
24	$list-lineheight Ini menentukan tinggi baris untuk item dalam daftar.	Jumlah	$ paragraph-lineheight
25	$list-style-type Menyediakan tipe poin untuk daftar tidak berurutan.	Tali	cakram
26	$list-style-position Ini mendefinisikan posisi untuk peluru pada daftar yang tidak diurutkan.	Tali	di luar
27	$list-side-margin Mendefinisikan margin sisi kiri (atau kanan).	Jumlah	1,25 rem
28	$defnlist-term-weight Memberikan bobot font untuk elemen <dt>.	Tali	$ global-weight-bold
29	$defnlist-term-margin-bottom Menyediakan jarak antara elemen <dt> dan <dd>.	Jumlah	0,3 rem
30	$blockquote-color Ini menerapkan warna teks dari elemen <blockquote>.	Warna	$ abu-abu tua
31	$blockquote-padding Menyediakan padding di dalam elemen <blockquote>.	Nomor atau Daftar	rem-calc (9 20 0 19)
32	$blockquote-border Ini memberi batas sisi untuk elemen <blockquote>.	Daftar	1px solid $ medium-grey
33	$cite-font-size Mendefinisikan ukuran font untuk elemen <cite>.	Jumlah	rem-calc (13)
34	$cite-color Memberikan warna teks untuk `<cite>`elemen.	Warna	$ abu-abu tua
35	$keystroke-font Mendefinisikan keluarga font untuk elemen <kbd>.	String atau List	$ font-family-monospace
36	$keystroke-color Mendefinisikan warna teks untuk elemen <kbd>.	Warna	$ hitam
37	$keystroke-background Memberikan warna latar belakang untuk elemen <kbd>.	Warna	$ abu-abu terang
38	$keystroke-padding Menentukan padding untuk elemen <kbd>.	Nomor atau Daftar	rem-calc (2 4 0)
39	$keystroke-radius Menampilkan radius perbatasan untuk elemen <kbd>.	Nomor atau Daftar	$ radius global
40	$abbr-underline Menyediakan gaya batas bawah untuk elemen <abbr>.	Daftar	1px putus-putus $ hitam

Dalam bab ini, kita akan mempelajari tentang Typography Helpers. Pembantu tipografi digunakan untuk memformat teks Anda dengan cara yang relevan secara semantik. Kelas pembantu di Foundation memungkinkan Anda merancang beberapa gaya tipografi lebih cepat.

Tabel berikut mencantumkan Tipografi Helpers , yang digunakan di Foundation.

Sr.No.	Pembantu & Deskripsi Tipografi
1	Perataan Teks Ini membantu dalam mengubah perataan teks elemen seperti kiri , kanan , tengah dan membenarkan .
2	Subheader Subheader dapat ditambahkan ke elemen header apa pun dengan menggunakan kelas .subheader .
3	Paragraf Timbal Ini adalah blok teks yang jauh lebih besar dibandingkan dengan teks biasa, yang dapat digunakan untuk iklan atau teks deskriptif lainnya.
4	Daftar Tidak Berbutir Secara default, <ul> adalah daftar berpoin di Foundation. Untuk menghapus peluru, Anda bisa menggunakan kelas .no-bullet .
5	Statistik Setiap kali Anda berurusan dengan dasbor, Anda perlu menyoroti beberapa nomor penting. Anda dapat mencapai ini dengan menggunakan kelas .stat .

Referensi Sass

Variabel

Tabel berikut mencantumkan variabel SASS dalam file pengaturan proyek yang membuat gaya default komponen dapat disesuaikan.

Sr.No.	Nama & Deskripsi	Tipe	Nilai Default
1	$lead-font-size Ukuran font untuk paragraf utama secara default.	Jumlah	$ global-font-size * 1.25
2	$lead-lineheight Tinggi baris untuk paragraf awal secara default.	Tali	1.6
3	$subheader-lineheight Tinggi baris default subheader.	Jumlah	1.4
4	$subheader-color Warna font default subheader.	Warna	$ abu-abu tua
5	$subheader-font-weight Berat font default subheader.	Tali	$ global-weight-normal
6	$subheader-margin-top Margin atas default subheader.	Jumlah	0,2 rem
7	$subheader-margin-bottom Margin bawah default subheader.	Jumlah	0,5 rem
8	$stat-font-size Ukuran font default nomor statis	Jumlah	2.5rem

Dalam bab ini, kita akan mempelajari tentang basic controls. Foundation menyediakan kontrol dasar seperti tombol , slider , dan sakelar .

Tabel berikut mencantumkan kontrol dasar yang digunakan di Foundation.

Sr.No.	Kontrol & Deskripsi dasar
1	Tombol Fondasi mendukung banyak gaya tombol yang dapat disesuaikan sesuai kebutuhan Anda.
2	Grup Tombol Mereka adalah wadah untuk elemen tindakan yang sesuai. Ini berfungsi dengan baik ketika sekelompok tindakan ditampilkan di bilah.
3	Tombol Tutup Tombol tutup digunakan ketika Anda ingin sesuatu hilang dengan mengkliknya.
4	Penggeser Penggeser sangat berguna untuk menetapkan nilai tertentu di dalam rentang.
5	Beralih Ini memungkinkan Anda untuk mematikan atau menghidupkan sakelar dengan mengkliknya.

Deskripsi

Foundation menyediakan beberapa opsi berbeda untuk menata elemen navigasi. Banyak pola navigasi sederhana yang digabungkan; dapat diintegrasikan dalam bentuk solusi navigasi responsif yang tangguh.

Tabel berikut menjelaskan jenis navigasi yang berbeda beserta penjelasannya.

Sr.No.	Jenis & Deskripsi
1	Ringkasan Navigasi Navigasi berisi tautan ke bagian lain dan terdiri dari banyak pola navigasi.
2	Tidak bisa Menu digunakan untuk membangun banyak komponen navigasi.
3	Menu drop down Plugin menu dropdown digunakan untuk membuat submenu di bawah menu utama.
4	Menu Perincian Plugin menu drilldown digunakan untuk membuat submenu di menu utama dalam format slider.
5	Menu Akordeon Ini menampilkan menu yang dapat dilipat dengan efek akordeon dan memberikan dukungan untuk penciutan otomatis menggunakan plugin Menu Akordeon.
6	Bar Atas Bilah atas membantu menampilkan bilah navigasi yang kompleks dengan mudah pada berbagai ukuran layar.
7	Navigasi Responsif Plugin menu responsif mengalokasikan menu dalam berbagai ukuran layar.
8	Magellan Magellan membuat navigasi, yang berada dalam posisi tetap; secara otomatis melacak daftar navigasi pada halaman, berdasarkan posisi gulir.
9	Penomoran halaman Pagination, daftar tidak berurutan ditangani oleh Bootstrap seperti banyak elemen antarmuka lainnya.
10	Remah roti Breadcrumb menentukan lokasi saat ini untuk situs dalam hierarki navigasi.

Wadah fondasi digunakan untuk membuat lebar penuh browser setiap saat untuk situs dan membungkus konten situs.

Tabel berikut mencantumkan beberapa wadah yang digunakan di Foundation -

Sr.No.	Wadah & Deskripsi
1	Akordeon Akordeon berisi tab vertikal yang digunakan di situs web untuk memperluas dan menciutkan data dalam jumlah besar.
2	Memanggil Ini menempatkan konten di dalam komponen.
3	Panel tarik-turun Ini menampilkan konten ketika Anda mengklik tombol.
4	Objek Media Ia menambahkan objek media seperti gambar, video, komentar blog, dll bersama dengan beberapa konten.
5	Di luar kanvas Ini memicu menu navigasi dari area yang terlihat dan menampilkan konten utama.
6	Reveal-Modal Foundation memungkinkan membuat dialog modal atau jendela pop-up menggunakan kelas mengungkapkan .
7	Tabel Foundation menyediakan tata letak untuk menampilkan data dalam format tabel.
8	Tab Ini adalah tab berbasis navigasi yang menampilkan konten ke dalam panel yang berbeda tanpa meninggalkan halaman.

Pada bab ini, kita akan mempelajari tentang media di Foundation. Foundation terdiri dari beberapa jenis media seperti Flex Video , Label , orbit , progress bar, dan tooltip . Tabel berikut mencantumkan semua jenis media.

Sr.No.	Jenis & Deskripsi Media
1	Video Flex Ini digunakan untuk menyematkan video dalam wadah video fleksibel untuk menjaga rasio aspek yang tepat terlepas dari ukuran layarnya.
2	Label Ini dapat digunakan untuk gaya sebaris yang dapat dimasukkan ke dalam isi untuk memanggil bagian tertentu atau untuk melampirkan metadata.
3	Orbit Ini adalah slider yang kuat dan responsif, memungkinkan pengguna untuk menggesek pada perangkat layar sentuh.
4	Bilah Kemajuan Ini digunakan untuk menampilkan kemajuan Anda dan dapat ditambahkan ke tata letak Anda.
5	Tooltips Ini digunakan untuk menampilkan informasi tambahan untuk istilah atau tindakan pada halaman.

Deskripsi

Plugin adalah perangkat lunak yang menyediakan fungsionalitas tambahan yang awalnya tidak dilengkapi dengan fungsionalitas inti Foundation. Plugin Foundation dapat diunggah untuk memperluas fungsionalitas situs. Plugin digunakan untuk mempermudah pekerjaan Anda.

Tabel berikut menjelaskan berbagai jenis Plugin beserta penjelasannya.

Sr.No.	Jenis & Deskripsi
1	Tinggal Abide digunakan di pustaka validasi formulir HTML5 dengan API asli menggunakan atribut dan pola yang diperlukan.
2	Equalizer Equalizer adalah cara untuk membuat banyak konten dengan ketinggian yang sama di halaman Anda.
3	Interchange Ini digunakan untuk memuat konten responsif sesuai dengan perangkat pengguna.
4	Toggler Toggle digunakan untuk berpindah dari satu pengaturan ke pengaturan lainnya.
5	Lengket Plugin sticky digunakan untuk membuat konten atau gambar konstan di situs web.

Foundation menyediakan satu set fungsi utilitas SASS, yang dapat digunakan dengan util , color , selector , unit , value , dan banyak lagi.

Anda dapat mengimpor semua file utilitas sekaligus dengan menggunakan baris kode berikut -

@import 'util/util';

Anda juga dapat mengimpor file utilitas individu seperti yang ditunjukkan di bawah ini -

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

Referensi Sass

Anda dapat mengubah gaya komponen dengan menggunakan fungsi SASS berikut.

latar depan

Ini memberikan warna latar depan ke elemen berdasarkan warna latar belakang. Ini menggunakan format berikut untuk menetapkan berbagai jenis parameter -

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

Parameter di atas ditentukan dalam tabel berikut -

Sr.No.	Parameter & Deskripsi	Tipe	Nilai Default
1	$color Ini memeriksa kecerahan warna.	Warna	Tidak ada
2	$yes Jika warnanya terang, maka itu mengembalikan warna $ yes .	Warna	$ hitam
3	$no Jika warnanya gelap, maka mengembalikan $ no color.	Warna	$ putih
4	$threshold Ini mewakili ambang batas ringan.	Persentase	60%

skala pintar

Ini memberikan warna yang sesuai untuk elemen sesuai dengan kecerahannya. Ini menggunakan format berikut untuk menentukan warna yang sesuai -

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

Parameter yang diberikan di atas ditentukan dalam tabel berikut -

Sr.No.	Parameter & Deskripsi	Tipe	Nilai Default
1	$color Ini digunakan untuk mengatur skala warna.	Warna	Tidak ada
2	$scale Ini menentukan persentase untuk naik atau turun.	Persentase	5%
3	$threshold Ini mewakili ambang batas ringan.	Persentase	40%

masukan teks

Ini membuat pemilih saat menggunakan jenis input teks. Ini menggunakan format berikut untuk menentukan jenis input -

text-inputs($types)

Ini menggunakan parameter seperti yang ditentukan dalam tabel berikut -

Sr.No.	Parameter & Deskripsi	Tipe	Nilai Default
1	$types Ini menyediakan sejumlah jenis input teks untuk menghasilkan selektor.	Warna	-

strip-unit

Ini menghapus unit dari nilai dan hanya mengembalikan angkanya. Ini menggunakan format berikut untuk menghapus unit dari nilai -

strip-unit($num)

Ini menggunakan parameter seperti yang ditentukan dalam tabel berikut -

Sr.No.	Parameter & Deskripsi	Tipe	Nilai Default
1	$num Ini menentukan nomor saat Anda menghapus unit dari nilainya.	Warna	Tidak ada

rem-calc

Ini mengubah nilai piksel agar sesuai dengan nilai rem. Ini menggunakan format berikut untuk mengubah nilai piksel menjadi nilai rem -

rem-calc($values, $base)

Ini menggunakan parameter berikut seperti yang ditentukan dalam tabel -

Sr.No.	Parameter & Deskripsi	Tipe	Nilai Default
1	$values Ini mengubah nilai piksel menjadi nilai rem dan memisahkannya menggunakan spasi. Jika Anda mengonversi daftar yang dipisahkan koma, maka bungkus daftar dalam tanda kurung.	Nomor atau Daftar	Tidak ada
2	$base Ini memberikan nilai dasar saat mengubah piksel menjadi nilai rem. Jika ada nilai nol untuk basis, maka fungsi menggunakan variabel $ base-font-size sebagai basis.	Jumlah	batal

memiliki nilai

Ini menentukan nilai jika tidak salah. Nilai palsu termasuk null, none, 0 atau daftar kosong. Ini menggunakan format berikut untuk menentukan nilai -

has-value($val)

Ini menggunakan parameter seperti yang ditentukan dalam tabel berikut -

Sr.No.	Parameter & Deskripsi	Tipe	Nilai Default
1	$val Ini memeriksa nilai yang ditentukan.	Campuran	Tidak ada

get-side

Ini menentukan sisi nilai dan mendefinisikan nilai atas / kanan / bawah / kiri pada padding, margin dll. Ini menggunakan format berikut untuk menentukan sisi nilai -

has-value($val)

Ini menggunakan parameter berikut seperti yang ditentukan dalam tabel -

Sr.No.	Parameter & Deskripsi	Tipe	Nilai Default
1	$val Ini menentukan sisi nilai.	Daftar atau Nomor	Tidak ada
2	$side Ini menentukan di sisi mana nilai (atas / kanan / bawah / kiri) harus dikembalikan.	Kata kunci	Tidak ada

get-border-value

Ini menentukan nilai perbatasan suatu elemen. Ini menggunakan format berikut untuk menentukan nilai perbatasan -

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

Ini menggunakan parameter berikut seperti yang ditentukan dalam tabel -

Sr.No.	Parameter & Deskripsi	Tipe	Nilai Default
1	$val Ia menemukan nilai tertentu dari perbatasan.	Daftar	Tidak ada
2	$elem Ini digunakan untuk mengekstrak komponen perbatasan.	Kata kunci	Tidak ada

Pengimporan

Ini mengimpor konten mixin SASS yang ditempatkan di bawah file scss / util / _mixins.scss . Anda dapat mengimpor mixin SASS dengan menggunakan baris kode berikut -

@import 'util/mixins';

Referensi Sass

Anda dapat mengubah gaya komponen dengan menggunakan fungsi SASS.

Mixins

Anda dapat menggunakan mixin berikut untuk membuat struktur kelas CSS untuk komponen Anda.

CSS-TRIANGLE

Ini digunakan untuk membuat panah dropdown, pip dropdown dan banyak lagi. Ini menggunakan pemilih <i> & :: before </i> atau <i> & :: after </i> untuk memasang segitiga ke elemen yang ada. Ini menggunakan format berikut -

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

Ini menggunakan parameter berikut seperti yang ditentukan dalam tabel -

Sr.No.	Parameter & Deskripsi	Tipe	Nilai Default
1	$triangle-size Ini mendefinisikan lebar segitiga.	Jumlah	Tidak ada
2	$triangle-color Ini menentukan warna segitiga.	Warna	Tidak ada
3	$triangle-direction Ini menentukan arah segitiga seperti atas, kanan, bawah atau kiri.	Kata kunci	Tidak ada

HAMBURGER

Ini digunakan untuk membuat ikon menu dengan lebar, tinggi, jumlah bar dan warna. Ini menggunakan format berikut -

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

Ini menggunakan parameter berikut seperti yang ditentukan dalam tabel -

Sr.No.	Parameter & Deskripsi	Tipe	Nilai Default
1	$color Ini menentukan warna untuk ikon.	Warna	Tidak ada
2	$color-hover Ini menentukan warna saat Anda mengarahkan kursor ke ikon.	Warna	Tidak ada
3	$width Ini mendefinisikan lebar ikon.	Jumlah	Tidak ada
4	$height Ini menentukan ketinggian ikon.	Jumlah	Tidak ada
5	$weight Ini menentukan berat batang individu di ikon.	Jumlah	Tidak ada
6	$bars Ini menentukan jumlah bar di ikon.	Jumlah	Tidak ada

BACKGROUND-TRIANGLE

Ini digunakan untuk menentukan gambar latar belakang ke sebuah elemen. Ini menggunakan format berikut -

@include background-triangle($color);

Ini menggunakan parameter seperti yang ditentukan dalam tabel -

Sr.No.	Parameter & Deskripsi	Tipe	Nilai Default
1	$color Ini menentukan warna segitiga.	Warna	$ hitam

CLEARFIX

Mixin ini secara otomatis menghapus elemen turunan, sehingga tidak perlu markup tambahan. Ini menggunakan format berikut -

@include clearfix;

AUTO-WIDTH

Secara otomatis mengukur elemen berdasarkan jumlah elemen yang ada di wadah. Ini menggunakan format berikut -

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

Ini menggunakan parameter berikut seperti yang ditentukan dalam tabel -

Sr.No.	Parameter & Deskripsi	Tipe	Nilai Default
1	$max Ini mengidentifikasi jumlah maksimum item dalam wadah.	Jumlah	Tidak ada
2	$elem Ini menggunakan tag untuk penyeleksi saudara.	Kata kunci	li

DISABLE-MOUSE-OUTLINE

Ini digunakan untuk menonaktifkan garis besar di sekitar elemen saat mengidentifikasi tindakan masukan mouse. Ini menggunakan format berikut -

@include disable-mouse-outline;

ELEMENT-INVISIBLE

Ini digunakan untuk menyembunyikan elemen dan dapat tersedia untuk keyboard dan perangkat lain. Ini menggunakan format berikut -

@include element-invisible;

ELEMENT-INVISIBLE-OFF

Ini digunakan untuk menghapus elemen yang tidak terlihat dan membalikkan output CSS dengan menggunakan mixin elemen-invisible () . Ini menggunakan format berikut -

@include element-invisible-off;

VERTICAL-CENTER

Ini digunakan untuk menempatkan elemen secara vertikal di tengah elemen induk non-statis dengan menggunakan format berikut -

@include vertical-center;

HORIZONTAL-CENTER

Ini digunakan untuk menempatkan elemen secara horizontal di tengah elemen induk non-statis dengan menggunakan format berikut -

@include horizontal-center;

ABSOLUTE-CENTER

Ini digunakan untuk menempatkan elemen yang benar-benar di tengah di dalam elemen induk non-statis dengan menggunakan format berikut -

@include absolute-center;

Foundation menyediakan pustaka Motion UI untuk membuat transisi dan animasi UI dan digunakan oleh komponen Foundation seperti Toggler , Reveal , dan Orbit .

Menginstal Motion UI

Anda dapat menginstal pustaka Motion UI di proyek Anda dengan menggunakan npm atau bower seperti yang ditunjukkan pada baris kode berikut -

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

Anda dapat menambahkan jalur untuk pustaka Motion UI di Kompas dengan menggunakan config.rb seperti yang ditunjukkan pada baris kode berikut -

add_import_path 'node_modules/motion-ui/src'

Anda dapat menyertakan jalur di gulp-sass menggunakan baris kode berikut -

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

Impor pustaka Motion UI di file SASS menggunakan kode berikut -

@import 'motion-ui'

Transisi Bawaan

Foundation memberikan efek transisi dengan menggunakan kelas transisi yang dibuat oleh perpustakaan Motion UI. Mari kita buat satu contoh sederhana menggunakan efek transisi.

Transisi Kustom

Anda dapat menyetel kelas transisi kustom menggunakan pustaka Motion UI. Misalnya, kami akan menetapkan kelas khusus untuk transisi mui-hinge () , yang memutar elemen -

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

Animasi

Anda dapat menggunakan efek transisi Motion UI untuk membuat animasi CSS. Klik tautan ini untuk memeriksa bagaimana animasi bekerja pada modal menggunakan kelas data-animasi .