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.

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 .