Temel - Hızlı Kılavuz

Vakıf nedir?

Foundation, güzel duyarlı web siteleri tasarlamak için gelişmiş ön uç çerçevelerden biridir. Her tür cihazda çalışır ve size HTML, CSS ve JavaScript eklentileri sağlar.

Vakıf, 2008 yılında ZURB tarafından inşa edilen bir iç stil rehberi olarak başladı. ZURB, Campbell, California'da bulunan bir ürün tasarım şirketidir. Foundation 2.0'ı Ekim 2011'de açık kaynak olarak yayınladı. Foundation'ın son sürümü 6.1.1, Aralık 2015'te yayınlandı.

Neden Foundation Kullanılır?

Varsayılan derleyiciden çok daha hızlı çalışan Sass derleyicisini kullanarak daha hızlı geliştirme sağlar.
Web sitenizi fiyat tabloları, anahtarlar, joyride, menzil kaydırıcıları, lightbox ve daha fazlasıyla zenginleştirir.
Daha hızlı kodlama ve kontrol için Grunt ve Libsass gibi geliştirme paketi ile birlikte gelir.
Site temeli, hızlı bir şekilde web siteleri oluşturmanız için size HTML, CSS ve JS sağlar.
E-posta çerçevesi, herhangi bir cihazda okunabilen duyarlı HTML e-postaları sağlar.
Foundation for Apps, tamamen duyarlı web uygulamaları oluşturmanıza olanak tanır.

Özellikleri

Güçlü ızgara sistemine ve bazı kullanışlı UI bileşenlerine ve harika JavaScript eklentilerine sahiptir.
Her tür cihaza hizmet veren duyarlı tasarım sağlar.
Mobil cihazlar için optimize edilmiştir ve mobil ilk yaklaşımı gerçekten destekler.
Özelleştirilebilir ve genişletilebilir HTML şablonları sağlar.

Avantajlar

Temel HTML ve CSS anlayışına sahip olduktan sonra öğrenmesi kolaydır.
Foundation'ı açık kaynak olduğu için özgürce kullanabilirsiniz.
Size, web sitesini hemen geliştirmeye başlamanıza yardımcı olan bir dizi şablon sağlar.
Foundation, geliştirmeyi daha hızlı hale getiren SASS ve Compass gibi ön işlemcileri destekler.

Dezavantajları

Twitter Bootstrap'in popülaritesi nedeniyle, Twitter Bootstrap için topluluk desteği Foundation'dan daha iyidir.
Yeni başlayanların önişlemci desteğini öğrenmesi ve bunlardan yararlanması biraz zaman alabilir.
Sorunları düzeltmek için QA siteleri ve forumlar gibi daha geniş destek eksikliği.
Vakıf, diğerlerine kıyasla daha az temaya sahiptir.

Bu bölümde, web sitesinde Foundation'ı nasıl kurup kullanacağımızı tartışacağız.

Vakfı indirin

Foundation.zurb.com bağlantısını açtığınızda, aşağıda gösterildiği gibi bir ekran göreceksiniz -

Tıkla Download Foundation 6 düğmesi, başka bir sayfaya yönlendirileceksiniz.

Burada dört düğme görebilirsiniz -

Download Everything - Çerçevedeki her şeye sahip olmak istiyorsanız, örneğin vanilya CSS ve JS'ye sahip olmak istiyorsanız, Foundation'ın bu sürümünü indirebilirsiniz.
Download Essentials - Izgara, düğmeler, tipografi vb. İçeren basit sürümü indirecektir.
Custom Download - Bu, Foundation için özel kitaplığı indirir, öğeleri içerir ve sütunların boyutunu, yazı tipi boyutunu, rengini vb. Tanımlar.
Install via SCSS - Bu sizi siteler için Foundation'ı kurmanız için dokümantasyon sayfasına yönlendirecektir.

Tıklayabilirsiniz Download EverythingFramework'teki her şeyi, yani CSS ve JS'yi almak için düğmesine basın. Dosyalar çerçevedeki her şeyi içerdiğinden, her seferinde bireysel işlevler için ayrı dosyalar eklemenize gerek kalmaz. Bu öğreticiyi yazarken, en son sürüm (Foundation 6) indirildi.

Dosya Yapısı

Foundation indirildikten sonra, ZIP dosyasını çıkartın ve aşağıdaki dosya / dizin yapısını göreceksiniz -

Gördüğünüz gibi, derlenmiş CSS ve JS (temel. *) Yanı sıra derlenmiş ve küçültülmüş CSS ve JS (temel.min. *) Var.

Bu eğitim boyunca kütüphanenin CDN versiyonlarını kullanıyoruz.

HTML Şablonu

Foundation'ı kullanan temel bir HTML şablonu aşağıda gösterildiği gibidir -

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

Aşağıdaki bölümler yukarıdaki kodu ayrıntılı olarak açıklamaktadır.

HTML5 belge türü

Temel, HTML5 belge türünün kullanılmasını gerektiren belirli HTML öğelerinden ve CSS özelliklerinden oluşur. Bu nedenle, aşağıdaki HTML5 belge türü kodu, Foundation'ı kullanan tüm projelerinizin başına eklenmelidir.

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

Önce Mobil

Mobil cihazlara duyarlı olmaya yardımcı olur. Eklemeniz gerekirviewport meta tag Mobil cihazlarda düzgün oluşturma ve dokunarak yakınlaştırmayı sağlamak için <head> öğesine ekleyin.

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

width özelliği, aygıtın genişliğini kontrol eder. Cihaz genişliğine ayarlamak, çeşitli cihazlarda (cep telefonları, masaüstü bilgisayarlar, tabletler ...) doğru şekilde oluşturulmasını sağlar.
initial-scale = 1.0 , yüklendiğinde, web sayfanızın 1: 1 ölçekte görüntülenmesini ve kutudan herhangi bir yakınlaştırma uygulanmamasını sağlar.

Bileşenlerin ilklendirilmesi

JQuery betiği, modals ve dropdown gibi bileşenler için Foundation'da gereklidir.

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

Çıktı

Yukarıda verilen kodun nasıl çalıştığını görmek için aşağıdaki adımları gerçekleştirelim -

Yukarıda verilen html kodunu kaydedin firstexample.html dosya.
Bu HTML dosyasını bir tarayıcıda açın, aşağıda gösterildiği gibi bir çıktı görüntülenir.

Yeti Launch üzerinden kurulabilen bazı mevcut şablonlarla proje geliştirmeye başlayabilirsiniz veyaFoundation CLI. Sass, JavaScript, dosya kopyalama vb. İşlemleri için Gulp inşa sistemini kullanarak bu şablonları kullanarak yeni projeye başlayabilirsiniz .

Temel Şablon

Temel şablon, düz dizin yapısını içeren ve yalnızca SASS dosyalarını derleyen SASS şablonu gibi bir şeydir ve yalnızca SASS kullanırken bu basit şablona sahip olmak iyidir. Aşağıdaki komutu kullanarak Yeti Launch veya Foundation CLI kullanarak temel şablonu kullanabilirsiniz -

$ foundation new --framework sites --template basic

Bunu ayarlamak için önce npm kurulumunu , bower kurulumunu çalıştırın ve çalıştırmak için npm start komutunu kullanın. Şablon dosyalarını Github'dan da indirebilirsiniz .

ZURB Şablonu

CSS / SCSS, JavaScript, Gidon şablonu, biçimlendirme yapısı, görüntü sıkıştırmanın birleşimidir ve SASS işlemeyi kullanır. Aşağıdaki komutu kullanarak Yeti Launch veya Foundation CLI kullanarak ZURB şablonunu kullanabilirsiniz -

$ foundation new --framework sites --template zurb

Bu şablonu çalıştırmak için, temel şablonda belirtilen aynı adımları izleyin. Şablon dosyalarını Github'dan da indirebilirsiniz .

Varlık Kopyalama

Sen içeriği kopyalayabilirsiniz src / aktifler kullanılarak klasör Gulp hangi varlıklar proje klasör olacaktır. Burada önemli olan şey, içeriği kopyalamak için kendi süreçlerine sahip olacaklarından, SASS dosyaları, JavaScript dosyaları ve resimler bu varlık kopyalama işlemine girmeyeceklerdir.

Sayfa Derlemesi

Üç klasör altında , yani src / dizininin içinde bulunan sayfalar , düzenler ve bölümler altında HTML sayfaları oluşturabilirsiniz . Şablonlar, sayfalar, HTML parçalarını kullanarak sayfalar için düzenler oluşturan Panini düz dosya derleyicisini kullanabilirsiniz . Bu işlem, Gidon şablon dili kullanılarak yapılabilir .

SASS Derlemesi

Libsass kullanarak SASS'yi CSS'ye derleyebilirsiniz ve ana SASS dosyası src / assets / scss / app.scss altında saklanır ve ayrıca yeni oluşturulan SASS parçaları bu klasörün kendisi altında saklanır. CSS'nin çıktısı, iç içe stilde olan normal CSS gibi olacaktır. CSS'yi clean-css ile sıkıştırabilir ve kullanılmayan CSS'yi UnCSS kullanarak stil sayfasından kaldırabilirsiniz .

JavaScript Derlemesi

JavaScript dosyaları, Foundation ile birlikte src / assets / js klasöründe depolanacak ve tüm bağımlılıklar app.js dosyasına bağlanacaktır . Dosyalar aşağıdaki sırada belirtildiği gibi birbirine bağlanacaktır -

Vakıf Bağımlılıkları.
Dosyalar src / assets / js klasöründe saklanacaktır .
Dosyalar, app.js adlı tek bir dosyada toplanır .

Görüntü Sıkıştırma

Varsayılan olarak, tüm resimler dist klasörü altındaki assets / img klasöründe saklanacaktır . JPEG, PNG, SVG ve GIF dosyalarını destekleyen gulp-imagemin kullanarak prodüksiyon için oluştururken görüntüleri sıkıştırabilirsiniz .

BrowserSync

Senkronize tarayıcı testi olan bir BrowserSync sunucusu oluşturabilirsiniz.http://localhost:8000ve bu URL'yi kullanarak derlenen şablonları görebilir. Sunucunuz çalışırken, dosyayı kaydettiğinizde sayfa otomatik olarak yenilenir ve siz çalışırken sayfada yapılan değişiklikleri gerçek zamanlı olarak görebilirsiniz.

Açıklama

Web uygulamalarıyla sorunsuz çalışmak için Temel unsurları içerir. Aşağıdaki tablo bazı Temel bileşenlerini listeler -

Sr.No.	Bileşen Açıklaması
1	Akordeon Akordiyonlar, web sitelerinde büyük miktarda veriyi genişletmek ve daraltmak için kullanılan dikey sekmeler içerir.
2	Akordeon Menüsü Akordeon efektli daraltılabilir menüyü görüntüler.
3	Rozet Rozetler, önemli notlar ve mesajlar gibi bilgileri vurgulamak için kullanılan etiketlere benzer.
4	Galeta unu Gezinme hiyerarşisi içindeki bir sitenin geçerli konumunu belirtir.
5	Düğmeler Temel, farklı stillere sahip standart düğmeleri destekler.
6	Çağırmak Belirtme çizgisi, içeriği içine yerleştirmek için kullanılabilen bir öğedir.
7	Kapat Düğmesi Uyarı kutusunu kapatmak için kullanılır.
8	Ayrıntılı İnceleme Menüsü Ayrıntılı inceleme menüsü, iç içe geçmiş listeleri dikey inceleme menüsüne dönüştürür.
9	Aşağıya doğru açılan menü Açılır menü, bağlantıları bir liste biçiminde görüntülemek için kullanılır.
10	Açılır Bölme Açılır bölme, düğmeyi tıkladığınızda içeriği görüntüler.
11	Flex Video Web sayfalarında video nesneleri oluşturmak için kullanılır.
12	Float Sınıfları HTML öğelerine yardımcı sınıflar eklemek için kullanılır.
13	Formlar Kullanıcı girdisini toplamak için form düzeni oluşturmak için kullanılır.
14	Etiket Etiketler, bir giriş öğesi için bir etiket tanımlayan satır içi stillerdir.
15	Medya Nesnesi İçerik bloğunun soluna veya sağına yerleştirilebilen resimler, videolar, blog yorumları vb. Medya nesneleri eklemek için kullanılır.
16	Menü Web sitesinde farklı modlara erişim sağlar.
17	Sayfalandırma İçeriği bir dizi ilgili sayfaya ayıran bir gezinme türüdür.
18	kaydırıcı Bir tutamacı sürükleyerek değer aralığını belirtir.
19	Değiştirmek Açık ve kapalı durum arasında geçiş yapmak için kullanılır.
20	Tablo Verileri satır ve sütun biçiminde temsil eder.
21	Sekmeler Sayfadan ayrılmadan içeriği farklı bölmelerde görüntüleyen gezinme tabanlı bir sekmedir.
22	Küçük resim Görüntüleri küçük resim şeklinde şekillendirir.
23	Başlık çubuğu Kullanıcı tarafından kullanılan mevcut ekranı diğer menü öğeleriyle görüntülemek için kullanılır.
24	Araç ipucu Bağlantının üzerine fareyi getirdiğinizde bilgileri açıklayan küçük bir açılır kutudur.
25	Üst Çubuk Web sitesinde gezinme başlığı oluşturmak için kullanılır.
26	Yörünge Yörünge sınıfını kullanarak öğeleri kaydıran kolay ve güçlü bir kaydırıcıdır .

Bu bölümde Global Stiller hakkında çalışacağız . Global CSS of Foundation çerçevesi, stilin tarayıcılar arasında tutarlı olmasını sağlayan kullanışlı sıfırlamaları içerir.

Yazı Tipi Boyutlandırma

Tarayıcı stil sayfasının yazı tipi boyutu varsayılan olarak% 100'e ayarlanmıştır. Varsayılan yazı tipi boyutu 16 piksel olarak ayarlanmıştır. Yazı tipi boyutuna bağlı olarak ızgara boyutu hesaplanır. Farklı taban yazı tipi boyutu ve etkilenmemiş ızgara kesme noktaları, set sahip olmak $ rem-üs için $ küresel-font-size piksel olmalıdır değeri.

Renkler

Bağlantılar ve düğmeler gibi etkileşimli öğeler , SASS değişkeni $ birincil- renk'ten gelen varsayılan mavi tonunu kullanır . Bileşenler ayrıca ikincil, uyarı, başarı ve uyarı gibi renklere sahip olabilir . Daha fazla bilgi için burayı kontrol edin .

SASS Referansı

Değişkenler

Aşağıdaki tablo, _settings.scss projenizdeki bileşenlerin varsayılan stillerini özelleştirmek için kullanılan SASS değişkenlerini listeler .

Sr.No.	İsim & Açıklama	Tür	Varsayılan değer
1	$global-width Sitenin global genişliğini temsil eder. Izgaranın satır genişliğini belirlemek için kullanılır.	Numara	rem-calc (1200)
2	$global-font-size <html> ve <body> 'ye uygulanan yazı tipi boyutunu temsil eder . Varsayılan olarak% 100 ayarlanmıştır ve kullanıcının tarayıcı ayarları değeri devralınacaktır.	Numara	100%
3	$global-lineheight Her tür varsayılan satır yüksekliğini temsil eder. $ global-lineheight 24px iken $ global-font-size 16px olarak ayarlandı.	Numara	1.5
4	$primary-color Bağlantılar ve düğmeler gibi etkileşimli bileşenlere renk verir.	Renk	# 2199e8
5	$secondary-color .Secondary sınıfı destekleyen bileşenlerle birlikte kullanılır .	Renk	# 777
6	$success-color .Success sınıfıyla birlikte kullanıldığında olumlu durumu veya eylemi temsil eder .	Renk	# 3adb76
7	$warning-color .Warning sınıfıyla birlikte kullanıldığında bir uyarı durumunu veya eylemi temsil eder .	Renk	# ffae00
8	$alert-color .Alert sınıfıyla kullanıldığında olumsuz bir durumu veya eylemi temsil eder .	Renk	# ec5840
9	$light-gray Açık gri UI öğeleri için kullanılır.	Renk	# e6e6e6
10	$medium-gray Orta gri UI öğeleri için kullanılır.	Renk	#cacaca
11	$dark-gray Koyu gri UI öğeleri için kullanılır.	Renk	# 8a8a8a
12	$black Siyah UI öğeleri için kullanılır.	Renk	# 0a0a0a
13	$white Beyaz UI öğeleri için kullanılır.	Renk	#fefefe
14	$body-background Vücudun arka plan rengini temsil eder.	Renk	$ beyaz
15	$body-font-color Gövdenin metin rengini temsil eder.	Renk	$ siyah
16	$body-font-family Gövdenin yazı tiplerinin listesini temsil eder.	Liste	'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif
17	$body-antialiased Antialiased tür, CSS özellikleri -webkit-font-smoothing ve -moz-osx-font-smoothing kullanılarak bu öznitelik true olarak ayarlanarak etkinleştirilir .	Boole	doğru
18	$global-margin Bileşenler üzerindeki global marj değerini temsil eder.	Numara	1rem
19	$global-padding Bileşenler üzerindeki global dolgu değerini temsil eder.	Numara	1rem
20	$global-margin Bileşenler arasında kullanılan global marj değerini temsil eder.	Numara	1rem
21	$global-weight-normal Normal yazı için genel yazı tipi ağırlığını temsil eder.	Anahtar Kelime veya Numara	normal
22	$global-weight-bold Kalın yazı için genel yazı tipi ağırlığını temsil eder.	Anahtar Kelime veya Numara	cesur
23	$global-radius Bir sınır yarıçapına sahip tüm elemanların global değerini temsil eder.	Numara	0
24	$global-text-direction CSS'nin metin yönünü ltr veya rtl olarak ayarlar		ltr

SASS, kodu Foundation'da daha esnek ve özelleştirilebilir hale getirmeye yardımcı olur.

Uyumluluk

Temel için SASS tabanlı sürümü kurmak için Ruby'nin Windows'a yüklenmesi gerekir. Temel, Ruby SASS ve libsass ile derlenebilir. Öneririznode-sass 3.4.2+ SASS derlemek için sürüm.

Autoprefixer Gerekli

Autoprefixer SASS dosyalarını işler. gulp-autoprefixer süreci oluşturmak için kullanılır. Aşağıdaki otomatik ön ayarlayıcı ayarı, uygun tarayıcı desteği almak için kullanılır.

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

Çerçeveyi Yükleme

Çerçeve dosyalarını NPM kullanarak kurabiliriz. Komut satırı arayüzünü (CLI) kullanarak Sass dosyalarını derleyebiliriz. Çerçeveyi yükleme komutu aşağıdadır -

npm install foundation-sites --save

Yukarıdaki komut satırı kodunu çalıştırdıktan sonra, aşağıdaki satırları alacaksınız -

Manuel Derleme

Çerçeve dosyaları, oluşturma sürecinize bağlı olarak bir içe aktarma yolu olarak eklenebilir, ancak yol, aynı packages_folder / Foundation-sites / scss olacaktır . @İmport deyimi üstündeki dahildir vakıf-sites.scss dosyası. Verilen koddaki bir sonraki satır,Adjusting CSS Output Bölüm.

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

Derlenmiş CSS'yi Kullanma

Önceden derlenmiş CSS dosyalarını dahil edebilirsiniz. İki tür CSS dosyası vardır, yani küçültülmüş ve küçültülmemiş. Küçültülmüş sürüm, üretim için kullanılır ve küçültülmemiş sürüm, çerçeve CSS'sini doğrudan düzenlemek için kullanılır.

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

CSS Çıktısını Ayarlama

Çeşitli bileşenler için Temel çıktısı birçok sınıftan oluşur. Çerçevenin CSS çıktısını kontrol etmek için kullanılır. Tüm bileşenleri bir kerede dahil etmek için aşağıdaki tek satırlık kodu ekleyin.

@include foundation-everything;

Yukarıdaki kodu scss dosyanıza yazdığınızda içe aktarılan bileşenlerin listesi aşağıdadır. Gerekli olmayan bileşenler yorumlanabilir. Aşağıdaki kod satırlarını Your_folder_name / node_modules / vakıf-sites / scss / vakıf.scss dosyasında görüntüleyebilirsiniz.

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

Ayarlar Dosyası

Tüm temel projesine bir ayarlar dosyası, yani _settings.scss dahildir . Bir Foundation for Sites projesi oluşturmak için Yeti Launch veya CLI kullanıyorsanız, ayarlar dosyasını src / assets / scss / altında bulabilirsiniz.

Foundation'ı npm kullanarak kurduk, bu nedenle, klasör_adı / node_modules / temel-siteler / scss / settings / _settings.scss altında bulunan ayarlar dosyasını bulabilirsiniz . Bunu çalışmak için kendi Sass dosyalarınıza taşıyabilirsiniz.

Değişkenlerle özelleştiremiyorsanız, kendi CSS'nizi yazabilirsiniz. Aşağıda, düğmelerin varsayılan stilini değiştiren bir dizi değişken verilmiştir.

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

Bu bölümde JavaScript hakkında çalışacağız . Foundation'da JavaScript kurulumu kolaydır; tek ihtiyacınız olan şey jQuery.

JavaScript Kurulumu

Foundation JavaScript dosyasını almak için ZIP indirmeyi, paket yöneticisini veya CDN'yi kullanabilirsiniz. Kodunuzda jQuery ve Foundation'a <script> etiketleri olarak bağlantılar sağlayabilir, <body> kapanışından önce yerleştirilebilir ve Foundation'ın jQuery'den sonra yüklendiğini kontrol edebilirsiniz. Daha fazla bilgi için buraya tıklayın .

Dosya Yapısı

Eğer komut satırı üzerinden Vakfı yüklediğinizde, Vakıf gibi ayrı ayrı dosyalar olarak indirmeleri eklentileri foundation.tabs.js , foundation.dropdownMenu.js , foundation.slider.js vb vb. Tüm bu dosyalar birleştirilir foundation.js bir anda tüm eklentileri sağlayan,. Bir eklenti kullanmak isterseniz, ilk önce Foundation.core.js yüklenmelidir.

Örneğin -

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

Bazı eklentiler, Foundation kurulumuyla birlikte gelen belirli yardımcı program kitaplıkları gerektirebilir. Bir sonraki bölümde JavaScript Yardımcı Programları'nda belirli eklenti gereksinimleri hakkında ayrıntılı olarak çalışabilirsiniz .

Tek tek dosyaların yüklenmesi, özellikle mobil kullanıcılar için ağ ek yükü oluşturur. Daha hızlı sayfa yükleme için grunt veya yutkunma kullanılması önerilir.

Başlatılıyor

Temel () işlevi, aynı anda eklentisi tüm Foundation başlatmak için kullanılır.

Örneğin -

(document).foundation();

Eklentileri Kullanma

Veri özniteliklerini kullanan eklentiler, eklentilerin adıyla eşleştikleri için HTML öğelerine bağlanır. Tek bir HTML öğesi aynı anda yalnızca bir eklentiye sahip olabilir, ancak eklentilerin çoğu diğerlerinin içine yerleştirilebilir. Örneğin, araç ipucu bağlantısı veri araç ipucu eklenerek oluşturulur . Daha fazla bilgi için buraya tıklayın .

Eklentileri Yapılandırma

Eklentiler, yapılandırma ayarları kullanılarak özelleştirilebilir. Örneğin, akordeon slaytlarının hızını yukarı ve aşağı ayarlayabilirsiniz . Eklenti ayarları, eklenti kullanılarak küresel olarak değiştirilebilir.DEFAULTSEmlak. Daha fazla bilgi için buraya tıklayın .

Sayfa Yüklendikten Sonra Eklenti Ekleme

DOM'a yeni HTML eklendiğinde, bu öğelerdeki herhangi bir eklenti varsayılan olarak başlatılmayacaktır. .Foundation () işlevini yeniden çağırarak yeni eklentileri kontrol edebilirsiniz .

Örneğin -

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

Programlı Kullanım

JavaScript'te, eklentiler programlı olarak oluşturulabilir ve her eklenti, bir öğe ve bir nesne gibi iki parametre alan bir yapıcı ile global Foundation nesnesinin sınıfıdır.

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

Eklentilerin çoğu, JavaScript aracılığıyla değiştirmenize izin veren genel API ile sağlanır. Mevcut işlevleri incelemek için eklentinin belgelerine bakabilirsiniz ve yöntemler kolayca çağrılabilir.

Örneğin -

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

Herhangi bir jQuery seçiciyi seçmenize izin verilir ve eğer seçici birden fazla eklentiye sahipse, hepsinin çağrılan aynı seçilmiş yöntemi olacaktır.
Bağımsız değişkenler, JavaScript'e argümanlar iletmek gibi iletilebilir.
Alt çizgi (_) öneki olan yöntemler , dahili API'nin bir parçası olarak kabul edilir, yani herhangi bir uyarı olmaksızın bozulabilir, değişebilir ve hatta kaybolabilir.

Etkinlikler

Belirli bir işlev bittiğinde, DOM bir olayı tetikler. Örneğin, sekmeler her değiştirildiğinde, dinlenebilir ve ona bir dönüş yanıtı oluşturabilir. Her eklenti, eklentinin belgelerinde belgelenecek olayların listesini tetikleyebilir. Foundation 6'da geri arama eklentileri kaldırılır ve olay dinleyicileri olarak alınmaları gerekir.

Örneğin -

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

Temel, ortak işlevler eklemek için kullanılan JavaScript yardımcı programlarını içerir. Çok yararlı ve kullanımı kolaydır. Bu JavaScript yardımcı programları kitaplığı, Klasör_adı / düğüm_modülleri / temel-siteler / js klasöründe bulunabilir.

Kutu

Foundation.Box kitaplığı birkaç yöntemden oluşur.
js/foundation.util.box.js kod yazılırken eklenebilecek komut dosyası dosya adıdır.
JQuery nesneleri veya düz JavaScript öğeleri her iki yönteme de aktarılabilir.

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

Döndürülen nesne, elemanın boyutunu şu şekilde belirtir -

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

İşlev ImNotTouchingYou dahildir.
İletilen öğeye bağlı olarak, pencerenin kenarıyla çakışan veya isteğe bağlı veya bir ana öğe olan bir Boole değeri döndürülür.
Aşağıda verilen satırda belirtilen iki seçenek, yani leftAndRightOnly, topAndBottomOnly yalnızca bir eksendeki çarpışmayı tanımlamak için kullanılır.

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

Tuş takımı

Foundation.Keyboard'da klavye olayı etkileşimini kolaylaştırmaya yardımcı olan birçok yöntem vardır .
js/foundation.util.keyboard.js kod yazılırken eklenebilecek komut dosyası dosya adıdır.
Foundation.Keyboard.keys nesnesi , çerçevede daha sık kullanılan anahtarların anahtar / değer çiftlerinden oluşur.
Tuşa her basıldığında , bir dize almak için Foundation.Keyboard.parseKey çağrılır. Bu, kendi klavye girişlerinizi yönetmenize yardımcı olur.

Aşağıdaki kod, verilen $ öğesi içindeki tüm odaklanılabilir öğeleri bulmak için kullanılır . Bu nedenle sizin tarafınızdan herhangi bir fonksiyon ve seçici yazmanıza gerek yoktur.

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

HandleKey fonksiyonu bu kütüphanenin bir ana fonksiyonudur.
Bu yöntem klavye olayını işlemek için kullanılır; yardımcı programa herhangi bir eklenti kaydedildiğinde çağrılabilir.

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

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

Foundation.Keyboard.register kendi tuş bağları kullanmak istediğinizde fonksiyon çağrılabilir.

MediaQuery

MediaQuery kitaplığı, tüm duyarlı CSS tekniğinin bel kemiğidir.
js/foundation.util.mediaQuery.js kod yazılırken eklenebilecek komut dosyası dosya adıdır.
Foundation.MediaQuery.atLeast ( 'büyük') ekran geniş bir kesme gibi en az olup olmadığını kontrol etmek için kullanılır.
Foundation.MediaQuery.get ( 'orta') bir kesme ortam sorgu alır.
Foundation.MediaQuery.queries ortam sorgu dizisi, Hazırlık kesme noktaları için kullandığı vardır.
Foundation.MediaQuery.current akım kesme noktası boyutta bir dizidir.

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

Aşağıdaki kod, pencerede ortam sorgusu değişikliğini yayınlar.

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

Hareket ve Hareket

Foundation.Motion javascript, Foundation 6'da bulunan Motion UI kitaplığına benzer. Özel CSS geçişleri ve animasyonları oluşturmak için kullanılır.
js/foundation.util.motion.js kod yazılırken eklenebilecek komut dosyası dosya adıdır.
Foundation.Move , CSS3 destekli animasyonu basit ve zarif hale getirmek için kullanılır.
requestAnimationFrame();yöntem, tarayıcıya bir animasyon gerçekleştirmesini söyler; tarayıcı bir sonraki yeniden boyamayı gerçekleştirmeden önce animasyon işlevinizin çağrılmasını ister.

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

Animasyon tamamlandığında, finish.zf.animate ateşlenir.

Zamanlayıcı ve Yüklenen Resimler

Orbit, hem işlev zamanlayıcısını hem de yüklenen görüntüyü kullanır. js/foundation.util.timerAndImageLoader.js kod yazılırken eklenebilecek komut dosyası dosya adıdır.

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

Görüntü yüklü yöntem, görüntüler tamamen yüklendiğinde jQuery koleksiyonunuzda bir geri arama işlevi çalıştırır.

Foundation.onImagesLoaded($images, callback);

Dokunma

Yöntemler sözde sürükleme olayları eklemek ve öğelere kaydırmak için kullanılır.
js/foundation.util.touch.js kod yazılırken eklenebilecek komut dosyası dosya adıdır.
AddTouch yöntemi mobil cihazlar için Slider eklentisi olayları dokunmak bağlama elemanları için kullanılır.
SpotSwipe Usul, mobil cihazlar için Orbit eklentisi kaydırma olayları için elemanları bağlanır.

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

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

Tetikleyiciler

Seçilen elemanlar için belirtilen olayı tetikler.
js/foundation.util.triggers.js kod yazılırken eklenebilecek komut dosyası dosya adıdır.
Tetikleyiciler birçok Foundation eklentisinde kullanılmaktadır.

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

Bu kitaplıkta aşağıdaki iki yöntem kullanılır, yani yeniden boyutlandırma ve kaydırma.

Boyutlandırma () bir yeniden boyutlandırma olay gerçekleştiğinde bir yöntem boyutlandırma olayını tetikler.
Kaydırma () bir kaydırma olay gerçekleştiğinde bir yöntem kaydırma olayı tetikler.

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

Çeşitli

Temel, birçok yerde kullanılan çekirdek kitaplığında birkaç özellik içerir.
js/foundation.core.js kod yazılırken eklenebilecek komut dosyası dosya adıdır.
Foundation.GetYoDigits ([sayı, ad alanı]), ad alanlı rastgele bir 36 tabanlı kullanıcı kimliği döndürür. Varsayılan olarak 6 karakter uzunluğunda dize uzunluğunu döndürür.
Foundation.getFnName (fn) , bir JavaScript işlev adı döndürür.
Foundation.transitionend , CSS geçişi tamamlandığında gerçekleşir.

Ortam sorguları, genişlik, yükseklik, renk gibi ortam özelliklerini içeren ve içeriği belirtilen ekran çözünürlüğüne göre görüntüleyen CSS3 modülüdür.

Foundation, arıza aralıkları oluşturmak için aşağıdaki medya sorgularını kullanır -

Small - Herhangi bir ekran için kullanılır.
Medium - 640 piksel ve daha geniş ekranlar için kullanılır.
Large - 1024 piksel ve daha geniş ekranlar için kullanılır.

Kesme noktası sınıflarını kullanarak ekran boyutunu değiştirebilirsiniz . Örneğin , aşağıdaki kod parçacığında gösterildiği gibi , küçük boyutlu ekranlar için .small-6 sınıfını ve orta boyutlu ekranlar için .medium-4 sınıfını kullanabilirsiniz -

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

Kesme Noktalarını Değiştirme

Uygulamanız Foundation'ın SASS sürümünü kullanıyorsa, kesme noktalarını değiştirebilirsiniz. Kesme noktası adını, aşağıda gösterildiği gibi ayarlar dosyasındaki $ kesme noktaları değişkeninin altına yerleştirebilirsiniz -

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

$ Breakpoint-classes değişkenini değiştirerek ayarlar dosyasındaki kesme noktası sınıflarını değiştirebilirsiniz . CSS'de .large sınıfını kullanmak istiyorsanız, aşağıda gösterildiği gibi listenin sonuna ekleyin -

$breakpoints-classes: (small medium large);

Diyelim ki, CSS'de .xlarge sınıfını kullanmak ve ardından bu sınıfı aşağıda gösterildiği gibi listenin sonuna eklemek istiyorsunuz -

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

SASS

Kesme Noktası Karması

@İnclude ile birlikte breakpoint () mixin kullanarak medya sorgularını yazabilirsiniz .
Aşağıdaki kod biçiminde gösterildiği gibi medya sorgusunun davranışını değiştirmek için kesme noktası değeriyle birlikte down veya only anahtar sözcüklerini kullanın -

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

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

Cihaz yönü veya piksel yoğunluğu için dikey , yatay ve retina olmak üzere üç medya sorgusu kullanabilirsiniz ve bunlar genişliğe dayalı medya sorguları değildir.

Kesme Noktası İşlevi

Sen işlevselliğini kullanabilirsiniz kesme noktası () iç işlevini kullanarak mixin.
Kesme noktası () işlevi kendi medya sorguları yazmak için doğrudan kullanılabilir -

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

JavaScript

Medya Sorgularıyla Çalışma

Foundation JavaScript, aşağıda belirtildiği gibi Foundation.MediaQuery nesnesindeki geçerli kesme noktası adına erişmek için MediaQuery.current işlevini sağlar -

Foundation.MediaQuery.current

MediaQuery.current fonksiyonu görüntüler küçük , orta , büyük akım kesme noktası adları gibi.
Aşağıda gösterildiği gibi MediaQuery.get işlevini kullanarak kesme noktası ortam sorgusunu alabilirsiniz -

Foundation.MediaQuery.get('small')

Sass Referansı

Değişkenler

Aşağıdaki tablo, bileşenin varsayılan stillerini özelleştirmek için kullanılabilecek SASS değişkenlerini listeler -

Sr.No.	İsim & Açıklama	Tür	Varsayılan değer
1	$breakpoints Breakpoint () mixin kullanarak ortam sorgularını yazmak için kullanılabilen bir kesme noktası adıdır .	Harita	küçük: 0px orta: 640 piksel büyük: 1024 piksel xlarge: 1200px xxlarge: 1440px
2	$breakpoint-classes $ Breakpoint-classes değişkenini değiştirerek CSS sınıfı çıktısını değiştirebilirsiniz .	Liste	küçük Orta Büyük

Mixins

Mixins, Foundation bileşenleri için CSS sınıf yapınızı oluşturmak üzere bir stil grubu oluşturur.

BREAKPOINT

Medya sorguları oluşturmak için breakpoint () mixin kullanır ve aşağıdaki etkinlikleri içerir -

Dizge aktarılırsa, mixin dizeyi $ kesme noktaları eşleminde arar ve medya sorgusunu oluşturur.
Piksel değeri kullanıyorsanız, $ rem-base kullanarak bunu em değerine dönüştürün .
Rem değeri geçilirse birimini em olarak değiştirir.
Em değerini kullanıyorsanız, olduğu gibi kullanılabilir.

Aşağıdaki tablo, kesme noktası tarafından kullanılan parametreyi belirtir -

Sr.No.	İsim & Açıklama	Tür	Varsayılan değer
1	$value Değerleri kesme noktası adı, px, rem veya em değerlerini kullanarak işler.	anahtar kelime veya numara	Yok

Fonksiyonlar

BREAKPOINT

Eşleşen giriş değerine sahip medya sorguları oluşturmak için breakpoint () mixin kullanır .

Aşağıdaki tablo, kesme noktası tarafından kullanılan olası giriş değerini belirtir -

Sr.No.	İsim & Açıklama	Tür	Varsayılan değer
1	$val Değerleri kesme noktası adı, px, rem veya em değerlerini kullanarak işler.	anahtar kelime veya numara	küçük

JavaScript Referansı

Fonksiyonlar

İki tür işlev vardır -

.atLeast- Ekranı kontrol eder. En azından bir kesme noktası olarak geniş olmalıdır.
.get - Kesme noktasının medya sorgusunu almak için kullanılır.

Aşağıdaki tablo, yukarıdaki işlevler tarafından kullanılan parametreyi belirtir -

Sr.No.	İsim & Açıklama	Tür
1	size Sırasıyla belirtilen işlevler için kesme noktasının adını kontrol eder ve alır.	Dize

Açıklama

Temel ızgara sistemi, sayfa boyunca 12 sütuna kadar ölçeklendirir. Izgara sistemleri, içeriğinizi barındıran bir dizi satır ve sütun aracılığıyla sayfa düzenleri oluşturmak için kullanılır.

Izgara Seçenekleri

Aşağıdaki tablo, Foundation grid sisteminin birden çok cihazda nasıl çalıştığını kısaca anlatmaktadır.

	Küçük cihazlar Telefonlar (<640px)	Orta ölçekli cihazlar Tabletler (> = 640 piksel)	Büyük cihazlar Dizüstü Bilgisayarlar ve Masaüstü Bilgisayarlar (> = 1200px)
Izgara davranışı	Her zaman yatay	Başlamak için daraltıldı, kesme noktalarının üzerinde yatay	Başlamak için daraltıldı, kesme noktalarının üzerinde yatay
Sınıf öneki	.küçük-*	.orta-*	.büyük-*
Sütun sayısı	12	12	12
Nestable	Evet	Evet	Evet
Ofsetler	Evet	Evet	Evet
Sütun sıralaması	Evet	Evet	Evet

Bir Temel Izgarasının Temel Yapısı

Aşağıdaki, bir Temel ızgarasının temel yapısıdır -

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

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

İlk olarak, yatay sütun grupları oluşturmak için bir satır sınıfı oluşturun.
İçerik sütunların içine yerleştirilmelidir ve yalnızca sütunlar, satırların hemen alt öğeleri olabilir.
Izgara sütunları, yaymak istediğiniz on iki kullanılabilir sütunun sayısı belirlenerek oluşturulur. Örneğin, dört eşit sütun için .large-3 kullanırız

Aşağıdakiler, Temel ızgara sisteminde kullanılan üç sınıftır -

Sr.No.	Temel Grid sınıfları ve Açıklama
1	Büyük Orta serili * sınıfları büyük cihazlar için kullanılır.
2	Orta Orta * sınıf ortamı cihazlar için kullanılır.
3	Küçük small- * sınıfı küçük cihazlar için kullanılır.

Gelişmiş Izgara

Aşağıdakiler, Foundation'da kullanılan gelişmiş ızgara biçimleridir.

Sr.No.	Gelişmiş Izgaralar ve Açıklama
1	Birleşik Sütun / Satır Kolon ve sıra sınıfları, bir kap olarak kullanmak için tam genişlik sütun elde etmek için aynı eleman kullanılmaktadır.
2	Yuvalama Izgara sütunlarını başka sütunların içine yerleştirebiliriz.
3	Ofsetler Kullanılması büyük offset- * veya küçük offset- * sınıfını, sağa sütunları taşıyabilirsiniz.
4	Eksik Satırlar Temel, satırlar 12'ye kadar sütun içermediğinde son öğeyi otomatik olarak sağa kayar.
5	Satırları Daralt / Ayrıştır Ortam sorgusu boyutunu kullanarak, dolguları göstermek için daraltma ve ayrıştırma sınıfları satır öğesine dahil edilir.
6	Ortalanmış Sütunlar Sınıfı küçük merkezli sütuna dahil ederek , sütunu merkezde yapabilirsiniz.
7	Kaynak Sıralama Kaynak sıralama sınıfı, sütunları kesme noktası arasında kaydırmak için kullanılır.
8	Blok Izgaraları İçeriği bölmek için blok ızgara kullanılır.

Anlamsal Olarak Oluşturma

SASS karışımları kümesini kullanarak, kendi anlamsal ızgaranızı oluşturmak için kullanılan bir ızgara CSS oluşturulur. Daha fazla bilgi için buraya tıklayın

SASS Referansı

Aşağıdakiler, Foundation'da kullanılan grid için SASS referansıdır.

Sr.No.	Temel Izgaralar ve Açıklama
1	Değişkenler Sass değişkenlerini kullanarak bu bileşenin varsayılan stillerini değiştirebiliriz.
2	Mixins Son CSS çıktısı, mixin kullanılarak oluşturulur.

Izgara, esnek görüntü özelliğine bağlıdır . Otomatik istifleme, kaynak sıralama, dikey hizalama ve yatay hizalama gibi flexbox ile kullanılabilen bir dizi özellikten oluşur.

Tarayıcı Desteği

Esnek ızgara; Chrome, Firefox, Internet Explorer 10+, Safari 6+, Android 4+ ve iOS 7+ sürümlerinde desteklenmektedir.

Aşağıdaki tablo, açıklama ile birlikte Flex Grid'in özelliklerini açıklamaktadır.

Sr.No.	Özellikler ve Açıklama
1	İçe aktarılıyor Varsayılan CSS'yi kullanmak için esnek ızgaranın dışa aktarma karışımını içerir.
2	Temel bilgiler Flex ızgara yapısı, kayan ızgaraya benzer.
3	Gelişmiş Boyutlandırma Boyutlandırma sınıfı sütuna dahil edilmemişse, kendini genişletir ve sütunda kalan alanı doldurur.
4	Duyarlı Ayarlamalar Esnek ızgarada açık sütun boyutu belirtilmezse, sütunları otomatik olarak boyutlandıracaktır.
5	Sütun Hizalama Esnek ızgara sütunları, ana satırda yatay veya dikey eksenlerle hizalanabilir.
6	Kaynak Sıralama Kaynak sıralaması, sütunun farklı ekran boyutlarında yeniden düzenlenmesine yardımcı olur.
7	Sass Referansı SASS (Syntactically Awesome Stylesheet), CSS ile tekrarlamayı azaltmaya yardımcı olan ve zaman kazandıran bir CSS ön işlemcisidir.

Bu bölümde, aşağıdakiler hakkında çalışacağız Forms. Foundation, form stillerini ve ızgara desteğini birleştiren Formlar için güçlü, kolay ve çok yönlü bir düzen sistemi sağlar .

Aşağıdaki tablo, Foundation'da kullanılan form öğelerini listeler.

Sr.No.	Form öğesi ve Açıklama
1	Form Temelleri Standartlaştırılmış form öğeleri ve güçlü ızgara sisteminin bir kombinasyonu ile oluşturulan formların oluşturulması kolay ve çok esnektir.
2	Yardım Metni Kullanıcıyı öğenin amacı hakkında bilgilendirmek için kullanılır ve genellikle bir alanın altına yerleştirilir.
3	Etiket Konumlandırma Etiketlerinizi girişlerinizin soluna veya sağına yerleştirebilirsiniz.
4	Satır İçi Etiketler ve Düğmeler Bir giriş alanının soluna / sağına fazladan metin veya kontroller eklenebilir.
5	Özel Kontroller Tarih seçiciler, anahtarlar veya kaydırıcılar gibi özel kontroller, ona erişmek için biraz dikkat gerektirir.
6	SASS Referansı SASS Referansı'nı kullanarak bileşenlerin stillerini değiştirebilirsiniz.

Açıklama

Foundation, aygıt yönüne (dikey ve yatay) veya ekran boyutuna (küçük, orta, büyük veya geniş ekran) göre öğeleri göstermek veya gizlemek için görünürlük sınıflarını kullanır.
Bir kullanıcının tarama ortamına göre öğeleri kullanmasına izin verir.

Aşağıdaki tablo, öğeleri göz atma ortamlarına göre kontrol eden Foundation'ın görünürlük sınıflarını listelemektedir -

Sr.No.	Görünürlük Sınıfı ve Tanımı
1	Ekran Boyutuna Göre Göster .Show sınıfını kullanarak aygıta dayalı öğeleri gösterir .
2	Ekran Boyutuna Göre Gizle .Hide sınıfını kullanarak cihazı temel alan öğeleri gizler .

Foundation, .hide ve .invisible sınıflarını kullanarak içeriği gizleyebileceğiniz bazı sınıfları destekler ve sayfada hiçbir şey göstermez.

Oryantasyon Algılama

Cihazlar, yatay ve dikey işlevlerini kullanarak farklı yönleri belirleyebilir . Cep telefonları gibi elde tutulan cihazlar, onları döndürdüğünüzde farklı yönleri belirtir. Masaüstü için yönlendirme her zaman yatay olacaktır.

Ulaşılabilirlik

Aşağıdaki tablo, içeriği ekran okuyucular tarafından okunabilir hale getirirken gizleyen ekran okuyucular için erişilebilirlik tekniklerini listeler -

Sr.No.	Erişilebilirlik Sınıfı ve Tanımı
1	Ekran Okuyucular için Göster Ekran okuyucularının okumasını engellerken içeriği gizlemek için show-for-sr sınıfını kullanır .
2	Ekran Okuyucular için Gizle Metni görünür kılan, ancak ekran okuyucu tarafından okunamayan aria-hidden özelliğini kullanır .
3	Atlama Bağlantıları Oluşturma Ekran okuyucu, sitenizin içeriğine gitmek için bir atlama bağlantısı oluşturacaktır.

Sass Referansı

Foundation, bileşenleriniz için kendi sınıf yapısını oluşturmanıza olanak tanıyan CSS çıktısını görüntülemek için aşağıdaki karışımları kullanır:

Sr.No.	Karıştır ve Açıklama	Parametre	Tür
1	show-for Varsayılan olarak, bir öğeyi gizler ve belirli ekran boyutunun üzerinde görüntüler.	$ beden	Anahtar kelime
2	show-for-only Varsayılan olarak, bir öğeyi gizler ve kesme noktası içinde görüntüler.	$ beden	Anahtar kelime
3	hide-for Varsayılan olarak, bir öğeyi gösterir ve belirli bir ekran boyutunun üzerinde gizler.	$ beden	Anahtar kelime
4	hide-for-only Varsayılan olarak, bir öğeyi gösterir ve belirli bir ekran boyutunun üzerinde gizler.	$ beden	Anahtar kelime

Tüm bu karışımların varsayılan değeri yok olarak ayarlanacaktır .

Açıklama

Temelde Tipografi, öğeler için çekici ve basit varsayılan stiller oluşturan başlıkları, paragrafları, listeleri ve diğer satır içi öğeleri tanımlar.

Aşağıdaki tablo, Foundation'da kullanılan farklı tipografi türlerini listelemektedir -

Sr.No.	Tipografi ve Açıklama
1	Paragraflar Paragraf, farklı yazı tipi boyutu, vurgulanan sözcükler, satır yüksekliği vb. İle tanımlanan bir grup cümledir.
2	Üstbilgi H1'den h6'ya kadar HTML başlıklarını tanımlar.
3	Bağlantılar Metne veya bir görüntüye tıkladığınızda başka bir belgeyi açan bir köprü oluşturur.
4	Bölücüler <hr> etiketi kullanılarak bölümler arasında ara vermek için kullanılır.
5	Sıralı ve Sırasız Listeler Vakıf, bir şeyleri listelemek için sıralı listeleri, sırasız listeleri destekler.
6	Tanım Listeleri Tanım Listeleri, ad değer çiftlerini görüntülemek için kullanılır.
7	Blok alıntılar Normalden çok daha büyük tanımlayan metin bloğunu temsil eder.
8	Kısaltmalar ve Kod Kısaltma, kısaltılmış bir kelime veya kelime öbeği terimini tanımlar ve kod, bir kod parçasını temsil eder.
9	Tuş vuruşları Belirli bir işlevi gerçekleştirmek için kullanılır.
10	Ulaşılabilirlik Foundation, sayfanın içeriğine erişmek için bazı yönergeler sağlar.

Sass Referansı

Tabloda listelendiği gibi aşağıdaki SASS değişkenlerini kullanarak bileşenlerin stillerini değiştirebilirsiniz.

Aşağıda, aşağıdaki SASS değişkenleri kullanılarak bileşenlerin stilleri verilmiştir.

Sr.No.	İsim & Açıklama	Tür	Varsayılan değer
1	$header-font-family Başlık öğeleri için yazı tipi ailesini belirtir.	Dize veya Liste	$ body-font-family
2	$header-font-weight Başlıkların yazı tipi ağırlığını belirtir.	Dize	$ global-ağırlık-normal
3	$header-font-style Başlıkların yazı tipi stilini sağlar.	Dize	normal
4	$font-family-monospace Kod örnekleri gibi tek aralıklı tür kullanan öğeler için kullanılan yazı tipi yığını.	Dize veya Liste	Consolas, 'Liberation Mono', Courier, monospace
5	$header-sizes Başlıkların ekran boyutlarını tanımlar ve her anahtar bir kesme noktasıdır ve her değer, başlık boyutlarının bir haritasıdır.	Harita	`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 Başlıkların rengini sağlar.	Renk	miras almak
7	$header-lineheight Başlıkların satır yüksekliğini tanımlar.	Numara	1.4
8	$header-margin-bottom Başlıkların alt kenar boşluğunu sağlar.	Numara	0.5rem
9	$header-text-rendering Metin oluşturma yöntemini tanımlar.	Dize	optimizeLegibility
10	$small-font-size <small> öğeler için yazı tipi boyutunu belirtir.	Numara	% 80
11	$paragraph-margin-bottom Paragrafların alt kenar boşluğunu belirtir.	Numara	1rem
12	$paragraph-text-rendering Metin oluşturma paragrafı yöntemleri.	Dize	optimizeLegibility
13	$code-color Kod örneklerine metin rengi sağlar.	Renk	$ siyah
14	$code-font-family Kod örneklerine yazı tipi ailesi sağlar.	Dize veya Liste	$ font-family-monospace
15	$code-border Kodun etrafındaki sınırı belirtir.	Liste	1 piksel düz $ orta gri
16	$code-padding Metnin etrafındaki dolguyu belirtir.	Numara veya Liste	rem-calc (2 5 1)
17	$anchor-color Bağlantılar için varsayılan renk.	Renk	$ birincil renk
18	$anchor-color-hover Fareyle üzerine gelindiğinde bağlantılar için varsayılan rengi belirtir.	Renk	ölçek rengi ($ çapa rengi, $ açıklık: -% 14)
19	$anchor-text-decoration Bağlantılar için varsayılan metin dekorasyonu.	Dize	Yok
20	$anchor-text-decoration-hover Fareyle üzerine gelindiğinde bağlantılar için varsayılan metin dekorasyonu.	Dize	Yok
21	$hr-width Bir bölücünün maksimum genişliğini tanımlar.	Numara	$ global-genişlik
22	$hr-border Bir bölücü için varsayılan kenarlığı belirtir.	Liste	1 piksel düz $ orta gri
23	$hr-margin Bir bölücü için varsayılan kenar boşluğu.	Numara veya Liste	rem-calc (20) otomatik
24	$list-lineheight Bir listedeki öğeler için satır yüksekliğini tanımlar.	Numara	$ paragraf-satır yüksekliği
25	$list-style-type Sırasız listeler için madde işareti türü sağlar.	Dize	disk
26	$list-style-position Sırasız listelerdeki madde işaretlerinin konumlandırılmasını tanımlar.	Dize	dışarıda
27	$list-side-margin Sol taraf (veya sağ) kenar boşluğunu tanımlar.	Numara	1.25rem
28	$defnlist-term-weight <dt> öğeleri için yazı tipi ağırlığı sağlar.	Dize	$ global-weight-bold
29	$defnlist-term-margin-bottom <dt> ve <dd> öğeleri arasında boşluk sağlar.	Numara	0.3rem
30	$blockquote-color <blockquote> öğelerinin metin rengini uygular.	Renk	$ koyu gri
31	$blockquote-padding Bir <blockquote> öğesinin içinde dolgu sağlar.	Numara veya Liste	rem-calc (9 20 0 19)
32	$blockquote-border <blockquote> öğeleri için yan kenarlık verir.	Liste	1 piksel düz $ orta gri
33	$cite-font-size <cite> öğeleri için yazı tipi boyutunu tanımlar.	Numara	rem-calc (13)
34	$cite-color `<cite>`Öğeler için metin rengi sağlar .	Renk	$ koyu gri
35	$keystroke-font <kbd> öğeleri için yazı tipi ailesini tanımlar.	Dize veya Liste	$ font-family-monospace
36	$keystroke-color <kbd> öğeleri için metin rengini tanımlar.	Renk	$ siyah
37	$keystroke-background <kbd> öğeleri için arka plan rengi sağlar.	Renk	$ açık gri
38	$keystroke-padding <kbd> öğeleri için dolguyu belirtir.	Numara veya Liste	rem-calc (2 4 0)
39	$keystroke-radius <kbd> öğeleri için kenarlık yarıçapını görüntüler.	Numara veya Liste	$ global-radius
40	$abbr-underline <abbr> öğeleri için alt kenarlık stilini sağlar.	Liste	1 piksel noktalı $ siyah

Bu bölümde, aşağıdakiler hakkında çalışacağız Typography Helpers. Tipografi yardımcıları, metninizi anlamsal olarak uygun şekillerde biçimlendirmek için kullanılır. Foundation'daki yardımcı sınıflar, bazı tipografik stilleri daha hızlı oluşturmanıza olanak tanır.

Aşağıdaki tablo , Foundation'da kullanılan Tipografi Yardımcılarını listelemektedir .

Sr.No.	Tipografi yardımcısı ve Açıklama
1	Metin hizalama Bu gibi öğenin metin hizalamasını değişen yardımcı olur sola , sağa , merkeze ve haklı .
2	Alt başlık Alt başlıklar, .subheader sınıfı kullanılarak herhangi bir başlık öğesine eklenebilir .
3	Kurşun Paragrafı Reklam veya diğer açıklayıcı metinler için kullanılabilen, normal metne kıyasla önemli ölçüde daha büyük bir metin bloğudur.
4	Madde İşaretsiz Liste Varsayılan olarak <ul> , Foundation'daki madde işaretli bir listedir. Madde işaretlerini çıkarmak için .no-bullet sınıfını kullanabilirsiniz.
5	İstatistik Gösterge panosuyla uğraşırken, bazı önemli sayıları vurgulamanız gerekir. Bunu .stat sınıfını kullanarak başarabilirsiniz .

Sass Referansı

Değişkenler

Aşağıdaki tablo, bileşenin varsayılan stillerinin özelleştirilmesini sağlayan projenin ayarlar dosyasındaki SASS değişkenlerini listeler.

Sr.No.	İsim & Açıklama	Tür	Varsayılan değer
1	$lead-font-size Varsayılan olarak ön paragraflar için yazı tipi boyutu.	Numara	$ global yazı tipi boyutu * 1,25
2	$lead-lineheight Varsayılan olarak ön paragraf için satır yüksekliği.	Dize	1.6
3	$subheader-lineheight Alt başlığın varsayılan satır yüksekliği.	Numara	1.4
4	$subheader-color Alt başlığın varsayılan yazı tipi rengi.	Renk	$ koyu gri
5	$subheader-font-weight Alt başlığın varsayılan yazı tipi ağırlığı.	Dize	$ global-ağırlık-normal
6	$subheader-margin-top Alt başlığın varsayılan üst kenar boşluğu.	Numara	0.2rem
7	$subheader-margin-bottom Alt başlığın varsayılan alt kenar boşluğu.	Numara	0.5rem
8	$stat-font-size Statik sayının varsayılan yazı tipi boyutu	Numara	2.5rem

Bu bölümde, aşağıdakiler hakkında çalışacağız basic controls. Temel, düğmeler , kaydırıcılar ve anahtarlar gibi temel kontroller sağlar .

Aşağıdaki tablo, Foundation'da kullanılan temel kontrolleri listelemektedir.

Sr.No.	Temel kontrol ve Açıklama
1	Buton Foundation, ihtiyaçlarınıza göre özelleştirilebilen birçok düğme stilini destekler.
2	Düğme Grubu Karşılık gelen eylem öğeleri için kaplardır. Bir çubukta eylem grubu görüntülendiğinde iyi çalışıyor.
3	Kapat Düğmesi Kapat düğmesi, bir şeyin üzerine tıklanarak gitmesini istediğinizde kullanılır.
4	kaydırıcı Kaydırıcılar, bir aralık içindeki belirli değerleri ayarlamak için çok kullanışlıdır.
5	Değiştirmek Üzerine tıklayarak anahtarı kapatmanıza veya açmanıza izin verir.

Açıklama

Foundation, gezinme öğelerini şekillendirmek için birkaç farklı seçenek sunar. Birçok basit gezinme düzeni paketlenmiştir; sağlam duyarlı navigasyon çözümü için forma entegre edilebilir.

Aşağıdaki tablo, açıklamayla birlikte farklı gezinme türlerini açıklamaktadır.

Sr.No.	Tip ve Açıklama
1	Navigasyona Genel Bakış Gezinme, diğer bölüme bağlantılar içerir ve birçok gezinme modelinden oluşur.
2	Menü Menü, birçok gezinme bileşeni oluşturmak için kullanılır.
3	Aşağıya doğru açılan menü Açılır menü eklentisi, ana menünün altında alt menüler oluşturmak için kullanılır.
4	Ayrıntılı İnceleme Menüsü Detaylandırma menüsü eklentisi, kaydırıcı biçiminde ana menüde alt menüler oluşturmak için kullanılır.
5	Akordeon Menüsü Akordeon efektli daraltılabilir menüyü görüntüler ve Akordeon Menüsü eklentisini kullanarak otomatik daraltma için destek sağlar.
6	Üst Çubuk Üst çubuk, karmaşık gezinme çubuğunun farklı ekran boyutlarında kolayca görüntülenmesine yardımcı olur.
7	Duyarlı Gezinme Responsive menü eklentisi, menüyü farklı ekran boyutlarında tahsis eder.
8	Macellan Magellan, sabit bir konumda olan bir navigasyon yaratır; kaydırma konumuna göre bir sayfadaki gezinme listesini otomatik olarak izler.
9	Sayfalandırma Sayfalandırma, sıralanmamış bir liste, diğer birçok arayüz öğesi gibi Bootstrap tarafından yönetilir.
10	Galeta unu Bir içerik haritası, gezinme hiyerarşisi içindeki bir sitenin geçerli konumunu belirtir.

Temel kaplar, site için her zaman tarayıcıların tam genişliğini oluşturmak ve site içeriğini sarmak için kullanılır.

Aşağıdaki tablo, Temelde kullanılan bazı kapları listelemektedir -

Sr.No.	Konteyner ve Açıklama
1	Akordeon Akordiyonlar, web sitelerinde büyük miktarda veriyi genişletmek ve daraltmak için kullanılan dikey sekmeler içerir.
2	Çağırmak İçeriği bileşenin içine yerleştirir.
3	Açılır bölmeler Düğmeye tıkladığınızda içeriği görüntüler.
4	Medya Nesnesi Bazı içeriklerle birlikte görüntüler, videolar, blog yorumları vb. Gibi medya nesneleri ekler.
5	Tuval dışı Gezinme menüsünü görünür alandan çıkarır ve ana içeriği görüntüler.
6	Reveal-Modal Temel, ortaya çıkarma sınıfını kullanarak kalıcı iletişim kutuları veya açılır pencereler oluşturmaya izin verir .
7	Tablolar Foundation, verileri tablo biçiminde görüntülemek için düzenler sağlar.
8	Sekmeler Sayfadan ayrılmadan içeriği farklı bölmelerde görüntüleyen gezinme tabanlı bir sekmedir.

Bu bölümde, Vakıf'taki medya hakkında çalışacağız . Temel, Flex Video , Etiket , yörünge , ilerleme çubuğu ve araç ipucu gibi çeşitli ortam türlerinden oluşur . Aşağıdaki tablo tüm ortam türlerini listeler.

Sr.No.	Medya Türü ve Açıklama
1	Flex Video Ekran boyutuna rağmen doğru en boy oranını korumak için videoları bir esnek video kabına yerleştirmek için kullanılır.
2	Etiket Belirli bir bölümü çağırmak veya meta verileri eklemek için gövdeye yerleştirilebilen satır içi stil için kullanılabilir.
3	Yörünge Bir kullanıcının dokunmatik ekranlı cihazlarda kaydırmasına izin veren güçlü ve duyarlı bir kaydırıcıdır.
4	İlerleme çubuğu İlerlemenizi görüntülemek için kullanılır ve düzenlerinize eklenebilir.
5	Araç ipuçları Bir sayfadaki bir terim veya eylem için ekstra bilgi görüntülemek için kullanılır.

Açıklama

Eklenti, başlangıçta Temel temel işlevi tarafından tamamlanmayan ek işlevsellik sağlayan bir yazılımdır. Temel Eklentiler, sitenin işlevselliğini genişletmek için yüklenebilir. İşinizi kolaylaştırmak için eklentiler kullanılır.

Aşağıdaki tablo, açıklamayla birlikte farklı Eklenti türlerini açıklamaktadır.

Sr.No.	Tip ve Açıklama
1	Uymak Abide, gerekli öznitelikleri ve kalıpları kullanarak yerel API ile HTML5 form doğrulama kitaplığında kullanılır.
2	Ekolayzer Ekolayzer, sayfanızda eşit yüksekliklere sahip birden çok içerik oluşturmanın bir yoludur.
3	Kavşak Duyarlı içeriği kullanıcının cihazına göre yüklemek için kullanılır.
4	Değiştirici Geçiş, bir ayardan diğerine geçmek için kullanılır.
5	Yapışkan Yapışkan eklenti, web sitesinde sabit bir içerik veya görüntü oluşturmak için kullanılır.

Foundation, kullanım , renk , seçici , birim , değer ve daha pek çok şeyle kullanılabilen bir dizi SASS yardımcı işlevi sağlar .

Aşağıdaki kod satırını kullanarak tüm yardımcı program dosyalarını bir seferde içe aktarabilirsiniz -

@import 'util/util';

Ayrıca aşağıda gösterildiği gibi tek tek yardımcı program dosyalarını içe aktarabilirsiniz -

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

Sass Referansı

Aşağıdaki SASS işlevlerini kullanarak bileşenlerin stillerini değiştirebilirsiniz.

ön plan

Arka plan rengine göre öğelere ön plan rengi sağlar. Farklı türde parametreleri atamak için aşağıdaki biçimi kullanır -

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

Yukarıdaki parametreler aşağıdaki tabloda belirtilmiştir -

Sr.No.	Parametre ve Açıklama	Tür	Varsayılan değer
1	$color Rengin açıklığını kontrol eder.	Renk	Yok
2	$yes Renk açıksa, $ evet rengini döndürür .	Renk	$ siyah
3	$no Renk koyuysa, $ renk yok döndürür .	Renk	$ beyaz
4	$threshold Hafifliğin eşiğini temsil eder.	Yüzde	% 60

akıllı ölçek

Hafifliğine göre elementlere uygun rengi sağlar. Uygun rengi belirlemek için aşağıdaki formatı kullanır -

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

Yukarıda verilen parametreler aşağıdaki tabloda belirtilmiştir -

Sr.No.	Parametre ve Açıklama	Tür	Varsayılan değer
1	$color Rengi ölçeklendirmek için kullanılır.	Renk	Yok
2	$scale Yukarı veya aşağı ölçeklenecek yüzdeyi belirtir.	Yüzde	% 5
3	$threshold Hafifliğin eşiğini temsil eder.	Yüzde	% 40

metin girişleri

Metin giriş türünü kullanırken bir seçici oluşturur. Giriş türlerini belirlemek için aşağıdaki formatı kullanır -

text-inputs($types)

Parametreyi aşağıdaki tabloda belirtildiği gibi kullanır -

Sr.No.	Parametre ve Açıklama	Tür	Varsayılan değer
1	$types Bir seçici oluşturmak için bir dizi metin girişi türü sağlar.	Renk	-

şerit birimi

Birimi değerden çıkarır ve yalnızca sayıyı döndürür. Birimi değerden çıkarmak için aşağıdaki biçimi kullanır -

strip-unit($num)

Parametreyi aşağıdaki tabloda belirtildiği gibi kullanır -

Sr.No.	Parametre ve Açıklama	Tür	Varsayılan değer
1	$num Birimi değerden çıkardığınızda numarayı belirtir.	Renk	Yok

rem-calc

Piksel değerini rem değerleriyle eşleşecek şekilde değiştirir. Piksel değerlerini rem değerlerine dönüştürmek için aşağıdaki formatı kullanır -

rem-calc($values, $base)

Tabloda belirtildiği gibi aşağıdaki parametreleri kullanır -

Sr.No.	Parametre ve Açıklama	Tür	Varsayılan değer
1	$values Piksel değerlerini rem değerlerine dönüştürür ve boşluk kullanarak ayırır. Virgülle ayrılmış listeyi dönüştürüyorsanız, listeyi parantez içinde kaydırın.	Numara veya Liste	Yok
2	$base Pikseli rem değerine dönüştürürken temel değeri sağlar. Taban için boş değer varsa, işlev temel olarak $ base-font-size değişkenini kullanır .	Numara	boş

değeri var

Yanlış değilse değeri belirtir. Yanlış değerler arasında null, none, 0 veya boş bir liste bulunur. Değeri belirtmek için aşağıdaki biçimi kullanır -

has-value($val)

Parametreyi aşağıdaki tabloda belirtildiği gibi kullanır -

Sr.No.	Parametre ve Açıklama	Tür	Varsayılan değer
1	$val Belirtilen değeri kontrol eder.	Karışık	Yok

yan yana

Bir değerin kenarını belirtir ve dolgu, kenar boşluğu vb. Üzerindeki üst / sağ / alt / sol değerleri tanımlar. Bir değerin kenarını belirtmek için aşağıdaki formatı kullanır -

has-value($val)

Tabloda belirtildiği gibi aşağıdaki parametreleri kullanır -

Sr.No.	Parametre ve Açıklama	Tür	Varsayılan değer
1	$val Bir değerin tarafını belirtir.	Liste veya Numara	Yok
2	$side (Üst / sağ / alt / sol) değerinin hangi tarafta dönmesi gerektiğini belirler.	Anahtar kelime	Yok

get-border-value

Bir elemanın sınır değerini belirler. Kenarlık değerini belirlemek için aşağıdaki formatı kullanır -

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

Tabloda belirtildiği gibi aşağıdaki parametreleri kullanır -

Sr.No.	Parametre ve Açıklama	Tür	Varsayılan değer
1	$val Sınırın belirli bir değerini bulur.	Liste	Yok
2	$elem Kenarlık bileşenini çıkarmak için kullanılır.	Anahtar kelime	Yok

İçe aktarılıyor

Scss / util / _mixins.scss dosyasının altına yerleştirilen SASS karışımlarının içeriğini içe aktarır . Aşağıdaki kod satırını kullanarak SASS karışımlarını içe aktarabilirsiniz -

@import 'util/mixins';

Sass Referansı

SASS işlevlerini kullanarak bileşenlerin stillerini değiştirebilirsiniz.

Mixins

Bileşenleriniz için CSS sınıf yapısını oluşturmak için aşağıdaki karışımları kullanabilirsiniz.

CSS-TRIANGLE

Açılır oklar, açılır tırtıllar ve daha fazlasını oluşturmak için kullanılır. Var olan bir elemana üçgen eklemek için <i> & :: before </i> veya <i> & :: after </i> seçicisini kullanır. Aşağıdaki biçimi kullanır -

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

Tabloda belirtildiği gibi aşağıdaki parametreleri kullanır -

Sr.No.	Parametre ve Açıklama	Tür	Varsayılan değer
1	$triangle-size Üçgenin genişliğini tanımlar.	Numara	Yok
2	$triangle-color Üçgenin rengini tanımlar.	Renk	Yok
3	$triangle-direction Yukarı, sağ, aşağı veya sol gibi üçgenin yönünü tanımlar.	Anahtar kelime	Yok

HAMBURGER

Genişlik, yükseklik, çubuk sayısı ve renkli menü ikonu oluşturmak için kullanılır. Aşağıdaki biçimi kullanır -

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

Tabloda belirtildiği gibi aşağıdaki parametreleri kullanır -

Sr.No.	Parametre ve Açıklama	Tür	Varsayılan değer
1	$color Simgenin rengini tanımlar.	Renk	Yok
2	$color-hover Simgenin üzerine geldiğinizde rengi tanımlar.	Renk	Yok
3	$width Simgenin genişliğini tanımlar.	Numara	Yok
4	$height Simgenin yüksekliğini tanımlar.	Numara	Yok
5	$weight Simgedeki tek tek çubukların ağırlığını tanımlar.	Numara	Yok
6	$bars Simgedeki çubuk sayısını tanımlar.	Numara	Yok

BACKGROUND-TRIANGLE

Bir elemanın arka plan görüntüsünü belirtmek için kullanılır. Aşağıdaki biçimi kullanır -

@include background-triangle($color);

Parametreyi tabloda belirtildiği gibi kullanır -

Sr.No.	Parametre ve Açıklama	Tür	Varsayılan değer
1	$color Üçgenin rengini tanımlar.	Renk	$ siyah

CLEARFIX

Bu karışım, alt öğeleri otomatik olarak temizler, böylece ek işaretlemeye gerek kalmaz. Aşağıdaki biçimi kullanır -

@include clearfix;

AUTO-WIDTH

Kapta bulunan öğelerin sayısına göre öğeleri otomatik olarak boyutlandırır. Aşağıdaki biçimi kullanır -

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

Tabloda belirtildiği gibi aşağıdaki parametreleri kullanır -

Sr.No.	Parametre ve Açıklama	Tür	Varsayılan değer
1	$max Kaptaki maksimum öğe sayısını tanımlar.	Numara	Yok
2	$elem Kardeş seçiciler için bir etiket kullanır.	Anahtar kelime	li

DISABLE-MOUSE-OUTLINE

Fare giriş eylemini tanımladığında öğenin etrafındaki dış çizgiyi devre dışı bırakmak için kullanılır. Aşağıdaki biçimi kullanır -

@include disable-mouse-outline;

ELEMENT-INVISIBLE

Öğeleri gizlemek için kullanılır ve klavyeler ve diğer cihazlar tarafından kullanılabilir. Aşağıdaki biçimi kullanır -

@include element-invisible;

ELEMENT-INVISIBLE-OFF

Görünmez öğeleri kaldırmak için kullanılır ve element-invisible () karışımını kullanarak CSS çıktısını tersine çevirir . Aşağıdaki biçimi kullanır -

@include element-invisible-off;

VERTICAL-CENTER

Aşağıdaki biçimi kullanarak öğeleri statik olmayan ana öğenin içine dikey olarak ortalanmış olarak yerleştirmek için kullanılır -

@include vertical-center;

HORIZONTAL-CENTER

Aşağıdaki biçimi kullanarak elemanları statik olmayan üst elemanın içine yatay olarak ortalanmış olarak yerleştirmek için kullanılır -

@include horizontal-center;

ABSOLUTE-CENTER

Aşağıdaki biçimi kullanarak elemanları statik olmayan ana elemanın içine kesinlikle ortalanmış olarak yerleştirmek için kullanılır -

@include absolute-center;

Foundation, UI geçişleri ve animasyonları oluşturmak için Motion UI kitaplığı sağlar ve Toggler , Reveal ve Orbit gibi Foundation bileşenleri tarafından kullanılır .

Motion UI Kurulumu

Aşağıdaki kod satırında gösterildiği gibi npm veya bower kullanarak projenize Motion UI kitaplığı kurabilirsiniz -

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

Aşağıdaki kod satırında gösterildiği gibi config.rb'yi kullanarak Compass'ta Motion UI kitaplığı için bir yol ekleyebilirsiniz -

add_import_path 'node_modules/motion-ui/src'

Yolu aşağıdaki kod satırlarını kullanarak gulp-sass'a dahil edebilirsiniz -

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

Aşağıdaki kodu kullanarak Motion UI kitaplığını SASS dosyasına içe aktarın -

@import 'motion-ui'

Yerleşik Geçişler

Foundation, Motion UI kitaplığı tarafından oluşturulan geçiş sınıflarını kullanarak geçiş efektleri sağlar. Geçiş efektlerini kullanarak basit bir örnek oluşturalım .

Özel Geçişler

Motion UI kitaplığını kullanarak özel geçiş sınıflarını ayarlayabilirsiniz. Örneğin , öğeyi döndüren mui-hinge () geçişi için özel sınıflar belirleyeceğiz -

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

Animasyon

CSS animasyonları oluşturmak için Motion UI geçiş efektlerini kullanabilirsiniz. Data-animasyon sınıfını kullanarak model üzerinde animasyonun nasıl çalıştığını kontrol etmek için bu bağlantıyı tıklayın .